CSS基礎
CSS基礎
概念
CSS(cascading style sheet) 漢譯為層疊樣式表，是用於控制網頁樣式。WEB標準中的表現標準語言，在網頁中主要對網頁資訊的顯示進行控制。目前推薦遵循的是W3C發布的CSS3.0版本；用來表現HTML或者XHTML等樣式文件的電腦語言。1998年5月21日由w3C正式推出的css2.0
HTML + CSS
- 彌補html語言的不足
- 縮減頁面程式碼，提高訪問速度;
- 程式碼減少，頁面文件就會小，佔用網路頻寬就少，客戶端打開速度就快，用戶體驗就會更好
- 結構清晰，有利於seo優化
- 有利於搜索引擎優化
- 縮短改版時間
- 對網站的重構有很好的支援
CSS語法
CSS語法由兩部分組成：選擇符、聲明。
聲明包括：屬性和屬性值
選擇符 {屬性: 屬性值 ;屬性:屬性值}
選擇符說明：CSS選擇符（選擇器）
選擇符表示要定義樣式的對象(標籤名字)，可以是元素本身，也可以是一類元素或者制定名稱的元素,簡單來說就是給對應的元素起個名稱。
- 每個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值。
- 屬性必須放在花括弧中，屬性與屬性值用冒號連接。
- 每條聲明用分號結束。
- 當一個屬性有多個屬性值的時候，屬性值與屬性值不分先後順序,用空格隔開。
- 在書寫樣式過程中，空格、換行等操作不影響屬性顯示。
CSS樣式表
內部樣式表
<style type="text/css">
css語句
</style>
註：使用style標記創建樣式時，最好將該標記寫在“
外部樣式表
<link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" />
使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間。
rel：用於定義文檔關聯，表示關聯樣式表；
type：定義文檔類型；
內聯樣式表
<標籤 style="屬性1:值1;屬性2:值2; ……"></標籤>
CSS樣式表的權重關係
- 內聯樣式表的優先順序別最高
- 內部樣式表與外部樣式表的優先順序和書寫的順序有關，後書寫的優先順序別高。
- 同在一個樣式表中的優先順序和書寫的順序也有關，後書寫的優先順序別高。(被覆蓋的只是相同屬性的樣式)
CSS選擇符
CSS基本選擇符：類型選擇符、id選擇符、class選擇符(類選擇符)。
CSS選擇符分類：
- 類型選擇符（標記選擇器）
- 類選擇符 （class選擇符）
- ID選擇符 （id選擇器）
- 偽類選擇器
- 通配符（*）設置全局屬性
- 群組選擇符（集合選擇器）
- 包含選擇符（後代選擇器）
- 屬性選擇符
- 偽對象選擇符
類型選擇符
類型選擇符是根據html語言中的標記來直接定義
語法：標籤名稱 {屬性：屬性值；}
- 類型選擇符就是以文檔對象html中的標籤作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span……等。
- 所有的頁面元素都可以作為選擇符;
用法：- 如果想改變某個元素的默認樣式時，可以使用類型選擇符；（如：改變一個p段落樣式）
- 當統一文檔某個元素的顯示效果時，可以使用類型選擇符；（如：改變文檔所有p段落樣式）
類（class）選擇符
語法 ： .class名{屬性：屬性值;}
用法：class選擇符更適合定義一類樣式；
(1)當我們使用類選擇符時，應先為每個元素定義一個類名稱，
(2)類選擇符的語法格式：
如：
.top{屬性:屬性值;}
ID選擇符
語法： <標籤 id=「名」></標籤>
#id名{屬性：屬性值;}
- 可以給每個元素使用id選擇符，但id是元素的唯一標識符，不可出現重複的id名；
如： - id選擇符的語法格式是「#」加上自定義的id名
如：#box{width:300px; height:300px;} - 起名時要取英文名，不能用關鍵字：(所有的標記和屬性都是關鍵字)
如：div標記 - 一個id名稱只能在文檔中出現一次，因為id是唯一的
- 最大的用處：創建網頁的外圍結構。(唯一性、起名字不能使用關鍵字)
偽類選擇器
| 程式碼 | 解釋 |
|---|---|
| a:link {color: red;} | 未訪問的鏈接狀態 |
| a:visited {color: green;} | 已訪問的鏈接狀態 |
| a:hover {color: blue;} | 滑鼠滑過鏈接狀態 |
| a:active {color: yellow;} | 滑鼠按下去時的狀態 |
說明：
1）當這4個超鏈接偽類選擇符聯合使用時，應注意他們的順序，正常順序為：
a，a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效；
2）為了簡化程式碼，可以把偽類選擇符中相同 的聲明提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;}
表示超鏈接的三種狀態都相同，只有滑鼠划過變化顏色
通配符
語法：*{屬性：屬性值;}
說明：通配選擇符的寫法是「*」，其含義就是所有標籤；
表示該樣式適用所有網頁元素；
用法：常用來重置樣式。
例：*{margin:0;padding:0;}
群組選擇符
語法：選擇符1，……，選擇符5 {屬性：屬性值;}
說明：當有多個選擇符應用相同的樣式時，可以將選擇符用「，」分隔的方式，合併為一組。
實例：.top, #nav, p{width:100px;}
包含選擇器（後代選擇器）
語法：選擇符1(父) 選擇符2（後代）{屬性：屬性值;}
選擇符父級 選擇符子級{屬性：屬性值;}
說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2;
實例： div ul li{height:200px;}
選擇符權重
css中用四位數字表示權重，權重的表達方式如：0，0，0，0；
權重規則：HTML標籤(類型選擇符)的權重是1，class的權重是10，id的權重是100。
- 類型選擇符的權重為0001
- class選擇符的權重為0010
- id選擇符的權重為0100
- 屬性選擇符的權重為0010
- 偽類選擇符的權重為0010
- 偽元素（對象）選擇符的權重為0001
- 包含選擇符的權重：為包含選擇符的權重之和
- 內聯樣式的權重為1000
- 繼承樣式的權重為0000
- 群組集合選擇符權重為他本身
- 如果權重相同時，則執行後寫的樣式；
css層疊性
css層疊指的是樣式的優先順序，當產生衝突時以優先順序高的為準。
- 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記 ）
- id選擇符>（偽）類選擇符>元素選擇符
- 權重相同時取後面定義的樣式
