由于css的內(nèi)容偏多，所以筆者分開幾個(gè)章節(jié)來總結(jié)，今天的第一個(gè)章節(jié)主要是總結(jié)css的基本定義，使用方法，和選擇器介紹。
1.css的定義
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML元素在瀏覽器內(nèi)的顯示樣式，如大小，字體，背景，邊框等等。如：
p{
font-size:12px;
color:red;
font-weight:bold;
}
//定義了p標(biāo)簽的字體大小為12像素，字體的顏色是紅色，字體的粗細(xì)是加粗
2.CSS代碼語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
- 選擇符：又叫做選擇器，主要是指明哪些標(biāo)簽會(huì)應(yīng)用聲明中的樣式。如上圖的選擇符為“p”，則說明頁面內(nèi)的所有p標(biāo)簽都會(huì)應(yīng)用這個(gè)樣式。選擇符有多鐘，例如標(biāo)簽選擇符，類選擇符，id選擇符，子選擇符，后代選擇符...上面的“p”就是標(biāo)簽選擇符。
- 聲明：在英文"{ }"中的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔，如下所示：
p{font-size:12px;color:red;}
- 注釋：css注釋的添加方式和html的一樣如下所示：
/*這里是注釋*/
3.怎么應(yīng)用CSS
將CSS應(yīng)用的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。
-
內(nèi)嵌式：
內(nèi)嵌式，顧名思義，就是直接將css樣式寫在html標(biāo)簽里面。因?yàn)橹苯訉懺诹艘揎椀臉?biāo)簽里面了，所以不需要所謂的選擇符，也不需要上面2中所說的“{}”包裹，直接在標(biāo)簽的style屬性里面寫樣式和對(duì)應(yīng)的值即可，其他的不變。如：
<p style="color:red">這里文字是紅色。</p>
-
嵌入式：
嵌入式css樣式，就是可以把css樣式代碼寫在html文件的<style type="text/css"></style>標(biāo)簽之間，這個(gè)時(shí)候就需要2中所說的選擇符和“{}”了，具體如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這里是標(biāo)題</title>
/*這里是嵌入式css樣式表*/
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<span>這里的字體是紅色的</span>
<span>這里的字體是紅色的</span>
<span>這里的字體是紅色的</span>
</body>
</html>
(1)嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。
-
外部式：
外部式顧名思義就是將所以的css樣式寫外一個(gè)后綴名為css的外部文件(***.css)中,然后通過<link>標(biāo)簽鏈接到html文件內(nèi)。如下面代碼：
/*這個(gè)是html文件*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這里是標(biāo)題</title>
/*通過這條語句將外部樣式表引入*/
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span>這里的字體是紅色的</span>
<span>這里的字體是紅色的</span>
<span>這里的字體是紅色的</span>
</body>
</html>
/*這個(gè)是css文件*/
span{
color:red;
}
(1)css樣式文件名稱以有意義的英文字母命名，如 main.css；通過<link>標(biāo)簽的href屬性對(duì)應(yīng)你要引進(jìn)的css文件的地址來鏈接。
(2)rel="stylesheet" type="text/css" 是固定寫法不可修改。
(3)<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
注：這三種樣式是有優(yōu)先級(jí)的，記住他們的優(yōu)先級(jí)：內(nèi)聯(lián)式 > 嵌入式 > 外部式，就是當(dāng)我們同時(shí)使用三中方式的樣式去修飾一個(gè)html文件的時(shí)候，就會(huì)按照上面的優(yōu)先級(jí)去執(zhí)行。
4.選擇器
我們?cè)趯憳邮降臅r(shí)候，通常會(huì)遇到一個(gè)問題，我們需要確定哪一個(gè)，或者哪一類標(biāo)簽使用某一個(gè)樣式。而選擇器就是為了滿足這種需求。所以，選擇器就是為了選擇頁面內(nèi)的特定的標(biāo)簽，讓其執(zhí)行想要的樣式。
-
標(biāo)簽選擇器
標(biāo)簽選擇器其實(shí)就是通過標(biāo)簽名來選擇html代碼中的標(biāo)簽。如p標(biāo)簽，img標(biāo)簽，body標(biāo)簽。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號(hào)，行間距設(shè)置1.6em的樣式。
-
類選擇器
通過class屬性來選擇html代碼中的標(biāo)簽。步驟如下：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：
<span>我是標(biāo)簽</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：
<span class=“aaa”>我是標(biāo)簽（加了類名aaa）</span>
第三步：設(shè)置類選器css樣式，格式是：.類名{屬性:值}，如下：
.aaa {font-size:12px;line-height:1.6em;}
/*前面有個(gè)點(diǎn)??！*/
(1)英文圓點(diǎn)開頭
(2)其中類選器名稱可以任意起名（但不要起中文噢）
-
ID選擇器
通過id屬性來選擇html代碼中的標(biāo)簽,這個(gè)選擇器和類選擇器有點(diǎn)相似。步驟如下：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：
<span>我是標(biāo)簽</span>
第二步：使用id="id選擇器名稱"為標(biāo)簽設(shè)置一個(gè)id，如下：
<span id=“bbb”>我是標(biāo)簽（加了id名bbb）</span>
第三步：設(shè)置id選器css樣式，格式是：#id名{屬性:值}，如下：
#bbb{font-size:12px;line-height:1.6em;}
(1)為標(biāo)簽設(shè)置id="ID名稱"
(2)ID選擇符的前面是井號(hào)（#）號(hào)
注* id選擇器和類選擇器看起來非常像，用法也好像差不多，但是兩者有個(gè)很根本的區(qū)別：id選擇器不可以重復(fù)，class類選擇器可以重復(fù)；就是說id是唯一標(biāo)識(shí)一個(gè)標(biāo)簽元素的，就是一個(gè)id只能用在一個(gè)標(biāo)簽里面，但是同一個(gè)class可以應(yīng)用在多個(gè)不同的標(biāo)簽里面；如：
<span id=“bbb”>我是標(biāo)簽1（加了id名bbb）</span>
<span id=“bbb”>我是標(biāo)簽2（加了id名bbb）</span>
<span id=“bbb”>我是標(biāo)簽3（加了id名bbb）</span>
這里三個(gè)span標(biāo)簽都使用了同一個(gè)id“bbb”，這樣是不合法的。
<span class=“aaa”>我是標(biāo)簽1（加了類名aaa）</span>
<span class=“aaa”>我是標(biāo)簽2（加了類名aaa）</span>
<span class=“aaa”>我是標(biāo)簽3（加了類名aaa）</span>
這里三個(gè)span標(biāo)簽都使用了同一個(gè)class“ aaa”，這樣是合法的。
-
子選擇器
子選擇器，就是通過大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素，如：
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
</ul>
以上代碼通過子選擇器會(huì)使class名為food下的子元素li（水果、蔬菜）加入紅色實(shí)線邊框。
-
包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素
.food li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
</ul>
請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>
”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
-
通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
*{color:red;}
-
分組選擇符
分組選擇符（，），即是為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式，如下所示，則是同時(shí)給span和h1標(biāo)簽設(shè)置了樣式：
h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}
-
偽類選擇符
更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅。
關(guān)于偽選擇符：
關(guān)于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標(biāo)簽上使用 :hover 了，其實(shí)偽類選擇符還有很多，尤其是 css3 中，但是因?yàn)椴荒芗嫒菟袨g覽器，本教程只是講了這一種最常用的，在后面的文章里，筆者會(huì)專門有一章總結(jié)偽類選擇符。
