Dreamweaver 教程-class和id標(biāo)簽的用法

2022-05-05發(fā)布者：ylm大小：下載：0

文件大小:

軟件介紹

下圖是沒有加入CSS時(shí)的頁面：

下圖是加入CSS之后的頁面：

源代碼如下，大家可以將以下代碼復(fù)制到Dreamweaver中去。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>我真慘!被用來演示CSS!</title>
        <meta http-equiv="Content-Type"  content="text/html; charset=gb2312" />
        </head>
        <body>
        <h1>我是頁面最上端的標(biāo)題1</h1>
        <h1>我是頁面左側(cè)的標(biāo)題1，用來導(dǎo)航</h1>
        <h1>我是頁面右側(cè)新聞的標(biāo)題1</h1>
        <p>我是新聞的內(nèi)容。</p>
        </body>
        </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>我真慘!被用來演示CSS!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style type="text/css">
        <!－－
          h1.dabiaoti {
          font-weight: bolder;
          text-align: center;
          }
          h1#daohang {
          font-size: 12px;
          font-weight: bolder;
          text-align: left;
          }
          h1.xinwen {
          font-size: 16px;
          font-weight:bold;
          text-align: center;
          color:green;
          }
          －－>
        </style>
        </head>
        <body>
  <h1 class="dabiaoti">我是頁面最上端的標(biāo)題1</h1>
   <h1 id="daohang">我是頁面左側(cè)的標(biāo)題1，用來導(dǎo)航</h1>
   <h1 class="xinwen">我是頁面新聞的標(biāo)題1</h1>
   <p class="xinwen">我是新聞的內(nèi)容。</p>
        </body>
        </html>

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

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

（1）首先我們要在<head>部分定義class(類)或id。

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

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

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

class的應(yīng)用方法：<指定標(biāo)簽 class="類名">

id的應(yīng)用方法：<指定標(biāo)簽 id="id名">

這種方式定義的class(類)和id只能作用于指定標(biāo)簽。在上面的例子中我們定義了三個(gè)類，類名分別為"dabiaoti"、"daohang"和"xinwen"，它們均作用于h1標(biāo)簽。當(dāng)我們?cè)噲D將其中“xinwen”的樣式應(yīng)用于一個(gè)<p>標(biāo)簽的時(shí)候(<p>我是新聞的內(nèi)容。</p>)，您會(huì)看到它的樣式?jīng)]有發(fā)生任何改變。這是一種錯(cuò)誤的CSS應(yīng)用。

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

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

在網(wǎng)頁設(shè)計(jì)的過程中，你可能不希望你定義的類只局限于一個(gè)標(biāo)簽。就拿上面的例子來說，你可能希望xinwen類可以應(yīng)用于段落標(biāo)簽<p>。那么你只需要將定義部分的h1.xinwen改為.xinwen，即去掉h1。這種定義中不含標(biāo)簽名的類當(dāng)然也就不再局限于某一個(gè)標(biāo)簽了?？纯次覀冃薷闹蟮木W(wǎng)頁，“新聞的內(nèi)容”也應(yīng)用了xinwen類的樣式。

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

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

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

發(fā)表評(píng)論(共0條評(píng)論)

最新評(píng)論

點(diǎn)擊加載更多評(píng)論>>

版權(quán)聲明：

1 本站所有資源（含游戲）均是軟件作者、開發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產(chǎn)生的一切后果將由您自己承擔(dān)！

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無法下載等問題，請(qǐng)與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等，請(qǐng)立刻聯(lián)系我們并具體說明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784

熱門軟件

最近更新