■CSS Class 與 CSS ID

在 CSS 語法那一頁中, 我們有提到,Class 及 ID 都是使用者設定的選擇器 (selector)。以下分別介紹:

 

◎Class

Class 的宣告法,是先放一個句點 (.),之後再列出選擇器名稱。

設定一個 Class 選擇器的語法如下:

.【Class 名稱】{
  屬性:設定值;
  ...
}

舉例來說:

.navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內,我們用以下的 HTML 碼:

<p class="navbar">這是用 Class 選擇器的例子。</p>

以上的 HTML 碼會顯現出:

這是用 Class 選擇器的例子。

一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。這是靠以下的語法:

【型類選擇器】.【選擇器名稱】{
  屬性:設定值;
  ...
}

舉例來說,若有以下的 CSS 宣告:

b.special {
  color:#0000FF;
}

i.special {
  color:#FF0000;
}

以下的 HTML 碼:

這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>.

就位顯現出:

這個例子顯示出同一個選擇器可以有不同的 instance。.

 

◎多重 Class

我們也可以同時套用數個 class。舉例來說,若我們有以下的 CSS 宣告:

.applylarge {
  font-size:20px;
}

.applyred {
  color:#FF0000;
}

那以下的 HTML 碼:

<p class="applylarge applyred">這是多重 Class 的例子。</p>

就會顯現出:

這是多重 Class 的例子。

 

◎ID

ID 的宣告法,是先放一個井字號 (#),之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下:

#【ID 名稱】{
  屬性:設定值;
  ...
}

舉例來說:

#footer {
color:#FF00FF;
}

要將以上的樣式套用在 HTML 內,我們用以下的 HTML 碼:

<p id="footer">這是用 ID 選擇器的例子。</p>

顯現出的結果為,:

 

◎Class 跟 ID 的比較

這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。

第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

並沒有什麼固定的規則,來決定什麼時候要用 ID 及什麼時候要用 Class。

我們的建議是盡量用 Class,因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。

唯一的例外,是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下,你就應該要用 ID。

Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說,.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。

 

 

■ CSS Div 與 CSS Span

◎Div

Div 這個標籤目的是將內容分為不同的區域,而每一個區域可以根據 CSS 中的宣告而有自己的樣式。

Div 是一個區塊級容器 (block-level container),這代表在 </div> 標籤後會換行。

舉例來說,如果我們有以下的 CSS 樣式:

.large {
color: #00FF00;
font-family: arial;
font-size: 14pt;
}

以下的 HTML 碼:

<div class="large">
這是 DIV 範例。
</div>

就會顯現為:

這是 DIV 範例。

 

◎Span

Span 跟 Div 類似的地方是,這兩個標籤的目的都是將內容分為不同的區域。

不同的是,Span 可以涵蓋更細層的元素。

所以,我們甚至可以用 <span> 來調整單一文字的樣式。

另外,在 </span> 之後並不會換行。

舉例來說,如果我們有以下的 CSS 樣式:

.largefont {
color: #0066FF;
font-family: arial;
font-size: 16px;
}

以下的 HTML 碼:

Span 不是<span class="largefont">區塊級的</span>.

就會顯現為:

Span 不是區塊級的.