一、選擇器：
- 標簽選擇器：
h1
{
color:red;
text-align:center;
}
- id選擇器，id唯一
# para1
{
text-align:center;
color:red;
}
- class選擇器，class可以為一組元素
. center
{
text-align:center;
}
- 不同選擇器之間可以嵌套：
p. center
{
color:red;
#a {
text-align:center;
}
}
二、樣式表三種插入方式：
- 外部樣式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
- 內部樣式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 內聯樣式(Inline style)
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
優先規則：內聯樣式 > id 選擇器 > 類選擇器 > 標簽選擇器
三、通用標簽
| 屬性 |
含義 |
| height |
設置元素的高度 |
| width |
設置元素的寬度 |
| line-height |
設置行高 |
| max-height |
設置元素的最大高度 |
| max-width |
設置元素的最大寬度 |
| min-height |
設置元素的最小高度 |
| min-width |
設置元素的最小寬度 |
四、背景屬性
| 屬性 |
含義 |
| background |
簡寫屬性，作用是將背景屬性設置在一個聲明中 |
| background-attachment |
背景圖像是否固定或者隨著頁面的其余部分滾動 |
| background-color |
設置元素的背景顏色 |
| background-image |
把圖像設置為背景 |
| background-position |
設置背景圖像的起始位置 |
| background-repeat |
設置背景圖像是否及如何重復 |
簡寫：body {background:#ffffff url('img_tree.png') no-repeat right top;}
顏色定義：
- 十六進制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 顏色名稱 - 如："red"
五、文本樣式
| 屬性 |
含義 |
| color |
設置文本顏色 |
| direction |
設置文本方向 |
| letter-spacing |
設置字符間距 |
| line-height |
設置行高 |
| text-align |
對齊元素中的文本 |
| text-decoration |
向文本添加修飾 |
| text-indent |
縮進元素中文本的首行 |
| text-shadow |
設置文本陰影 |
| text-transform |
控制元素中的字母 |
| unicode-bidi |
設置或返回文本是否被重寫 |
| vertical-align |
設置元素的垂直對齊 |
| white-space |
設置元素中空白的處理方式 |
| word-spacing |
設置字間距 |
六、字體樣式
| 屬性 |
含義 |
| font |
在一個聲明中設置所有的字體屬性 |
| font-family |
指定文本的字體系列 |
| font-size |
指定文本的字體大小 |
| font-style |
指定文本的字體樣式 |
| font-variant |
以小型大寫字體或者正常字體顯示文本 |
| font-weight |
指定字體的粗細 |
七、鏈接
| 屬性 |
含義 |
| a:link{color:#000000;} |
未訪問鏈接 |
| a:visited{color:#00FF00;} |
已訪問鏈接 |
| a:hover{color:#FF00FF;} |
鼠標移動到鏈接上 |
| a:active{color:#0000FF;} |
鼠標點擊時 |
八、列表
無序列表ul
有序列表ol
| 屬性 |
含義 |
| list-style |
簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中 |
| list-style-image |
將圖像設置為列表項標志 |
| list-style-position |
設置列表中列表項標志的位置 |
| list-style-type |
設置列表項標志的類型 |
九、盒子
| 屬性 |
含義 |
| list-style |
外邊距 |
| list-style-image |
邊框 |
| list-style-position |
內邊距 |
| list-style-type |
內容 |
十、顯示
Display（顯示），不占用空間
Visibility（可見性），影響布局
- 塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示
- 內聯元素(inline)特性：
和相鄰的內聯元素在同一行
display:block -- 顯示為塊級元素
display:inline -- 顯示為內聯元素
十一、定位
| 屬性 |
含義 |
| static |
不受top, bottom, left, right影響 |
| relative |
相對其正常位置的偏移 |
| fixed |
元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動 |
| absolute |
絕對定位的元素的位置相對于最近的已定位父元素 |
| sticky |
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;它會固定在目標位置。 |
十二、Overflow
| 屬性 |
含義 |
| visible |
默認值。內容不會被修剪，會呈現在元素框之外 |
| hidden |
內容會被修剪，并且其余內容是不可見的 |
| scroll |
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容 |
| auto |
如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容 |
| inherit |
規定應該從父元素繼承 overflow 屬性的值 |
overflow 屬性只工作于指定高度的塊元素上
在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)
十三、Float
- CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
- Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
- 元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
- 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
- 浮動元素之后的元素將圍繞它。
