CSS Class 與 CSS ID / CSS Div 與 Span

CSS Class 與 CSS ID / CSS Div 與 Span

<p class="aaa">這是 Class 選擇器的範例。</p>

<p class="aaa bbb ccc">多重 Class 的範例。</p>

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

.aaa {

color:#FF00FF;
}
.bbb{
font-size:20px;
}
.ccc {
font-weight: bold;
}

 


(id)

<p id="aaar">用 ID 選擇器的範例。</p>

ID 的宣告法,是先放一個井字號 (#),之後再列出選擇器名稱。
#footer {
color:#FF00FF;
}


這兩者的不同,是在於 ID 在一個 HTML 文件中只能被使用一次,而 Class 在一個 HTML 文件中可以被使用多次。
第二個不同的地方,是 ID 可以被 Javascript 中的 GetElementByID 函數所運用,而 Class無法被 Javascript 運用到。

 

( div )

Div 是將內容分為不同的區域,而每一個區域可以 CSS 的宣告而有自己的樣式。在 </div> 標籤後會換行。
<div> 可以包覆<span>

 

( span )

我們可以用 <span> 來調整單一文字的樣式。在 </span> 之後並不會換行。
<span>無法包覆<div>