Menu - Pages

網頁教學:將CSS樣式套用到不同的HTML標記

 

      利用HTML標記(如<h1>、<h2>或<font>等標記)做為選擇器(selector),再利用『連結外部樣式檔』與『內嵌宣告』之方式(詳細介紹請詳網頁教學:如何用套用CSS樣式表),就可以將HTML程式碼裡中之HTML標記都套用同一種樣式。但是如果希望樣式可以套用到不同之HTML標記,可以利用HTML標記(如<font>標記)的『class』屬性及『id』屬性來達到目的,即利用『.class屬性之設定值』或『#id屬性之設定值』來作為選擇器。【小提示:CSS樣式表係由選擇器(selector)與樣式規則(rules)所組成,示如圖1 ,詳細介紹請詳網頁教學:CSS之基本格式。】

CSS之基本格式

圖1  CSS樣式表係由選擇器(selector)與樣式規則(rules)所組成

一、以『.class屬性之設定值』為選擇器

    1. 首先要在HTML標記裡加入『class』屬性。在此以<font>標記來說明,其輸入語法如下:
                           <font class="test1">
      【小提示:『class』屬性之設定值是我們自己命名的,盡量不要使用HTML標記名稱作為『class』屬性之設定值,以免混淆。】
    2. 接著只要在CSS樣式表裡加入以『.class屬性之設定值』為選擇器之樣式規則。其輸入語法如下:
                           .test1{font-size:16px; color:#FFFFFF; font-weight:bold; }

 以『.class屬性之設定值』為選擇器

圖2  以『.class屬性之設定值』為選擇器

以『.class屬性之設定值』為選擇器2

圖3  以圖2內容所製作之網頁內容(以瀏覽器執行之結果)

二、以『.id屬性之設定值』為選擇器

  1. 首先要在HTML標記裡加入『id』屬性。在此以<font>標記來說明,其輸入語法如下:
                         <font id="test2">
    【小提示:『id』屬性之設定值是我們自己命名的,盡量不要使用HTML標記名稱作為『id』屬性之設定值,以免混淆。】
  2. 接著只要在CSS樣式表裡加入以『#id屬性之設定值』為選擇器之樣式規則。其輸入語法如下:
                         #test2{font-size:16px; color:#FFFFFF; font-weight:bold; }

三、只在指定之HTML標記上套用CSS樣式表

      當你設定了利用『.class屬性之設定值』或『#id屬性之設定值』來作為選擇器之CSS樣式,只要在欲套用之HTML標記中加入『class』屬性及『id』屬性,即可套用CSS樣式。如果你只希望在指定之HTML標記上套用CSS樣式,可以在『.class屬性之設定值』或『#id屬性之設定值』前加上指定之HTML標記名稱。其輸入語法如下所示:
                          font.class屬性之設定值{font-size:16px; color:#FFFFFF; font-weight:bold;}
                          font.test1{font-size:16px; color:#FFFFFF; font-weight:bold;}
                       及font#test2{font-size:16px; color:#FFFFFF; font-weight:bold;}