Dreamweaver 教程-class和id標簽的用法

2022-05-05發(fā)布者：ylm大?。?/span> 下載：0

文件大小:

軟件介紹

下圖是沒有加入CSS時的頁面：

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

源代碼如下，大家可以將以下代碼復制到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>我是頁面最上端的標題1</h1>
        <h1>我是頁面左側(cè)的標題1，用來導航</h1>
        <h1>我是頁面右側(cè)新聞的標題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">我是頁面最上端的標題1</h1>
   <h1 id="daohang">我是頁面左側(cè)的標題1，用來導航</h1>
   <h1 class="xinwen">我是頁面新聞的標題1</h1>
   <p class="xinwen">我是新聞的內(nèi)容。</p>
        </body>
        </html>

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

指定標簽的class和id

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

class的定義方法：指定標簽.類名 {樣式}

id的定義方法：指定標簽#id名 {樣式}

（2）然后我們在想要應用類的標簽上加上class(類)或者id屬性：

class的應用方法：<指定標簽 class="類名">

id的應用方法：<指定標簽 id="id名">

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

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

不指定標簽的類或id

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

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

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

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

發(fā)表評論(共0條評論)

版權聲明：

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

2 本站將不對任何資源負法律責任，所有資源請在下載后24小時內(nèi)刪除。

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

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

熱門軟件

最近更新