一、背景：

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 字元的處理。詳：

三、字型

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;}