CSS基礎知識（概念、塊級元素、行內元素、選擇器）
本文轉載於:猿2048網站CSS基礎知識（概念、塊級元素、行內元素、選擇器）
1、CSS概念
全稱為Cascading Style Sheets（層疊樣式表），支援專有的檔案 - 副檔名為".css"
作用：將HTML的結構(HTML標籤即html)與樣式(顯示的樣式即css)進行分離
² CSS語法結構
語法格式：選擇器{ 屬性名稱: 屬性值; 屬性名稱: 屬性值; }
² CSS 註釋
用來解釋程式碼，且可隨意編輯它，瀏覽器會忽略它。 格式：/* 內容 */
2、如何使用CSS
- 內聯樣式
通過HTML元素的style屬性實現(<body>中)，即<p style="css屬性 : css屬性值">
注：HTML的結構與樣式未有效分離，且這種CSS樣式只針對當前元素有效
- 外聯樣式
a.在 <head> 元素定義 <style>元素，即 <style type="text/css">
選擇器{屬性名 : 屬性值 }
</style>
b.先定義CSS式的檔案，後在HTML 頁面中通過<link>元素引入外部css檔案
即<link href="css檔案路徑" rel="檔案型別，其固定值是stylesheet" type="text/css" />
【注：內聯樣式的優先級別高於外聯樣式】
3、塊級元素
概念: 獨佔頁面中一行(下一個塊級元素在新的一行)
*<h1>、<p>、<ul>和<table>等元素，具有良好的語義化 （具體的元素具有具體的含義）
【注：<p>標籤中不能包含任何塊級元素】
*<div>元素：本身不具備任何的含義作用。 <div></div>必須設定高度，否則無法顯示
作用：實現頁面的佈局(類似於<table>表格元素)
4、行內(內聯)元素
概念: 不會獨佔一行(只佔文字內容的區域)； 如<td>、<a>和<img>等元素
注: 若在一行中不能容納所有的元素，則會換到下一行，繼續自左向右排列。
<a>標籤中不能包含<a>標籤，但可以包含其他任何元素
【一般都是塊級元素中包含行內元素】
<span>元素：本身不具備任何含義。特點：當行內元素佔滿頁面的整個寬度，自動換行
eg: <span></span>
<span></span>
eg: <span></span><span></span>
5、CSS的選擇器
² 常見選擇器
- Ø ID選擇器
通過 HTML 頁面元素的id屬性值進行定位，其語法結構為 #ID
- Ø 類(class)選擇器
通過HTML頁面元素的class屬性值進行定位，語法結構為 .class
注：不能用純數字或者數字開頭來定義類名；不建議使用漢字來定義類名
- Ø 元素選擇器
通過HTML頁面元素的元素名進行定位，語法結構為 元素名
- Ø 屬性選擇器
通過 HTML 頁面元素的屬性進行定位，語法結構為 [屬性名]。
【選擇器的優先順序：內聯樣式 > ID選擇器 > 類選擇器和屬性選擇器 > 元素選擇器】
【!important - 將當前選擇器的優先級別設定最高(打亂優先級別的順序)---不建議使用】
² 關係選擇器
- Ø 後代選擇器
指根據目標元素匹配後代元素
格式：目標元素 後代元素 eg: #t1 div {color : red; }
- Ø 子元素選擇器
指根據目標元素匹配子級元素
格式：目標元素 > 子元素 eg: #t1 > div {color : red; }
- Ø 相鄰兄弟選擇器
指根據目標元素匹配下一個相鄰兄弟元素
格式：目標元素 + 下一個相鄰兄弟元素 eg: #t1 + div {color : red; }
² 組合選擇器
* 第一種 - 交集結果（多個選擇器並列使用，中間沒有任何分隔）
* 第二種 - 並集結果（多個選擇器並列使用，中間使用" , "分隔）
u 萬用字元選擇器（*）
作用:匹配當前 HTML 頁面中的所有元素 eg: * {color:red;}
問題:匹配的速度不是很快(頁面元素的