目前為止已經認識許多常用的 HTML 標籤和 CSS 樣式，接著要學習進階的設定技巧，
例如想同時改變多個標籤的樣式時，該怎麼寫呢？
這時候就需要活用「類別(class)」與「ID(id)」。

• 類別與 ID 是什麼？

  類別(class) 與 ID(id) 都是可套用到標籤上的屬性。
  設定 ID 就像幫標籤取一個「專屬的名字」，只能用一次；
  而類別(class) 就像是幫標籤貼上一個「分類」，可以重複使用。
  之後只要修改 ID 或類別的 CSS，有套用過的標籤都會同步修改，非常方便。

  

  • 替主視覺套用 ID「main-image」，並替所有按鈕指定「button」類別。
    設定後，修改 ID 的設定就可以變更主視覺；若修改「button」的樣式就可以變更所有套用「button」類別的按鈕。

• 設定類別的寫法

  首先練習設定類別(class)，請注意在 HTML 和 CSS 兩邊都要設定。
  第一步是在 HTML 檔案內的標籤中撰寫「class = " 類別名稱 "」，
  類別名稱可以自訂。接著請在 CSS 檔案中描述類別的內容，
  寫法是句點「.」+「類別名稱」，並加上大括號，在大括號內寫出要套用的樣式。
  請注意，寫在 HTML 檔案裡的 class 不需要加上句點「.」。

• 寫法範例
  例如想把網頁裡所有 < p > 標籤的文字顏色都變成灰色，
  但「其中一部分的文字要變成藍色」時，
  就可以建立一個「.blue」類別，套用在想改成藍色的文字。

  
  
  實際畫面
  

• 設定 ID 的寫法

  ID 的用法與類別相同。
  第一步是在 HTML 檔案內的標籤中撰寫「id = "id 名稱 "」，
  名稱可自訂。接著在 CSS 檔案中描述 ID 的內容，
  寫法是井字號「#(hash)」+「ID 名稱」，並加上大括號，在大括號內寫出要套用的樣式。
  請注意，HTML 檔案裡的 ID 屬性不需要加上「#」。
  此外，在同一個網頁內無法使用相同的 ID 名稱，可參考後面的說明。

• 寫法範例
  下面的範例中，也要試著把 < p > 標籤文字變成灰色，並且更改部分文字的顏色。
  這次要建立的 ID 叫做「#orange」，請在 CSS 中設定該 ID 的內容，要把文字變成橘色。

  
  
  實際畫面
  

• 以組合方式設定「標籤名稱與類別」或「標籤名稱與 ID」

  設定了「.類別名稱」或「#ID 名稱」時，不論使用哪種標籤，
  有設定這個類別或 ID 的部分全部都會套用該設計。
  不過在 CSS 中還有一種組合式的寫法，
  是在標籤名稱後緊接著寫出類別名稱或 ID 名稱，如「標籤名稱.類別名稱」或「標籤名稱 #ID 名稱」，
  這樣就只會套用在含有該類別或 ID 的特定標籤。

• 寫法範例
  以下的範例中，先把 < h1 > 標籤與 < p > 標籤都套用「blue」類別，則兩者都會變色。

  
  
  實際畫面
  

  接下來試著同時設定「標籤名稱＋類別」。
  HTML 不用改，請在 CSS 檔案中把設定「.blue」的部分改成「p.blue」。

  
  實際畫面
  

• 類別名稱與 ID 名稱的命名規則

  前面提到類別名稱與 ID 名稱都是可以自訂的，但是有幾個命名規則要遵守。
  請注意，如果沒有遵守這些規則來命名，就會無法套用 CSS 的效果。

  - 不可以包含空格(space)
  - 可以使用英數字與連字號「-」、底線「_ 」描述
  - 第一個字一定是英文字母
  

  • 嚴格來說，即使有支援中文的類別名稱或 ID 名稱，
    在某些瀏覽器上也可能出現錯誤，因此建議統一使用英數字。

• 替一個標籤加上多個 ID 或類別

  有時也會針對同一個標籤加上多個類別或 ID。
  此時請在描述類別名稱或 ID 名稱的雙引號「"」內，使用半形空格隔開。

• 寫法範例
  下圖的範例是在 < p > 標籤裡面描述了「blue」、「text-center」、「small」等三個類別，
  全部寫在雙引號「"」內。

  

  此外，也可以把 ID 與類別描述在同一個標籤內。
  如下圖是在 < div > 標籤內同時描述 ID「main」與類別「center」。

  

• 設定類別與設定 ID 的差異

  看了前面的範例，可能會認為類別與 ID 似乎一樣，
  其實兩者有一個非常大的差別，一定要弄清楚他們差異。

• 在同一個 HTML 檔案內可以使用的次數不同
  第一個差異，是在同一個 HTML 檔案內可使用的次數不同。
  ID 名稱在同一個網頁內只能使用一次，不能重複使用。
  因此 ID 建議用在「不論哪一個網頁都不會改變的部分」，例如組成版面結構的區塊等。
  而類別就沒有限制，可在同一個網頁內重複使用。
  因此，如果是要在網頁內多次使用的樣式，例如按鈕樣式、小標題樣式，建議使用類別。

  舉例來說，假如描述了 < h1 id="heading" >，
  之後在同一個 HTML 檔案裡都無法再使用「heading」這個 ID 了。
  假如改用類別，寫成 < h1 class="heading" > ，
  就能反覆使用「heading」類別，可以再讓其他標籤套用，
  例如再寫 < h2 class="heading" > 或是 < p class="heading" > 都沒問題。

  

  • 在網頁內，ID 只能使用一次。

  

  • 在網頁內，類別可以重複使用多次。

• CSS 的優先順序不同
  另一個差異是 CSS 的優先順序。
  假設在同一個標籤內，同時使用了類別與 ID 設定不同顏色。
  在執行時會以 ID 設定的樣式為優先。

• 寫法範例
  試著在 < p > 標籤上同時套用「#blue」這個 ID 與「.orange」這個類別。

  

  接著在 CSS 中分別將 ID 與類別設定不同顏色，則文字會變成什麼顏色呢？
  由於是以 ID 為優先，所以文字會顯示成「#blue」這個 ID 所設定的藍色。

  
  實際畫面
  

• 小小知識：使用 ID 可以在網頁內建立連結
  ID 屬性還有一個功能，就是能在同一個網頁內建立連結。
  例如可以在 HTML 網頁中使用建立連結的 < a > 標籤，設定前往「#contents」的連結。
  之後在瀏覽網頁時，只要按下有設定連結的地方，就可以跳至網頁內含「contents」ID 屬性的元素。

那今天的內容就是在學習如何設定類別與 ID，
希望這些可以帶來幫助～

那麼我是沒魚，這是我的第二十六天，距離完賽剩下四天！

<上一篇> [Day25]設定元素的邊框＆美化項目清單
<下一篇> [Day27]活用 CSS 編排各種 Layout