1、回顧與檢查“border:1pxdashed#00FF33;”代表什么?盒子模型屬性有哪些?什么是標(biāo)準(zhǔn)文檔流?display屬性的作用是什么?本章目標(biāo)會使用背景屬性美化網(wǎng)頁元素會使用background屬性簡寫背景樣式背景在網(wǎng)頁中的應(yīng)用背景在網(wǎng)頁中的應(yīng)用是網(wǎng)頁設(shè)計中最常用的一種技術(shù)背景顏色,背景圖像,都能為頁面增加豐富的視覺效果背景顏色背景顏色(background-color)用于設(shè)置網(wǎng)頁元素的背景顏色設(shè)置標(biāo)題背景顏色設(shè)置
背景顏色設(shè)置單元格背景顏色背景顏色背景顏色(background-color)屬性值:顏色名稱、十六進(jìn)制
2、色值、rgb代碼、關(guān)鍵字語法規(guī)則background-color:#FFFF00;如果一個元素沒有指定背景顏色,那么它的背景顏色就是透明的設(shè)置方式與color屬性相同背景圖像背景圖像(background-image)用于設(shè)置網(wǎng)頁元素的背景圖像屬性值:指向圖像的路徑語法規(guī)則background-image:url(lotus.jpg);不能繼承父類屬性,其默認(rèn)值是none。表示背景上沒有放置任何圖像圖像的存放路徑背景圖像背景圖像(background-image)為
設(shè)置背景圖像圖像會自動沿著水平和垂直兩個方向平鋪為body標(biāo)
3、簽添加背景圖像背景圖像背景圖像(background-image)為
設(shè)置背景圖像為h1標(biāo)簽添加背景圖像背景重復(fù)背景重復(fù)(background-repeat)用于控制圖像平鋪的方式和方向?qū)傩灾担宏P(guān)鍵字屬性值說明repeat沿水平和垂直兩個方向平鋪no-repeat不平鋪,即只顯示一次repeat-x只沿水平方向平鋪repeat-y只沿垂直方向平鋪默認(rèn)情況下,圖像會自動向水平和垂直兩個方向平鋪背景重復(fù)背景重復(fù)(background-repeat)顯示效果repeatno-repeatrepeat-yrepeat-x背景重復(fù)背景重復(fù)(
4、background-repeat)語法規(guī)則background-repeat:repeat-x;只沿水平方向平鋪背景定位背景定位(background-position)用于控制圖像在背景中的位置屬性值:關(guān)鍵字、長度值、百分?jǐn)?shù)值關(guān)鍵字:top、bottom、left、right和center長度值:像素(px)、厘米(cm)等百分?jǐn)?shù)值:x%y%想要精確定位圖像位置,常使用長度值px背景定位屬性值說明關(guān)鍵字toplefttopcentertoprightcenterleftcentercentercenterrightbottomlef
5、tbottomcenterbottomright1.第一個值是水平位置,第二個值是垂直位置;2.如果僅設(shè)定了一個關(guān)鍵詞,那么第二個值將是“center”3.默認(rèn)值:0%0%百分?jǐn)?shù)值x%y%1.第一個值是水平位置,第二個值是垂直位置;2.左上角是0%0%,右下角是100%100%。3.如果僅規(guī)定了一個值,另一個值將是50%。4.%和position值可以混合使用,不可以和關(guān)鍵字混合使用。長度值xposypos1.pos為”position”的簡寫,這里表示第一個值是水平位置,第二個值是垂直位置;2.左上角是00。單位是像素(0px0px)
6、或任何其他的CSS單位;3.如果僅規(guī)定了一個值,另一個值將是50%;背景定位背景定位(background-position)顯示效果改變荷花在背景中的位置背景定位背景定位(background-position)語法規(guī)則background-position:140px210px;水平右移140px垂直下移210px圖片未被完全顯示原因:圖片本身的寬度與位置距離之和大于了容器盒子寬度時,超出的部分就不能被顯示了背景屬性背景(background)簡寫背景樣式同時設(shè)置多個背景屬性background-image:url(lotus2.j
7、pg);background-repeat:no-repeat;background-position:140px210px;background-color:#CCFFFF;background:url(lotus2.jpg)no-repeat140px210px#CCFFFF;屬性之間用英文輸入模式下的空格分隔開4條背景屬性規(guī)則使用一條CSS規(guī)則簡寫總結(jié)背景屬性包括哪些屬性?這些屬性的作用分別是什么?使用background-image屬性設(shè)置背景圖像時,背景圖像是如何顯示的?可以同時設(shè)置多個背景屬性的屬性是什么?總結(jié)并布置作業(yè)