版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領
文檔簡介
Web前端技術簽到掃碼下載文旌課堂APP掃碼簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設置簽到時間，學生通過“文旌課堂APP”掃描“簽到二維碼”進行簽到。
CSS3基礎第五章隨著人們對網(wǎng)頁美觀度的要求越來越高，HTML增加了很多新功能。而這些功能的增加導致HTML變得越來越雜亂，HTML頁面也越來越臃腫。于是，CSS誕生了，它為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS3是CSS的最新版本，是科技發(fā)展、時代進步的產(chǎn)物。本章將介紹CSS3的基礎知識。章節(jié)導讀掌握CSS3的基本語法。掌握在網(wǎng)頁中引入CSS3樣式的方式，包括行內(nèi)樣式、內(nèi)嵌樣式表和鏈接樣式表。熟悉CSS3選擇器的含義，掌握不同種類選擇器的使用方法。熟悉CSS3的特性，包括繼承性、層疊性和優(yōu)先級。學習目標學習CSS3的基礎知識，激發(fā)專業(yè)思維，夯實知識基礎。感受中國優(yōu)秀傳統(tǒng)文化，增強愛國意識，提升民族自豪感。素質(zhì)目標第五章CSS基礎/章節(jié)導航/5.1
CSS3的基本語法5.2在網(wǎng)頁中引入CSS3樣式5.3CSS3選擇器5.4
CSS3的繼承性和層疊性實戰(zhàn)演練————為“金企鵝教育”網(wǎng)站主頁鏈接樣式表CSS3的基本語法5.1CSS3是一種用于設置網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的標記性語言。使用CSS3樣式表可以使網(wǎng)頁文件更小、下載速度更快、更新和維護網(wǎng)頁更加方便，因此CSS3樣式表在網(wǎng)頁制作中得到了廣泛的應用。CSS3樣式表是由一個或多個CSS3樣式組成的。CSS3樣式是由選擇器和聲明組成的，其基本格式如圖所示。5.1CSS3的基本語法CSS3樣式的基本格式CSS3樣式通過選擇器匹配HTML5文檔中的不同元素，并對它們應用聲明中設置的樣式屬性。5.1CSS3的基本語法在CSS3樣式表中，空格符號是不被解析的，因此可以利用空格鍵、Tab鍵、Enter鍵對CSS3代碼進行格式化排版，以方便閱讀和管理。XIAOJIQIAO小技巧5.1CSS3的基本語法此外，為了提高CSS3樣式表的可讀性，編寫代碼時一般都需要添加必要的注釋。CSS3注釋由“/*”開始，由“*/”結(jié)束，具體格式為：/*注釋內(nèi)容*/
在網(wǎng)頁中引入CSS3樣式5.2HTML5與CSS3是兩個作用不同的語言，要讓它們同時對一個網(wǎng)頁產(chǎn)生作用，必須在HTML5頁面中引入CSS3樣式，常用的方式有行內(nèi)樣式、內(nèi)嵌樣式表和鏈接樣式表。5.2在網(wǎng)頁中引入CSS3樣式行內(nèi)樣式又稱內(nèi)聯(lián)樣式，它直接為HTML5標簽設置style屬性，具體格式為：其中，style是標簽的屬性，它自身又包括了多個屬性，這些屬性與屬性值的規(guī)范與CSS3樣式規(guī)則相同。例如，使用行內(nèi)樣式設置段落標簽<p>的樣式，代碼如下：行內(nèi)樣式的形式簡單，只對其所在的標簽起作用。但是，行內(nèi)樣式也存在著一些缺陷，每一個標簽在設置樣式時都需要添加style屬性，增加的代碼會使頁面體積變大，這無法解決HTML5頁面臃腫的問題。5.2.1行內(nèi)樣式5.2在網(wǎng)頁中引入CSS3樣式/*注釋內(nèi)容*/<pstyle="font-size:30px;color:green;">段落</p>內(nèi)嵌樣式表又稱內(nèi)部樣式表，在這種樣式表中，所有樣式代碼都寫在<style>…</style>標簽中。內(nèi)嵌樣式表放置在HTML5文檔的<head>…</head>標簽中，具體格式為：其中，type的屬性值為“text/css”，表示<style>標簽中的內(nèi)容是CSS3樣式，該屬性只有這一個屬性值，在HTML5中可以將其省略。5.2.2內(nèi)嵌樣式表5.2在網(wǎng)頁中引入CSS3樣式<styletype="text/css">
選擇器{屬性1:屬性值1;屬性2:屬性值2;…}</style>超鏈接雖然<style>標簽可以寫在HTML5文檔的任意位置，但由于瀏覽器是從上到下解析文檔的，所以一般會將CSS3樣式代碼放在文檔頭部，便于瀏覽器提前識別解析。因此，<style>標簽一般放置在<head>標簽中的<title>標簽之后。Gaoshoudianbo高手點撥5.2在網(wǎng)頁中引入CSS3樣式內(nèi)嵌樣式表相對于行內(nèi)樣式的優(yōu)勢是可以作用于其所在的整個頁面，但是當需要制作一個含有多個頁面的網(wǎng)站時，使用內(nèi)嵌樣式表仍然不能發(fā)揮出CSS3的最大優(yōu)勢。鏈接樣式表是將所有樣式放在一個或多個擴展名為“.css”的外部樣式表文件中，然后使用<link/>標簽將樣式表文件鏈接至HTML5文檔中，具體格式為：
其中，<link/>標簽需放在<head>標簽中；href屬性表示鏈接文件的位置；type屬性表示鏈接文件的類型，其值“text/css”表示樣式表文件；rel表示當前文檔與鏈接文檔之間的關系，其值“stylesheet”表示文檔的外部樣式表。鏈接樣式表最大的特點是將CSS3代碼和HTML5代碼分離開，這樣可以將一個CSS3文件鏈接到不同的HTML5文檔中，從而極大限度地重復使用CSS3樣式代碼，降低網(wǎng)站的頁面代碼冗余度，提高網(wǎng)站的可維護性。5.2.3鏈接樣式表5.2在網(wǎng)頁中引入CSS3樣式<linkhref="CSS3文件位置"type="text/css"rel="stylesheet"/>CSS3選擇器5.3選擇器是CSS3的重要組成部分，使用它可以指明CSS3樣式對HTML5文檔中的哪些標簽生效。CSS3選擇器包括基本選擇器、復合選擇器、偽類選擇器、偽元素選擇器和屬性選擇器等。5.3CSS3選擇器基本選擇器中包括標簽選擇器、類選擇器和ID選擇器，下面對它們進行詳細介紹。5.3.1基本選擇器1.標簽選擇器標簽選擇器是指直接引用標簽名稱的選擇器，其基本格式為：使用標簽選擇器可以統(tǒng)一設置HTML5文檔中某類標簽的樣式。例如，使用標簽選擇器設置<p>標簽的樣式，代碼如下：標簽選擇器是最常用的選擇器，通常用它來統(tǒng)一設置某些元素的基本樣式。5.3CSS3選擇器標簽名{屬性1:屬性值1;屬性2:屬性值2;…}
p{font-size:20px;color:lightblue;}
超鏈接CSS3中有一個特殊的選擇器——通配選擇器，用“*”表示，用于匹配HTML5文檔中的所有標簽。例如，使用通配選擇器重置瀏覽器的部分默認樣式，代碼如下：ZISHIKU知識庫*{margin:0;padding:0;border:0;list-style:0;}
5.3CSS3選擇器2.標簽選擇器類選擇器以“.”為前綴，跟隨一個自定義的類選擇器名，其基本格式為：可以通過設置class屬性將類選擇器樣式應用于標簽，就是在定義好類選擇器后，為標簽設置class屬性（class屬性可以設置多個屬性值，各屬性之間用空格隔開），并將其屬性值設置為事先定義好的類選擇器名。類選擇器可以使不同的元素擁有相同的樣式，也可以使相同的元素擁有不同的樣式。5.3CSS3選擇器.類選擇器名{屬性1:屬性值1;屬性2:屬性值2;…}3.ID選擇器ID選擇器以“#”為前綴，跟隨一個自定義的ID選擇器名，其基本格式為：可以通過設置id屬性將ID選擇器樣式應用于標簽，就是在定義好ID選擇器后，為標簽設置id屬性，并將其屬性值設置為事先定義好的ID選擇器名。ID選擇器的使用方式與類選擇器基本相同，區(qū)別在于ID選擇器只能應用于一個元素，而類選擇器可以應用于多個元素。5.3CSS3選擇器#ID選擇器名{屬性1:屬性值1;屬性2:屬性值2;…}超鏈接類選擇器可以應用于頁面中任意數(shù)量的標簽，適合用來標識樣式相同的對象。而ID選擇器一般用于標識頁面上具有唯一性的元素。zISHIku知識庫5.3CSS3選擇器
<head>
<metacharset="utf-8">
<title>例5-1</title>
<style>
/*使用ID選擇器設置標題文本的樣式，文本居中對齊，字體類型為楷體*/
#title{text-align:center;font-family:"楷體";}
/*使用類選擇器設置作者文本的樣式，文本居中對齊，字體類型為楷體，字體大小為20px，字體加粗*/
.author{text-align:center;font-family:"楷體";font-size:20px;font-weight:bold;}
/*使用標簽選擇器設置詞句文本的樣式，首行縮進2個字符，字體類型為宋體，字體大小為20px*/【例5-1】
使用基本選擇器設置網(wǎng)頁元素樣式（以下提供部分代碼）。5.3CSS3選擇器
p{text-indent:2em;font-family:"宋體";font-size:20px;} </style> </head> <body> <h1id="title">沁園春·雪</h1> <h2class="author">毛澤東</h2> <p>北國風光，千里冰封，萬里雪飄。望長城內(nèi)外，惟余莽莽；大河上下，頓失滔滔。山舞銀蛇，原馳蠟象，欲與天公試比高。須晴日，看紅裝素裹，分外妖嬈。</p> <p>江山如此多嬌，引無數(shù)英雄競折腰。惜秦皇漢武，略輸文采；唐宗宋祖，稍遜風騷。一代天驕，成吉思汗，只識彎弓射大雕。俱往矣，數(shù)風流人物，還看今朝。</p> </body>【例5-1】
使用基本選擇器設置網(wǎng)頁元素樣式（以下提供部分代碼）。5.3CSS3選擇器【例5-1】頁面效果如圖所示。5.3CSS3選擇器使用基本選擇器設置網(wǎng)頁元素樣式的頁面效果5.3.2復合選擇器1.標簽選擇器交集選擇器是由兩個選擇器直接連接構(gòu)成的，其基本格式為：其中，第一個選擇器必須是標簽選擇器，第二個選擇器必須是類選擇器或ID選擇器，兩個選擇器名必須連續(xù)寫，中間不能有空格，如p.p1{…}、p#p2{…}等。交集選擇器的作用范圍是同時滿足前后兩個選擇器定義的元素，就是要求前者定義的元素必須同時設置了類屬性或id屬性，且屬性值為后者的類選擇器名或ID選擇器名，該元素的樣式是3個選擇器樣式（即第一個選擇器、第二個選擇器、交集選擇器）的層疊效果。5.3CSS3選擇器標簽名.類選擇器名{屬性1:屬性值1;屬性2:屬性值2;…}標簽名#ID選擇器名{屬性1:屬性值1;屬性2:屬性值2;…}2.并集選擇器并集選擇器又稱分組選擇器，由兩個或兩個以上的任意選擇器組成，不同選擇器之間用“,”隔開，用于實現(xiàn)“集體聲明”，就是同時對多個選擇器進行定義，其基本格式為：使用并集選擇器還可以將不同選擇器的相同樣式定義抽取出來放在同一個地方集中定義，從而極大地減少CSS3的代碼量，降低代碼的冗余度，提高網(wǎng)頁加載的速度。5.3CSS3選擇器選擇器1,選擇器2,…{屬性1:屬性值1;屬性2:屬性值2;…}3.后代選擇器后代選擇器又稱包含選擇器，它通過空格連接不同選擇器，用于匹配指定元素的所有后代元素，其基本格式為：其中，左邊的選擇器端包含兩個或多個用空格隔開的選擇器，這些選擇器既可以是基本選擇器，也可以是復合選擇器。例如，divp{…}表示選擇div元素后代中的所有p元素，并為其設置樣式。5.3CSS3選擇器選擇器1選擇器2…{屬性1:屬性值1;屬性2:屬性值2;…}4.子代選擇器子代選擇器通過“>”連接兩個選擇器，用于匹配某元素的子元素，其基本格式為：其中，選擇器1表示要匹配的父元素，選擇器2表示父元素的子元素。例如，在HTML5文檔中有<div><p>…</p></div>，可使用div>p{…}選擇div元素中的p元素，并為其設置樣式；在HTML5文檔中有<div><span><p>…</p></span></div>，則使用div>p{…}設置的樣式對其中的p元素無效，因為該p元素不屬于div元素的下一級元素。5.3CSS3選擇器選擇器1>選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}超鏈接相對于子代選擇器而言，后代選擇器的作用范圍更廣，在祖先元素之下的所有后代元素都將受影響。子代選擇器只能影響父元素下一級的元素。zhIDIANMIJIN指點迷津超鏈接5.3CSS3選擇器5.相鄰選擇器相鄰選擇器通過“+”連接兩個選擇器，用于匹配緊接在某元素后的一個元素，且這兩個元素有相同的父元素，其基本格式為：例如，在HTML5文檔中有<div><h1>…</h1><p>…</p></div>，可使用h1+p{…}選擇緊接在h1元素后出現(xiàn)的p元素，并為其設置樣式，其中h1元素和p元素擁有相同的父元素。5.3CSS3選擇器選擇器1+選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}6.兄弟選擇器兄弟選擇器通過“~”連接兩個選擇器，它在相鄰選擇器的基礎上，通過連接順序匹配相鄰的元素之后，會將后續(xù)同級別的該類型元素一同匹配，其基本格式為：
例如，在HTML5文檔中有<div><h1>…</h1><p>…</p><p>…</p></div>，可使用h1~p{…}選擇緊鄰在h1元素后出現(xiàn)的p元素，以及其后出現(xiàn)的所有同級p元素，無論它們是否被其他元素隔開。5.3CSS3選擇器選擇器1~選擇器2{屬性1:屬性值1;屬性2:屬性值2;…}超鏈接相鄰選擇器與兄弟選擇器的區(qū)別在于，相鄰選擇器會嚴格按照連接順序匹配相鄰的元素，成功匹配后不會匹配該元素的后續(xù)元素，而是繼續(xù)檢索頁面對象，直到再次出現(xiàn)符合連接順序的元素，才會再次匹配相鄰元素。兄弟選擇器會按照連接順序匹配相鄰的元素，成功匹配后會接著匹配后續(xù)元素中與該元素相同的同級元素。Gaoshoudianbo高手點撥5.3CSS3選擇器<head> <metacharset="utf-8"> <title>例5-2</title> <style> /*使用類選擇器設置作者文本的樣式，字體大小為20px，字體加粗*/ .author{font-size:20px;font-weight:bold;} /*使用標簽選擇器設置所有詞句文本的樣式，首行縮進2個字符，字體類型為宋體，字體大小為20px*/ p{text-indent:2em;font-family:"宋體";font-size:20px;} /*使用并集選擇器設置標題和作者文本的相同樣式，文本居中對齊，字體為楷體*/ #title,.author{text-align:center;font-family:"楷體";} /*使用后代選擇器設置“山舞……比高?！焙汀绊毲缛眨钡臉邮?，字體大小為30px*/ .p1strong{font-size:30px;} /*使用子代選擇器設置“一代……大雕?！钡臉邮?，字體大小為30px*/ .p2>strong{font-size:30px;} /*使用相鄰選擇器設置“北國……雪飄?！钡臉邮?，文本下畫線*/ h2+p{text-decoration:underline;} /*使用并集選擇器設置“山舞……妖嬈?！钡臉邮?，文本上畫線*/【例5-2】
使用復合選擇器設置網(wǎng)頁元素樣式（以下提供部分代碼）。5.3CSS3選擇器
p.p1{text-decoration:overline;}
/*使用兄弟選擇器設置“江山……今朝?！钡臉邮?，文本下畫線*/
hr~p{text-decoration:underline;}
</style>
</head>
<body>
<h1id="title">沁園春·雪</h1>
<h2class="author">毛澤東</h2>
<p>北國風光，千里冰封，萬里雪飄。</p>
<p>望長城內(nèi)外，惟余莽莽；大河上下，頓失滔滔。</p>
<pclass="p1"><strong>山舞銀蛇，原馳蠟象，欲與天公試比高。
</strong><em><strong>須晴日，</strong>看紅裝素裹，分外妖嬈。</em></p>
<hr/>
<p>江山如此多嬌，引無數(shù)英雄競折腰。</p>
<p>惜秦皇漢武，略輸文采；唐宗宋祖，稍遜風騷。</p>
<pclass="p2"><strong>一代天驕，成吉思汗，只識彎弓射大雕。
</strong><em><strong>俱往矣，</strong>數(shù)風流人物，還看今朝。</em></p>
</body>【例5-2】
使用復合選擇器設置網(wǎng)頁元素樣式（以下提供部分代碼）。5.3CSS3選擇器【例5-2】
頁面效果如圖所示。5.3CSS3選擇器使用復合選擇器設置網(wǎng)頁元素樣式的頁面效果偽類用于定義元素的特殊狀態(tài)。偽類選擇器以英文冒號“:”為前綴，跟隨偽類名，在冒號前可以使用其他選擇器限制偽類應用的范圍，其基本格式為：偽類選擇器包括動態(tài)偽類選擇器、結(jié)構(gòu)偽類選擇器、否定偽類選擇器、狀態(tài)偽類選擇器等。5.3.3
偽類選擇器選擇器名:偽類名{屬性1:屬性值1;屬性2:屬性值2;…}5.3CSS3選擇器動態(tài)偽類選擇器用于設置行為類樣式，就是用戶與頁面進行交互時頁面的樣式。動態(tài)偽類選擇器包括兩種形式。（1）錨點偽類，只用于設置鏈接的樣式，有“:link”和“:visited”。其中，“:link”表示鏈接被訪問前的樣式；“:visited”表示鏈接被訪問后的樣式。例如，將鏈接訪問前的字體顏色設置為黑色使用a:link{color:black;}；將鏈接訪問后的字體顏色設置為紅色使用a:visited{color:red;}。1．動態(tài)偽類選擇器5.3CSS3選擇器（2）行為偽類，也稱為用戶操作偽類，可用于設置任意元素的樣式，有“:hover”“:active”和“:focus”。其中，“:hover”表示鼠標指針移動至元素上時的樣式“:active”表示鼠標指針單擊元素區(qū)域但不松開時的樣式；“:focus”表示某個元素獲得焦點時的樣式，常用于表單元素上。例如，將鼠標指針移至鏈接上方時的樣式設置為淺藍色背景使用a:hover{background_x0002_color:lightblue;}；將鼠標指針單擊鏈接但不松開時的樣式設置為綠色背景使用a:active{background_x0002_color:green;}；將表單控件獲得焦點時的樣式設為黃色背景使用input:focus{background_x0002_color:yellow;}。1．動態(tài)偽類選擇器5.3CSS3選擇器超鏈接同時使用“:link”“:visited”“:hover”和“:active”設置超鏈接的樣式時，“:hover”必須定義在“:link”和“:visited”之后，否則“:hover”選擇器設置的樣式將無法顯示；“:active”必須定義在“:hover”之后，否則“:active”選擇器設置的樣式將無法顯示。Gaoshoudianbo高手點撥5.3CSS3選擇器結(jié)構(gòu)偽類選擇器可以根據(jù)文檔的結(jié)構(gòu)匹配元素，常見的結(jié)構(gòu)偽類選擇器及其說明如表所示。結(jié)構(gòu)偽類選擇器示例描述:first-childp:first-child匹配屬于其父元素的首個子元素的每個p元素:last-childp:last-child匹配屬于其父元素的最后子元素的每個p元素:nth-child(n)p:nth-child(2)匹配屬于其父元素的第二（n）個子元素的每個p元素:nth-last-child(n)p:nth-last-child(2)匹配屬于其父元素的倒數(shù)第二（n）個子元素的每個p元素（從最后一個子元素開始計數(shù)）:nth-of-type(n)p:nth-of-type(2)匹配屬于其父元素的第二（n）個p元素的每個p元素
5.3CSS3選擇器表
常見的結(jié)構(gòu)偽類選擇器及其說明2．結(jié)構(gòu)偽類選擇器2．結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器示例描述:nth-last-of-type(n)p:nth-last-of-type(2)匹配屬于其父元素的倒數(shù)第二個p元素的每個p元素（從最后一個子元素開始計數(shù)）:first-of-typep:first-of-type匹配屬于其父元素的首個p元素的每個p元素:last-of-typep:last-of-type匹配屬于其父元素的最后p元素的每個p元素:only-childp:only-child匹配屬于其父元素的唯一子元素的每個p元素:only-of-typep:only-of-type匹配屬于其父元素的唯一p元素的每個p元素:emptyp:empty匹配沒有任何內(nèi)容的每個p元素
5.3CSS3選擇器表
常見的結(jié)構(gòu)偽類選擇器及其說明:not()表示否定偽類選擇器，用于匹配非指定元素或選擇器的每個元素。例如，匹配非p元素的每個元素使用:not(p)。3．動態(tài)偽類選擇器CSS3中包含十幾種狀態(tài)偽類選擇器，常用的有以下3種。
:enabled，用于匹配每個已啟用的元素（大多用在表單元素上）。
:disabled，用于匹配每個被禁用的元素（大多用在表單元素上）。
:checked，用于匹配每個已被選中的input元素（只用于單選按鈕和復選框）。4．狀態(tài)偽類選擇器5.3CSS3選擇器/*使用動態(tài)偽類選擇器設置樣式*/a:link{color:black;}
/*將鏈接訪問前的字體顏色設置為黑色*/a:visited{color:red;}
/*將鏈接訪問后的字體顏色設置為紅色*/h1:hover{background-color:lightblue;}
/*將鼠標指針移至h1標題上方時的背景顏色變?yōu)闇\藍色*//*使用結(jié)構(gòu)偽類選擇器設置樣式*/p:nth-child(3){font-size:15px;}p:nth-child(4){font-size:20px;}p:nth-child(5){font-size:25px;}p:nth-child(6){font-size:30px;}/*使用狀態(tài)偽類選擇器設置樣式*/input[type="text"]:enabled{background:lightblue;}
/*將可用的文本框的背景顏色設置為淺藍色*/input[type="text"]:disabled{background:gray;}
/*將不可用的文本框的背景顏色設置為灰色*/【例5-3】
使用偽類選擇器設置網(wǎng)頁元素樣式（以下提供部分代碼）。5.3CSS3選擇器【例5-3】
頁面效果如圖所示。5.3CSS3選擇器使用偽類選擇器設置網(wǎng)頁元素樣式的頁面效果偽元素選擇器用于定義元素指定部分的樣式，以雙冒號為前綴，跟隨偽類或偽類對象，在雙冒號前可以使用其他選擇器限制偽類應用的范圍，其基本格式為：5.3.4偽元素選擇器選擇器名::偽類名{屬性1:屬性值1;屬性2:屬性值2;…}在CSS3中，常用的偽元素選擇器有::before選擇器和::after選擇器。
::before選擇器用于在選定的元素前插入內(nèi)容。使用該選擇器時，需使用content屬性指定要插入的內(nèi)容。例如，在p元素前插入內(nèi)容“CSS3”使用p::before{content:"CSS3";}。
::after選擇器用于在選定的元素后插入內(nèi)容。使用該選擇器時，同樣需使用content屬性指定要插入的內(nèi)容。例如，在p元素后插入內(nèi)容“CSS3”使用p::after{content:"CSS3";}。5.3CSS3選擇器
/*使用::before選擇器在h2元素前插入內(nèi)容“作者：”*/
h2::before{content:"作者：";}
/*使用::after選擇器在h2元素后插入內(nèi)容“（詞人）”*/
h2::after{content:"（詞人）";}【例5-4】使用偽元素選擇器在指定元素前后插入指定內(nèi)容（以下提供部分代碼），頁面效果如圖所示。使用偽元素選擇器設置網(wǎng)頁元素樣式的頁面效果5.3CSS3選擇器屬性選擇器根據(jù)標簽的屬性匹配元素。CSS3中共有7種屬性選擇器，為便于后面講解，此處先創(chuàng)建一個簡單的HTML5頁面，本節(jié)中的所有選擇器都將針對該頁面進行操作。5.3.5屬性選擇器5.3CSS3選擇器<head>
<metacharset="utf-8">
<title>例5-5</title>
<!--設置超鏈接的樣式-->
<style>
a{
font-size:30px;
…（省略部分代碼，詳見“素材與案例\第5章\例5-5.html”）
}
</style>
</head>
<body>
<navalign="center">
<!--標記10個超鏈接標簽-->
<ahref="#"title="w3c"id="first">1</a>【例5-5】
創(chuàng)建一個簡單的導航示例。在<body>標簽中構(gòu)建導航示例的結(jié)構(gòu)，在<head>標簽中添加<style>標簽，并使用標簽選擇器設置導航示例的樣式（以下提供部分代碼）。5.3CSS3選擇器
<ahref="#"title="testweb"lang="zh">2</a>
<ahref="#"title="thisisalink"lang="zh-cn">3</a>
<ahref="#"lang="zh-tw">4</a>
<ahref="#"title="zh-cn">5</a>
<ahref="#"title="weblink"lang="zh">6</a>
<ahref="#"title="opentheweb"lang="cn">7</a>
<ahref="#"title="closetheweb"lang="en-zh">8</a>
<ahref="#"title="">9</a>
<ahref="#"id="last">10</a>
</nav></body>【例5-5】
創(chuàng)建一個簡單的導航示例。在<body>標簽中構(gòu)建導航示例的結(jié)構(gòu)，在<head>標簽中添加<style>標簽，并使用標簽選擇器設置導航示例的樣式（以下提供部分代碼），頁面效果如圖所示。導航示例的頁面效果5.3CSS3選擇器E[attr]選擇器是最基本的屬性選擇器，用于匹配所有擁有attr屬性的E元素，無論attr屬性值是什么。例如，匹配所有擁有id屬性的a元素，設置其邊框、背景、字體顏色，頁面效果如所示。代碼如下：
E[attr]選擇器不僅能夠匹配單一屬性，還可以匹配多個屬性，如E[attr1][attr2]。1．E[attr]選擇器5.3CSS3選擇器
a[id]{border:2pxsolid#2f4f4f;background:white;color:cadetblue;}應用E[attr]選擇器的頁面效果E[attr="value"]選擇器用于匹配attr屬性值為“value”的E元素，它縮小了匹配范圍，能夠更加精確地匹配需要的元素。例如，匹配id屬性值為“first”的a元素，設置其邊框、背景、字體顏色，頁面效果如圖所示。代碼如下：與E[attr]選擇器相同，E[attr="value"]選擇器也可以匹配多個屬性，如E[attr1="value1"][attr2="value2"]。2．E[attr="value"]選擇器5.3CSS3選擇器
a[id="first"]{border:2pxsolid#2f4f4f;background:white;color:cadetblue;}應用E[attr="value"]選擇器的頁面效果E[attr~="value"]選擇器用于匹配attr屬性值列表中包含了“value”的E元素，不需要完全匹配。如果“value”是一個列表，需要用空格隔開。例如，匹配所有title屬性值列表中包含了“web”的a元素，設置其背景、字體顏色，頁面效果如圖所示。代碼如下：3．E[attr~="value"]選擇器5.3CSS3選擇器
a[title~="web"]{background:lightcyan;color:#2f4f4f;}應用E[attr~="value"]選擇器的頁面效果E[attr^="value"]選擇器用于匹配attr屬性值以“value”開頭的E元素。例如，匹配title屬性值以“http”開頭的a元素，設置其背景、字體顏色，頁面效果如圖所示。代碼如下：4．E[attr^="value"]選擇器5.3CSS3選擇器a[title^=http]{background:#ffffff;color:#2f4f4f;}應用E[attr^="value"]選擇器的頁面效果E[attr$="value"]選擇器用于匹配attr屬性值以“value”結(jié)尾的E元素。例如，匹配title屬性值以“l(fā)ink”結(jié)尾的a元素，設置其背景、字體顏色。代碼如下：5．E[attr$="value"]選擇器5.3CSS3選擇器a[title$="link"]{background:lightcyan;color:#2f4f4f;}應用E[attr^="value"]選擇器的頁面效果E[attr*="value"]選擇器用于匹配attr屬性值中包含字符串“value”的E元素，無論“value”在屬性值的什么位置。例如，匹配title屬性值中含有“t”的a元素，設置其背景、字體顏色，頁面效果如圖所示。代碼如下：6．E[attr*="value"]選擇器5.3CSS3選擇器a[title*="t"]{background:lightcyan;color:#2f4f4f;}應用E[attr*="value"]選擇器的頁面效果超鏈接E[attr*="value"]選擇器與E[attr~="value"]選擇器的不同之處在于，E[attr~="value"]選擇器匹配的值需要包含在值列表中并用空格隔開，而E[attr*="value"]選擇器沒有這個限制，“value”字符串出現(xiàn)在屬性值的任意位置都能夠匹配成功。Gaoshoudianbo高手點撥5.3CSS3選擇器E[attr|="value"]選擇器用于匹配attr屬性值為“value”或以“value”開頭的元素。例如，匹配lang屬性值為“zh”或以“zh”開頭的a元素，設置其背景、字體顏色，頁面效果如圖所示。代碼如下：7．E[attr|="value"]選擇器5.3CSS3選擇器a[lang|="zh"]{background:#ffffff;color:darkolivegreen;}應用E[attr|="value"]選擇器的頁面效果CSS3的繼承性和層疊性5.45.4CSS3的繼承性和層疊性5.4.1繼承性繼承性是指在HTML5結(jié)構(gòu)中，后代元素會繼承祖先元素的CSS3樣式。能夠被繼承的屬性包括字體類型、字號、字體顏色、行距等，不能被繼承的屬性包括邊框、邊界、背景、定位、布局、尺寸等。例如，設置body元素的字號為20px，那么在網(wǎng)頁中除了單獨設置過字號樣式的元素外，其他元素都將繼承該屬性。5.4CSS3的繼承性和層疊性5.4.2層疊性層疊性是指當為一個元素設置了多個樣式時，這些樣式會根據(jù)各自的權(quán)重來確定呈現(xiàn)的優(yōu)先級，然后其中一個值會層疊/覆蓋掉其他值，并顯示最終效果。下面詳細介紹各類選擇器的權(quán)重值。
ID選擇器：100。
類、偽類與屬性選擇器：10。
標簽選擇器：1。
通配選擇器：0。除此之外，行內(nèi)樣式的優(yōu)先級是最高的，權(quán)重值為1000。繼承樣式的優(yōu)先級是最低的，沒有權(quán)重值。當權(quán)重值相同時，遵循就近原則。
<style> #dividp{color:red;} /*權(quán)重值為100+1=101*/ .divclass.pclass{color:green;}/*權(quán)重值為10+10=20*/</style>…（省略部分代碼，具體內(nèi)容詳見“素材與案例\第5章\例5-6.html”）<body> <divclass="divclass"id="divid"> <pclass="pclass">權(quán)重值的計算</p> </div><!--權(quán)重值計算：101>20，故字體顏色顯示為紅色--></body>【例5-6】
創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，并為p元素設置兩種樣式，然后查看網(wǎng)頁運行效果。5.4CSS3的繼承性和層疊性超鏈接CSS3中含有一個特殊的聲明“!important”，寫在樣式代碼的最后，用于提高指定樣式規(guī)則的優(yōu)先級，它的權(quán)重值為正無窮。Tuozhanyuedu拓展閱讀超鏈接5.4CSS3的繼承性和層疊性超鏈接前幾章中已經(jīng)為“金企鵝教育”網(wǎng)站主頁添加了多個模塊，但是由于該網(wǎng)頁文件未鏈接CSS樣式表，導致網(wǎng)頁的頁面效果雜亂無章。下面就帶領大家一起為“金企鵝教育”網(wǎng)站主頁鏈接樣式表，并為網(wǎng)頁中的不同元素設置樣式?！獮椤敖鹌簌Z教育”網(wǎng)站主頁鏈接樣式表實戰(zhàn)演練WEB掃一掃超鏈接步驟1
在HBuilderX中導入本書配套素材“素材與案例\第5章\實戰(zhàn)演練\JinqieProject”文件夾，右擊HBuilderX主界面左側(cè)欄中的“JinqieProject”文件夾，在彈出的快捷菜單中選擇“新建(N)”→“6.css文件”，如圖所示?！獮椤敖鹌簌Z教育”網(wǎng)站主頁鏈接樣式表實戰(zhàn)演練WEB新建css文件超鏈接步驟2
彈出“新建css文件”對話框，輸入css文件名稱“index”，選擇模板“default”，然后單擊“創(chuàng)建(N)”按鈕，如圖所示?！獮椤敖鹌簌Z教育”網(wǎng)站主頁鏈接樣式表實戰(zhàn)演練WEB“新建css文件”對話框超鏈接步驟3
“金企鵝教育”網(wǎng)站主頁的樣式表創(chuàng)建成功，文檔顯示在編輯窗口中，如圖所示。其中，“index.css”文檔位于“JinqieProject”項目文件夾中。——為“金企鵝教育”網(wǎng)站主頁鏈接樣式表實戰(zhàn)演練WEB
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年鐵路工程師鐵路軌道工程軌道檢測技術考點預測
- 2025年公路工程師路基工程膨脹土處理訓練
- 2026屆黑龍江哈爾濱市道里區(qū)中考押題數(shù)學預測卷含解析
- mysql上機銀行試題及答案
- ai面試題庫及答案銀行農(nóng)行
- 2025年招商銀行面試試題及答案
- 2025年專職安全員試題及答案
- 2025年?？粕嬎銠C考試題目
- 2025年銀行員工晉升試題及答案
- 2025年銀行寫作考試試題及答案
- 物流運輸突發(fā)事件應急預案
- 紡織機器和設備的修理或維護行業(yè)市場特點分析
- 2025屆重慶市南開中學高三上學期第一次質(zhì)量檢測政治試題
- 行政事業(yè)單位公用經(jīng)費管理辦法
- 公眾號運營服務投標方案
- 中藥功效快快記憶法
- 單顆粒冷凍電子顯微鏡結(jié)構(gòu)解析
- 昆山市新初一分班語文試卷含答案
- JT-T-329-2010公路橋梁預應力鋼絞線用錨具、夾具和連接器
- 甄嬛傳電子版劇本第01-10集
- 溯溪完整版本
評論
0/150
提交評論