《html+css+javascript 標(biāo)準(zhǔn)實(shí)例教程(第二版)14》由會(huì)員分享,可在線閱讀,更多相關(guān)《html+css+javascript 標(biāo)準(zhǔn)實(shí)例教程(第二版)14(37頁(yè)珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、,HTML/CSS/JavaScript,標(biāo)準(zhǔn)教程實(shí)例版(第,2,版),第,章,14,本書編委會(huì) 編著,實(shí)例版,第,14,章,顏色和背景,14.1,設(shè)置顏色,color,14.2,設(shè)置背景顏色,background-color,14.3,插入背景圖片,background-image,14.4,插入背景附件,background-attachment,14.5,設(shè)置重復(fù)背景圖片,background-repeat,14.6,設(shè)置背景圖片位置,background-position,14.7,小實(shí)例,綜合設(shè)置顏色和背景,14.8,習(xí)題,HTML/CSS/JavaScript,標(biāo)準(zhǔn)教程實(shí)例版(第,
2、2,版),14.1,設(shè)置顏色,color,語(yǔ)法說(shuō)明,關(guān)鍵字:顏色關(guān)鍵字就是用顏色的英文名稱來(lái)設(shè)置顏色。例如:“,red,”代表紅色,“,black,”代表黑色等。,RGB,值:在,CSS,中,,RGB,值有多種表示方式,如十六進(jìn)制的,RGB,值和,RGB,函數(shù)值都行。,14.1,設(shè)置顏色,color,實(shí)例代碼,14.1,設(shè)置顏色,color,接上頁(yè),14.1,設(shè)置顏色,color,網(wǎng)頁(yè)效果,14.1,設(shè)置顏色,color,網(wǎng)頁(yè)效果,14.2,設(shè)置背景顏色,background-color,基本語(yǔ)法,background-color:,關(guān)鍵字,|RGB,值,|transparent,14.2,設(shè)
3、置背景顏色,background-color,語(yǔ)法說(shuō)明,關(guān)鍵字和,RGB,值可參照上一節(jié)“,14.1,設(shè)置顏色,color,”中的語(yǔ)法說(shuō)明。,transparent,表示透明值,是背景顏色,background-color,屬性的初始值。,14.2,設(shè)置背景顏色,background-color,實(shí)例代碼,14.2,設(shè)置背景顏色,background-color,接上頁(yè),14.2,設(shè)置背景顏色,background-color,網(wǎng)頁(yè)效果,14.3,插入背景圖片,background-image,基本語(yǔ)法,background-image:url|none,14.3,插入背景圖片,backgro
4、und-image,語(yǔ)法說(shuō)明,URL,指定要插入的背景圖片路徑或名稱,路徑可以為絕對(duì)路徑也可以為相對(duì)路徑。第,6,章有絕對(duì)路徑和相對(duì)路徑的詳細(xì)內(nèi)容講解。圖片的格式一般以,GIF,、,JPG,和,PNG,格式為主。,none,是一個(gè)默認(rèn)值,表示沒有背景圖片。,14.3,插入背景圖片,background-image,實(shí)例代碼,14.3,插入背景圖片,background-image,接上頁(yè),14.3,插入背景圖片,background-image,網(wǎng)頁(yè)效果,14.4,插入背景附件,background-attachment,基本語(yǔ)法,background-attachment:scroll|fi
5、xed,14.4,插入背景附件,background-attachment,語(yǔ)法說(shuō)明,scroll,表示背景圖片是隨著滾動(dòng)條的移動(dòng)而移動(dòng)。是瀏覽器的默認(rèn)值。,fixed,表示背景圖片固定在頁(yè)面上不動(dòng),不隨著滾動(dòng)條的移動(dòng)而移動(dòng)。,14.4,插入背景附件,background-attachment,實(shí)例代碼,14.4,插入背景附件,background-attachment,接上頁(yè),14.4,插入背景附件,background-attachment,網(wǎng)頁(yè)效果,14.5,設(shè)置重復(fù)背景圖片,background-repeat,基本語(yǔ)法,background-repeat:repeat|repeat-x
6、|repeat-y|no-repeat,14.5,設(shè)置重復(fù)背景圖片,background-repeat,語(yǔ)法說(shuō)明,14.5,設(shè)置重復(fù)背景圖片,background-repeat,實(shí)例代碼,14.5,設(shè)置重復(fù)背景圖片,background-repeat,接上頁(yè),14.5,設(shè)置重復(fù)背景圖片,background-repeat,網(wǎng)頁(yè)效果,14.6,設(shè)置背景圖片位置,background-position,基本語(yǔ)法,background-position,:百分比,|,長(zhǎng)度,|,關(guān)鍵字,14.6,設(shè)置背景圖片位置,background-position,語(yǔ)法說(shuō)明,利用百分比和長(zhǎng)度設(shè)置圖片位置時(shí),都要指
7、定兩個(gè)值,并且這兩個(gè)值要用空格隔開。一個(gè)代表水平位置,一個(gè)代表垂直位置。水平位置的參考點(diǎn)是網(wǎng)頁(yè)頁(yè)面的左邊,垂直位置的參考點(diǎn)是頁(yè)面的上邊。,關(guān)鍵字在水平方向的主要有,left,、,center,、,right,,表示居左、居中和居右。關(guān)鍵字在垂直方向的主要有,top,、,center,、,bottom,,表示頂端、居中和底端。其中水平方向和垂直方向的關(guān)鍵字可相互搭配使用。,使用百分比和關(guān)鍵字對(duì)比說(shuō)明,background-position,屬性的屬性值。,附表,14-2,14.6,設(shè)置背景圖片位置,background-position,表,14-2 backgorund-position,屬性取值說(shuō)明,返回,14.6,設(shè)置背景圖片位置,background-position,實(shí)例代碼,14.6,設(shè)置背景圖片位置,background-position,接上頁(yè),14.6,設(shè)置背景圖片位置,background-position,網(wǎng)頁(yè)效果,14.7,小實(shí)例,綜合設(shè)置顏色和背景,實(shí)例代碼,14.7,小實(shí)例,綜合設(shè)置顏色和背景,接上頁(yè),14.7,小實(shí)例,綜合設(shè)置顏色和背景,接上頁(yè),14.7,小實(shí)例,綜合設(shè)置顏色和背景,網(wǎng)頁(yè)效果,