[CSS教學]CSS 如何使用? . 和 # 分別用在哪裡?

前幾篇我們知道了網頁三元素有 HTMLCSSJS ,那現在我們來介紹 CSS 如何使用吧!

CSS 的使用上其實有很多種方式,每種方式之間也存在著權重不同的關係,我們這邊先學習如何使用它,透過 CSS 讓 HTML 網頁內容樣式改變,未來再慢慢了解它們之間權重的關係。

那我們開始吧!

CSS 下在 id 或 class

CSS 的樣式內容可以下在 id 上、下在 class 上,甚至可以直接下在標籤上,或透過中括號[ ] 的方式,下在有特定屬性的標籤上。這邊我們先介紹單純下在 id 上和下在 class 上的狀況。

如果我們要下在 id 的標籤上,我們就用 #[id名稱] 來表示,範例如下:

#id-name{
    /* 樣式內容設定 */
}

如果是要下在 class 上,我們就用 .[class名稱] 來表示,範例如下:

.class-name{
    /* 樣式內容設定 */
}

以下我們實際用例子來看更清楚。

CSS 如何使用 – 實作語法範例

我們用以下範例來舉例:

<div id="title">
    <h2>獺上程式之路 - 網頁設計教學</h2>
</div>
<div class="newclass">
    <h3>一起無痛學程式!</h3>
</div>

呈現出來的樣子會是如下圖:

CSS 如何使用
原始樣式

這時,我們如果要把【獺上程式之路 – 網頁設計教學】這塊用成紅色文字;【一起無痛學程式!】這塊用成黃色背景,我們可以怎麼透過 CSS 進行設定呢?

我們可以這樣寫:

#title{
    color:red;
}

.newclass{
    background-color:yellow;
}

我們使用了 #title 也就是用 # 後面接 id 名稱,來達到控制有這個 id 屬性的標籤樣式;
也使用了 .newclass . 後面接 class 名稱,來控制有這個 class 屬性的標籤樣式。

完成後,我們就可以看到成功修改的狀態如下:

修改後樣式
修改後樣式

直接下在標籤(tag)上

我們甚至可以直接用標籤來下 CSS,舉例來說我們先還原到原本的樣式,並把兩段文字的標籤都改成 <h2> 標籤,如下圖:

<div id="title">
    <h2>獺上程式之路 - 網頁設計教學</h2>
</div>
<div class="newclass">
    <h2>一起無痛學程式!</h2>
</div>

呈現樣式如下:

皆改成 h2 標籤
皆改成 h2 標籤

然後我們可以在 CSS 只用標籤名稱,並將文字改為藍色,撰寫以下內容:

h2{
    color:blue;
}

直接把樣式下在標籤的時候,前面不用加任何符號,就能把所有相同標籤的內容,變成相同樣式。完成的樣式如下圖:

修改後樣式
修改後樣式

建議 99.9% 的 CSS 要下在 class 上

雖然我們提到了, CSS 要將樣式下在 id 上或 class 上都是可行的,但是為什麼建議絕大部分的樣式要下在 class 上呢?

因為 id 其實有它的 2 大特性:

  1. 唯一性
  2. 變動性

1. 唯一性

首先,id 在同一個網頁頁面時,必定只能出現一次,不可重複!

不過我們 CSS 樣式的設定,其中一個重點就是為了可以讓樣式重複使用,例如按鈕的樣式,同一張網頁可能有很多顆按鈕,如果用 id 來設定樣式,而 id 又不可重複,這樣會造成每顆按鈕還是要重新設定樣式, CSS 樣式的設定就失去重複使用的意義。

2. 變動性

id 的設定不一定全部都是由工程師依照特定規則制定的!像我們在維護前人的網站時,我們沒辦法判斷這些 id 究竟是人工制定的,還是由某些框架為了唯一性而亂數產生的。

如果是亂數產生的 id,我們又把樣式下在 id 上,那麼只要重新整理頁面,或用不同人的瀏覽器開啟,id 就會換成另一個亂數的 id,這樣 CSS 樣式就找不到 id,造成樣式無法呈現。

因此無論如何,盡可能把樣式下在 class 上,除非真的遇到某些特殊狀況你下不到 class,且確定 id 是由你自己人工加上去的,那麼再姑且嘗試看看下在 id 上吧!

總結

以上就是我們用 CSS 下在標籤上、id 上、class 上的用法,並說明了為什麼要把 CSS 樣式盡可能下 class 上,不僅因為是可重複使用超方便,還能避免因為 id 的變動性而讓程式沒辦法吃到樣式喔!


延伸閱讀:


獺斯特
獺斯特
哈囉!我是獺斯特,擔任前端工程師。希望可以用最簡單的教學方式,教你架設網站、程式設計、網路行銷知識,跟著我一起獺入網路世界吧!

歡迎追蹤獺斯特粉專!

點選下方按鈕追蹤獺斯特 IG,獲得更多架設網站、網路行銷相關知識:

分享這篇文章

2 則留言

發佈留言