版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
第7章
認(rèn)識CSS7.1CSS簡介
7.2CSS樣式表的設(shè)置方法
7.3選擇器
7.4偽類和偽元素
7.5CSS優(yōu)先級
7.6CSS中的單位
7.7小結(jié)7.1
CSS簡介層疊樣式表（CSS）也可稱為級聯(lián)樣式表，就是平常所說的“樣式表”。7.2
CSS樣式表的設(shè)置方法7.2.1內(nèi)聯(lián)樣式表
7.2.2內(nèi)部樣式表
7.2.3外部樣式表
7.2.4引用多個CSS外部樣式表
7.2.5使用@import引用外部樣式表
7.2.6CSS注釋7.2.1內(nèi)聯(lián)樣式表<標(biāo)簽名style="樣式屬性1:屬性值1;樣式屬性2:屬性值2;…">【示例7-1】使用內(nèi)聯(lián)樣式表來設(shè)置網(wǎng)頁樣式。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>內(nèi)聯(lián)樣式</title>6
</head>7
<body>8
<h1style="font-family:宋體;color:red">紅色的宋體</h1>9
<h1style="font-family:隸書;color:blue">藍(lán)色的隸書</h1>10
<h1>不受影響的字體</h1>11
</body>12
</html>7.2.2內(nèi)部樣式表<styletype="text/css">選擇器1{樣式屬性:屬性值;樣式屬性:屬性值;…}選擇器2{樣式屬性:屬性值;樣式屬性:屬性值;…}選擇器3{樣式屬性:屬性值;樣式屬性:屬性值;…}
…</style>【示例7-2】使用內(nèi)部樣式表來設(shè)置網(wǎng)頁樣式。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>內(nèi)部樣式</title>6
<styletype="text/css">7
p{text-decoration:underline;}8
.i{font-style:italic;}9
</style>10
</head>11
<body>12 這是一個測試網(wǎng)頁<br/>13
<p>這里的字會加上下畫線</p>14
<ahref="sample11.htm"class="i">這里的字會是斜體的</a><br/>15
<ttclass="i">這里的字也會是斜體的</tt>16
</body>17
</html>7.2.3外部樣式表<linkrel="stylesheet"type="text/css"href="樣式表源文件地址">【示例7-3】將示例7-2中的如下代碼剪切到一個文本文件中，并命名為7.3.css。p{text-decoration:underline;}.i{font-style:italic;}刪除示例7-2文件中的代碼1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>外部樣式</title>6
<linkhref="7.3.css"type="text/css"rel="stylesheet"
/>7
</head>8
<body>9 這是一個測試網(wǎng)頁<br/>10
<p>這里的字會加上下畫線</p>11
<ahref="sample11.htm"class="i">這里的字會是斜體的</a><br/>12
<ttclass="i">這里的字也會是斜體的</tt>13
</body>14
</html>7.2.4引用多個CSS外部樣式表同一個CSS外部樣式表可以被多個HTML文件引用，但是同一個HTML文件只可以引用一個CSS外部樣式表文件（IE7及其以下版本的瀏覽器除外）。【示例7-4】引用兩個外部樣式表：7.4.1.css和7.4.2.css。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>引用多個CSS外部樣式表</title>6
<linkhref="7.4.1.css"type="text/css"rel="stylesheet"title="stylesheet1"/>7
<linkhref="7.4.2.css"type="text/css"rel="stylesheet"title="stylesheet2"/>8
</head>9
<body>10
<p>這是一個測試網(wǎng)頁</p>11
<tt>這是在<tt>標(biāo)簽內(nèi)的文字</tt><br/>12
<cite>這是在<cite>標(biāo)簽內(nèi)的文字</cite>13
</body>14
</html>7.4.1.css中的內(nèi)容如下。p{text-decoration:underline;}tt{color:red}7.4.2.css中的內(nèi)容如下。p{font-style:italic;}cite{color:green}7.2.5使用@import引用外部樣式表@import的語法格式如下。@importurl(外部樣式地址);【示例7-5】使用@import引用外部樣式表。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>引用外部樣式表</title>6
<styletype="text/css">7
@importurl(7.4.2.css);8
tt{color:red}9
</style>10
</head>11
<body>12
<p>這是一個測試網(wǎng)頁</p>13
<tt>這是在<tt>標(biāo)簽內(nèi)的文字</tt><br/>14
<cite>這是在<cite>標(biāo)簽內(nèi)的文字</cite>15
</body>16
</html>7.2.6CSS注釋CSS中的注釋與HTML中的注釋有所不同，CSS中注釋的語法格式如下。/*注釋內(nèi)容*/注釋可以是單獨(dú)的一行，其代碼如下。<styletype="text/css">
/*引用一個內(nèi)部樣式*/
cite{color:green}</style>注釋也可以跨行，其代碼如下。<styletype="text/css">
@importurl(sample08_1.css);
@importurl(sample08_2.css);
/*使用@import引用了兩個外部樣式每個外部樣式都將在該文件中起作用*/
cite{color:green}</style>注釋可以與CSS代碼放在同一行，其代碼如下。<styletype="text/css">
@importurl(sample08_1.css);/*注意：在@import引用的最后必須要有分號*/
cite{color:green}</style>無論怎么使用注釋都可以，但是注釋不能嵌套，例如以下注釋是不正確的。<styletype="text/css">
@importurl(sample08_1.css);
/*怎么樣使用注釋都可以/*注釋不能嵌套*/就是不能使用注釋的嵌套*/cite{color:green}</style>7.3選擇器7.3.1元素選擇器
7.3.2類選擇器
7.3.3ID選擇器
7.3.4包含選擇器
7.3.5分組選擇器
7.3.6通用選擇器
7.3.7子選擇器
7.3.8相鄰選擇器
7.3.9屬性選擇器
7.3.1元素選擇器元素名{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-6】元素選擇器的使用。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>元素選擇器</title>6
<styletype="text/css">7
p{font-weight:bold;}
/*粗體*/8
a{text-decoration:none;}
/*無下畫線*/9
td{color:green}
/*綠色*/10
</style>11
</head>12
<body>13
<p>這是一個測試網(wǎng)頁</p>14
<ahref="#">這是一個超鏈接</a><br/><br/>15
<tableborder="1">16
<tr>17
<td>這是一個單元格</td>18
<td>這是另一個單元格</td>19
</tr>20
</table>21
<ul>22
<li>列表項(xiàng)一</li>23
<li>列表項(xiàng)二</li>24
</ul>25
</body>26
</html>7.3.2類選擇器將新聞網(wǎng)頁中比較重要的新聞標(biāo)題用紅色的文字顯示，而普通的新聞標(biāo)題則用黑色的文字顯示。解決方法有以下兩種。1．內(nèi)聯(lián)樣式表方法第一種解決方法是在CSS中設(shè)置普通新聞標(biāo)題的顏色，再用內(nèi)聯(lián)樣式表指定重要新聞標(biāo)題的樣式?！臼纠?-7】內(nèi)聯(lián)樣式表的使用。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>相同標(biāo)簽的不同樣式</title>6
<styletype="text/css">7
a.red{text-decoration:underline;}
8
/*普通新聞的超鏈接的樣式：有下畫線*/9
</style>10
</head>11
<body>12
<ahref="a.htm">這是一個普通新聞的超鏈接</a><br/><br/>13
<ahref="a.htm">這是另一個普通新聞的超鏈接</a><br/><br/>14
<ahref="#"style="color:red;text-decoration:none;">這是一個重要新聞的超鏈接</a><br/>
<br/>15
<ahref="#"style="color:red;text-decoration:none;">這是另一個重要新聞的超鏈接</a><br/>
<br/>16
</body>17
</html>2．類選擇器方法元素選擇器.classname{樣式屬性:屬性值;樣式屬性:屬性值;…}類選擇器.classname{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-8】類選擇器的使用。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>類選擇器</title>6
<styletype="text/css">7
a.red{color:red;}
/*紅色的超鏈接*/8
a.green{color:green;}
/*綠色的超鏈接*/9
td{color:red;}
/*表格內(nèi)紅色的文字*/10
td.green{color:green;}
/*表格內(nèi)綠色的文字*/11
</style>12
</head>13
<body>14
<ahref="a.htm">這是一個沒有樣式的超鏈接</a><br/><br/>15
<ahref="#"class="red">這是一個class屬性值為red的超鏈接</a><br/><br/>16
<ahref="#"class="green">這是一個class屬性值為green的超鏈接</a><br/><br/>17
<ahref="a.htm"class="black">這是一個引用了不存在的樣式的超鏈接</a><br/><br/>18
<tableborder="1">19
<tr>20
<td>這是一個單元格</td>21
<tdclass="green">這是一個class屬性值為green的單元格</td>22
</tr>23
</table>24
</body>25
</html>【示例7-9】單獨(dú)使用類選擇器。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>類選擇器</title>6
<styletype="text/css">7
.red{color:red;}
/*紅色的文字*/8
.green{color:green;}
/*綠色的文字*/9
a.blod{font-weight:bolder;}
/*粗體*/10
</style>11
</head>12
<body>13
<ahref="#"class="red">這是一個class屬性值為red的超鏈接</a><br/><br/>14
<ahref="#"class="green">這是一個class屬性值為green的超鏈接</a><br/><br/>15
<ahref="#"class="blod">這是一個class屬性值為blod的超鏈接</a><br/><br/>16
<tableborder="1">17
<tr>18
<tdclass="red">這是一個class屬性值為red的單元格</td>19
</tr>20
<tr>21
<tdclass="green">這是一個class屬性值為green的單元格</td>22
</tr>23
<tr>24
<tdclass="blod">這是一個class屬性值為blod的單元格</td>25
</tr>26
</table>27
</body>28
</html>7.3.3ID選擇器#idname{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-10】ID選擇器的使用。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>ID選擇器</title>6
<styletype="text/css">7
#myid{color:red;}
/*紅色的文字*/8
</style>9
</head>10
<body>11
<ahref="#"id="myid">這是一個超鏈接</a><br/><br/>12
<ahref="#"id="youid">這是另一個超鏈接</a><br/><br/>
13
</body>14
</html>
7.3.4包含選擇器1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>選擇器</title>6
</head>7
<body>8
<p>這是一個測試網(wǎng)頁，<ahref="#">這是一個超鏈接</a></p>9
<ahref="#">這是另一個超鏈接</a><br><br>10
<tableborder="1">11
<tr>12
<td>這是一個單元格</td>13
<td>14
<tableborder="2">15
<tr>16
<td>這是另一個表格的單元格</td>17
</tr>18
</table>19
</td>20
</tr>21
</table>22
<ul>23
<li>無序列表項(xiàng)一</li>24
<li>無序列表項(xiàng)二</li>25
<li>無序列表項(xiàng)三26
<ol>27
<li>有序列表項(xiàng)一</li>28
<li>有序列表項(xiàng)二</li>29
</ol>30
</li>31
</ul>32
</body>33
</html>HTML代碼的結(jié)構(gòu)圖如圖7.11所示。包含選擇器選擇器1選擇器2{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-11】包含選擇器的使用。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>包含選擇器</title>6
<styletype="text/css">7
pa{font-weight:bold;}
8
li{color:red;}
9
olli{color:green;}
10
tabletrtdtabletrtd{text-decoration:line-through;}
11
</style>12
</head>13
<body>14
<p>這是一個測試網(wǎng)頁，<ahref="#">這是一個超鏈接</a></p>15
<ahref="#">這是另一個超鏈接</a><br/><br/>16
<tableborder="1">17
<tr>18
<td>這是一個單元格</td>19
<td>20
<tableborder="2">21
<tr>22
<td>這是另一個表格的單元格</td>23
</tr>24
</table>25
</td>26
</tr>27
</table>28
<ul>29
<li>無序列表項(xiàng)一</li>30
<li>無序列表項(xiàng)二</li>31
<li>無序列表項(xiàng)三32
<ol>33
<li>有序列表項(xiàng)一</li>34
<li>有序列表項(xiàng)二</li>35
</ol>36
</li>37
</ul>38
</body>39
</html>【示例7-12】在包含選擇器中包含類選擇器。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>包含選擇器</title>6
<styletype="text/css">7
p.myclass{text-decoration:line-through;}
8
.testclass{color:red}
9
p.myclassa{font-weight:bold;}
10
.testclassa{text-decoration:overline;}
11
</style>12
</head>13
<body>14
<p>這是一個測試網(wǎng)頁，<ahref="#">這是一個超鏈接</a></p>15
<pclass="myclass">這是一個測試網(wǎng)頁，<ahref="#">這是另一個超鏈接</a></p>16
<pclass="testclass">這是一個測試網(wǎng)頁，<ahref="#">這是另一個超鏈接</a></p>17
</body>18
</html>7.3.5分組選擇器所有的標(biāo)題都使用下畫線樣式，其在CSS中的定義如下。<styletype="text/css">h1{text-decoration:underline;}h2{text-decoration:underline;}h3{text-decoration:underline;}h4{text-decoration:underline;}h5{text-decoration:underline;}h6{text-decoration:underline;}</style>分組選擇器選擇器1,選擇器2,選擇器3,…
{樣式屬性:屬性值;樣式屬性:屬性值;…}以上代碼可以簡略如下。<styletype="text/css">h1,h2,h3,h4,h5,h6{text-decoration:underline;}</style>【示例7-13】分組選擇器的使用。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>分組選擇器</title>6
<styletype="text/css">7
h1,h2{text-decoration:line-through;}
/*刪除線*/8
h5,h6{text-decoration:overline;}
/*上畫線*/9
p,h4,tt{text-decoration:underline;}
/*下畫線*/10
b,h3{font-style:italic;}
/*斜體*/11
</style>12
</head>13
<body>14
<h1>標(biāo)題：h1</h1>15
<h2>標(biāo)題：h1</h2>16
<h3>標(biāo)題：h1</h3>17
<h4>標(biāo)題：h1</h4>18
<h5>標(biāo)題：h1</h5>19
<h6>標(biāo)題：h1</h6>20
<p>p元素</p>21
<b>粗體</b><br/><br/>22
<tt>等寬字</tt>23
</body>24
</html>7.3.6通用選擇器*{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-14】通用選擇器的使用。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>通用選擇器</title>6
<styletype="text/css">7 *{text-decoration:line-through;}
/*刪除線*/8
</style>9
</head>10
<body>11 這是一個測試網(wǎng)頁，<ahref="#">這是一個超鏈接</a>12
<p>這是<p>標(biāo)簽內(nèi)的文字</p>13
<b>這是<b>標(biāo)簽內(nèi)的文字</b>14
</body>15
</html>通用選擇器選擇器*{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-15】某個標(biāo)簽下的所有標(biāo)簽使用通用選擇器。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>通用選擇器</title>6
<styletype="text/css">7
div*{text-decoration:line-through;}
/*刪除線*/8
</style>9
</head>10
<body>11
<p>這是一個測試網(wǎng)頁。</p>12
<div>這是一個測試網(wǎng)頁，<p>這是一個超鏈接</p>這是一個測試網(wǎng)頁，<b>這是<b>標(biāo)簽內(nèi)的文字</b></div>13
</body>14
</html>7.3.7子選擇器父選擇器>子選擇器{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-16】子選擇器的使用。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>子選擇器</title>6
<styletype="text/css">7
p>a{font-style:italic;}
/*斜體*/8
div>p>b{text-decoration:line-through;}
/*刪除線*/9
</style>10
</head>11
<body>12
<p>這是一個測試網(wǎng)頁，<ahref="#">這是一個超鏈接</a></p>13
<div>這是一個div，14
<p>從這里開始換行15
<b>這是<b>標(biāo)簽內(nèi)的文字</b>16 從這里換行結(jié)束。17
</p>18 這是另外一段19
</div>20
</body>21
</html>【示例7-17】比較子選擇器與包含選擇器的區(qū)別。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>子選擇器與包含選擇器的區(qū)別</title>6
<styletype="text/css">7
div>b{font-style:italic;}
/*斜體*/8
divb{text-decoration:line-through;}
/*刪除線*/9
</style>10
</head>11
<body>12
<div>子選擇器與包含選擇器的區(qū)別：13
<p>子選擇器只能對14
<b>子標(biāo)簽有效</b>！15 不可以跨標(biāo)簽。16
</p>17 包含選擇器可以跨標(biāo)簽使用。18
</div>19
<div>包含選擇器比子選擇器要<b>靈活</b>得多</div>20
</body>21
</html>7.3.8相鄰選擇器選擇器1+選擇器2{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-18】相鄰選擇器的使用。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>相鄰選擇器</title>6
<styletype="text/css">7
div+b{font-style:italic;}
/*斜體*/8
</style>9
</head>10
<body>11
<b>相鄰選擇器：</b>12
<div>相鄰選擇器作用在兄弟標(biāo)簽之間</div>13
<b>子選擇器：</b>
14
<div>作用于子標(biāo)簽</div>15 包含選擇器：16
<b>作用于子標(biāo)簽或子標(biāo)簽以下的標(biāo)簽</b>
17
<div>分組選擇器</div>18 選擇器可以分組<br/>19
<b>如此可以少輸入文字</b>20
</body>21
</html>7.3.9屬性選擇器1．第一種表達(dá)方式選擇器[屬性]{樣式屬性:屬性值;樣式屬性:屬性值;…}一個屬性選擇器的樣式聲明。p[align]{font-style:italic;}例如，以下3行代碼都將使用該樣式，即斜體。<palign="left">文字</p><palign="center">文字</p><palign="right">文字</p>【示例7-19】屬性選擇器的使用。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>屬性選擇器</title>6
<styletype="text/css">7
p[align]{text-decoration:line-through;}
/*刪除線*/8
</style>9
</head>10
<body>11
<p>第一行</p>12
<palign="left">第二行</p>13
<palign="center">第三行</p>14
<palign="right">第四行</p>15
</body>16
</html>2．第二種表達(dá)方式選擇器[屬性=屬性值]{樣式屬性:屬性值;樣式屬性:屬性值;…}屬性選擇器的第二種表達(dá)方式的代碼如下。p[align="center"]
{font-style:italic;}該樣式只能作用在align屬性值為center的<p>標(biāo)簽上，即只能作用在以下代碼上：<palign="center">文字</p>而不能作用在以下代碼上：<p>文字</p><palign="left">文字</p><palign="right">文字</p>【示例7-20】使用屬性選擇器的第二種表達(dá)方式來設(shè)置樣式。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>屬性選擇器</title>6
<styletype="text/css">7
p[align="center"]{text-decoration:line-through;}
/*刪除線*/8
</style>9
</head>10
<body>11
<p>第一行</p>12
<palign="left">第二行</p>13
<palign="center">第三行</p>14
<palign="right">第四行</p>15
</body>16
</html>3．第三種表達(dá)方式選擇器[屬性~=屬性值]{樣式屬性:屬性值;樣式屬性:屬性值;…}例如，以下代碼中的title屬性值是一個字符串，并且該字符串中有用空格隔開的幾個英文單詞。<ahref="#"title="thisisaAttributeSelectors">屬性選擇器</a>這行代碼可以被以下幾個屬性選擇器匹配成功。a[title~="this"]{font-style:italic;}a[title~="is"]{font-style:italic;}a[title~="a"]{font-style:italic;}a[title~="Attribute"]{font-style:italic;}a[title~="Selectors"]{font-style:italic;}【示例7-21】使用屬性選擇器的第三種表達(dá)方式來設(shè)置樣式。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>屬性選擇器</title>6
<styletype="text/css">7
a[title~="Attribute"]{text-decoration:line-through;}
/*刪除線*/8
a[title~="屬"]{font-weight:bold;}
/*粗體*/9
</style>10
</head>11
<body>12
<p><ahref="#"title="thisisaAttributeSelectors">屬性選擇器</a></p>13
<p><ahref="#"title="thatisaElementSelector">元素選擇器</a></p>14
<p><ahref="#"title="屬性選擇器">屬性選擇器</a></p>15
<p><ahref="#"title="屬性選擇器">屬性選擇器</a></p>16
</body>17
</html>4．第四種表達(dá)方式選擇器[屬性|=屬性值]{樣式屬性:屬性值;樣式屬性:屬性值;…}屬性選擇器的第四種表達(dá)方式的代碼如下。p[lang|="en"]{font-style:italic;}以下代碼都可以使用該樣式。<plang="en">文字</p><plang="en-as">文字</p><plang="en-us">文字</p>而以下代碼都不能使用該樣式。<p>文字</p><plang="fr">文字</p>【示例7-22】使用屬性選擇器的第四種表達(dá)方式來設(shè)置樣式。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>屬性選擇器</title>6
<styletype="text/css">7 *[title|="en"]{text-decoration:line-through;}
/*刪除線*/8
</style>9
</head>10
<body>11
<ptitle="en">en</p>12
<ptitle="en-as">en-as</p>13
<ptitle="en-us">en-us</p>14
<divtitle="english">english</div>15
<divtitle="en">english</div>16
</body>17
</html>7.4偽類和偽元素7.4.1偽類7.4.2偽元素
7.4.1偽類4個偽類都只能使用在超鏈接上，其使用方法分別如下。a:visited{樣式屬性:屬性值;樣式屬性:屬性值;…}a:active{樣式屬性:屬性值;樣式屬性:屬性值;…}a:hover{樣式屬性:屬性值;樣式屬性:屬性值;…}a:link{樣式屬性:屬性值;樣式屬性:屬性值;…}【示例7-23】使用偽類來設(shè)置樣式。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>偽類</title>6
<styletype="text/css">7
a{text-decoration:none;font-size:10px;}8
a:visited{color:green;}9
a:active{color:#000000;}10
a:hover{background-color:yellow;font-size:24px;}11
a:link{color:red;}12
</style>13
</head>14
<body>15
<p><ahref="">未訪問過的超鏈接</a></p>16
<p><ahref="http://xxxx">已訪問過的超鏈接</a></p>17
<p><ahref="http://zzzzzzz">普通超鏈接</a></p>18
</body>19
</html>7.4.2偽元素【示例7-24】使用偽元素來設(shè)置樣式。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>偽元素</title>6
<styletype="text/css">7
p:first-letter{font-size:200%;}8
div:first-line{text-decoration:underline;}9
</style>10
</head>11
<body>12
<p>這幾天心里頗不寧靜。今晚在院子里坐著乘涼，忽然想起日日走過的荷塘，在這滿月的光里，總該另有一番樣子吧。月亮漸漸地升高了，墻外馬路上孩子們的歡笑，已經(jīng)聽不見了；妻在屋里拍著閏兒，迷迷糊糊地哼著眠歌。我悄悄地披了大衫，帶上門出去。</p>13
<div>沿著荷塘，是一條曲折的小煤屑路。這是一條幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，長著許多樹，蓊蓊郁郁的。路的一旁，是些楊柳，和一些不知道名字的樹。沒有月光的晚上，這路上陰森森的，有些怕人。今晚卻很好，雖然月光也還是淡淡的。</div>14
</body>15
</html>7.5
CSS優(yōu)先級例如，HTML文件中有以下兩個樣式代碼。p{color:red}.vip{color:green}代碼<pclass="vip">文字</p>有關(guān)權(quán)重的一些規(guī)定元素選擇器（元素名）的權(quán)重為0001。類選擇器（.classname）的權(quán)重為0010。ID選擇器（#idname）的權(quán)重為0100。通用選擇器（*）的權(quán)重為0000。子選擇器的權(quán)重為0000。屬性選擇器（[attr]）的權(quán)重為0010。偽類選擇器（:pseudo-classes）的權(quán)重為0010。偽元素（:pseudo-elements）的權(quán)重為0001。包含選擇器：包含的選擇器權(quán)重值之和。內(nèi)聯(lián)樣式的權(quán)重為1000。繼承的樣式的權(quán)重為0000。以上權(quán)重由大到小依次為1000、0100、0010、0001、0000?！臼纠?-25】比較幾個選擇器的優(yōu)先級。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>樣式?jīng)_突</title>6
<styletype="text/css">7
p{color:red;}
/*權(quán)重為：0001*/8
.vip{color:green;}
/*權(quán)重為：0010*/9
#myid{c
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 海豐地基加固施工方案
- 防水的施工方案
- 自拌混凝土施工方案
- 河源頂管施工方案
- 泥漿護(hù)壁施工方案
- 軟件培訓(xùn)方案
- 二零二五年度果樹種植土地托管承包與農(nóng)村金融創(chuàng)新合作協(xié)議
- 2025年度汽車維修行業(yè)安全生產(chǎn)責(zé)任簡易合同
- 二零二五年度高科技研發(fā)項(xiàng)目勞務(wù)合同風(fēng)險評估書
- 二零二五年度健康醫(yī)療合伙投資公司股權(quán)合作協(xié)議
- 七年級數(shù)學(xué)新北師大版（2024）下冊第一章《整式的乘除》單元檢測習(xí)題（含簡單答案）
- 《工程熱力學(xué)》課件-11 理想氣體熱力學(xué)能、焓和熵的計算
- 發(fā)票知識培訓(xùn)課件
- 《英國小說家羅琳》課件
- 《綜合辦崗位職責(zé)》課件
- 學(xué)校與家庭在學(xué)生心理健康中的協(xié)同作用
- 大學(xué)英語翻譯課件
- 薄膜電容項(xiàng)目立項(xiàng)申請報告
- 《中醫(yī)望聞問切》課件
- 教師師德師風(fēng)考核細(xì)則
- 聲帶腫物的護(hù)理教學(xué)查房
評論
0/150
提交評論