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