CSS的簡介 1、CSS概述及作用 CSS：Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。可以解決html代碼對樣式定義的重覆，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。 作用：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。 2、 CSS和H ...
CSS的簡介
1、CSS概述及作用
CSS：Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。可以解決html代碼對樣式定義的重覆，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。
作用：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
2、 CSS和HTML的結合（*****）（四種）
CSS與HTML的結合方式
1.style屬性方式：
利用標簽中style屬性來改變每個標簽的顯示樣式。
例：
<p style="background-color:#FF0000; color:#FFFFFF"> p標簽段落內容。 </p>
該方式比較靈活，但是對於多個相同標簽的同一樣式定義比較麻煩，適合局部修改。
2.style標簽方式：（內嵌方式）
在head標簽中加入style標簽，對多個標簽進行統一修改。
<head> <style type=”text/css”> p { color:#FF0000;} </style> </head>
該方式可以對單個頁面的樣式進行統一設置，但對於局部不夠靈活。
3.導入方式：（常用的方式）
前提是已經存在一個定義好的CSS文件。網頁的一部分樣式需要用到，那麼就用到這種方式。
例：
<style type="text/css"> @import url(css_3.css); div { color:#FF0000;} </style>
定義一個外部的CSS文件（.css）結尾的。
@import url("css文件的地址");需要寫在<style>標簽的內部
註：url括弧後面必須要用分號結束。如果導入進來的樣式與本頁面定義的樣式重覆，以本頁定義樣式為準。
4.鏈接方式：（常用的方式）
通過head標簽中link標簽來實現，前提也是先要有一個已定好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_3.css" />
<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，不能寫在<style>內部，寫在<head>標簽的內部。
rel：代表當前的文件和引入文件的關係。
type：類型
href：CSS的地址
註：可以通過多個link標簽鏈接進來多個CSS文件。重覆樣式以最後鏈接進來的CSS樣式為準。
3、CSS樣式優先順序和代碼規範
1.CSS的優先順序
（一般情況下）從上到下，由外到內，優先順序從低到高的。
特殊情況：標簽名選擇器 < class選擇器 < ID選擇器 < style屬性
2. CSS的代碼規範
（1）選擇器名稱{屬性名:屬性值;屬性名:屬性值;...}
（2）屬性與屬性之間用 分號 隔開
（3）屬性與屬性值直接按用 冒號 連接
（3）如果一個屬性有多個值，值與值直接用空格隔開
例子
div{border:值1 值2 值3}
4、CSS的選擇器（*****）
1.選擇器：
編寫的CSS代碼作用在哪個標簽上。
2.基本選擇器：
（1）標簽名選擇器
每一個標簽都定義了class屬性和id屬性。用於對標簽進行標識，方便對標簽進行操作。
在定義的中，多個標簽的class屬性值可以相同，而id值要唯一，因為JavaScript中經常用。
（2）class選擇器：（常用的）
在標簽中定義class屬性並賦值。通過 標簽名.class值 對該標簽進行樣式設置。
例：
相同標簽設置不同樣式的時候，用class進行區分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P標簽樣式</p> <p class=”pclass_2”>P標簽樣式</p>
不同標簽進行相同設置的時候，用class進行統一定義。
.classname {color:#00FF00;} <p class=”classname”>P標簽樣式</p> <div class=”classname”>DIV標簽樣式</div>
（3）id選擇器：
與class選擇器類似，但格式不同，選擇器的名稱為：#id值。
例：
#pid { color:#0000FF;} <p id=”pid”>P標簽樣式</p>
註：多個標簽同樣可以定義相同的id值，但是對於JavaScript對標簽元素的獲取就會出錯。所以形成習慣，確保id值的唯一性對於以後的資料庫設計也很有好處。
優先順序（特殊）：
標簽名選擇器 < class選擇器 < ID選擇器 < style屬性
3.擴展選擇器：
（1）關聯選擇器：多個標簽之間產生關係。
中間用空格隔開
（2）組合選擇器：對多個不同的選擇器設置相同的樣式
中間用逗號隔開
（3）偽元素選擇器：CSS定義好的選擇器
如果使用超鏈接的4個狀態，使用的順序： L V H A
5、CSS的佈局（瞭解）
* 盒子模型
