《HTML5+CSS3網站設計基礎教程（第3版）》 課件 第3、4章 CSS3入門、CSS3選擇器_第1頁
《HTML5+CSS3網站設計基礎教程（第3版）》 課件 第3、4章 CSS3入門、CSS3選擇器_第2頁
《HTML5+CSS3網站設計基礎教程（第3版）》 課件 第3、4章 CSS3入門、CSS3選擇器_第3頁
《HTML5+CSS3網站設計基礎教程（第3版）》 課件 第3、4章 CSS3入門、CSS3選擇器_第4頁
《HTML5+CSS3網站設計基礎教程（第3版）》 課件 第3、4章 CSS3入門、CSS3選擇器_第5頁
已閱讀5頁，還剩263頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第3章CSS3入門《HTML5+CSS3網站設計基礎教程（第3版）》學習目標/Target了解CSS的功能和作用，能夠列舉CSS的應用示例。熟悉CSS的發(fā)展歷史，能夠厘清CSS1、CSS2和CSS3三者的關系掌握CSS的樣式規(guī)則，能夠按照CSS樣式規(guī)則正確書寫CSS樣式。掌握CSS樣式表的引入方式，能夠在網頁中引入CSS樣式。掌握CSS基礎選擇器的用法，能夠使用CSS基礎選擇器設置差異化的網頁樣式。學習目標/Target掌握字體樣式屬性的用法，能夠在網頁中設置不同的字體樣式。掌握文本外觀屬性的用法，能夠在網頁中設置不同的文本樣式。熟悉列表樣式屬性的用法，能夠清除網頁中默認的列表項目符號。了解CSS層疊性和繼承性的特點，能夠運用CSS層疊性和繼承性優(yōu)化網頁代碼結構。掌握CSS優(yōu)先級的特點，能夠對CSS基礎選擇器進行優(yōu)先級排序。章節(jié)概述/Summary隨著網頁制作技術的不斷發(fā)展，僅僅依靠HTML屬性設置的樣式已經無法滿足網頁設計的需求。CSS能夠在不改變原有HTML結構的情況下實現(xiàn)更加豐富的樣式效果，例如更多樣的字體、更絢麗的圖形動畫等，這極大地滿足了網頁設計的需求。本章將主要講解CSS3的基礎知識。目錄/Contents3.1CSS概述3.2CSS基礎3.3字體樣式屬性3.4文本外觀屬性3.5列表樣式屬性3.6CSS層疊性和繼承性3.7CSS優(yōu)先級3.8階段案例——宣傳軟文目錄/ContentsCSS概述3.13.1CSS概述在學習CSS設置網頁樣式之前，本節(jié)先從認識CSS和CSS發(fā)展歷史兩個方面對CSS進行簡單介紹。了解CSS的功能和作用，能夠列舉CSS的應用示例。學習目標3.1.1認識CSS3.1CSS概述3.1.1認識CSS3.1CSS概述CSS以HTML為基礎，提供了豐富的樣式效果，例如，字體、顏色、背景的控制以及網頁整體的布局和排版等。某教育網站的信息展示模塊3.1.1認識CSS3.1CSS概述CSS非常靈活，既可以嵌入在HTML文件中，也可以是一個獨立的外部文件。如果是獨立的文件，則必須以.css為后綴名。例如，嵌入在HTML文件中的CSS代碼熟悉CSS的發(fā)展歷史，能夠厘清CSS1、CSS2和CSS3三者的關系。學習目標3.1.2CSS的發(fā)展歷史3.1CSS概述20世紀90年代初，HTML語言的誕生，各種形式的修飾樣式也隨之出現(xiàn)。CSS發(fā)展至今主要出現(xiàn)了4個版本。3.1.2CSS的發(fā)展歷史3.1CSS概述CSS11996年12月W3C發(fā)布了第一個有關樣式的標準CSS1CSS21998年5月，CSS2正式推出，這個版本開始使用樣式表結構CSS2.12004年2月，CSS2.1正式推出刪除了許多不被瀏覽器支持的屬性。CSS3CSS3是目前CSS的最新版本，增加了很多強大的新功能，例如，過渡、變形、動畫等效果。CSS基礎3.23.2CSS基礎本節(jié)將從CSS樣式規(guī)則、引入CSS樣式表、CSS基礎選擇器三個方面，詳細講解CSS的基礎知識。掌握CSS的樣式規(guī)則，能夠按照CSS樣式規(guī)則正確書寫CSS樣式。學習目標3.2.1CSS樣式規(guī)則3.2CSS基礎要想熟練地使用CSS對網頁進行修飾，需要遵循CSS樣式規(guī)則。3.2.1CSS樣式規(guī)則3.2CSS基礎CSS樣式規(guī)則具體格式選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}在上面的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，用英文“:”連接，多個“鍵值對”之間用英文“;”進行區(qū)分。3.2.1CSS樣式規(guī)則3.2CSS基礎CSS樣式規(guī)則的結構示例h1：表示CSS樣式作用的HTML對象為<h1>標簽。CSS樣式對應的效果3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼結構的特點01CSS樣式中的選擇器嚴格區(qū)分大小寫，而聲明不區(qū)分大小寫，按照書寫習慣一般采用小寫書寫選擇器、聲明。3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼結構的特點02多個聲明之間必須用英文分號隔開，最后一個聲明后的英文分號可以省略，但是為了便于增加新樣式最好保留最后一個聲明后的英文分號。3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼結構的特點03如果屬性值由多個單詞組成且中間包含空格，則必須為這個屬性值添加英文引號。p{font-family:"TimesNewRoman";}例如：3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼結構的特點04可使用注釋語句對CSS代碼進行注釋。CSS代碼注釋也不會顯示在瀏覽器窗口中。p{font-family:"TimesNewRoman";}/*這是CSS注釋文本,有利于方便查找代碼,此文本不會顯示在瀏覽器窗口中*/例如：3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼結構的特點05在CSS代碼中空格是不被解析的，大括號以及分號前后的空格可有可無。因此可以使用Tab鍵、回車鍵對CSS代碼進行排版，即所謂的格式化CSS代碼，這樣可以提高代碼的可讀性。3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼結構的特點05h1{color:green;font-size:14px;}/*定義顏色屬性，定義字號屬性*/例如1：h1{color:green;/*定義顏色屬性*/font-size:14px;/*定義字號屬性*/}例如2：√可讀性更高3.2.1CSS樣式規(guī)則3.2CSS基礎CSS代碼的屬性值和單位之間是不允許出現(xiàn)空格的，否則瀏覽器解析網頁代碼時會出錯。h1{font-size:14px;}/*14和單位px之間有空格，瀏覽器解析時會出錯*/3.2.2引入CSS樣式表3.2CSS基礎要想使用CSS修飾網頁，就需要在HTML文件中引入CSS樣式表。引入CSS樣式表的方式有4種，分別為行內式、內嵌式、鏈入式和導入式。行內式內嵌式鏈入式導入式掌握行內式引入方式，能夠在網頁中引入CSS樣式。學習目標3.2.2引入CSS樣式表-行內式3.2CSS基礎3.2CSS基礎行內式內嵌式鏈入式<標簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內容</標簽名>行內式也被稱為內聯(lián)樣式，是通過標簽的style屬性來設置標簽的樣式。導入式標簽的屬性用來設置行內式3.2.2引入CSS樣式表-行內式3.2CSS基礎行內式內嵌式鏈入式導入式案例演示3.2.2引入CSS樣式表-行內式掌握內嵌式引入方式，能夠在網頁中引入CSS樣式。學習目標3.2CSS基礎3.2.2引入CSS樣式表-內嵌式3.2CSS基礎<styletype="text/css">

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style>內嵌式是將CSS代碼集中寫在HTML文件的<head>頭部標簽中，并且用<style>標簽定義。行內式內嵌式鏈入式導入式一般位于<head>標簽中<title>標簽之后能夠讓瀏覽器識別<style>標簽包含的是CSS代碼3.2.2引入CSS樣式表-內嵌式3.2CSS基礎行內式內嵌式鏈入式導入式案例演示3.2.2引入CSS樣式表-內嵌式3.2CSS基礎行內式內嵌式鏈入式導入式內嵌式CSS樣式只對其所在的HTML頁面有效，因此，僅設計一個頁面時，使用內嵌式CSS樣式是個不錯的選擇。但如果制作一個網站，則不建議使用內嵌式CSS樣式，因為它不能充分發(fā)揮CSS代碼的重用優(yōu)勢。3.2.2引入CSS樣式表-內嵌式掌握鏈入式引入方式，能夠在網頁中引入CSS樣式。學習目標3.2CSS基礎3.2.2引入CSS樣式表-鏈入式3.2CSS基礎<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>鏈入式也叫外鏈式，是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標簽將外部樣式表文件鏈接到HTML文件中。行內式內嵌式鏈入式導入式<link/>標簽需要放在<head>頭部標簽中，并且必須指定<link/>標簽的三個屬性3.2.2引入CSS樣式表-鏈入式3.2CSS基礎行內式內嵌式鏈入式導入式<link/>標簽的三個屬性123href：定義所鏈接外部樣式表文件的路徑。文件路徑可以是相對路徑，也可以是絕對路徑。type：定義所鏈接文件的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。rel：定義當前文件與被鏈接文件之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文件是一個樣式表文件。3.2.2引入CSS樣式表-鏈入式3.2CSS基礎行內式內嵌式鏈入式導入式案例演示3.2.2引入CSS樣式表-鏈入式3.2CSS基礎行內式內嵌式鏈入式導入式鏈入式最大的優(yōu)勢是同一個CSS樣式表可以被不同的HTML文件鏈接使用，同時一個HTML文件也可以通過多個<link/>標簽鏈接多個CSS樣式表。在實際網頁制作中，鏈入式是使用頻率較高，也較實用的引入方式。它將HTML代碼與CSS代碼分離為兩個或多個文件，實現(xiàn)了結構和樣式的完全分離，使得網頁的前期制作和后期維護都十分方便。3.2.2引入CSS樣式表-鏈入式掌握導入式引入方式，能夠在網頁中引入CSS樣式。學習目標3.2CSS基礎3.2.2引入CSS樣式表-導入式3.2CSS基礎<styletype="text/css">@importurl(css文件路徑);或@import"css文件路徑";

存放其他的內嵌CSS樣式</style>導入式與鏈入式相同，都能夠引入外部樣式表文件。在HTML頭部應用<style>標簽，并在<style>標簽內使用@import語句，即可導入外部樣式表文件。行內式內嵌式鏈入式導入式@import語句的兩種書寫形式均可以導入CSS樣式。3.2.2引入CSS樣式表-導入式3.2CSS基礎在<style>標簽內還可以存放其他的內嵌的CSS樣式，但@import語句需要位于其他內嵌樣式的上方。行內式內嵌式鏈入式導入式<styletype="text/css">@import"style03.css";p{color:blue;}</style><styletype="text/css">@importurl(style03.css);p{color:blue;}</style>3.2.2引入CSS樣式表-導入式3.2CSS基礎行內式內嵌式鏈入式導入式雖然導入式和鏈入式功能基本相同，但是大多數(shù)網站都是采用鏈入式引入外部樣式表的。主要原因是導入式和鏈入式的加載時間和順序不同。當一個頁面被加載時，<link/>標簽引用的CSS樣式表將同時被加載，而@import引用的CSS樣式表會等到頁面全部下載完后再被加載。因此，當用戶的網速比較慢時，使用導入式CSS樣式，網頁可能會先顯示沒有CSS修飾的網頁，造成不好的用戶體驗，而使用鏈入式CSS樣式則能夠避免這個問題。3.2.2引入CSS樣式表-導入式3.2.3CSS基礎選擇器3.2CSS基礎要想將CSS樣式應用于特定的HTML標簽，首先需要找到該標簽。在CSS中，執(zhí)行這一任務的樣式對象被稱為選擇器。在CSS中的基礎選擇器有標簽選擇器、類選擇器、id選擇器、通配符選擇器、標簽指定式選擇器、后代選擇器和并集選擇器。標簽選擇器類選擇器id選擇器標簽指定式選擇器后代選擇器并集選擇器通配符選擇器熟悉標簽選擇器的用法，能夠使用p選擇器定義HTML頁面中所有段落的樣式。學習目標3.2CSS基礎標簽選擇器3.2.3CSS基礎選擇器3.2CSS基礎標簽選擇器是指用HTML標簽名稱作為選擇器。標簽選擇器會按標簽名稱分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。標簽選擇器的基本語法格式標簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.2.3CSS基礎選擇器標簽選擇器掌握類選擇器的用法，能夠為標簽定義單獨的樣式。學習目標3.2CSS基礎3.2.3CSS基礎選擇器類選擇器3.2CSS基礎類選擇器使用“.”（英文點號）進行標識，后面緊跟類名。最大的優(yōu)勢是可以為標簽定義單獨的樣式。類選擇器基本語法格式.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}類名即為HTML標簽的class屬性值，大多數(shù)HTML標簽都可以定義class屬性。3.2.3CSS基礎選擇器類選擇器3.2CSS基礎案例演示3.2.3CSS基礎選擇器類選擇器3.2CSS基礎一個標簽也可以應用多個class類，來設置差異化的樣式。在HTML標簽中多個類名之間需要用空格隔開。3.2.3CSS基礎選擇器類選擇器3.2CSS基礎注意：類名的第一個字符不能使用數(shù)字，并且嚴格區(qū)分大小寫，一般采用小寫的英文字符。3.2.3CSS基礎選擇器類選擇器掌握id選擇器的用法，能夠為一個具體的標簽定義樣式。學習目標3.2CSS基礎3.2.3CSS基礎選擇器id選擇器3.2CSS基礎id選擇器使用“#”進行標識，后面緊跟id名。id選擇器基本語法格式#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}Id名即為HTML標簽的id屬性值，大多數(shù)HTML標簽都可以定義id屬性，標簽的id名是唯一的，只能對應文件中某一個具體的標簽。3.2.3CSS基礎選擇器id選擇器3.2CSS基礎案例演示3.2.3CSS基礎選擇器id選擇器3.2CSS基礎同一個id名也可以應用于多個標簽，瀏覽器并不報錯，但是這種做法是不被允許的。因為JavaScript等腳本語言調用id名時會因為重復的id名而出錯。此外，最后一行沒有應用任何CSS樣式，這意味著id選擇器不可以像類選擇器那樣定義多個值，類似“id="boldfont24"”的寫法是錯誤的。3.2.3CSS基礎選擇器id選擇器熟悉通配符選擇器的用法，能夠描述通配符選擇器的作用。學習目標3.2CSS基礎3.2.3CSS基礎選擇器通配符選擇器3.2CSS基礎通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的標簽。通配符選擇器基本語法格式*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}3.2.3CSS基礎選擇器通配符選擇器*{ margin:0;/*定義外邊距*/ padding:0;/*定義內邊距*/}例如：3.2CSS基礎在實際網頁開發(fā)中不建議使用通配符選擇器設置HTML標簽樣式，因為通配符選擇器設置的樣式對所有的HTML標簽都生效，不管標簽是否需要該樣式，這樣反而降低了代碼的執(zhí)行效率。3.2.3CSS基礎選擇器通配符選擇器掌握交集選擇器的用法，能夠為某些標簽單獨指定樣式。學習目標3.2CSS基礎3.2.3CSS基礎選擇器交集選擇器3.2CSS基礎交集選擇器也被稱為標簽指定式選擇器，可以為某些標簽單獨指定樣式，由兩個選擇器構成，其中第一個為標簽選擇器，第二個為類選擇器或id選擇器。交集選擇器的兩個選擇器之間不能有空格。3.2.3CSS基礎選擇器交集選擇器h3.special例如：p#one3.2CSS基礎案例演示3.2.3CSS基礎選擇器交集選擇器掌握并集選擇器的用法，能夠為多個標簽統(tǒng)一設置相同的樣式。學習目標3.2CSS基礎3.2.3CSS基礎選擇器并集選擇器3.2CSS基礎并集選擇器可以為多個標簽統(tǒng)一設置相同的樣式，從而避免代碼的冗余。并集選擇器也是一個復合選擇器，是各個選擇器通過逗號連接而成的。任何形式的選擇器（包括標簽選擇器、類選擇器以及id選擇器等），都可以作為并集選擇器的一部分。如果不同標簽包含相同的樣式，可以使用并集選擇器對這些相同的樣式進行統(tǒng)一設置。3.2.3CSS基礎選擇器并集選擇器3.2CSS基礎案例演示3.2.3CSS基礎選擇器并集選擇器3.2CSS基礎使用并集選擇器也能實現(xiàn)標簽選擇器、類選擇器、id選擇器定義的樣式效果，并且使用并集選擇器書寫的CSS代碼更簡潔、直觀。3.2.3CSS基礎選擇器并集選擇器掌握后代選擇器的用法，能夠控制內部嵌套標簽的樣式。學習目標3.2CSS基礎3.2.3CSS基礎選擇器后代選擇器3.2CSS基礎后代選擇器可以用來控制內部嵌套標簽的樣式。后代選擇器的寫法就是把外層標簽寫在前面，內層標簽寫在后面，外層標簽和內層標簽之間用空格分隔。當標簽發(fā)生嵌套時，內層標簽就成為外層標簽的后代。3.2.3CSS基礎選擇器后代選擇器3.2CSS基礎案例演示3.2.3CSS基礎選擇器后代選擇器3.2CSS基礎后代選擇器數(shù)量不受限制，如果需要加入更多的選擇器，只需在選擇器之間加上空格，按序排列即可。3.2.3CSS基礎選擇器后代選擇器字體樣式屬性3.33.3字體樣式屬性為了更方便地控制網頁中字體顯示樣式，CSS提供了一系列的字體樣式屬性。本節(jié)將對CSS字體樣式屬性進行詳細講解。掌握font-size屬性的使用方法，能夠設置字號。學習目標3.3.1font-size:字號3.3字體樣式屬性3.3字體樣式屬性font-size屬性用于設置字號，該屬性的屬性值可以為像素值、百分比、倍率等。font-size屬性常用的屬性值單位單位說明em倍率單位，指相對當前文本的倍率px像素單位，是網頁設計中常用的單位%百分比單位，指相對于當前文本的百分比推薦使用像素單位——px例如：p{font-size:12px;}3.3.1font-size:字號掌握font-family屬性的使用方法，能夠設置字體。學習目標3.3.2font-family:字體3.3字體樣式屬性3.3字體樣式屬性font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。例如：將網頁中所有段落文本的字體設置為微軟雅黑p{font-family:"微軟雅黑";}3.3.2font-family:字體可以同時指定多個字體，各字體之間以逗號隔開。如果瀏覽器不支持第一種字體，則會嘗試選擇下一種，直到匹配到合適的字體。body{font-family:"華文彩云","宋體","黑體";}3.3字體樣式屬性使用font-family設置字體時的注意事項3.3.2font-family:字體12各種字體之間必須使用英文逗號分隔中文字體需要加英文引號，但英文字體不需要加引號。設置英文字體時，英文字體名必須位于中文字體名之前3.3字體樣式屬性使用font-family設置字體時的注意事項3.3.2font-family:字體34如果字體名中包含空格、#、$等符號，則該字體必須加英文引號盡量使用計算機系統(tǒng)默認字體，保證網頁中的文字在任何用戶的瀏覽器中都能正確顯示掌握font-weight屬性的使用方法，能夠定義文字的粗細。學習目標3.3.3font-weight:字體粗細3.3字體樣式屬性3.3字體樣式屬性font-weight屬性用于定義文字的粗細。font-weight屬性的屬性值3.3.3font-weight:字體粗細屬性值描述normal默認屬性值。定義標準樣式的文字bold定義粗體文字bolder定義更粗的文字lighter定義更細的文字100~900（100的整數(shù)倍）定義由細到粗的文字。其中400等同于normal，700等同于bold，數(shù)值越大字體越粗較為常用掌握font-variant屬性的使用方法，能夠定義小型大寫字體。學習目標3.3.4font-variant:變體3.3字體樣式屬性normal：默認值，瀏覽器會顯示標準的字體。small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字母均會轉換為大寫。但是所有使用小型大寫字體的字母和其余文本相比，字體尺寸更小。3.3字體樣式屬性font-variant屬性用于設置英文字符的變體，用于定義小型大寫字體，該屬性僅對英文字符有效。font-variant屬性的常用屬性值3.3.4font-variant:變體掌握font-style屬性的使用方法，能夠定義字體風格。學習目標3.3.5font-style:字體風格3.3字體樣式屬性3.3字體樣式屬性font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體。font-style屬性的可用屬性值normal：默認值，瀏覽器會顯示標準的字體風格。132italic：瀏覽器會顯示斜體的字體樣式。oblique：瀏覽器會顯示傾斜的字體樣式。3.3.5font-style:字體風格掌握font屬性的使用方法，能夠對字體樣式進行綜合設置。學習目標3.3.6font:綜合設置字體樣式3.3字體樣式屬性3.3字體樣式屬性font屬性用于對字體樣式進行綜合設置。font屬性的基本語法格式選擇器{font:font-stylefont-weightfont-size/line-heightfont-family;}使用font屬性時，必須按上面語法格式中的順序書寫，各個屬性以空格隔開3.3.6font:綜合設置字體樣式在設置字體樣式屬性時，不需要設置的屬性可以省略（取默認值），但必須保留font-size屬性和font-family屬性，否則font屬性將不起作用。3.3字體樣式屬性3.3.6font:綜合設置字體樣式案例演示3.3字體樣式屬性3.3.6font:綜合設置字體樣式掌握@font-face規(guī)則，能夠定義服務器字體。學習目標3.3.7@font-face規(guī)則3.3字體樣式屬性3.3字體樣式屬性@font-face是CSS3的新增規(guī)則，用于定義服務器字體。使用@font-face規(guī)則定義服務器字體的基本語法格式@font-face{ font-family:字體名稱; src:字體路徑; }用于指定字體文件的路徑3.3.7@font-face規(guī)則用于指定字體的名稱案例演示3.3字體樣式屬性3.3.7@font-face規(guī)則3.3字體樣式屬性使用服務器字體的步驟3.3.7@font-face規(guī)則下載字體，并存儲到相應的文件夾中02使用@font-face規(guī)則定義服務器字體0103對元素應用“font-family”字體樣式文本外觀屬性3.43.4文本外觀屬性使用HTML可以對文本外觀進行簡單的控制，但是效果并不理想。為此CSS提供了一系列的文本外觀屬性，用于設置更為豐富的文本外觀樣式。3.4文本外觀屬性CSS文本樣式屬性有哪些？CSS樣式屬性修飾的文本隨處可見3.4文本外觀屬性colorletter-spacingword-spacingline-heighttext-transformtext-decorationtext-indenttext-alignwhite-spacetext-shadowtext-overflowword-wrap掌握color屬性的用法，能夠定義文本的顏色。學習目標3.4.1color:文本顏色3.4文本外觀屬性color屬性用于定義文本的顏色。color屬性的屬性值3.4.1color:文本顏色3.4文本外觀屬性預定義的顏色值，如red，green，blue等。十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。注意：如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。3.4.1color:文本顏色3.4文本外觀屬性十六進制顏色值是由#開頭的6位十六進制數(shù)值組成，每2位數(shù)值為一個顏色分量，分別表示顏色的紅、綠、藍3個顏色分量。當3個顏色分量的2位十六進制數(shù)值都相同時，可使用CSS縮寫。例如，#FF6600可縮寫為#F60，#FF0000可縮寫為#F00，#FFFFFF可縮寫為#FFF。十六進制顏色值的縮寫多學一招:3.4.1color:文本顏色3.4文本外觀屬性掌握letter-spacing屬性的用法，能夠定義字間距。學習目標3.4.2letter-spacing:字間距3.4文本外觀屬性letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白距離。3.4.2letter-spacing:字間距3.4文本外觀屬性letter-spacing屬性的屬性值letter-spacing屬性的屬性值可為不同單位的數(shù)值。例如，像素單位px、倍率單位em。定義字間距時，允許使用負數(shù)，表示縮小字間距，字間距默認屬性值為normal。h2{letter-spacing:20px;}h3{letter-spacing:-0.5em;}例如：分別為<h2>標簽和<h3>標簽定義不同的字間距掌握word-spacing屬性的用法，能夠定義單詞間距。學習目標3.4.3word-spacing:單詞間距3.4文本外觀屬性word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。word-spacing屬性的屬性值可為不同單位的數(shù)值。定義單詞間距時允許使用負值，表示縮小單詞間距，默認屬性值為normal。word-spacing和letter-spacing屬性的區(qū)別3.4.3word-spacing:單詞間距3.4文本外觀屬性letter-spacingword-spacing定義的為字母之間的間距定義的為英文單詞之間的間距案例演示3.4.3word-spacing:單詞間距3.4文本外觀屬性掌握line-height屬性的用法，能夠定義行間距。學習目標3.4.4line-height:行間距3.4文本外觀屬性line-height屬性用于設置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距。3.4.4line-height:行間距3.4文本外觀屬性3.4.4line-height:行間距3.4文本外觀屬性line-height屬性的屬性值單位A像素單位pxB倍率單位emC百分比單位%推薦使用像素單位px。案例演示3.4.4line-height:行間距3.4文本外觀屬性掌握text-transform屬性的用法，能夠轉換英文字符的大小寫。學習目標3.4.5text-transform:文本轉換3.4文本外觀屬性text-transform屬性用于控制英文字符的大小寫轉換。3.4.5text-transform:文本轉換3.4文本外觀屬性text-transform屬性的屬性值none：不進行轉換（默認值）。capitalize：將首字母轉換為大寫。uppercase：將全部字符轉換為大寫。lowercase：將全部字符轉換為小寫。掌握text-decoration屬性的用法，能夠設置文本的下劃線或刪除線。學習目標3.4.6text-decoration:文本裝飾3.4文本外觀屬性text-decoration屬性用于設置文本的下劃線，上劃線，刪除線等裝飾效果。3.4文本外觀屬性text-decoration屬性的屬性值none：沒有文本裝飾，為默認值。underline：用于設置下劃線效果。overline：用于設置上劃線效果。line-through：用于設置刪除線效果。3.4.6text-decoration:文本裝飾text-decoration屬性可以添加多個屬性值，用于給文本添加多種顯示效果。3.4文本外觀屬性3.4.6text-decoration:文本裝飾案例演示掌握text-align屬性的用法，能夠設置文本內容的水平對齊。學習目標3.4.7text-align:水平對齊方式3.4文本外觀屬性text-align屬性用于設置文本內容的水平對齊，和HTML中的align對齊屬性類似。3.4文本外觀屬性text-align屬性的屬性值left：左對齊（默認值）。right：右對齊。center：居中對齊。3.4.7text-align:水平對齊方式掌握text-indent屬性的用法，能夠設置首行縮進。學習目標3.4.8text-indent:首行縮進3.4文本外觀屬性3.4文本外觀屬性text-indent屬性的屬性值單位A像素單位pxB倍率單位emC百分比單位%推薦使用倍率單位——emtext-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數(shù)值。3.4.8text-indent:首行縮進3.4文本外觀屬性3.4.8text-indent:首行縮進案例演示掌握white-space屬性的用法，能夠設置空格的處理方式。學習目標3.4.9white-space:空格處理3.4文本外觀屬性使用HTML制作網頁時，不論源代碼中有多少個空格，在瀏覽器中只會顯示一個空格。在CSS中，使用white-space屬性可設置空格的處理方式。3.4文本外觀屬性white-space屬性的屬性值normal：常規(guī)顯示（默認值），文本中的空格、換行無效，只顯示一個空格，文本滿行（指到達模塊區(qū)域邊界）后自動換行。pre：按文件的書寫格式保留空格、換行，文本將按照原格式顯示。nowrap：空格、換行無效，強制文本不能換行，除非使用換行標簽<br/>。若超出瀏覽器邊界，瀏覽器會自動增加滾動條。3.4.9white-space:空格處理3.4文本外觀屬性案例演示3.4.9white-space:空格處理掌握text-shadow屬性的用法，能夠為文本添加陰影。學習目標3.4.10text-shadow:陰影效果3.4文本外觀屬性text-shadow是CSS3新增屬性，使用該屬性可以為頁面中的文本添加陰影效果。3.4文本外觀屬性text-shadow屬性的語法格式3.4.10text-shadow:陰影效果選擇器{text-shadow:h-shadowv-shadowblurcolor;}設置陰影顏色設置水平陰影的距離設置垂直陰影的距離設置模糊半徑3.4文本外觀屬性3.4.10text-shadow:陰影效果案例演示注意：陰影的水平距離或垂直距離參數(shù)可以設為負值，但陰影的模糊半徑參數(shù)只能設置為正值，并且數(shù)值越大陰影向外模糊的范圍也就越大。3.4文本外觀屬性3.4.10text-shadow:陰影效果text-shadow屬性能夠給文字添加多個陰影，從而產生陰影疊加的效果。設置陰影疊加的效果方法很簡單，只需為文本設置多組陰影參數(shù)，中間用逗號隔開即可。設置多個陰影疊加效果多學一招:3.4文本外觀屬性3.4.10text-shadow:陰影效果設置多個陰影疊加效果多學一招:3.4文本外觀屬性3.4.10text-shadow:陰影效果P{ font-size:32px; text-shadow:10px10px10pxred,20px20px20pxgreen;/*紅色和綠色的陰影疊加*/}例如：設置紅色和綠色陰影疊加的效果設置多個陰影疊加效果多學一招:3.4文本外觀屬性3.4.10text-shadow:陰影效果例如：設置紅色和綠色陰影疊加的效果掌握text-overflow屬性的用法，能夠處理溢出的文本。學習目標3.4.11text-overflow:處理溢出的文本3.4文本外觀屬性text-overflow屬性同樣為CSS3的新增屬性，該屬性用于處理溢出的文本。3.4文本外觀屬性text-overflow屬性的語法格式選擇器{text-overflow:屬性值;}text-overflow屬性的屬性值clip：修剪溢出文本，不顯示省略符號“…”。ellipsis：用省略符號“…”替代被修剪文本，省略符號插入的位置在最后一個字符處。3.4.11text-overflow:處理溢出的文本3.4文本外觀屬性案例演示3.4.11text-overflow:處理溢出的文本3.4文本外觀屬性設置省略標簽標示溢出文本的步驟243應用“white-space:nowrap;”樣式強制文本不能換行應用“text-overflow:ellipsis;”樣式顯示省略符號應用“overflow:hidden;”樣式隱藏溢出文本1為包含文本的元素定義寬度3.4.11text-overflow:處理溢出的文本掌握word-wrap屬性的用法，能夠設置文本換行效果。學習目標3.4.12word-wrap屬性3.4文本外觀屬性word-wrap屬性是CSS3的新增屬性，該屬性用于實現(xiàn)長單詞和URL地址的自動換行。3.4文本外觀屬性word-wrap屬性的取值屬性值描述normal只在允許的斷字點換行（瀏覽器保持默認處理）break-word在長單詞或URL地址內部進行換行3.4.12word-wrap屬性3.4文本外觀屬性3.4.12word-wrap屬性案例演示列表樣式屬性3.53.5列表樣式屬性定義無序或有序列表時，可以通過標簽的屬性控制列表項目符號，但該方式不符合結構與樣式相分離的網頁設計原則，為此CSS提供了一系列的列表樣式屬性，來單獨控制列表項目符號，本節(jié)將對這些列表樣式屬性進行詳細地講解。掌握list-style-type屬性的用法，能夠控制列表項顯示符號的類型。學習目標3.5.1list-style-type屬性3.5列表樣式屬性3.5列表樣式屬性3.5.1list-style-type屬性在CSS中，list-style-type屬性用于控制列表項顯示符號的類型，其取值有多個同。list-style-type屬性的取值-1屬性值描述屬性值描述disc實心圓（無序列表使用）none不使用項目符號（無序列表和有序列表通用）circle空心圓（無序列表使用）cjk-ideographic簡單的表意數(shù)字（有序列表使用）square實心方塊（無序列表使用）georgian傳統(tǒng)的喬治亞編號方式（有序列表使用）decimal阿拉伯數(shù)字（有序列表使用）decimal-leading-zero以0開頭的阿拉伯數(shù)字（有序列表使用）3.5列表樣式屬性3.5.1list-style-type屬性屬性值描述屬性值描述lower-roman小寫羅馬數(shù)字（有序列表使用）upper-roman大寫羅馬數(shù)字（有序列表使用）lower-alpha小寫英文字母（有序列表使用）upper-alpha大寫英文字母（有序列表使用）lower-latin小寫拉丁字母（有序列表使用）upper-latin大寫拉丁字母（有序列表使用）hebrew傳統(tǒng)的希伯來編號方式（有序列表使用）armenian傳統(tǒng)的亞美尼亞編號方式（有序列表使用）在CSS中，list-style-type屬性用于控制列表項顯示符號的類型，其取值有多個同。list-style-type屬性的取值-23.5列表樣式屬性3.5.1list-style-type屬性案例演示注意：由于各個瀏覽器對list-style-type屬性的解析不同。因此，在實際網頁制作過程中不推薦使用list-style-type屬性。3.5列表樣式屬性3.5.1list-style-type屬性掌握list-style-image屬性的用法，能夠為各個列表項設置圖像符號。學習目標3.5.2list-style-image屬性3.5列表樣式屬性3.5.2list-style-image屬性3.5列表樣式屬性使用list-style-image屬性可以為各個列表項設置圖像符號，使列表的樣式更加美觀，屬性值為圖像的url。案例演示3.5.2list-style-image屬性3.5列表樣式屬性list-style-image屬性對列表項目圖像的控制能力不強。因此，實際工作中不建議使用list-style-image屬性，常通過為<li>標簽設置背景圖像的方式實現(xiàn)列表項目圖像。掌握list-style-position屬性的用法，能夠設置項目符號的位置。學習目標3.5.3list-style-position屬性3.5列表樣式屬性3.5列表樣式屬性在CSS中，list-style-position屬性用于控制列表項目符號的位置，其取值有inside和outside2個。3.5.3list-style-position屬性inside：列表項目符號位于列表文本以內。outside：列表項目符號位于列表文本以外（默認值）。3.5列表樣式屬性3.5.3list-style-position屬性案例演示掌握list-style屬性的用法，能夠綜合設置列表樣式。學習目標3.5.4list-style屬性3.5列表樣式屬性3.5列表樣式屬性在CSS中，列表樣式也是一個復合屬性，可以將列表相關的樣式都綜合定義在一個復合屬性list-style中。3.5.4list-style屬性使用list-style屬性綜合設置列表樣式的語法格式list-style:列表項目符號列表項目符號的位置列表項目圖像;3.5列表樣式屬性3.5.4list-style屬性案例演示3.5列表樣式屬性3.5.4list-style屬性在實際網頁制作過程中，為了更高效地控制列表項目符號，通常將list-style的屬性值定義為none，然后通過為<li>設置背景圖像的方式實現(xiàn)不同的列表項目符號。3.5列表樣式屬性3.5.4list-style屬性案例演示CSS層疊性和繼承性3.63.6CSS層疊性和繼承性層疊性和繼承性是CSS的基本特征。在網頁制作中，合理利用CSS的層疊性和繼承性能夠簡化代碼結構，提升網頁代碼的運行速度。下面將對CSS的層疊性和繼承性進行詳細講解。了解層疊性的特點，能夠運用層疊性優(yōu)化代碼結構。學習目標3.6.1層疊性3.6CSS層疊性和繼承性3.6.1層疊性3.6CSS層疊性和繼承性層疊性是指CSS樣式具有相互疊加的特性。例如：當使用內嵌式CSS樣式表定義<p>標簽字號為12像素，鏈入式CSS樣式定義<p>標簽顏色為紅色，那么段落文本將顯示字號為12像素，顏色為紅色，也就是說這兩種樣式產生了疊加。3.6.1層疊性3.6CSS層疊性和繼承性案例演示了解繼承性的特點，能夠運用繼承性優(yōu)化代碼結構。學習目標3.6.2繼承性3.6CSS層疊性和繼承性3.6CSS層疊性和繼承性繼承性是指子標簽會繼承父標簽的某些樣式。例如：定義主體標簽<body>的文本顏色為黑色，那么頁面中所有的文本都將顯示為黑色，這是因為頁面其他的標簽都嵌套在<body>標簽中，是<body>標簽的子標簽。這些子標簽繼承了父標簽<body>的屬性。3.6.2繼承性p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;}body{color:black;}等價！3.6CSS層疊性和繼承性3.6.2繼承性繼承性這么優(yōu)秀，那讓所有元素都繼承樣式！正確錯誤3.6CSS層疊性和繼承性3.6.2繼承性繼承性這么優(yōu)秀，那讓所有元素都繼承樣式！正確錯誤√3.6CSS層疊性和繼承性3.6.2繼承性恰當?shù)厥褂肅SS繼承性可以簡化代碼。但是在網頁中如果所有的元素都大量繼承樣式，判斷樣式的來源就會很困難。所以，在實際工作中，網頁中通用的全局樣式可以使用繼承。例如，字體、字號、顏色、行距等可以在<body>標簽選擇器中統(tǒng)一設置，通過繼承性控制文檔中的文本。其他標簽可以使用CSS基礎選擇器單獨設置。3.6CSS層疊性和繼承性3.6.2繼承性不具有繼承性的屬性邊框屬性外邊距屬性內邊距屬性背景屬性定位屬性浮動屬性寬度屬性高度屬性注意：標題標簽不會采用<body>標簽設置的字號，是因為標題標簽自帶默認字號樣式，如果<body>標簽設置字號過小，就會被標題標簽覆蓋。3.5列表樣式屬性3.6.2繼承性CSS優(yōu)先級3.7掌握CSS優(yōu)先級的特點，能夠對CSS基礎選擇器進行優(yōu)先級排序。學習目標3.7優(yōu)先級定義CSS樣式時，經常出現(xiàn)多個樣式規(guī)則應用在同一標簽上的情況。此時CSS就會根據樣式規(guī)則的權重，優(yōu)先顯示權重最高的樣式。3.7優(yōu)先級什么是CSS優(yōu)先級？CSS優(yōu)先級CSS優(yōu)先級指的就是CSS樣式規(guī)則的權重。在網頁制作中，CSS為每個基礎選擇器都指定了不同的權重，方便我們添加樣式代碼。3.7優(yōu)先級3.7優(yōu)先級p{color:red;}/*標簽樣式*/.blue{color:green;}/*class樣式*/#header{color:blue;}/*id樣式*/通過示例代碼分析CSS優(yōu)先級CSS樣式代碼<pid="header"class="blue">

幫幫我，我到底顯示什么顏色？</p>CSS樣式代碼對應的HTML結構網頁中文字顯示什么顏色？3.7優(yōu)先級可以通過虛擬數(shù)值的方式為這些選擇器匹配權重。假設標簽選擇器具有權重為1，類選擇器具有權重則為10，id選擇器具有權重則為100。這樣id選擇器“#header”就具有最大的優(yōu)先級，因此文本顯示為藍色。3.7優(yōu)先級對于由多個選擇器構成的復合選擇器（并集選擇器除外），其權重可以理解為這些基礎選擇器權重的疊加。pstrong{color:black}/*權重為:1+1*/strong.blue{color:green;}/*權重為:1+10*/.fatherstrong{color:yellow}/*權重為:10+1*/p.fatherstrong{color:orange;}/*權重為:1+10+1*/p.father.blue{color:gold;}/*權重為:1+10+10*/#headerstrong{color:pink;}/*權重為:100+1*/#headerstrong.blue{color:red;}/*權重為:100+1+10*/CSS樣式代碼<pclass="father"id="header"><strongclass="blue">文本的顏色</strong></p>CSS樣式代碼對應的HTML結構CSS代碼中的“#headerstrong.blue”選擇器的權重最高，文本顏色將顯示為紅色。3.7優(yōu)先級在考慮權重時，還需要注意的一些特殊情況繼承樣式的權重為0。行內樣式優(yōu)先。權重相同時，CSS遵循就近原則。使用“!important”命令的標簽會被賦予最高的優(yōu)先級。3.7優(yōu)先級復合選擇器的權重為組成它的基礎選擇器權重的疊加，但是這種疊加并不是簡單的數(shù)字之和。案例演示階段案例—宣傳軟文3.83.8階段案例——宣傳軟文宣傳軟文效果展示1.結構分析效果圖所示的宣傳軟文由1個標題、多個段落構成，可以使用標題標簽<h2>、段落標簽<p>進行定義。同時，為了設置頁面中需要特殊顯示的文本，還需要在文本中嵌套不同類名的<strong>標簽對其進行單獨控制。2.樣式分析仔細觀察效果圖，可以發(fā)現(xiàn)頁面中使用了多種字體，這就需要預先下載字體，并使用@font-face規(guī)則定義服務器字體，然后應用字體樣式屬性，控制段落文本的字號、粗細和顏色等樣式。需要注意的是最后一行文本中有省略號標示溢出文本的效果，可以使用text-overflow:ellipsis;樣式來實現(xiàn)。3.8.1分析效果圖3.8階段案例——宣傳軟文3.8.2制作頁面結構3.8階段案例——宣傳軟文3.8.3定義CSS樣式3.8階段案例——宣傳軟文本章小結本章首先介紹了CSS的發(fā)展史、CSS樣式規(guī)則、引入方式以及CSS基礎選擇器，然后講解了常用的字體樣式屬性、文本外觀屬性、列表樣式屬性、層疊性、繼承性以及優(yōu)先級，最后通過CSS修飾文本，制作出了一個宣傳軟文頁面。通過本章的學習，讀者能夠充分理解CSS所實現(xiàn)的結構與樣式相離的特性以及CSS樣式的優(yōu)先級規(guī)則，可以熟練地使用CSS控制頁面中的字體和文本外觀樣式。第4章CSS3選擇器《HTML5+CSS3網站設計基礎教程（第3版）》學習目標/Target熟悉屬性選擇器的用法，了解不同屬性選擇器的功能。掌握關系選擇器的用法，能夠使用關系選擇器選取父標簽中嵌套的子標簽。掌握結構化偽類選擇器的用法，能夠使用不同功能的結構化偽類選擇器精準控制標簽樣式。掌握狀態(tài)化偽類選擇器的用法，能夠使用狀態(tài)化偽類選擇器設置導航顯示樣式。掌握偽元素選擇器的用法，能夠使用偽元素選擇器為標簽添加內容樣式。章節(jié)概述/Summary選擇器是CSS3中一個重要的內容，在上一章中已經介紹過一些常用的選擇器，但在CSS3中還有一些選擇器，使用這些選擇器可以大幅度提高設計者書寫和修改樣式表的效率。本章將詳細介紹CSS3中其他類型的選擇器。目錄/Contents4.3結構化偽類選擇器4.2關系選擇器4.1屬性選擇器目錄/Contents4.6階段案例——風云人物列表頁面4.5偽元素選擇器4.4狀態(tài)化偽類選擇器屬性選擇器4.1屬性選擇器可以根據標簽的屬性及屬性值來選擇對應標簽，從而為標簽設置差異化的CSS樣式。在CSS中有多種屬性選擇器。例如，E[attribute]選擇器、E[attribute=value]選擇器、E[attribute~=value]選擇器等。本節(jié)將對屬性選擇器進行詳細講解。4.1屬性選擇器4.1.1E[attribute]選擇器熟悉E[attribute]選擇器的用法，能夠說出E[attribute]選擇器的功能。學習目標4.1屬性選擇器E[attribute]選擇器用于選取標簽名稱為E（代指標簽名稱），并且定義了attribute（代指屬性名稱）屬性的標簽。其中，E可以省略，如果省略則表示可以匹配滿足條件的任意標簽。4.1屬性選擇器4.1.1E[attribute]選擇器例如：選取包含id屬性的<div>標簽div[id]4.1屬性選擇器案例演示4.1.1E[attribute]選擇器4.1.2E[attribute=value]選擇器熟悉E[attribute=value]選擇器的用法，能夠說出E[attribute=value]選擇器的功能。學習目標4.1屬性選擇器[align=center]E[attribute=value]選擇器用于選取標簽名稱為E（代指標簽名稱），并且定義了attribute（代指屬性名稱）屬性和value（代指屬性值字符）屬性值的標簽，E也可以省略。4.1屬性選擇器4.1.2E[attribute=value]選擇器例如：選取包含align屬性，屬性值為center的全部標簽4.1屬性選擇器案例演示4.1.2E[attribute=value]選擇器4.1.3E[attribute~=value]選擇器熟悉E[attribute~=value]的用法，能夠說出E[attribute~=value]的功能。學習目標4.1屬性選擇器E[attribute~=value]選擇器用于選取標簽名稱為E（代指標簽名稱），并且定義了attribute（代指屬性名稱）屬性，包含某個value（代指屬性值字符）屬性值的標簽。4.1屬性選擇器4.1.3E[attribute~=value]選擇器E[attribute~=value]選擇器和E[attribute=value]選擇器的區(qū)別只要標簽包含E[attribute~=value]選擇器的屬性值即可被選中。E[attribute~=value]選擇器E[attribute=value]選擇器中屬性和屬性值要和標簽中的屬性和屬性值完全一致。E[attribute=value]選擇器4.1屬性選擇器4.1.3E[attribute~=value]選擇器案例演示4.1.4E[attribute|=value]選擇器熟悉E[attribute|=value]選擇器的用法，能夠說出E[attribute|=value]選擇器的功能。學習目標4.1屬性選擇器E[attribute|=value]選擇器能夠選取帶有value屬性值或以value-開頭的屬性值的標簽。4.1屬性選擇器4.1.4E[attribute|=value]選擇器例如：選取屬性值為a或屬性值以a-開頭的標簽[class|=a]{font-size:36px;color:green;}4.1.5E[attribute^=value]選擇器熟悉E[attribute^=value]選擇器的用法，能夠說出E[attribute^=value]選擇器的功能。學習目標4.1屬性選擇器div[id^=section]4.1.5E[attribute^=value]選擇器4.1屬性選擇器E[attribute^=value]選擇器用于選擇標簽名稱為E（代指標簽名稱），并且定義了attribute（代指屬性名稱）屬性，屬性值前綴為value（代指屬性值字符）字符的標簽。例如：選取包含id屬性，且id屬性值是以“section”字符串開頭的<div>標簽4.1屬性選擇器案例演示4.1.5E[attribute^=value]選擇器4.1.6E[attribute$=value]選擇器熟悉E[attribute$=value]選擇器的用法，能夠說出E[attribute$=value]選擇器的功能。學習目標4.1屬性選擇器div[id$=section]4.1屬性選擇器E[attribute$=value]選擇器用于選擇屬性值后綴為value（代指屬性值字符）字符的標簽。例如：選取包含id屬性，且id屬性值是以“section”字符串結尾的<div>標簽4.1.6E[attribute$=value]選擇器4.1屬性選擇器案例演示4.1.6E[attribute$=value]選擇器4.1.7E[attribute*=value]選擇器熟悉E[attribute*=value]選擇器的用法，能夠說出E[attribute*=value]選擇器的功能。學習目標4.1屬性選擇器div[id*=section]4.1屬性選擇器E[attribute*=value]選擇器用于選擇屬性值包含value（代指屬性值字符）字符的標簽。例如：選取包含id屬性，且id屬性值包含“section”字符的<div>標簽4.1.7E[attribute*=value]選擇器4.1屬性選擇器案例演示4.1.7E[attribute*=value]選擇器關系選擇器4.2關系選擇器和第3章的復合選擇器類似，但關系選擇器可以更精確地控制標簽樣式。CSS3中的關系選擇器主要包括子元素選擇器和兄弟選擇器，本節(jié)將詳細講解這兩種關系選擇器。4.2關系選擇器4.2.1子元素選擇器掌握子元素選擇器，能夠使用子元素選擇器選取父標簽中嵌套的子標簽。學習目標4.2關系選擇器4.2.1子元素選擇器4.2關系選擇器子元素選擇器主要用來選擇父級標簽的子標簽，由符號“>”連接標簽名稱。h1>strong例如：選取<h1>標簽中的子標簽<strong>標簽4.2.1子元素選擇器4.2關系選擇器案例演示4.2.2兄弟選擇器掌握兄弟選擇器，能夠使用兄弟選擇器選取父標簽中嵌套的子標簽。學習目標4.2關系選擇器4.2.2兄弟選擇器4.2關系選擇器兄弟選擇器可以選擇位于同一個父標簽中，指定標簽后面，具有并列關系的子標簽。在CSS3中，兄弟選擇器分為鄰近兄弟選擇器和普通兄弟選擇器兩種。使用加號“+”連接前后兩個選擇器。選擇器中的兩個子標簽從屬同一個父標簽，而且被選取子標簽必須緊跟指定的標簽。鄰近兄弟選擇器使用“~”來連接前后兩個選擇器。選擇器中的兩個子標簽從屬同一個父標簽，而且被選取子標簽需要位于指定的標簽后面。普通兄弟選擇器4.2.2兄弟選擇器4.2關系選擇器案例演示案例演示鄰近兄弟選擇器普通兄弟選擇器結構化偽類選擇器4.3結構化偽類選擇器可以根據HTML文檔結構選擇對應的標簽，直接設置樣式。在CSS3中增加了許多新的結構化偽類選擇器，方便網頁設計師精準的控制元素樣式。常用的結構化偽類選擇器有:root選擇器、:not選擇器、:only-child選擇器、:first-child選擇器、:last-child選擇器等。本節(jié)將對這些常用的結構化偽類選擇器做具體介紹。4.3結構化偽類選擇器4.3.1:root選擇器掌握:root選擇器的用法，能夠使用:root選擇器控制標簽樣式。學習目標4.3結構化偽類選擇器4.3結構化偽類選擇器4.3.1:root選擇器:root選擇器用于匹配文檔根標簽，在HTML中，根標簽指的<html>標簽。因此使用:root選擇器定義的樣式，對所有頁面標簽都生效。案例演示4.3.2:not選擇器掌握:not選擇器的用法，能夠使用:not選擇器控制標簽樣式。學習目標4.3結構化偽類選擇器4.3結構化偽類選擇器:not選擇器可以排除設置的標簽或屬性。例如，h3:not(.one)會選取沒有類名.one的<h3>標簽。案例演示4.3.2:not選擇器4.3結構化偽類選擇器如果是排除標簽，需要單獨定義被排除標簽的樣式，否則:not選擇器將為全部標簽添加樣式。案例演示4.3.2:not選擇器4.3.3:only-child選擇器掌握:only-child選擇器的用法，能夠選擇父標簽中唯一的子標簽。學習目標4.3結構化偽類選擇器4.3結構化偽類選擇器:only-child選擇器用于選取父標簽中的唯一子標簽，也就是說，如果某個父標簽僅有一個子標簽，使用:only-child選擇器可以選擇這個子標簽。案例演示4.3.3:only-child選擇器4.3.4:first-child選擇器和:last-child選擇器掌握:first-child選擇器的用法，能夠選擇父標簽中的第一個子元素。掌握:last-child選擇器的用法，能夠選擇父標簽中的最后一個子標簽。學習目標4.3結構化偽類選擇器4.3結構化偽類選擇器:first-child選擇器用于選擇父標簽中的第一個子標簽。:last-child選擇器用于選取父標簽中的最后一個子標簽。案例演示4.3.4:first-child選擇器和:last-child選擇器4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器掌握:nth-child(n)的用法，能夠選擇父標簽中的第二個子標簽。掌握:nth-last-child(n)選擇器的用法，能夠選擇父標簽中的倒數(shù)第二個子標簽。學習目標4.3結構化偽類選擇器4.3.5:nth-child(n)選擇器和:nth-last-child(n)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論