class(類)和id的一個(gè)小實(shí)例

在上一節(jié)中我們了解了如何為特定的標(biāo)簽定義樣式，例如我們利用 “h1{font-size: 12px;}”將頁(yè)面內(nèi)所有的標(biāo)題1的字體大小改為了12像素。那么如果我不希望所有的標(biāo)題1樣式都被修改該怎么做呢？這時(shí)class和id就可以幫你的忙。

為了了解class和id，我們先來(lái)看兩個(gè)網(wǎng)頁(yè)。

沒(méi)有加入CSS時(shí)的頁(yè)面，加入CSS之后的頁(yè)面。它們的源代碼如下：

復(fù)制代碼代碼如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

我真慘!被用來(lái)演示CSS!

content="text/html; charset=gb2312" />

我是頁(yè)面最上端的標(biāo)題1

我是頁(yè)面左側(cè)的標(biāo)題1，用來(lái)導(dǎo)航

我是頁(yè)面右側(cè)新聞的標(biāo)題1

我是新聞的內(nèi)容。

復(fù)制代碼代碼如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

我真慘!被用來(lái)演示CSS!

我是頁(yè)面最上端的標(biāo)題1

我是頁(yè)面左側(cè)的標(biāo)題1，用來(lái)導(dǎo)航

我是頁(yè)面新聞的標(biāo)題1

我是新聞的內(nèi)容。

class和id的用法

上面的例子應(yīng)用class和id實(shí)現(xiàn)了3種不同的標(biāo)題1。下面我們就來(lái)講講class和id的具體應(yīng)用規(guī)則。

指定標(biāo)簽的class和id

首先我們要在

部分定義class(類)或id。

class的定義方法： 指定標(biāo)簽.類名 {樣式}

id的定義方法：指定標(biāo)簽#id名 {樣式}

然后我們?cè)谙胍獞?yīng)用類的標(biāo)簽上加上class(類)或者id屬性：

class的應(yīng)用方法：

id的應(yīng)用方法：

這種方式定義的class(類)和id只能作用于指定標(biāo)簽。在上面的例子中我們定義了三個(gè)類，類名分別為"dabiaoti"、"daohang"和"xinwen"，它們均作用于h1標(biāo)簽。當(dāng)我們?cè)噲D將其中“xinwen”的樣式應(yīng)用于一個(gè)

標(biāo)簽的時(shí)候(

我是新聞的內(nèi)容。

)，您會(huì)看到它的樣式?jīng)]有發(fā)生任何改變。這是一種錯(cuò)誤的CSS應(yīng)用。

注意：類名和id名不可以用數(shù)字開(kāi)頭。

不指定標(biāo)簽的類或id

在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，你可能不希望你定義的類只局限于一個(gè)標(biāo)簽。就拿上面的例子來(lái)說(shuō)，你可能希望xinwen類可以應(yīng)用于段落標(biāo)簽

。那么你只需要將定義部分的h1.xinwen改為.xinwen，即去掉h1。這種定義中不含標(biāo)簽名的類當(dāng)然也就不再局限于某一個(gè)標(biāo)簽了。看看我們修改之后的網(wǎng)頁(yè)，“新聞的內(nèi)容”也應(yīng)用了xinwen類的樣式。

class(類)與id的區(qū)別

到這里你也許要問(wèn)了，class和id看起來(lái)除了一個(gè).和#的區(qū)別之外，無(wú)論在定義上還是在應(yīng)用上似乎都是一模一樣啊？然而事實(shí)上并不如此，同一id在一個(gè)頁(yè)面內(nèi)只能應(yīng)用一次，而class則是用于描述多次出現(xiàn)的元素。這從它們的名稱上很容易理解。id就類似元素的省份證號(hào)碼，它必須是唯一的，而class則是一類具有共同屬性的元素的合稱，是一類。

如果你試圖在一個(gè)一面內(nèi)多次使用同一個(gè)id，頁(yè)面通常是可以正常顯示的。但是這會(huì)給后期的維護(hù)帶來(lái)不便，還可能造成其它的問(wèn)題。所以我們一定要區(qū)分開(kāi)id和class，并且合理的應(yīng)用它們。

總結(jié)

以上是生活随笔為你收集整理的html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。