一、背景：
CSS 允許應用純色作為背景，也允許使用背景影像建立相當複雜的效果。
1、背景色
可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。
例如：
p {background-color: gray;}
2、背景影像
要把影像放入背景，需要使用 background-image 屬性。background-image 屬性的預設值是 none，表示背景上沒有放置任何影像。如果需要設定一個背景影像，必須為這個屬性設定一個 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
3、背景影像重複
如果需要在頁面上對背景影像進行平鋪，可以使用 background-repeat 屬性。
屬性值 repeat 導致影像在水平垂直方向上都平鋪，就像以往背景影像的通常做法一樣。repeat-x 和 repeat-y 分別導致影像只在水平或垂直方向上重複，no-repeat 則不允許影像在任何方向上平鋪。
預設地，背景影像將從一個元素的左上角開始。請看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
4、背景影像定位
可以利用 background-position 屬性改變影像在背景中的位置。
下面的例子在 body 元素中將一個背景影像居中放置：
body
{
background-image:url(`/i/eg_bg_03.gif`);
background-repeat:no-repeat;
background-position:center;
}
為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同型別的值對於背景影像的放置稍有差異。
5、背景影像關聯
如果文件比較長，那麼當文件向下滾動時，背景影像也會隨之滾動。當文件滾動到超過影像的位置時，影像就會消失。您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以宣告影像相對於可視區是固定的（fixed），因此不會受到滾動的影響：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
二、文字CSS 文字屬性可定義文字的外觀。
1、縮排文字（text-indent ）
p {text-indent: -5em;}
2、水平對齊（text-align）
h1{text-align:center;}
3、字間隔（word-spacing）
p {word-spacing: 30px;}
4、字母間隔（letter-spacing）
h4 {letter-spacing: 20px}
5、字元轉換（text-transform）
屬性值：
- none
- uppercase
- lowercase
- capitalize
h1 {text-transform: uppercase}
6、文字裝飾（text-decoration）
屬性值：
- none
- underline
- overline
- line-through
- blink
a {text-decoration: none;}
7、文字方向（direction）
【注：對於行內元素，只有當 unicode-bidi 屬性設定為 embed 或 bidi-override 時才會應用 direction 屬性。】
屬性值：
- ltr
- rtl
p {word-direction : rtl;}
8、處理空白符（white-space）
white-space 屬性會影響到使用者代理對源文件中的空格、換行和 tab 字元的處理。詳：
| 值 | 空白符 | 換行符 | 自動換行 |
| pre-line | 合併 | 保留 | 允許 |
| normal | 合併 | 忽略 | 允許 |
| nowrap | 合併 | 忽略 | 不允許 |
| pre | 保留 | 保留 | 不允許 |
| pre-wrap | 保留 | 保留 | 允許 |
三、字型
1、設定字型系列。（font-family）
h1 {font-family: Georgia;}
2、設定字型的尺寸。（font-size）
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
3、設定字型風格。（font-style）
屬性值：
- normal : 文字正常顯示
- italic : 文字斜體顯示
- oblique : 文字傾斜顯示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
4、以小型大寫字型或者正常字型顯示文字。（font-variant）
p {font-variant:small-caps;}
5、設定字型的粗細。（font-weight）
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
四、列表
1、將圖象設定為列表項標誌。（list-style-image）
ul li {list-style-image : url(xxx.gif)}
2、設定列表中列表項標誌的位置。（list-style-position）
屬性值：
- inside：列表專案標記放置在文字以內，且環繞文字根據標記對齊。
- outside：預設值。保持標記位於文字的左側。列表專案標記放置在文字以外，且環繞文字不根據標記對齊。
- inherit:規定應該從父元素繼承 list-style-position 屬性的值。
ul{list-style-position:inside;}
3、設定列表項標誌的型別。（list-style-type）
ul {list-style-type : square}
五、表格
1、設定是否把表格邊框合併為單一的邊框。（border-collapse）
屬性值：
- separate：預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
- collapse：如果可能，邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
- inherit：規定應該從父元素繼承 border-collapse 屬性的值。
table{border-collapse:collapse;}
2、設定分隔單元格邊框的距離。（border-spacing）
table{border-spacing:10px 50px;}
3、設定表格標題的位置。（caption-side）
屬性值：
- top：預設值。把表格標題定位在表格之上。
- bottom：把表格標題定位在表格之下。
- inherit：規定應該從父元素繼承 caption-side 屬性的值。
caption{caption-side:bottom;}
4、設定是否顯示錶格中的空單元格。（empty-cells）
屬性值：
- hide：不在空單元格周圍繪製邊框。
- show：在空單元格周圍繪製邊框。預設。
- inherit：規定應該從父元素繼承 empty-cells 屬性的值。
table{empty-cells:hide;}
5、設定顯示單元、行和列的演算法。（table-layout）
屬性值：
- automatic：預設。列寬度由單元格內容設定。
- fixed：列寬由表格寬度和列寬度設定。
- inherit：規定應該從父元素繼承 table-layout 屬性的值。
table{table-layout:fixed;}
六、輪廓
輪廓（outline）是繪製於元素周圍的邊框線，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
1、設定輪廓的顏色。（outline-color）
p{outline-color:#00ff00;}
2、設定輪廓的樣式。（outline-style）
屬性值：
- none：預設。定義無輪廓。
- dotted：定義點狀的輪廓。
- dashed：定義虛線輪廓。
- solid：定義實線輪廓。
- double：定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
- groove：定義 3D 凹槽輪廓。此效果取決於 outline-color 值。
- ridge：定義 3D 凸槽輪廓。此效果取決於 outline-color 值。
- inset：定義 3D 凹邊輪廓。此效果取決於 outline-color 值。
- outset：定義 3D 凸邊輪廓。此效果取決於 outline-color 值。
- inherit：規定應該從父元素繼承輪廓樣式的設定。
p{outline-style:dotted;}
3、設定輪廓的寬度。（outline-width）
p{outline-width:5px;}