目前為止已經認識許多常用的 HTML 標籤和 CSS 樣式，接著要學習進階的設定技巧，
例如想同時改變多個標籤的樣式時，該怎麼寫呢？
這時候就需要活用「類別(class)」與「ID(id)」。
類別(class) 與 ID(id) 都是可套用到標籤上的屬性。
設定 ID 就像幫標籤取一個「專屬的名字」，只能用一次；
而類別(class) 就像是幫標籤貼上一個「分類」，可以重複使用。
之後只要修改 ID 或類別的 CSS，有套用過的標籤都會同步修改，非常方便。
首先練習設定類別(class)，請注意在 HTML 和 CSS 兩邊都要設定。
第一步是在 HTML 檔案內的標籤中撰寫「class = " 類別名稱 "」，
類別名稱可以自訂。接著請在 CSS 檔案中描述類別的內容，
寫法是句點「.」+「類別名稱」，並加上大括號，在大括號內寫出要套用的樣式。
請注意，寫在 HTML 檔案裡的 class 不需要加上句點「.」。
寫法範例
例如想把網頁裡所有 < p > 標籤的文字顏色都變成灰色，
但「其中一部分的文字要變成藍色」時，
就可以建立一個「.blue」類別，套用在想改成藍色的文字。
實際畫面
id = "id 名稱 "」，井字號「#(hash)」+「ID 名稱」，並加上大括號，在大括號內寫出要套用的樣式。在同一個網頁內無法使用相同的 ID 名稱，可參考後面的說明。寫法範例
下面的範例中，也要試著把 < p > 標籤文字變成灰色，並且更改部分文字的顏色。
這次要建立的 ID 叫做「#orange」，請在 CSS 中設定該 ID 的內容，要把文字變成橘色。
實際畫面
在標籤名稱後緊接著寫出類別名稱或 ID 名稱，如「標籤名稱.類別名稱」或「標籤名稱 #ID 名稱」，寫法範例
以下的範例中，先把 < h1 > 標籤與 < p > 標籤都套用「blue」類別，則兩者都會變色。
實際畫面
接下來試著同時設定「標籤名稱＋類別」。
HTML 不用改，請在 CSS 檔案中把設定「.blue」的部分改成「p.blue」。
實際畫面
前面提到類別名稱與 ID 名稱都是可以自訂的，但是有幾個命名規則要遵守。
請注意，如果沒有遵守這些規則來命名，就會無法套用 CSS 的效果。
- 不可以包含空格(space)
- 可以使用英數字與連字號「-」、底線「_ 」描述
- 第一個字一定是英文字母
有時也會針對同一個標籤加上多個類別或 ID。
此時請在描述類別名稱或 ID 名稱的雙引號「"」內，使用半形空格隔開。
寫法範例
下圖的範例是在 < p > 標籤裡面描述了「blue」、「text-center」、「small」等三個類別，
全部寫在雙引號「"」內。
此外，也可以把 ID 與類別描述在同一個標籤內。
如下圖是在 < div > 標籤內同時描述 ID「main」與類別「center」。
在同一個 HTML 檔案內可以使用的次數不同
第一個差異，是在同一個 HTML 檔案內可使用的次數不同。ID 名稱在同一個網頁內只能使用一次，不能重複使用。
因此 ID 建議用在「不論哪一個網頁都不會改變的部分」，例如組成版面結構的區塊等。
而類別就沒有限制，可在同一個網頁內重複使用。
因此，如果是要在網頁內多次使用的樣式，例如按鈕樣式、小標題樣式，建議使用類別。
舉例來說，假如描述了 < h1 id="heading" >，
之後在同一個 HTML 檔案裡都無法再使用「heading」這個 ID 了。
假如改用類別，寫成 < h1 class="heading" > ，
就能反覆使用「heading」類別，可以再讓其他標籤套用，
例如再寫 < h2 class="heading" > 或是 < p class="heading" > 都沒問題。
CSS 的優先順序不同
另一個差異是 CSS 的優先順序。
假設在同一個標籤內，同時使用了類別與 ID 設定不同顏色。在執行時會以 ID 設定的樣式為優先。
寫法範例
試著在 < p > 標籤上同時套用「#blue」這個 ID 與「.orange」這個類別。
接著在 CSS 中分別將 ID 與類別設定不同顏色，則文字會變成什麼顏色呢？
由於是以 ID 為優先，所以文字會顯示成「#blue」這個 ID 所設定的藍色。
實際畫面
那今天的內容就是在學習如何設定類別與 ID，
希望這些可以帶來幫助～
那麼我是沒魚，這是我的第二十六天，距離完賽剩下四天！
<上一篇> [Day25]設定元素的邊框＆美化項目清單
<下一篇> [Day27]活用 CSS 編排各種 Layout
看影片追技術