0、未完，還有一部分未寫 1、CSS背景 屬性 描述 background 簡寫屬性，作用是將背景屬性設置在一個聲明中。 background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動。 background-color 設置元素的背景顏色。 background-image ...
1、樣式表
內聯樣式表：
style=""
內部樣式表：
<style type="text/css"></style>
外部樣式表：
<link rel="stylesheet" type="text/css" href="">
優先順序：內聯樣式表 > 內部樣式表 > 外部樣式表 > 瀏覽器預設設置
2、選擇器
selector {property: value;property: value;......}
1、標簽選擇器：
h1 {}
2、id選擇器：
#red {color:red;}
<p id="red"></p>
div#red{}
3、類選擇器：
.center {text-align:center;}
<h1 class="center"></h1>
<p class="center"></p>
(01)
div.red{}
(02)
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<p class="important warning">This paragraph is a very important warning.</p>
4、 屬性選擇器：
[title]
{
color:red;
}
<h2 title="Hello County">Hello World</h2>
(02)
a[href][title] {color:red;}
1、屬性和值選擇器：
[title=w3school]
{
color:red;
}
<h2 title="w3school">Hello World</h2>
2、屬性和值選擇器(多個值)：
[title~=w3school]
{
color:red;
}
<h2 title="w3school">Hello World</h2>
<h2 title="hello w3school">Hello World</h2>
3、表單選擇器：
input[type="text"]
{
width:150px;
}
5、多樣
1、派生選擇器：
li strong {} ：li標簽下所有的strong元素
註：div#red{} td.center{} 跟 div #red{} td .center{} 是有區別的。
2、子元素選擇器：
h1 > strong {} ：只能是li標簽子元素下的strong，其他strong不行
3、相鄰兄弟選擇器:
h1 + p {} ：選擇緊接在 h1 元素後出現的p，h1 和 p 元素擁有共同的父元素
4、分組選擇器：
h1,h2,h3,...{} ：這幾個h標簽共用一些屬性
5、偽類
selector : pseudo-class {property: value}
註：後面詳細介紹
3、CSS背景
屬性 描述
background 簡寫屬性，作用是將背景屬性設置在一個聲明中。
background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動。
background-color 設置元素的背景顏色。
background-image 把圖像設置為背景。
background-position 設置背景圖像的起始位置。
background-repeat 設置背景圖像是否及如何重覆。
4、 CSS文本
屬性 描述
color 設置文本顏色
direction 設置文本方向。
line-height 設置行高。
letter-spacing 設置字元間距。
text-align 對齊元素中的文本。
text-decoration 向文本添加修飾。
text-indent 縮進元素中文本的首行。
text-transform 控制元素中的字母。
unicode-bidi 設置文本方向。
white-space 設置元素中空白的處理方式。
word-spacing 設置字間距。
5、CSS字體
屬性 描述
font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family 設置字體系列。
font-size 設置字體的尺寸。
font-style 設置字體風格。
font-variant 以小型大寫字體或者正常字體顯示文本。
font-weight 設置字體的粗細。
6、CSS鏈接
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 滑鼠指針位於鏈接的上方
a:active - 鏈接被點擊的時刻
當為鏈接的不同狀態設置樣式時，請按照以下次序規則：
a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後
text-decoration 屬性大多用於去掉鏈接中的下劃線
7、CSS列表屬性(list)
屬性 描述
list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中。
list-style-image 將圖象設置為列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
list-style-type 設置列表項標誌的類型。
8、CSS表格屬性(Table)
屬性 描述
border
border-collapse 設置是否把表格邊框合併為單一的邊框。
border-spacing 設置分隔單元格邊框的距離。
caption-side 設置表格標題的位置。
empty-cells 設置是否顯示表格中的空單元格。
table-layout 設置顯示單元、行和列的演算法。
9、盒子模型
margin：外邊距
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
padding：內邊距
border：邊框
border-style、border-color、border-width
內容
10、CSS定位(position)
1、相對定位(relative)
1、占用文檔流
2、是基於原來文檔流中的位置
3、以邊框為基準
2、絕對定位(absolute)
1、脫離文檔流
2、是以瀏覽器視窗為基本位置
3、以邊框為基準
3、fixed
相對於視窗的定位
4、浮動(float)
1、脫離文檔流
2、會把內容擠掉
clear：
清除前面的元素浮動對後面元素的影響
5、relative和absolute混用
1、元素作為容器時，設置為relative，其內部元素如果是absolute，內部元素以容器為基準
