首先看一下使用Css設置h1標簽字體顏色和大小的例子，效果圖如下：
新建一個網頁test.html,然后復制粘貼下面的內容：
<html>
<head>
<style type="text/css"> h1 {color:red; font-size:14px;} </style>
</head>
<body >
<h1>使用Css讓h1標簽字體變紅</h1>
</body>
</html>
在瀏覽器中打開test.html，效果如上圖。
改變標簽h1字體的是下面這句Css代碼：
h1 {color:red; font-size:14px;}
h1是選擇器，它代表了本頁面所有的h1標簽，大括號{}內是針對h1標簽進行的操作，比如color:red設置了h1標簽的字體為紅色；font-size:14px設置h1標簽字體大小為14像素。
Color是屬性，表示字體顏色，red是對應的值，這樣可以設置字體為紅色；color:red合起來的專業叫法是“聲明”，本質上就是一對屬性值，Css本質上也就是通過設置標簽的屬性值，來改變標簽的外在表現，這就叫樣式。
注意下面的幾個規則：
(1) 每一對屬性聲明都要放在大括號中，多對使用分號隔開；
(2) 屬性與值中間使用英文的冒號隔開，代碼中的標點符號基本都需要使用英文輸入法狀態下的，輸入中文下的標點符號會錯誤。
(3) CSS代碼中增加一些空格，不影響效果，比如為了增加可讀性，可以這樣寫：
h1
{
color:red;
font-size:14px;
}
(4) CSS對大小寫是不敏感的，比如H1和h1這兩個選擇符對CSS來說，選擇的都是<h1>標簽，不過如果使用id或class標識標簽，這時就要區分大小寫了，比如#Top和#top選擇的是不同id的標簽。
(5) 一條CSS規則可以包含多個聲明，比如h1 {color:red; font-size:14px;}就包括兩條聲明，最后一個聲明后的分號可以去掉，良好的編碼習慣是加上最后的分號；
(6) 多個選擇符可以組合起來。比如需要設置h1到h5標簽的字體都設置為紅色，14像素，那么可以這樣設置：
h1, h2, h3, h4, h5 {color:red; font-size:14px;}
這樣，h1到h5標簽的字體都是紅色，大小都是14像素，這對於需要相同樣式的標簽十分重要，比如可以把一些公共的部分寫到一塊。
只需要在h1標簽后面添加逗號，就可以添加多個選擇符，它們中間可以增加一些空格，增加可讀性。
(7) 一個選擇符可以設置多次樣式。比如要求h1到h5標簽的字體都為紅色，另外要求h1的字體加粗，那么可以這樣設置：
h1, h2, h3, h4, h5 {color:red; }
h1 { font-weight : bold; }
這是CSS編碼中十分重要的一個技巧，先把需要相同的樣式寫到一起，然后寫需要特殊處理的樣式，而且瀏覽器是按照從上到下的順序設置標簽樣式的，即便設置了相同的屬性值，下面的屬性值也會覆蓋上面的。
下面介紹一下CSS的3大選擇器。
1， 標簽選擇器
顧名思義，標簽選擇器就是直接把標簽的名字當做選擇器。
常用的標簽選擇符如下：
| 標簽名 |
CSS選擇器 |
備注 |
| body |
body |
body標簽選擇符 |
| h1,h2,h3,h4,h5,h6 |
h1,h2,h3,h4,h5,h6 |
標題h1到h6標簽選擇符 |
| table |
table |
表格table標簽選擇符 |
| td |
td |
單元格td標簽選擇符 |
| a |
a |
超鏈接a標簽選擇符 |
| img |
img |
圖像img標簽選擇符 |
| div |
div |
塊標簽div選擇符 |
| p |
p |
段落p標簽選擇符 |
| ul |
ul |
無序列表ul標簽選擇符 |
| li |
li |
列表項li標簽選擇符 |
使用的時候，直接寫標簽名稱就行，比如body。
當設置了某個標簽的樣式時，這個設置會對本頁面所有的相同標簽起作用。
2， ID選擇器
ID代表了唯一，就像身份證號一樣，每一個人的都不相同。頁面元素的ID也不能相同，一個ID在html中只能出現一次。
設置標簽的id，相當於把id和值當做一對屬性值，比如<p id=”p1”> 段落1 </p>，這就設置了段落標簽p的id為p1。
Id選擇符，直接使用 #id，把id替換為對應標簽的id值，就可以精確的選擇某個標簽。比如選擇剛才的p標簽：#p1 。
注意：
(1) 一個Html網頁中id只能出現一次；
(2) id是區分大小寫的，#p1和#P1代表的是不同的id選擇器，選擇的元素不同；
(3) id選擇器是最精准的選擇器，可以定位到某個具體的唯一元素。
3，Class類選擇器
Class類選擇器，代表了某一類相同的樣式，“物以類聚，人以群分“，比如可以把紅色字體定義為一類，所有需要設置紅色字體的標簽都加上這個類。
給標簽添加類，實際也是把類和類值當做一對屬性值添加到標簽中，比如<p class=””red”> 段落1 </p>，這就設置了這個段落的class為red。
class類選擇器，直接使用 .class，把class替換為對應的類值。這樣就可以為具有相同類的標簽應用相同的樣式了。比如：
.red { color : red; } 這設置了類red的標簽字體顏色為紅色。
注意：
(1) 多個標簽可以使用相同的類，相當於給它們設置了相同的樣式，比如：
<h1 class=””red”> 標題1 </h1>
<p class=””red”> 段落1 </p>
這樣可以把h1和p都設置為紅色字體。
(2) 一個標簽可以設置多個類，相同於講一個標簽設置了多種樣式，比如：
<p class=””red bold”> 段落1，紅色，加粗 </p>
定義粗體為一類樣式 .bold { font-weight : bold; } font-weight意思是字體重要性，bold就是加粗的意思。
這樣段落p會同時具有類red和類bold的樣式。
注意：多個類名中間使用空格間隔。
CSS選擇器的優先級
1， 標簽選擇器
對標簽p應用樣式，效果圖如下：
新建一個網頁a.html，復制粘貼下面的代碼：
<html> <head> <style type="text/css"> p { color:red;} </style> </head> <body > <p class="green" id="p1"> 這是一個段落，class="green"，id="p1"，設置p標簽為紅色 </p> </body> </html>
說明：
代碼中給p標簽添加了id和class，但是使用的是標簽選擇器p設置的樣式。
2， Class類選擇器
對類green應用樣式，效果圖如下：
修改a.html的代碼，修改后如下：
<html> <head> <style type="text/css"> .green { color:green;} p { color:red;} </style> </head> <body > <p class="green" id="p1"> 這是一個段落，class="green"，id="p1"，設置p標簽為紅色 </p> </body> </html>
說明：.green { color:green;} 為類green設置字體顏色為綠色。
從代碼中可以看到，.green的設置在先，p的設置在后，但是結果仍然顯示的為.green的樣式，這說明了類選擇器的優先級大於標簽選擇器。
結論：類選擇器優先級 > 標簽選擇器優先級
3， id選擇器
對id為p1的標簽應用樣式，效果圖如下：
修改a.html的代碼，修改后如下：
<html> <head> <style type="text/css"> #p1 { color:blue;} .green { color:green;} p { color:red;} </style> </head> <body > <p class="green" id="p1"> 這是一個段落，class="green"，id="p1"，設置p標簽為紅色 </p> </body> </html>
說明：#p1 { color: blue;} 把id為p1的元素字體顏色設置為藍色。
從代碼中可以看到，#p1在最前面，但是結果仍然顯示的為#p1的樣式，這說明了id選擇器具有最高優先權。
結論：id選擇器優先級 > 類選擇器優先級 > 標簽選擇器優先級