2、CSS是Web設計界的一次革命。CSS的具體優點包括：
（1）通過單個樣式表控制多個文檔的佈局；
（2）更精確的佈局控制；
（3）爲不同的媒體類型（屏幕、打印等）採取不同的佈局；
（4）無數高級、先進的技巧。
3、基本的CSS模型：body {background-color: #FF0000;}
方法1：行內樣式表（style屬性）<body style="background-color: #FF0000;">
方法2：內部樣式表（style元素）
<style type="text/css">body {background-color: #FF0000;}</style>
方法3：外部樣式表（引用一個樣式表文件），外部樣式表就是一個擴展名爲css的文本文件。跟其他文件一樣，你可以把樣式表文件放在Web服務器上或者本地硬盤上。在HTML文檔裏創建一個指向外部樣式表文件的鏈接（link）即可引用一個外部樣式表文件，如<link rel="stylesheet" type="text/css" href="style/style.css" />（例如，比方說你的樣式表文件名爲style.css，它通常被存放於名爲style的目錄中。）注意要在href屬性裏給出樣式表文件的地址。這行代碼必須被插入HTML代碼的頭部（header），即放在標籤<head>和標籤</head>之間。
5、CSS背景屬性
color：前景色
background-color：背景色
background-image：背景圖像
background-repeat：平鋪背景圖像
background-attachment：固定背景圖像
background-position：放置背景圖像
background：上述所有與背景有關的屬性的縮寫用法
6、CSS字體屬性
font-family：font-family的作用是設置一組按優先級排序的字體列表，如果該列表中的第一個字體未在訪問者計算機上安裝，那麼就嘗試列表中的下一個字體，依此類推，直到列表中的某個字體是已安裝的。
font-style：CSS屬性font-style定義所選字體的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。
font-variant：CSS屬性font-variant的值可以是：normal（正常）或small-caps（小體大寫字母）。
font-weight：CSS屬性font-weight指定字體顯示的濃淡程度。其值可以是normal（正常）或bold（加粗）。有些瀏覽器甚至支持採用100到900之間的數字（以百爲單位）來衡量字體的濃淡。
font-size：設置字體大小，有四個單位（px,pt,%,em）,‘px’和‘pt’將字體設置爲固定大小，而‘%’和‘em’允許頁面瀏覽者自行調整字體的顯示尺寸。有些頁面瀏覽者可能是殘疾者、年長者、視力不佳者，或者他所使用的電腦顯示屏顯示質量差。爲了令你的網站對所有人都具有良好的可用性（accessibility），你應採用像‘%’或‘em’這種允許用戶調節字體顯示大小的單位。
font:CSS屬性font是上述各有關字體的CSS屬性的縮寫用法。
7、CSS文本屬性
text-indent：CSS屬性text-indent用於爲段落設置首行縮進，以令其具有美觀的格式。
text-align：CSS屬性text-align與HTML屬性align的功能相同。該屬性的值可以是：left（左對齊）、right（右對齊）或者center（居中）。除了上面三種選擇以外，你還可以將該屬性的值設爲justify（兩端對齊），即伸縮行中的文字以左右靠齊。報刊雜誌經常採用這種佈局。
text-decoration：CSS屬性text-decoration令我們可以爲文本增添不同的“裝飾”或“效果”。例如，你可以爲文本增添下劃線underline、刪除線line-through、上劃線overline等等。
letter-spacing：CSS屬性letter-spacing用於設置文本的水平字間距。我們可以把期望的字間距寬度作爲這個屬性的值。
text-transform：CSS屬性text-transform用於控制文本的大小寫。無論字母本來的大小寫，你可以通過該屬性令它首字母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase）。
8、鏈接
CSS允許你根據鏈接是未訪問的、已訪問的、活動的、是否有鼠標懸停等分別定義不同的屬性。這樣，我們便可爲網站增添奇特而有用的效果。你需要通過僞類（pseudo-class）來控制這些效果。可以通過僞類分別爲訪問過的鏈接和未訪問過的鏈接設置不同的樣式。爲未訪問過的鏈接和已訪問過的鏈接分別使用僞類a:link和a:visited。活動的鏈接對應的僞類爲a:active，有鼠標懸停的鏈接對應的僞類爲a:hover。
a:link {
color: blue;
}
a:visited {
color: red;
}
9、對鏈接的分類是通過爲鏈接設置HTML屬性class實現的。
<p>製造白葡萄酒的葡萄：</p>
<ul>
<li><a href="ri.htm" class="whitewine">雷司令（Riesling）</a></li>
<li><a href="ch.htm" class="whitewine">夏敦埃（Chardonnay）</a></li>
<li><a href="pb.htm" class="whitewine">白比諾（Pinot Blanc）</a></li>
</ul>
<p>製造紅葡萄酒的葡萄：</p>
<ul>
<li><a href="cs.htm" class="redwine">卡百內索維農（Cabernet Sauvignon）</a></li>
<li><a href="me.htm" class="redwine">墨爾樂（Merlot）</a></li>
<li><a href="pn.htm" class="redwine">黑比諾（Pinot Noir）</a></li>
</ul>
CSS樣式表如下：
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
如上例所示，你可以通過在樣式表裏利用.classname來爲屬於某一類的元素定義CSS屬性。
10、除了可以對元素進行分類以外，你還可以標識單個元素。這是通過HTML屬性id實現的。
<h1 id="c1">第1章</h1>
...
<h2 id="c1-1">第1.1節</h2>
...
<h2 id="c1-2">第1.2節</h2>
...
<h1 id="c2">第2章</h1>
...
<h2 id="c2-1">第2.1節</h2>
...
<h3 id="c2-1-2">第2.1.1節</h3>
假如我們要求第1.2節顯示爲紅色，那麼CSS可以這樣寫：
#c1-2 {
color: red;
}
如上例所示，你可以在樣式表裏通過#id爲特定元素定義CSS屬性。
11、span和div元素用於組織和結構化文檔，並經常聯合class和id屬性一起使用。span元素可以說是一種中性元素，因爲它不對文檔本身添加任何東西。但是與CSS結合使用的話，span可以對文檔中的部分文本增添視覺效果。span的使用侷限在一個塊元素內，而div可以被用來組織一個或多個塊元素。除去這點區別，div和span在組織元素方面相差無幾。
12、span實例
<p>早睡早起
使人<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聰穎</span>。</p>
相應的CSS代碼如下：
span.benefit {
color:red;
}
13、div實例
<div id="democrats">
<ul>
<li>富蘭克林·D·羅斯福</li>
<li>哈利·S·杜魯門</li>
<li>約翰·F·肯尼迪</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>德懷特·D·艾森豪威爾</li>
<li>理查德·尼克松</li>
<li>傑拉爾德·福特</li>
</ul>
</div>
相應的CSS代碼如下：
#democrats {
background:blue;
}
#republicans {
background:red;
}
14、CSS中的盒狀模型
15、一個元素有上（top）、下（bottom）、左（left）、右（right）四個邊。外邊距（margin）表示從一個元素的邊到相鄰元素(或者文檔邊界)之間的距離。
爲文檔本身（即body元素）定義外邊距，CSS代碼如下：
body {
margin-top:100px;
margin-right:40px;
margin-bottom:10px;
margin-left:70px;
}
或者你也可以採用一種較優雅的縮寫形式：
body {
margin: 100px 40px 10px 70px;
}
幾乎所有元素都可以採用跟上面一樣的方法來設置外邊距。
16、
內邊距（padding）也可以被理解成“填充物”。這樣理解是合理的，因爲內邊距並不影響元素間的距離，它只定義元素的內容與元素邊框之間的距離。
通過爲標題設置內邊距，你可以控制在標題文本週圍填充多少空白：
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
17、邊框（border）可以有多種用途，比如作爲裝飾元素或者作爲劃分兩物的分界線。在設置邊框方面，CSS爲你提供了無盡選擇。邊框寬度[border-width]由CSS屬性border-width定義，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。CSS屬性border-color用於定義邊框的顏色。其值就是正常的顏色值，例如：“#123456”、 “rgb(123,123,123)”、“yellow”等。邊框樣式[border-style]有多種可供選擇，如dotted，dashed,solid,double,groove,ridge,inset,outset。
h1 {
border-width: thick;
border-style: dotted;
border-color:gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
18、
跟許多其他屬性一樣，你也可以將有關邊框的CSS屬性縮寫爲一個border屬性。
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
可被縮寫爲：
p {
border: 1px solid blue;
}
19、可以通過width屬性來設定一個元素的寬度，即在水平方向上的尺寸。可以通過height屬性來設定一個元素的高度。
20、
可以通過CSS屬性float令元素向左或向右浮動。也就是說，令盒子及其中的內容浮動到文檔（或者是上層盒子）的右邊或者左邊，float屬性的值可以是left、right或者none。
#picture {
float:left;
width: 100px;
}
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
21、CSS屬性clear用於控制浮動元素的後繼元素的行爲。缺省地，後繼元素將向上移動，以填補由於前面元素的浮動而空出的可用空間。clear屬性的值可以是left、right、both或none。原則是這樣的：如果一個盒子的clear屬性被設爲“both”，那麼該盒子的上邊距將始終處於前面的浮動盒子（如果存在的話）的下邊距之下。
22、CSS定位的原理是：你可以將任何盒子（box）放置在座標系統的任何位置上。一個採用絕對定位的元素不獲得任何空間。這意味着：該元素在被定位後不會留下空位。要對元素進行絕對定位，應將position屬性的值設爲absolute。接着，你可以通過屬性left、right、top和bottom來設定將盒子放置在哪裏。要對元素進行相對定位，應將position屬性的值設爲relative。絕對定位與相對定位的區別在於計算位置的方式。採用相對定位的元素，其位置是相對於它在文檔中的原始位置計算而來的。這意味着，相對定位是通過將元素從原來的位置向右、向左、向上或向下移動來定位的。採用相對定位的元素會獲得相應的空間。
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
23、用z-index進行層次堆疊，其原理是：數字較大的元素將疊加在數字較小的元素之上。