CSS詳解
- 高洛峰原創
- 2016-10-20 13:26:451129瀏覽
CSS的簡介
1、CSS概述及作用
CSS：Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。可以解決html程式碼對樣式定義的重複，提高了後期樣式程式碼的可維護性，並增強了網頁的顯示效果功能。
作用：CSS將網頁內容和顯示樣式分離，並提高了顯示功能。
2、 CSS和HTML的結合（*****）（四種）
CSS與HTML的結合方式
1.style屬性方式：
使標籤中顯示每個標籤中顯示屬性的顯示屬性樣式。
例：
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檔案的位址");需要寫在
註：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的優先權
（一般情況下）從上到下，由外到內，優先權從低到高的。
特殊情況：標籤名選擇器
2. CSS的代碼規格
（1）選擇器名稱{屬性名:屬性值;屬性名:屬性值;.. .}
（2）屬性與屬性之間用分號隔開
（3）屬性與屬性值直接按用冒號連接
（3）如果一個屬性有多個空格值，值與值直接用空格值開
範例
div{border:值1 值2 值3}
4、CSS的選擇器（*****）
1.標籤上。
2.基本選擇器：
（1）標籤名選擇器
每一個標籤都定義了class屬性和id屬性。用於對標籤進行標識，方便對標籤進行操作。
在定義的中，多個標籤的class屬性值可以相同，而id值要唯一，因為JavaScript中常用。
（2）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;}
.classname {color:#00FF00;}
P標籤樣式
.classname {color:#00FF00;}例：
#pid { color:#0000FF;}
P標籤樣式
註：多個標籤同樣可以定義相同的id值，但是對於JavaScript對標籤元素的獲取就會出錯。所以形成習慣，確保id值的唯一性對於以後的資料庫設計也很有好處。
優先權（特殊）： 標籤名選擇器 3.擴充選擇器：
（1）之間關聯選擇器：多個標籤之間產生關係。 中間用空格隔開
（2）組合選擇器：對多個不同的選擇器設定相同的樣式
中間用逗號隔開 （3）偽元素選擇器：CSS定義好的選擇器〟『連結的4個狀態，使用的順序： L V H A
5、CSS的佈局（了解）
心如猛虎，細嗅薔薇。