CSS基礎知識－ID/Class/Div/Span/Selector

1) . 號 和 # 號

在CSS文件中，我們常常可以看到一些符號，最常見的就是 . 號 和 # 號，那麼它們分別代表什麼意思呢？

#號：標誌網頁上的ID,顧名思義，一個ID標誌唯一的一個值，我們在資料庫中也是如此，因此，ID必須是唯一的。

.號： 標誌網頁上的一個Class(類)，當然啦，這個Class和我們OOP中的Class不一樣，請不要搞混。

 

那麼，# 和 . 的區別到底是什麼呢？

最重要的如下：

一個ID名只能應用於頁面上的一個元素，而同一個類名可以應用於網頁上任意數量的元素。

 

 我們知道，我們可以在Class中新增字型，顏色和其他，然後在網頁中，只要class=”XXX”就可以應用該類的樣式。

於是，CSS新手們常常在幾乎所有的東東上新增類，這樣做是不好的，我們可以稱它為“多類症”，在某種程度上，

這和使用表格佈局一樣糟糕！

 

2) Div和Span

div就是division,代表網頁中的一個部分，我們通常將主要內容包圍在div中並分配ID，這樣可以做到在網頁中新增結構。

span代表一個行，我們可以用它來對行內元素進行分組，你可以把它想成是ASP.NET中的label控制元件。

它們的區別：

div會自動換行，而span不會。

有的網頁新手在頁面中任意應用div,這在有時候是完全沒有必要的。比如下面一個例子：

<div id=”mainNav”>

<ul>
 <li><a href=”#”>Home</li>
 <li><a href=”#”>News</li>
 <li><a href=”#”>Contact</li>
</ul>

</div>

 以上這段程式碼是完全沒有必要的，列表本來就是頂級元素，因此完全可以在列表上應用ID,如下：

<ul id=”mainNav”>
 <li><a href=”#”>Home</li>
 <li><a href=”#”>News</li>
 <li><a href=”#”>Contact</li>
</ul>

 

3）常用的Selectors(選擇器)

 a) 型別選擇器

      － 用來尋找特定型別的元素，比如段落(p)，連結(a)，或者標題(h1)，包括body等等。

      eg:

      p { color: black; }

      a { text-decoration: underline; }

      h1 { font-weight: bold; }

 

b) 後代選擇器

      － 用來尋找特定元素或者元素組的後代，它由兩個選擇器之間的空格表示。

      eg:

      li a { text-decoration: none; }

      在上面的例子中，只有在列表項的連結元素上才會應用樣式，而段落中的連結則不受影響。

 

c) ID和類選擇器

      我們在上面已經講過，id對應＃，class對應.