一、類型選擇符什麼是類型選擇符?指以網頁中已有的標籤類型作為名稱的行徑符。 body是網頁中的一個標籤類型,div,p,span都是。
如下:
body {}
div {}
p {}
span {}
二、群組選擇符
對於XHMTL對象,可以對一組同時進行了相同的樣式指派。
使用逗號對選擇符進行了分隔,這樣書寫的優點在於同樣的樣式只需要書寫一次即可,減少程式碼量,改善CSS程式碼結構。
使用時應注意"逗號"是在半角模式下,並非中文全角模式。
如下:
h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family: arial;
}
三、包含選擇符對某物件中的子物件進行樣式指點定,這樣選擇方式就發揮了作用。
需要注意的是,僅對此對象的子對象標籤有效,對於其它單獨存在或位於此對像以外的子對象,不應用此樣式設定。
這樣做的優點在於,幫我們避免過多的id、class設置,直接定義所需的元素。
如下:
h2 span
{
color:red;
}
如下:
body h1 span strong
{
font-weight:bold;
}
四、id選擇符
根據DOM文檔物件模型原理所出現的選擇符,對於一個XHTML文件,其中的每一個標籤都可以使用一個id=""的形式進行一個名稱指派,但需要注意,在一個XHTML文件中id是具有唯一性而不可以重複的。
在div css版面的網頁中,可以針對不同的用途進行命名,如頭部為header、底部為footer。
XHTML如下:
<div id="content"></div>
CSS如下:
#content
{
font-size:14px;
line-height:120%;
}
五、class選擇符
其實id是對於XHTML標籤的擴展,而class是SHTML多個標籤的一種組合,class直譯的意思是類別或類別。
對於XHTML標籤使用class=""進行名稱指派。與id不同,class可以重複使用,對於多個樣式相同的元素,可以直接定義為一個class。
使用class的優點已不言自明,它對CSS程式碼重用性有良好的體現,眾多的標籤均可以使用一個樣式來定義而不需要每一個編寫一個樣式代碼。
XHTML如下:
<p class="he"></p>
<span class="he"></span>
<h5 class="he"></h5>
CSS如下:
.he
{
margin:10px;
background-color:red;
}
六、標籤指定式的選擇符
如果想同時使用id和class,也想同時使用標籤選擇符,可以使用以下的方式:
h1#content {}
/*表示所有id為content的h1標籤*/
h1.p1 {}
/*表示所有class為p1的h1標籤*/
標籤指定式選擇符的精確度介於標籤選擇符及id/class選擇符之間,是常用的選擇符之一。
七、組合選擇符
對於上面的所有選擇符而言,進行組合使用。如下:
h1 .p1 {}
/*表示h1下的所有class為p1的標籤*/
#content h1 {}
表示id為content的標籤下的所有h1標籤
h1 .p1,#content h1 {}
/*表示h1下的所有class為p1的標籤以及id為content的標籤下的所有h1標籤*/
h1#content h2{}
/*id為content的h1標籤下的h2標籤*/
CSS選擇符是非常自由與靈活的,可以根據頁面的需要,使用各種選擇符,盡量結構化與優化CSS文件.