- CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
- 使用CSS樣式的一個(gè)好處是通過定義某個(gè)樣式，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號(hào)或者顏色等
- css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會(huì)受到影響。
聲明：在英文大括號(hào)“｛｝”中的的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔
- 從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。
- **內(nèi)聯(lián)式 **: 把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中
<p style="color:red">這里文字是紅色。</p>
- 嵌入式: 嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間.
<style type="text/css">
span{
color:red;
}
</style>
-
外部式 : 寫在單獨(dú)的文件中
.css為擴(kuò)展名
在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，
<link href="main.css" rel="stylesheet" type="text/css" />
注意：
- css樣式文件名稱以有意義的英文字母命名，如 main.css。
- rel="stylesheet" type="text/css" 是固定寫法不可修改。
- <link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
<pre>
優(yōu)先級(jí) : 當(dāng)遇到同名樣式時(shí)
1. link鏈接的css文件權(quán)值相同 是下面的覆蓋上面的. <em>ps: 權(quán)值在下面繼承中解釋</em>
2. 離html元素近的 樣式覆蓋遠(yuǎn)的
</pre>
一、 css選擇器
每一條css樣式聲明（定義）由兩部分組成
div {
background-color: red;
font-size: 16px;
}
選擇器 {
樣式;
}
/*------------------------------------------------------------------*/
> 1. 在{}之前的部分就是“選擇器”
> 2. “選擇器”指明了{(lán)}中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。
> 3. 標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽
- <h5> 類選擇器</h5>
.class {
css樣式代碼;
}
- <h5>ID選擇器</h5>
#stress{
color:red;
}
類 和 ID 選擇器的區(qū)別
- 相同點(diǎn)：可以應(yīng)用于任何元素
- 不同點(diǎn)：
- 在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
- 可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
例 ：
<span class="stress bigsize">
// 類可以對(duì)同一個(gè)原素使用多個(gè)樣式
//ID不可以這樣使用
-
<h5> 子選擇器</h5>
用于選擇指定標(biāo)簽元素的 第一代子元素
.food> li {
border:1px solid red;
}
/*在類選擇器后面用">" 指向子選擇器 */
- <h5>包含(后代)選擇器</h5>
用于選擇指定標(biāo)簽元素下的后輩元素
.first span {
color:red;
}
包含(后代)選擇器 與 子選擇器 的區(qū)別
子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。
后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇。
總結(jié)：
>作用于元素的第一代后代，空格作用于元素的所有后代。<h5>通用選擇器</h5>
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素
* {
color:red;
}
/*代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色*/
- <h5>偽類選擇符</h5>
偽類選擇符: 它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色
a: hover {
color:red;
}
關(guān)于偽選擇符：
關(guān)于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是< a> 標(biāo)簽上使用 :hover 了（其實(shí)偽類選擇符還有很多，尤其是 css3 中，但是因?yàn)椴荒芗嫒菟袨g覽器，本教程只是講了這一種最常用的）。其實(shí) :hover 可以放在任意的標(biāo)簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合。
- <h5>分組選擇符</h5>
為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式
h1, h2, h3, span {
color : red;
}
.first,
#second> span{
color:green;
}
二、繼承
-
權(quán)值：
瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，那種權(quán)值高的就使用哪種css樣式
權(quán)值的規(guī)則：
- 標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100
- 注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。
p {
color:red;
} /*權(quán)值為1*/
p span{
color:green;
} /*權(quán)值為1+1=2*/
.warning {
color:white;
} /*權(quán)值為10*/
p span.warning {
color:purple;
} /*權(quán)值為1+1+10=12*/
#footer .note p {
color:yellow;
} /*權(quán)值為100+10+1=111*/
-
層疊：
層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會(huì)被應(yīng)用 (后面的樣式覆蓋前面的)
p {color:red;}
p {color:green;}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>
/*最后將顯示字體顏色為綠色*/
當(dāng)?shù)絟tml文件中的樣式優(yōu)先級(jí)讓然為：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。
ps：!important優(yōu)先級(jí)樣式是個(gè)例外，權(quán)值高于用戶自己設(shè)置的樣式。
-
<big>!important;</big>
將當(dāng)前樣式設(shè)置為最高權(quán)值
p {
color:red!important;
}
/*注意：!important要寫在分號(hào)的前面*/
注意：
！important要慎重使用， 能不用就不用。以避免使用過多，代碼不好控制。
