iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
自我挑戰組

學習HTML&CSS的30天系列 第 26

[Day26]設定「類別(class)」與「ID」

  • 分享至 

  • xImage
  •  

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


  • 類別與 ID 是什麼?

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216npzimdyGY0.png

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

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

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216VBtSAj6fDh.png
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216t849zxB1mU.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216uf1lmvUYJ0.png

  • 設定 ID 的寫法

    ID 的用法與類別相同。
    第一步是在 HTML 檔案內的標籤中撰寫「id = "id 名稱 "」,
    名稱可自訂。接著在 CSS 檔案中描述 ID 的內容,
    寫法是井字號「#(hash)」+「ID 名稱」,並加上大括號,在大括號內寫出要套用的樣式。
    請注意,HTML 檔案裡的 ID 屬性不需要加上「#」。
    此外,在同一個網頁內無法使用相同的 ID 名稱,可參考後面的說明。
  • 寫法範例
    下面的範例中,也要試著把 < p > 標籤文字變成灰色,並且更改部分文字的顏色。
    這次要建立的 ID 叫做「#orange」,請在 CSS 中設定該 ID 的內容,要把文字變成橘色。

    https://ithelp.ithome.com.tw/upload/images/20221012/201522163gjrPIidgQ.png
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216NYheJC8DpI.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216GfUuZOEIAu.png

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

    設定了「.類別名稱」或「#ID 名稱」時,不論使用哪種標籤,
    有設定這個類別或 ID 的部分全部都會套用該設計。
    不過在 CSS 中還有一種組合式的寫法,
    在標籤名稱後緊接著寫出類別名稱或 ID 名稱,如「標籤名稱.類別名稱」或「標籤名稱 #ID 名稱」
    這樣就只會套用在含有該類別或 ID 的特定標籤。
  • 寫法範例
    以下的範例中,先把 < h1 > 標籤與 < p > 標籤都套用「blue」類別,則兩者都會變色。

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216C5pcPvVQfr.png
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216xAEs0E8CLC.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216MZRtFzXxiS.png

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216UNLzqAsQBL.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216XTREK0vxoi.png

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

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

    - 不可以包含空格(space)
    - 可以使用英數字與連字號「-」、底線「_ 」描述
    - 第一個字一定是英文字母
    
    • 嚴格來說,即使有支援中文的類別名稱或 ID 名稱,
      在某些瀏覽器上也可能出現錯誤,因此建議統一使用英數字。
  • 替一個標籤加上多個 ID 或類別

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

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216Zh12YhazIY.png

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216cXH8HlHZKo.png

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

    看了前面的範例,可能會認為類別與 ID 似乎一樣,
    其實兩者有一個非常大的差別,一定要弄清楚他們差異。
  • 在同一個 HTML 檔案內可以使用的次數不同
    第一個差異,是在同一個 HTML 檔案內可使用的次數不同。
    ID 名稱在同一個網頁內只能使用一次,不能重複使用
    因此 ID 建議用在「不論哪一個網頁都不會改變的部分」,例如組成版面結構的區塊等。
    類別就沒有限制,可在同一個網頁內重複使用
    因此,如果是要在網頁內多次使用的樣式,例如按鈕樣式、小標題樣式,建議使用類別。

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216h8ENMn7YEF.png

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216G0kwoxqQj2.png

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

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216lBaStNyDCp.png

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

    https://ithelp.ithome.com.tw/upload/images/20221012/20152216N4Fc3PjLjA.png
    實際畫面
    https://ithelp.ithome.com.tw/upload/images/20221012/20152216MdqjbJkXTI.png


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

https://ithelp.ithome.com.tw/upload/images/20221012/20152216ftYGe4JJxX.png


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

那麼我是沒魚,這是我的第二十六天,距離完賽剩下四天!/images/emoticon/emoticon29.gif

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


上一篇
[Day25]設定元素的邊框&美化項目清單
下一篇
[Day27]活用 CSS 編排各種 Layout
系列文
學習HTML&CSS的30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言