1.CSS簡介【瞭解】 1.1cascading style sheets 層疊樣式表 層疊：一層一層 樣式：格式，更多更豐富 CSS 就是為HTML服務的。 1.2CSS目的 樣式更多 使用CSS，可以實現樣式和頁面的分離，降耦合 HTML專註於做頁面的開發，CSS 專註於做樣式的開發。 2.CS ...
1.CSS簡介【瞭解】
1.1cascading style sheets 層疊樣式表
- 層疊：一層一層
- 樣式：格式，更多更豐富
CSS 就是為HTML服務的。
1.2CSS目的
- 樣式更多
- 使用CSS，可以實現樣式和頁面的分離，降耦合
HTML專註於做頁面的開發，CSS 專註於做樣式的開發。
2.CSS與Html結合(集成)使用【重點】
三種主要結合方式：
- style屬性，所有的HTML標簽都有一個style的屬性
<div style="color:red"/>
- 在head 裡面寫一個樣式的腳本
<head> <style type="text/css"> div { color:blue } </style> </head>
- 引入外部的CSS文件
<link rel="stylesheet" type="text/css" src="css的路徑"></link>
3種結合方式優先順序：方式1>方式2>方式3
CSS的樣式優先順序是從內到外,執行順序是從上到下。
3.CSS的選擇器【瞭解+重要】
3.1基本選擇器【重要】
以下麵這段代碼為例：
<div id="huge1" name="xxxx" class="hugeclass"> <p>我剛纔喜歡胡歌，現在不怎麼喜歡，喜歡的人太多了</p> <div id="huge2"></div> </div> <div id="huge3" class="hugeclass2"> 很多很多內容 </div>
- 標簽選擇器：標簽 {}
<!--樣式是以分號結尾的,屬性有： border: 邊框 line_width|line_style|color 第一個是邊框的寬度，第二個就是邊框：實線，虛線 color:邊框的顏色 margin:外邊距 分上右下左（順時針） pading:內邊距 --> <style> div { border:1px solid red; } </style>
- id選擇器 :#id {} 根據id來選取
<style> #huge1 { color:red; border:1px solid black; } </style>
- 類選擇器 :.class {}
<style> .hugeclass { border:1px solid blue; } </style>
選擇器的優先順序：id >class>標簽
CSS：層疊樣式表
樣式是一層一層
多個樣式指向同一個標簽，樣式會疊起來，但是疊的順序就是id ,class,標簽
3.2組合選擇器【瞭解】
- 多元素選擇器 ：div,font {}
- 後代選擇器：A B {} B是A的後代結點（B是A的子節點，或者A的子節點的子節點）
- 子代選擇器 :div > p {}
- 相鄰兄弟選擇器: div +p {}
- 兄弟選擇器 : div ~ p {}
3.3屬性選擇器【瞭解】
標準的格式 div[]
- div[name] :有name屬性就選擇
- div[name="xx"] :有屬性且屬性值為xx，就選擇
- div[name包含x]：name屬性包含x，就選擇
- div[屬性以xx開頭]：屬性以xx開頭，就選擇
- div[屬性以xx結尾]：屬性以xx結尾，就選擇
3.4偽類選擇器【瞭解】 a:偽類
一個超鏈接點擊以後，要給它變一個顏色。
超鏈接的偽類選擇器：
未點擊 ->放到超鏈接上-> 點擊-> 鏈接完成
:link-> :hover-> :active-> :visited
<style> a:visited { color:red; } </style>
4.CSS的盒子模型【最重要】
只需要改變盒子模型的值（CSS）就OK了，而css是一個分離的文件，這樣設計一個頁面j就很簡單。
