（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-2電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-2電子課件CSS 3的選擇器項(xiàng)目六授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練二 知識準(zhǔn)備CSS 3基本語法；CSS 3引用方法；CSS 3新增選擇器。CSS 3常用選擇器；CSS 3常用選擇器1.標(biāo)簽選擇器HTML 5文檔是由多個不同的標(biāo)簽組成，CSS 3的標(biāo)簽選擇器就是聲明哪個標(biāo)簽使用什么樣式。標(biāo)簽選擇器也叫元素選擇器，就是“選中”相同的元素，然后對相同的元素設(shè)置同一個CSS樣式。基本形式如圖所示。CSS 3常用選擇器1.標(biāo)簽選擇器【例6-3】標(biāo)簽選擇器實(shí)例

2、，代碼如下所示（示例文件6-3.html）。標(biāo)簽選擇器實(shí)例bodyfont-family: 微軟雅黑;font-size: 16px;divwidth: 100px;height: 50px;background: red;標(biāo)簽選擇器divwidth: 100px;height: 50px;background: red;在chrome瀏覽器中預(yù)覽CSS 3常用選擇器2.類選擇器在一個頁面中，使用標(biāo)簽選擇器會控制該頁面中所有的同名標(biāo)簽的顯示樣式。如果需要同名標(biāo)簽顯示不同的樣式，此時(shí)僅使用標(biāo)簽選擇器是不能達(dá)到效果的，還需要使用類（Class）選擇器。類選擇器用來為一系列類名相同的標(biāo)簽定義相同的顯

3、示樣式，基本形式如圖所示。類選擇器的名稱由編寫者自己命名，前面必須要加上前綴“.”（英文點(diǎn)號），表明這是一個類選擇器，否則該選擇器無法生效。CSS 3常用選擇器2.類選擇器【例6-4】類選擇器實(shí)例，代碼如下所示（示例文件6-4.html）。類選擇器實(shí)例bodyfont-family: 微軟雅黑;font-size: 16px;.boxwidth: 100px;height: 50px;background: green;類選擇器.boxwidth: 100px;height: 50px;background: green;在chrome瀏覽器中預(yù)覽CSS 3常用選擇器3.ID選擇器在網(wǎng)頁設(shè)計(jì)中

4、，可以為元素設(shè)置一個id，然后針對這個id進(jìn)行CSS樣式設(shè)置。由于ID選擇器定義的是某一特定的HTML元素，所以在同一個頁面中不允許出現(xiàn)兩個相同的id?；拘问饺鐖D所示。ID選擇器的名稱由編寫者自己命名，前面必須要加上前綴“#”，表明這是一個ID選擇器，否則該選擇器無法生效。CSS 3常用選擇器3.ID選擇器【例6-5】ID選擇器實(shí)例，代碼如下所示（示例文件6-5.html）。ID選擇器實(shí)例bodyfont-family: 微軟雅黑;font-size: 16px;#boxwidth: 100px;height: 50px;background: blue;color:white;ID選擇器#

5、boxwidth: 100px;height: 50px;background: blue;color:white;在chrome瀏覽器中預(yù)覽CSS 3常用選擇器4.全局選擇器如果一個頁面中的所有HTML標(biāo)簽都使用一種樣式，可以使用全局選擇器?；拘问饺缦拢骸?”表示設(shè)置的樣式對所有元素都起作用。*屬性:值;CSS 3常用選擇器5.偽類選擇器偽類選擇器定義的樣式通常用在標(biāo)簽上，表示鏈接的四種不同的狀態(tài)：未訪問鏈接（link）、已訪問鏈接（visited）、激活鏈接（active）和鼠標(biāo)指向鏈接（hover）?；拘问饺缦拢篴:狀態(tài)名稱屬性:值;CSS 3常用選擇器5.偽類選擇器【例6-6】全局

6、和偽類選擇器實(shí)例，代碼如下所示（示例文件6-6.html）。全局、偽類選擇器*font-family: 微軟雅黑;font-size: 12px;a:linkcolor:red;a:visitedcolor:green;a:activecolor:blue;a:hoverfont-size:16px;color:#f0f; 鏈接到本頁鏈接到百度在chrome瀏覽器中預(yù)覽CSS 3常用選擇器6.組合選擇器子元素選擇器父元素與子元素必須用空格隔開，用來表示某元素下的子元素。子元素選擇器即為某元素下的子元素，對該子元素設(shè)置CSS樣式，基本形式如圖所示。CSS 3常用選擇器6.組合選擇器【例6-7】子

7、元素選擇器實(shí)例，代碼如下所示（示例文件6-7.html）。子元素選擇器實(shí)例#fathercolor:red;#father pcolor:green;子元素選擇器子元素選擇器子元素選擇器在chrome瀏覽器中預(yù)覽子元素選擇器CSS 3常用選擇器6.組合選擇器相鄰選擇器相鄰選擇器即為某元素的兄弟元素，相鄰選擇器的操作對象是該元素的同級元素。基本形式如圖所示。CSS 3常用選擇器6.組合選擇器相鄰選擇器【例6-8】相鄰選擇器實(shí)例，代碼如下所示（示例文件6-8.html）。相鄰選擇器實(shí)例#boxcolor:red;#box+pcolor:green;相鄰選擇器相鄰選擇器相鄰選擇器在chrome瀏覽器

8、中預(yù)覽CSS 3常用選擇器6.組合選擇器群組選擇器群組選擇器即為同時(shí)對幾個選擇器進(jìn)行相同的CSS樣式設(shè)置，基本形式如圖所示。兩個選擇器之間必須用“,”（英文逗號）隔開，不然群組選擇器無法生效。CSS 3常用選擇器6.組合選擇器群組選擇器【例6-9】群組選擇器實(shí)例，代碼如下所示（示例文件6-9.html）。群組選擇器實(shí)例h3,div,#box,pcolor:red;群組選擇器群組選擇器群組選擇器群組選擇器在chrome瀏覽器中預(yù)覽CSS 3新增選擇器1. 屬性選擇器屬性選擇器，顧名思義就是通過屬性來選擇元素的一種方式。其實(shí)屬性選擇器在CSS2中已經(jīng)存在了，而CSS3在CSS2的基礎(chǔ)上對屬性選擇器

9、進(jìn)行了擴(kuò)展，新增了3個屬性選擇器，除ie6外的大部分瀏覽器支持。屬性選擇器說明Eattr=val屬性att的值以val開頭的元素Eattr$=val屬性att的值以val結(jié)尾的元素Eattr*=val屬性att的值包含val字符串的元素CSS3新增的屬性選擇器表中E指的是元素名element；attr指的是屬性名attribute；val指的是屬性值values。CSS 3新增選擇器1. 屬性選擇器【例6-10】群組選擇器實(shí)例，代碼如下所示（示例文件6-10.html）。屬性選擇器實(shí)例/*匹配href屬性以i開頭的a元素*/ahref=icolor:red;/*匹配href屬性以html結(jié)尾的

10、a元素*/ahref$=htmlfont-size: 20px;font-family: 微軟雅黑;color:green;/*匹配href屬性包含字符串3的a元素*/ahref*=3background: silver;項(xiàng)目一項(xiàng)目二項(xiàng)目三在chrome瀏覽器中預(yù)覽CSS 3新增選擇器2. 結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器可以根據(jù)DOM（文檔對象模型）樹中元素的相對關(guān)系來匹配特定的元素，其語法如表所示。結(jié)構(gòu)偽類選擇器選擇器功能描述E:first-child作為父元素的第一個子元素的元素E。與E:nth-child(1)等同E:last-child作為父元素的最后一個元素的元素E，與E:nth-la

11、t-child(1)等同E:root匹配E元素所在文檔的根元素。在HTML文檔中，根元素始終是html，此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同E F:nth-child(n)選擇父元素E的第n個子元素F，其中n可以是整數(shù)(1、2、3)、關(guān)鍵字（even, odd）、可以是公式（2n+1、-n+5）,而且n起始值為1不是0E F:nth-last-child(n)選擇n的倒數(shù)第n個子元素。次選擇器與E F:nth-child(n)選擇器計(jì)算順序剛好相反，但是使用方法都是一樣的，其中，:nth-last-child(1)始終匹配的是最后一個元素,與:last-child等同E:nth-of

12、-type(n)選擇父元素內(nèi)具有指定類型的第n個E元素E:nth-last-of-type(n)選擇父元素內(nèi)具有指定類型的倒數(shù)第n個E元素E:first-of-type選擇父元素內(nèi)具有指定類型的第一個E元素，與E:nth-of-type(1)等同E:only-child選擇父元素只包含一個子元素，且該子元素匹配E元素E:only-of-type選擇父元素只包含一個同類型的子元素，且該子元素匹配E元素E:empty選擇沒有子元素的元素，且該元素也不包含任何文本節(jié)點(diǎn)：CSS 3新增選擇器2. 結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器中，有四個偽類選擇器接受參數(shù)n：:nth-child(n):nth-last-

13、child(n):nth-of-type(n):nth-last-of-type(n)在實(shí)際應(yīng)用中，這個參數(shù)可以是整數(shù)（1、2、3、4）、關(guān)鍵字（even，odd），還可以是公式(2n+1, -n+5),但是無論是整數(shù)關(guān)鍵字還是公式最終其值都是從1開始，而不是0.換句話說，當(dāng)上述四個偽類選擇器中參數(shù)n的值為0（或者是負(fù)值）時(shí)，選擇器將選擇不到任何的元素。CSS 3新增選擇器2. 結(jié)構(gòu)偽類選擇器可以將結(jié)構(gòu)偽類選擇器中的參數(shù)按照常用情況分為七種情形：1. 參數(shù)n為具體的數(shù)值2. 參數(shù)n為表達(dá)式n*length3. 參數(shù)n為表達(dá)式n+length4. 參數(shù)n為表達(dá)式-n+length5. 參數(shù)n為表

14、達(dá)式n*length + b6. 參數(shù)n為關(guān)鍵詞odd7. 參數(shù)n為關(guān)鍵詞evenCSS 3新增選擇器3. UI元素狀態(tài)偽類選擇器UI，是用戶界面（User Interface）的意思。UI元素狀態(tài)偽類選擇器指的是“UI元素狀態(tài)”這方面的偽類選擇器。UI元素狀態(tài)包括：可用、不可用、選中、未選中、獲取焦點(diǎn)、失去焦點(diǎn)等。這些選擇器的共同特征是：指定的樣式只有當(dāng)元素處于某種狀態(tài)下時(shí)才起作用，在默認(rèn)狀態(tài)下不起作用。UI元素狀態(tài)偽類選擇器大多數(shù)都是針對表單元素來使用的。共11種分別為：E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selectionCSS 3新增選擇器3. UI元素狀態(tài)偽類選擇器CSS3新增的UI元素狀態(tài)偽類選擇器，如表所示。選擇器說明E:hover指定鼠標(biāo)經(jīng)過（懸停）元素時(shí)的樣式E:active制定鼠標(biāo)點(diǎn)擊（但未松開）元素時(shí)的樣式E:focus指定元素獲得光標(biāo)焦點(diǎn)時(shí)使用的樣式E:checked選擇E元素中所有被選中的元素E:selection改變E元素中被選擇的網(wǎng)頁文本的顯示效果E:enabled選擇E元素中所有“可用”元素