CSS全稱爲 “層疊樣式表（Cascading Style Sheets）”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如大小、顏色、字體加粗等。
一、CSS樣式定義
/*css插入形式：內聯式 > 嵌入式 > 外部式 (優先級)
內聯式：css樣式表就是把css代碼直接現有的HTML標籤中
嵌入式：把css樣式寫在<style type="text/css"></style>標籤之間
外部式：把css代碼寫在一個單獨的外部文件中，在<style>標籤中使用<link>標籤將css樣式文件鏈接到HTML文件內
*/
/*內聯式css樣式定義及印用*/
標籤：<h1 style="color: green"> 段落：<p style="color: green">
/*嵌入式css樣式定義及引用*/
<style type="text/css">
/* 指定標題或者段落的屬性 */
<h1> <h2> <h3> <h4> <h5> <h6> <p>
/*文字的屬性，包含指定文字即可*/
span { /*第一文字屬性*/
font-size:20px; /*設置文字字號*/
color:red; /*設置文字顏色*/
font-weight:bold; /*設置字體加粗*/
}
</style>
<p>大家好，我是vie。<span>愛因斯坦</span>是個科學家！</p>
/*外部式css樣式定義及引用*/
index.html之外定義的 .css文件，於index.html文件中於<style>標籤中引用
/*標籤名稱 樣式表 文本類型*/
<link href="style.css" rel="stylesheet" type="text/css">
<p>
您已到達<span>因特網</span>的最後一頁。祝您網上衝浪愉快。
現在，確實沒有什麼可瀏覽的內容了。您可以安全地關閉計算機，然後回到現實生活中。
</p>
二、CSS選擇器
css選擇器語法：
選擇器 { /*body*/ 樣式；}
p { font-size:12px; /*字體大小*/ line-height:1.6em; /*段落行間距*/ }
類選擇器：
/*定義於<style></style>標籤中*/
.類選擇器名稱{ css樣式代碼；}
.stress{ color:red; }
/*使用類選擇器*/
<span class="stress">類選擇器</span>
ID選擇器：
/*定義於<style></style>標籤中*/
#類選擇器名稱{ css樣式代碼；}
#stress{ color:red; }
/*使用ID選擇器*/
<span id="stress">選擇器</span>
/*特點
1.ID選擇器只能在文檔中使用一次；
2.可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式；
*/
子選擇器：
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>
/* .food>li 子元素li(水果、蔬菜)加入紅色實線邊框*/
包含（後代）選擇器：
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>
/* .food li 意思是到子集下面的後代子集選擇器*/
通用選擇器：
/*通用選擇器於<style>中*/
*{ color:red; font-size:20px; }
僞類選擇器：
/*鼠標滑過的狀態：放於<style>中*/
a:hover{ color:red }
/*使用僞類選擇器*/
<p>我是段落，<a href="http://www.imooc.com">點擊我</a>修改字體顏色</p>
分組選擇器：
/*給多個標籤同時設置字體屬性:直接在<style>中編寫，body在直接使用*/
h1,span{ color:red; }
.first,#second span{color:green;}
三、CSS的繼承、層疊和特殊性
CSS的繼承：
<style type="text/css">
p{color:red;} /*此處所有的<p>段落下的文字都爲紅色，包括<span>中，這既是繼承的特性*/
p{border:1px solid red;} /*border邊框只針對外部的<p>段落，而<span>不繼承*/
</style>
CSS特殊性：
/* 標籤的權值爲1；類選擇符的權值爲10，ID選擇器的權值最高爲100 */
p{color:red;} /* 權值爲1 */
p span{color:green;} /*權值1+1=2*/
.warning{color:white;} /* 權值爲10 */
p span .warning{color:purple;} /* 取值爲1+1+10=12 */
#footer .note p{color:yellow;} /* 權值爲100+10+1=111 */
/*注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解爲繼承的權值最低。*/
CSS層疊：
/*層疊就是在html文件中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，
會根據這些css樣式的前後來決定，處於最後的css樣式會被應用。*/
p{color:red;}
p{color:green;}
p{color:pink;} /*最後顏色會採用這個顏色*/
CSS重要性：
/*
!important
語句來改變樣式權重（優先權重） 全局的<p>都爲red
*/
<style type="text/css">
p{color:red!important;} /* !important 要寫在分號的前面 */
p.first{color:green;}
</style>