這些天爲了做一個網站，所以順便學習了一下CSS，不能算是很專業的學習CSS，主要是爲了更好的完善這些個界面而學習，寫這篇博客是爲了讓大家和我一起來學習做網站，體會做網站的樂趣，達到輕鬆學習的目的。
CSS特點：實現一個網頁內容與樣式的分離。這是CSS非常有優勢的一個特點，省去了我們很多的麻煩。我們來做一個簡單的例子來看一下這個效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
創建人：陳宗毅
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS測試</title>
</head>
<body>
<font color=“#0000ff”>欄目一</font>
<font color=“#0000ff”>欄目二</font>
<font color=“#0000ff”>欄目三</font>
</body>
</html>沒有CSS之前，我們是這樣要是把這個顏色改爲別的顏色，那麼只能一個個顏色值的改，這個工作量很恐怖的。
之後我們使用CSS來進行優化，我們先來使用CSS選擇器：
類選擇器：這就是我們在HTML中查找類所設置的一個值。
我們使用span標籤+類標誌，我們把body裏邊的內容改成這樣：
<body>
<span class="menu">欄目一</span>
<span class="menu">欄目二</span>
<span class="menu">欄目三</span>
</body>然後我們來創建我們的樣式文件：
.menu{ /* 欄目樣式*/
color:#f00; /* 文字顏色 */
}就這麼一句話我們就搞定了之前的顏色設置，想改顏色只要打開這個樣式文件，然後進行更改就行了。避免了很多的麻煩，然後我們再進行樣式文件與這個內容的關聯，很簡單，我們只要拉進來就ok了，拉到這個地方：
<head>
<title>CSS測試文件</title>
<link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>這就產生了一個關聯。樣式裏邊就一個屬性，一個冒號，一個屬性值構成的。當我們不知道有什麼屬性值的時候，我們按一下空格，VS就會羅列出所有的屬性值，這樣我們就能選擇我們需要的屬性值了。
ID選擇器：
id一般來說都是唯一的，我們來看一下操作：
<body>
<span id="special" class="menu">欄目一</span>
<span class="menu">欄目二</span>
<span class="menu">欄目三</span>
</body>然後我們在樣式文件中，我們這樣：
#special
{
font-weight :bold ; /* 粗體 */
}
我們得到了兩種效果的混合了。看看效果：
然而，當id選擇器和類選擇器的樣式起衝突的時候，就這涉及到了一個優先級的問題了，在這裏我就直接把優先級說一下，ID選擇器>類選擇器。
HTML標籤選擇器：
設置的是一個更大範圍的，只要是這個標籤裏邊的，就會應用這個樣式，那麼我們這段代碼裏邊，有一個body，我們在樣式中的body裏邊寫入一個顏色值：
body
{
color :#f0f;
}
那麼我們的HTMLPage裏邊的body中的：
<body>
<span id="special" class="menu">欄目一</span>
<span class="menu">欄目二</span>
<span class="menu">欄目三</span>
123456
</body>那麼這個123456就會變色。效果：
我們也很容易的看的出來，欄目一 欄目二 欄目三 沒有變色，這是爲什麼呢？很明顯，這涉及到了一個優先級的問題了，ID優先級>類選擇器>HTML標籤選擇器。
再說一個內容，就是一個父子關係的，我們在HTMLPage裏邊這樣寫:
<body>
<span id="special" class="menu">欄目一</span>
<span class="menu">欄目二</span>
<span class="menu">欄目三</span>
<span class="title">這是<span>一</span>條新聞標題</span>
123456
</body>然後我們在樣式文件中這樣：
.title span
{
color:#000;
font-size :12px; /* 字體大小 */
}記得title與span之間的空格，然後這個效果就是：
我們就能看的出來，這個“一”是明顯的變了。
還有一個內容，並列的寫法：我們在樣式中這樣寫：
.menu, .title
{
background-color :#ee00ff;
}menu和title之間我們用逗號隔開，就能達到目的，我們看看效果：
我們接下來講最後一個內容，就是class這個類是可以設置爲多個的，那麼我們看一下是什麼個情況，我們在HTMLPage裏邊寫：
<body>
<span id="special" class="menu">欄目一</span>
<span class="menu niu">欄目二</span>
<span class="menu">欄目三</span>
<span class="title">這是<span>一</span>條新聞標題</span>
123456
</body>然後我們在樣式裏邊這麼寫：
.niu
{
text-decoration :underline;
color :#eeeedd;
}
.menu{ /* 欄目樣式*/
color:#f00; /* 文字顏色 */
}
我們就能看到欄目二
已經與niu一樣，加了下劃線了，這就出現了一個問題，這個時候的顏色應該是menu的還是niu的呢？我們一看就知道是menu的，這與CSS的樣式排列前後順序有關。與後面的對應起來。
今天關於CSS我們就先講這些入門的，希望對初學者有所幫助，後面繼續完善博客。
