由于css的內(nèi)容偏多逛艰，所以筆者分開幾個章節(jié)來總結(jié)嘲碱，今天的第一個章節(jié)主要是總結(jié)css的基本定義，使用方法斥铺，和選擇器介紹。
1.css的定義
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”坛善，它主要是用于定義HTML元素在瀏覽器內(nèi)的顯示樣式晾蜘，如大小，字體眠屎，背景剔交，邊框等等。如：
p{
font-size:12px;
color:red;
font-weight:bold;
}
//定義了p標簽的字體大小為12像素改衩，字體的顏色是紅色岖常，字體的粗細是加粗
2.CSS代碼語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成葫督，如下圖所示：
- 選擇符：又叫做選擇器竭鞍，主要是指明哪些標簽會應用聲明中的樣式。如上圖的選擇符為“p”橄镜，則說明頁面內(nèi)的所有p標簽都會應用這個樣式偎快。選擇符有多鐘，例如標簽選擇符洽胶，類選擇符晒夹，id選擇符，子選擇符姊氓，后代選擇符...上面的“p”就是標簽選擇符丐怯。
- 聲明：在英文"{ }"中的就是聲明，屬性和值之間用英文冒號“：”分隔他膳。當有多條聲明時响逢，中間可以英文分號“;”分隔，如下所示：
p{font-size:12px;color:red;}
- 注釋：css注釋的添加方式和html的一樣如下所示：
/*這里是注釋*/
3.怎么應用CSS
將CSS應用的形式來看基本可以分為以下3種：內(nèi)聯(lián)式棕孙、嵌入式和外部式三種舔亭。
-
內(nèi)嵌式：
內(nèi)嵌式些膨，顧名思義，就是直接將css樣式寫在html標簽里面钦铺。因為直接寫在了要修飾的標簽里面了订雾，所以不需要所謂的選擇符，也不需要上面2中所說的“{}”包裹矛洞，直接在標簽的style屬性里面寫樣式和對應的值即可洼哎，其他的不變。如：
<p style="color:red">這里文字是紅色沼本。</p>
-
嵌入式：
嵌入式css樣式噩峦，就是可以把css樣式代碼寫在html文件的<style type="text/css"></style>標簽之間，這個時候就需要2中所說的選擇符和“{}”了抽兆，具體如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這里是標題</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樣式寫外一個后綴名為css的外部文件(***.css)中,然后通過<link>標簽鏈接到html文件內(nèi)辫红。如下面代碼：
/*這個是html文件*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這里是標題</title>
/*通過這條語句將外部樣式表引入*/
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span>這里的字體是紅色的</span>
<span>這里的字體是紅色的</span>
<span>這里的字體是紅色的</span>
</body>
</html>
/*這個是css文件*/
span{
color:red;
}
(1)css樣式文件名稱以有意義的英文字母命名凭涂，如 main.css；通過<link>標簽的href屬性對應你要引進的css文件的地址來鏈接贴妻。
(2)rel="stylesheet" type="text/css" 是固定寫法不可修改切油。
(3)<link>標簽位置一般寫在<head>標簽之內(nèi)。
注：這三種樣式是有優(yōu)先級的名惩，記住他們的優(yōu)先級：內(nèi)聯(lián)式 > 嵌入式 > 外部式澎胡，就是當我們同時使用三中方式的樣式去修飾一個html文件的時候，就會按照上面的優(yōu)先級去執(zhí)行娩鹉。
4.選擇器
我們在寫樣式的時候滤馍，通常會遇到一個問題，我們需要確定哪一個底循，或者哪一類標簽使用某一個樣式巢株。而選擇器就是為了滿足這種需求。所以熙涤，選擇器就是為了選擇頁面內(nèi)的特定的標簽阁苞，讓其執(zhí)行想要的樣式。
-
標簽選擇器
標簽選擇器其實就是通過標簽名來選擇html代碼中的標簽祠挫。如p標簽那槽，img標簽，body標簽等舔。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用：為p標簽設(shè)置12px字號骚灸，行間距設(shè)置1.6em的樣式。
-
類選擇器
通過class屬性來選擇html代碼中的標簽慌植。步驟如下：
第一步：使用合適的標簽把要修飾的內(nèi)容標記起來甚牲，如下：
<span>我是標簽</span>
第二步：使用class="類選擇器名稱"為標簽設(shè)置一個類义郑，如下：
<span class=“aaa”>我是標簽（加了類名aaa）</span>
第三步：設(shè)置類選器css樣式，格式是：.類名{屬性:值}丈钙，如下：
.aaa {font-size:12px;line-height:1.6em;}
/*前面有個點７峭浴！*/
(1)英文圓點開頭
(2)其中類選器名稱可以任意起名（但不要起中文噢）
-
ID選擇器
通過id屬性來選擇html代碼中的標簽,這個選擇器和類選擇器有點相似雏赦。步驟如下：
第一步：使用合適的標簽把要修飾的內(nèi)容標記起來劫笙，如下：
<span>我是標簽</span>
第二步：使用id="id選擇器名稱"為標簽設(shè)置一個id，如下：
<span id=“bbb”>我是標簽（加了id名bbb）</span>
第三步：設(shè)置id選器css樣式星岗，格式是：#id名{屬性:值}填大，如下：
#bbb{font-size:12px;line-height:1.6em;}
(1)為標簽設(shè)置id="ID名稱"
(2)ID選擇符的前面是井號（#）號
注* id選擇器和類選擇器看起來非常像，用法也好像差不多俏橘，但是兩者有個很根本的區(qū)別：id選擇器不可以重復栋盹，class類選擇器可以重復；就是說id是唯一標識一個標簽元素的敷矫，就是一個id只能用在一個標簽里面，但是同一個class可以應用在多個不同的標簽里面汉额；如：
<span id=“bbb”>我是標簽1（加了id名bbb）</span>
<span id=“bbb”>我是標簽2（加了id名bbb）</span>
<span id=“bbb”>我是標簽3（加了id名bbb）</span>
這里三個span標簽都使用了同一個id“bbb”曹仗，這樣是不合法的。
<span class=“aaa”>我是標簽1（加了類名aaa）</span>
<span class=“aaa”>我是標簽2（加了類名aaa）</span>
<span class=“aaa”>我是標簽3（加了類名aaa）</span>
這里三個span標簽都使用了同一個class“ aaa”蠕搜，這樣是合法的怎茫。
-
子選擇器
子選擇器，就是通過大于符號(>),用于選擇指定標簽元素的第一代子元素缭嫡，如：
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
</ul>
以上代碼通過子選擇器會使class名為food下的子元素li（水果职辨、蔬菜）加入紅色實線邊框抵碟。
-
包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素
.food li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
</ul>
請注意這個選擇器與子選擇器的區(qū)別祥山，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代掉伏。而后代選擇器是作用于所有子后代元素缝呕。后代選擇器通過空格來進行選擇，而子選擇器是通過“>
”進行選擇斧散。
總結(jié)：>作用于元素的第一代后代供常，空格作用于元素的所有后代。
-
通用選擇器
通用選擇器是功能最強大的選擇器鸡捐，它使用一個（*）號指定栈暇，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設(shè)置為紅色：
*{color:red;}
-
分組選擇符
分組選擇符（箍镜，）源祈，即是為html中多個標簽元素設(shè)置同一個樣式煎源，如下所示，則是同時給span和h1標簽設(shè)置了樣式：
h1,span{color:red;}
它相當于下面兩行代碼：
h1{color:red;}
span{color:red;}
-
偽類選擇符
更有趣的是偽類選擇符新博，為什么叫做偽類選擇符薪夕，它允許給html不存在的標簽（標簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標簽鼠標滑過的狀態(tài)設(shè)置字體顏色變紅赫悄。
關(guān)于偽選擇符：
關(guān)于偽類選擇符原献，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標簽上使用 :hover 了埂淮，其實偽類選擇符還有很多姑隅，尤其是 css3 中，但是因為不能兼容所有瀏覽器倔撞，本教程只是講了這一種最常用的讲仰，在后面的文章里，筆者會專門有一章總結(jié)偽類選擇符痪蝇。
