文本課件說(shuō)明phpcss

1、CSS3-01主講:郵箱:微博:課前復(fù)習(xí) TABLE表格相關(guān)標(biāo)簽有那些？ FROM表單相關(guān)標(biāo)簽有哪些？ IFRAME行內(nèi)標(biāo)簽的屬性？預(yù)習(xí)檢查本章任務(wù)CSS3的介紹與新特性簡(jiǎn)述，優(yōu)點(diǎn)CSS3的選擇器CSS3的新屬性CSS3的盒子模型CSS3+HTML5的布局方式CSS3+HTML5 響應(yīng)式布局實(shí)現(xiàn)方式1. CSS3的簡(jiǎn)介什么是層疊樣式表： CSS是Cascading Style Sheet（層疊樣式表）的縮寫。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 CSS不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語(yǔ)言)。 CSS2.1是目前被使用最廣泛的版本，而目前還

2、在開(kāi)發(fā)中的CSS3具有更吸引人的特性。 2. CSS3選擇器2.1 基本選擇器2.2 層級(jí)選擇器2.3 屬性選擇器2.4 結(jié)構(gòu)性偽類選擇器2.5 狀態(tài)偽類選擇器2.6 其他選擇器2.1 基本選擇器.class 類選擇器#idID選擇器* 通配符TagName 標(biāo)簽選擇器2.2 層級(jí)選擇器div,p 組合選擇器divp 選擇所有作為div元素的子元素pdiv+p 選擇緊貼在div元素之后p元素divp 選擇div元素后面的所有兄弟元素p2.3 屬性選擇器attribute選擇具有attribute屬性的元素。attribute=value選擇具有attribute屬性且屬性值等于value的元素

3、。attribute=value選擇具有attribute屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于value的元素。 attribute|=value選擇具有att屬性且屬性值為以val開(kāi)頭并用連接符-分隔的字符串的E元素。attibute=value匹配具有attribute屬性、且值以valule開(kāi)頭的E元素attribute$=value匹配具有attribute屬性、且值以value結(jié)尾的E元素attribute*=value匹配具有attribute屬性、且值中含有value的E元素2.4 結(jié)構(gòu)性偽類選擇器:first-letter設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式。 :firs

4、t-line設(shè)置對(duì)象內(nèi)的第一行的樣式。 :before設(shè)置在對(duì)象前（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。:after設(shè)置在對(duì)象后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。:lang(language)匹配使用特殊語(yǔ)言的E元素。 :element1element2:first-of-type匹配同類型中的第一個(gè)同級(jí)兄弟元素:last-of-type匹配同類型中的最后一個(gè)同級(jí)兄弟元素2.4 結(jié)構(gòu)性偽類選擇器:only-of-type匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素:only-child匹配父元素僅有的一個(gè)子元素:nth-child(n)匹配父元素的第n個(gè)子元素:nth-last-child(n)匹配同

5、類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素:last-child()匹配父元素的最后一個(gè)子元素:root匹配元素在文檔的根元素。在HTML中，根元素永遠(yuǎn)是HTML :empty匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素2.5 狀態(tài)偽類選擇器:link設(shè)置超鏈接a在未被訪問(wèn)前的樣式。:visited設(shè)置超鏈接a在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式:active 設(shè)置元素在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式:hover設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式:focus設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式:target匹配相關(guān)URL指向的E元素2.5 狀態(tài)偽類選擇器:enabled 匹配用戶界面上處于可用狀態(tài)的元素:disabled 匹配用戶界面上處于禁用狀態(tài)的元素:checked 匹配用戶界面上處于選中狀態(tài)的元素:not(selector)匹配不含有selector選擇符的元素:selection 設(shè)置對(duì)象被選擇時(shí)的