HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)-第五章--CSS3選擇器

1、第1頁第五章 CSS3選擇器本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述選擇器是一種模式，用于選擇需要添加樣式的元素。網(wǎng)頁設(shè)計時使用選擇器選擇某些元素進行樣式定義，實現(xiàn)靈活的樣式控制。本章將具體介紹常用的CSS3選擇器的功能和用法。第3頁本章的學(xué)習(xí)目標(biāo)掌握CSS3中新增屬性選擇器的用法，能運用屬性選擇器選擇頁面上的元素添加樣式。掌握常用的偽類選擇器的用法，能夠為名稱相同或類型相同的子元素定義不同的樣式。掌握偽元素選擇器的用法，能夠在頁面上特定位置插入需要的文字或圖片。掌握鏈接偽類的用法，能夠用鏈接偽類實現(xiàn)頁面上超鏈接的特效。第4頁主要內(nèi)容5.1 屬性選擇器5.2 偽類選擇器5.3 偽元素選擇

2、器5.4 鏈接偽類5.5 實訓(xùn)5.6 本章小結(jié) 第5頁5.1 屬性選擇器本節(jié)主要內(nèi)容：案例分析Eattribute=value選擇器Eattribute$=value選擇器Eattribute*=value選擇器案例制作第6頁5.1.1 案例分析【案例展示】百度新聞-熱點要聞局部頁面的設(shè)計?！局R要點】CSS3屬性選擇器attribute=value、attribute$=value和attribute*=value的功能、選擇元素的方法?！緦W(xué)習(xí)目標(biāo)】掌握CSS3屬性選擇器的作用并靈活應(yīng)用。參考代碼：5-1.html第7頁5.1.2 Eattribute=value選擇器Eattribute=

3、value選擇器匹配屬性值以指定值value開頭的每個元素。即選擇名稱為E的標(biāo)簽，且該標(biāo)簽定義了attribute屬性，attribute屬性值包含前綴為value的字符串。E可以省略，省略時表示匹配滿足條件的任意元素。第8頁5.1.3 Eattribute$=value選擇器Eattribute$=value 選擇器匹配屬性值以指定值value結(jié)尾的每個元素。即選擇名稱為E的標(biāo)簽，且該標(biāo)簽定義了attribute屬性，attribute屬性值包含后綴為value的字符串。E可以省略，省略時表示匹配滿足條件的任意元素。第9頁5.1.4 Eattribute*=value選擇器attribute

4、*=value 選擇器匹配屬性值包含指定值value的每個元素。即選擇名稱為E的標(biāo)簽，且該標(biāo)簽定義了attribute屬性，attribute屬性值包含value的字符串。E可以省略，省略時表示匹配滿足條件的任意元素。5.1.5 案例制作制作完成演示案例:百度新聞-熱點要聞局部頁面的設(shè)計。參考代碼 5-1.html第10頁第11頁5.2 偽類選擇器本節(jié)主要內(nèi)容：案例分析:first-child和:last-child選擇器:nth-child(n)和:nth-last-child(n)選擇器:nth-of-type(n)和:nth-last-of-type(n) 選擇器:empty選擇器:ta

5、rget選擇器案例制作第12頁5.2.1 案例分析【案例展示】動態(tài)新聞列表局部頁面的設(shè)置?！局R要點】字體類型、大小、顏色、對齊方式、行間距、結(jié)構(gòu)化偽類選擇器等?！緦W(xué)習(xí)目標(biāo)】掌握CSS文本修飾的常用屬性和偽類選擇器的作用并靈活應(yīng)用。參考代碼：5-2.html第13頁5.2.2 :first-child和:last-child選擇器:first-child 選擇器用于選取屬于其父元素的首個子元素。:last-child 選擇器用于選擇屬于其父元素的最后一個子元素。參考代碼：5-2-1.html第14頁5.2.3 :nth-child(n)和:nth-last-child(n)選擇器使用:firs

6、t-child和:last-child選擇器，可以選擇父元素中第一個或最后一個元素。但如果想選擇其他位置的元素就不行了。為此，CSS3中引入了:nth-child(n)和:nth-last-child(n)選擇器，用來選擇父元素的第n個或倒數(shù)第n個子元素。使用:nth-last-child(1)和:last-child實現(xiàn)的功能相同。第15頁5.2.4 :nth-of-type(n)和:nth-last-of-type(n) 選擇器使用:nth-of-type(n)和:nth-last-of-type(n) 選擇器可以選擇父元素中特定類型的第n個和倒數(shù)第n個子元素，而使用:nth-child(

7、n)和:nth-last-child(n)選擇器選擇父元素中的第n個和倒數(shù)第n個子元素時，與元素類型無關(guān)。參考代碼：5-2-2.html第16頁5.2.5 :empty選擇器 :empty 選擇器匹配沒有子元素或文本內(nèi)容為空的每個元素。參考代碼：5-2-3.html第17頁5.2.6 :target選擇器:target 選擇器用于選取當(dāng)前活動的目標(biāo)元素，為頁面上的某個target元素（該元素的id被用做頁面中超鏈接的錨記名稱來是先用）指定樣式。當(dāng)目標(biāo)元素的id和:target偽選擇器指定的id匹配上時，它的樣式就會在這個id元素上生效，即只有當(dāng)用戶單擊了頁面上的超鏈接，并且跳轉(zhuǎn)到目標(biāo)元素后，:

8、target選擇器所設(shè)置的樣式才會起作用。參考代碼：5-2-4.html5.2.7 案例制作制作完成演示案例:動態(tài)新聞列表局部頁面。參考代碼 5-2.html第18頁第19頁5.3 偽元素選擇器本節(jié)主要內(nèi)容：案例分析:before選擇器:after選擇器案例制作第20頁5.3.1 案例分析【案例展示】超鏈接按鈕設(shè)計?！局R要點】設(shè)置文本樣式、偽元素選擇器的用法。【學(xué)習(xí)目標(biāo)】掌握CSS設(shè)置文本樣式的方法和偽元素選擇器的用法。參考代碼：5-3.html第21頁5.3.2 :before選擇器:before 選擇器實現(xiàn)在被選元素的內(nèi)容前面插入內(nèi)容。格式：E:beforecontent:”文字”/ur

9、l();content屬性來指定要插入的內(nèi)容，可以是用雙引號括起來的文本或用url()指定路徑的圖片。參考代碼：5-3-1.html第22頁5.3.3 :after選擇器:after 選擇器實現(xiàn)在被選元素的內(nèi)容后面插入內(nèi)容。格式：E: after content:”文字”/url();content屬性用法同:before 選擇器中的content。參考代碼：5-3-2.html5.3.4 案例制作制作完成演示案例:超鏈接按鈕設(shè)計。參考代碼 5-3.html第23頁第24頁5.4 鏈接偽類本節(jié)主要內(nèi)容：案例分析案例制作第25頁5.4.1 案例分析【案例展示】網(wǎng)頁底部導(dǎo)航的設(shè)計?！局R要點】文本樣式定義、鏈接偽類的應(yīng)用?！緦W(xué)習(xí)目標(biāo)】掌握鏈接偽類的作用和用法。參考代碼：5-4.html5.4.2 案例制作制作完成演示案例:網(wǎng)頁底部導(dǎo)航的設(shè)計。參考代碼 5-4.html第26頁5.5 實訓(xùn)