HTML屬性標簽6
選擇符分為6種
1元素選擇符
當頁面上多個元素的樣式相同時，可以將多個元素放在一起定義，中間以逗號分開 例：td,p,li,input,select{font-size:12px;}
2class(類)選擇符
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井岡山地方官</p>
<p>九連環(huán)離開計劃</p>
</body>
還有一種方法就是限定可以應用它的頁面元素
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井岡山地方官</p>
<h1>九連環(huán)離開計劃</h1>
</body>
3 id選擇符
與class選擇附類似，只是把'.'換成'#'
例：<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td id="select">id選擇符</td>
</tr>
</table>
</body>
</html>
我們看到在調用ID選擇附時與CLASS選擇附類似，只是將class=""換成了id=""，方便頁面腳本語言的調用
關聯選擇符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td><p>關聯選擇符</p></td>
</tr>
</table>
<p>關聯選擇符</p>
</body>
</html>
我們設定了在元素中<td>的元素<p>所包含文字的樣式，只有在兩個條件都滿足是，樣式在會起作用，
偽類選擇符
是只能用在css選擇符里，而不能用在html代碼中的選擇符
例：
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
〈/body>
</html>
正確的順序是a:link\a:visited\a:hover否則會引起頁面上連接顏色混亂
偽元素選擇符
與偽類選擇符定義類似，目前被大多數瀏覽器支持的有兩個：首行偽元素（first-line）和首字符偽元素(first-letter)是用來實現首行大寫和首行下沉效果的
例：首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
長度隨瀏覽器窗口大小而改變
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上兩種都只能應用于塊狀元素上
湘公網安備:43011102000856號 
點擊加載更多評論>>