今天開(kāi)始學(xué)習(xí)CSS的進(jìn)程闻察。
一租冠、認(rèn)識(shí)CSS樣式
? ? ? ?CSS全稱(chēng)為“層疊樣式表 (Cascading Style Sheets)”梳星，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式袜漩，如文字大小涮俄、顏色、字體加粗等界睁。
二嘉抓、css語(yǔ)法格式
由上圖可以看出，css由選擇符和聲明構(gòu)成晕窑，聲明又由屬性和值組成，
選擇符：又稱(chēng)選擇器卵佛，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的元素杨赤，如本例中是網(wǎng)頁(yè)中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會(huì)受到影響截汪。
聲明：在英文大括號(hào)“｛｝”中的的就是聲明疾牲，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)衙解，中間可以英文分號(hào)“;”分隔阳柔，如下所示：
三、css快速注釋
<!--注釋代碼--> ? ??/*注釋文本*/
四蚓峦、CSS樣式
(1)內(nèi)聯(lián)式-直接寫(xiě)在現(xiàn)有的HTML標(biāo)簽中
例：<p style=“color：red”>這里文字是紅色</p>
注意：要寫(xiě)在元素的開(kāi)始標(biāo)簽里舌剂、
并且css樣式代碼要寫(xiě)在style=""雙引號(hào)中，如果有多條css樣式代碼設(shè)置可以寫(xiě)在一起暑椰，中間用分號(hào)隔開(kāi)霍转。
(2)嵌入式-寫(xiě)在當(dāng)前文件中
語(yǔ)法：
<style type="text/css">
span{
color:red;
}
</style>
(3)外聯(lián)式-寫(xiě)在單獨(dú)的一個(gè)文件中
外部式css樣式(也可稱(chēng)為外聯(lián)式)就是把css代碼寫(xiě)一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名一汽，在<head>內(nèi)（不是在<style>內(nèi)）標(biāo)簽內(nèi)）使用標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)避消，如下面代碼：
代碼格式：
<link href="base.css" rel="stylesheet" type="text/css">
注意：
1、css樣式文件名稱(chēng)以有意義的英文字母命名，如 main.css岩喷。
2恕沫、rel="stylesheet" type="text/css" 是固定寫(xiě)法不可修改。
3纱意、標(biāo)簽位置一般寫(xiě)在標(biāo)簽之內(nèi)婶溯。
五、css三種樣式之使用總結(jié)
注意三種樣式有優(yōu)先級(jí)：內(nèi)聯(lián)式>嵌入式>外聯(lián)式
但是嵌入式>外部式有一個(gè)前提：嵌入式css樣式的位置一定在外部式的后面妇穴。
六爬虱、類(lèi)選擇器
語(yǔ)法：.類(lèi)選擇器名稱(chēng){CSS樣式代碼；}
使用步驟：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來(lái)腾它，如下：
<span></span>或者<em></em><p></p><label></label>
第二步：使用class="類(lèi)選擇器名稱(chēng)"為標(biāo)簽設(shè)置一個(gè)類(lèi)跑筝，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類(lèi)選器css樣式，如下：
.stress{color:red;}/*類(lèi)前面要加入一個(gè)英文圓點(diǎn)*/
七瞒滴、ID選擇器
在很多方面曲梗，ID選擇器都類(lèi)似于類(lèi)選擇符，但也有一些重要的區(qū)別：
1妓忍、為標(biāo)簽設(shè)置id="ID名稱(chēng)"虏两，而不是class="類(lèi)名稱(chēng)"。
2世剖、ID選擇符的前面是井號(hào)（#）號(hào)定罢，而不是英文圓點(diǎn)（.）。
八旁瘫、此處總結(jié)一下類(lèi)選擇器與ID選擇器的區(qū)別
相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1祖凫、ID選擇器只能在文檔中使用一次。與類(lèi)選擇器不同酬凳，在一個(gè)HTML文檔中惠况，ID選擇器只能使用一次，而且僅一次宁仔。而類(lèi)選擇器可以使用多次稠屠。
2、可以使用類(lèi)選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式翎苫。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式权埠，但只可以用類(lèi)選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）煎谍。
九弊知、子選擇器
還有一個(gè)比較有用的選擇器子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素粱快。
語(yǔ)法： .food>li{border:1px;solid red:}
這行代碼會(huì)使class名為food下的子元素li（水果秩彤、蔬菜）加入紅色實(shí)線(xiàn)邊框叔扼。
十、包含（后代）選擇器
包含選擇器漫雷，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素瓜富。如右側(cè)代碼編輯器中的代碼：
語(yǔ)法：.first span{color:red;}?
注意:這個(gè)選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代降盹，或者你可以理解為作用于子元素的第一代后代与柑。而后代選擇器是作用于所有子后代元素。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇蓄坏，而子選擇器是通過(guò)“>”進(jìn)行選擇价捧。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代涡戳。
十一：通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器结蟋，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素渔彰，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
十二嵌屎、偽類(lèi)選擇符
語(yǔ)法：a:hover{color:red;}
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過(guò)的狀態(tài)設(shè)置字體顏色變紅。
關(guān)于偽選擇符：
關(guān)于偽類(lèi)選擇符恍涂，到目前為止宝惰，可以兼容所有瀏鑒器的“偽類(lèi)選擇符”就是 a 標(biāo)簽上使用 :hover 了（其實(shí)偽類(lèi)選擇符還有很多，尤其是 css3 中再沧，但是因?yàn)椴荒芗嫒菟袨g覽器尼夺，本教程只是講了這一種最常用的）。其實(shí) :hover 可以放在任意的標(biāo)簽上炒瘸，比如說(shuō) p:hover淤堵，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合什燕。
語(yǔ)法：a：hover{color:red; font-size:20px}
十三、分組選擇符
當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)竞端，可以使用分組選擇符（屎即，），如下代碼為右側(cè)代碼編輯器中的h1事富、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：
h1,span{color:red;} 等價(jià)于下面兩行代碼
h1{color:red;}
span{color:red;}
