原文來自搬磚工，如需轉載請註明出處
java基礎專欄請戳這裏http://blog.csdn.net/column/details/14176.html
博主SSH框架專欄請戳這裏http://blog.csdn.net/column/details/14227.html
一：CSS的工作原理
1.基本的CSS語法
比方說，我們要用紅色作爲網頁的背景色：
用HTML的話，我們可以這樣：
<body bgcolor="#FF0000">
用CSS的話，我們可以這樣獲得同樣的效果：
body {background-color: #FF0000;}
上例也向你展示了基本的CSS模型：
爲HTML文檔應用CSS，有三種方法可供選擇。下面對這三種方法進行了概括。我們建議你對第三種方法（即外部樣式表）予以關注。
方法1：行內樣式表（style屬性）
爲HTML應用CSS的一種方法是使用HTML屬性style。我們在上例的基礎之上，通過行內樣式表將頁面背景設爲紅色：
<body style="background-color: #FF0000;">
方法2：內部樣式表（style元素）
爲HTML應用CSS的另一種方法是採用HTML元素style。比如像這樣：
<style type="text/css">
body {background-color: #FF0000;}
</style>
方法3：外部樣式表（引用一個樣式表文件）
我們推薦採用這種引用外部樣式表的方法。外部樣式表就是一個擴展名爲css的文本文件。跟其他文件一樣，你可以把樣式表文件放在Web服務器上或者本地硬盤上。
導入語法：
<link rel="stylesheet" type="text/css" href="style/style.css" />
注意要在href屬性裏給出樣式表文件的地址。
這行代碼必須被插入HTML代碼的頭部（header），即放在標籤<head>和標籤</head>之間。就像這樣：
<html>
<head>
<title>我的文檔</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
這個鏈接告訴瀏覽器：在顯示該HTML文件時，應使用給出的CSS文件進行佈局。
這種方法的優越之處在於：多個HTML文檔可以同時引用一個樣式表。換句話說，可以用一個CSS文件來控制多個HTML文檔的佈局。
這一方法可以令你省去許多工作。例如，假設你要修改某網站的所有網頁（比方說有100個網頁）的背景顏色，採用外部樣式表可以避免你手工一一修改這100個HTML文檔的工作。採用外部樣式表，這樣的修改只需幾秒鐘即可搞定——修改外部樣式表文件裏的代碼即可。
然後，把這兩個文件放在同一目錄下。記得在保存文件時使用正確的擴展名（分別爲“htm”和“css”）。
二：顏色與背景
前臺頁面背景和顏色主要包括下面內容：
· color
前景色：‘color’屬性
CSS屬性color用於指定元素的前景色。
例如，假設你要讓頁面中的所有標題（headline）都顯示爲深紅色，而這些標題採用的都是h1元素，那麼可以用下面的代碼來實現把h1元素的前景色設爲紅色。
h1 {
color: #ff0000;
}
CSS屬性background-color用於指定元素的背景色。
因爲body元素包含了HTML文檔的所有內容，所以，如果要改變整個頁面的背景色的話，那麼爲body元素應用background-color屬性就行了。
你也可以爲其他包含標題或文本的元素單獨應用背景色。在下例中，我們爲body和h1元素分別應用了不同的背景色。
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
注意：我們爲h1元素應用了兩個CSS屬性，它們之間以分號（“;”）分隔。
CSS屬性background-image用於設置背景圖像。
如果要把這個蝴蝶的圖片作爲網頁的背景圖像，只要在body元素上應用background-image屬性、然後給出蝴蝶圖片的存放位置就行了。
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
注意我們指定圖片存放位置的方式：url("butterfly.gif")。這表明圖片文件和樣式表存放在同一目錄下。你也可以引用存放在其他目錄的圖片，只需給出存放路徑即可（比如url("../images/butterfly.gif")）；此外，你甚至可以通過給出圖片的地址來引用因特網（Internet）上的圖片（比如url("http://www.html.NET/butterfly.gif")）。
平鋪背景圖像[background-repeat]
下表概括了background-repeat的四種不同取值。
|
值 |
描述 |
示例 |
|
background-repeat:repeat-x |
圖像橫向平鋪 |
|
|
background-repeat:repeat-y |
圖像縱向平鋪 |
|
|
background-repeat:repeat |
圖像橫向和縱向都平鋪 |
|
|
background-repeat:no-repeat |
圖像不平鋪 |
例如，爲了避免平鋪背景圖像，代碼應該這樣：
body {
background-image: url("butterfly.gif");
background-repeat: no-repeat; }
固定背景圖像[background-attachment]
CSS屬性background-attachment用於指定背景圖像是固定在屏幕上的、還是隨着它所在的元素而滾動的。
一個固定的背景圖像不會隨着用戶滾動頁面而發生滾動（它是固定在屏幕上的），而一個非固定的背景圖像會隨着頁面的滾動而滾動。
下表概括了background-attachment的兩種不同取值。你可以點擊示例察看二者的區別。
|
值 |
描述 |
示例 |
|
background-attachment:scroll |
圖像會跟隨頁面滾動——非固定的 |
|
|
background-attachment:fixed |
圖像是固定在屏幕上的 |
例如，下面的代碼將背景圖像固定在屏幕上。
body {
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
放置背景圖像[background-position]
缺省地，背景圖像將被放在屏幕的左上角。但是，你可以通過CSS屬性background-position來修改這一缺省設置，將背景圖像擺放在屏幕上你覺得滿意的地方。
設置background-position屬性的值有多種方式。不過，它們都是座標的格式。舉例來說，值“100px 200px”表示背景圖像將被放置在位於距瀏覽器窗口左邊100像素、頂部200像素處。
座標可以是以百分比或固定單位（比如像素、釐米等）作爲單位的值，也可以是“top”、“bottom”、“center”、“left”和“right”這些值。
下表給出了一些例子。
|
值 |
描述 |
示例 |
|
background-position:2cm 2cm |
圖像被放置在頁面內距左邊2釐米、頂部2釐米的地方 |
|
|
background-position:50% 25% |
圖像被放置在頁面內水平居中、離頂部四分之一處 |
|
|
background-position:top right |
圖像被放置在頁面的右上角 |
在下例中，背景圖像被放置在頁面的右下角：
body {
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
縮寫[background]
CSS屬性background是上述所有與背景有關的屬性的縮寫用法。
使用background屬性可以減少屬性的數目，因此令樣式表更簡短易讀。
比如說下面五行代碼：
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
如果使用background屬性的話，實現同樣的效果只需一行代碼即可搞定：
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
各個值應按下列次序來寫：
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
如果省略某個屬性不寫出來，那麼將自動爲它取缺省值。比如，如果去掉background-attachment和background-position的話：
background: #FFCC66 url("butterfly.gif") no-repeat;
這兩個未指定值的屬性將被設置爲缺省值：scroll和top left。
三：字體
CSS字體屬性主要包括下面幾個：
font-family，font-style，font-variant，font-weight，font-size
，font
字體族[font-family]
CSS屬性font-family的作用是設置一組按優先級排序的字體列表，如果該列表中的第一個字體未在訪問者計算機上安裝，那麼就嘗試列表中的下一個字體，依此類推，直到列表中的某個字體是已安裝的。
有兩種類型的名稱可用於分類字體：字體族名稱（family-name）和族類名稱（generic family）。下面來解釋這兩個術語。
字體族名稱（就是我們通常所說的“字體”）的例子包括“Arial”、“Times New Roman”、“宋體”、“黑體”等等。
一個族類是一組具有統一外觀的字體族。sans-serif就是一例，它代表一組沒有“腳”的字體。
你在給出字體列表時，自然應把首選字體放在前面、把候選字體放在後面。建議你在列表的最後給出一個族類（generic family），這樣，當沒有一個指定字體可用時，頁面至少可以採用一個相同族類的字體來顯示。
下面是一個按優先級排列的字體列表的例子：
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
h1標題將採用Arial字體顯示。如果訪問者的計算機未安裝Arial，那麼就使用Verdana字體。假如Verdana字體也沒安裝的話，那麼將採用一個屬於sans-serif族類的字體來顯示這個h1標題。
注意我們爲“Times New Roman”採用的寫法：因爲其中包含空格，所以我們用引號將它括起來。
字體樣式[font-style]
CSS屬性font-style定義所選字體的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。在下例中，所有h2標題都將顯示爲斜體。
h2 {font-family: "Times New Roman", serif; font-style: italic;}
字體變化[font-variant]
CSS屬性font-variant的值可以是：normal（正常）或small-caps（小體大寫字母）。small-caps字體是一種以小尺寸顯示的大寫字母來代替小寫字母的字體。不太明白？我們來看幾個例子：
如果font-variant屬性被設置爲small-caps，而沒有可用的支持小體大寫字母的字體，那麼瀏覽器多半會將文字顯示爲正常尺寸（而不是小尺寸）的大寫字母。
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
字體濃淡[font-weight]
CSS屬性font-weight指定字體顯示的濃淡程度。其值可以是normal（正常）或bold（加粗）。有些瀏覽器甚至支持採用100到900之間的數字（以百爲單位）來衡量字體的濃淡。
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
字體大小[font-size]
字體的大小用CSS屬性font-size來設置。
字體大小可通過多種不同單位（比如像素或百分比等）來設置。在本教程中，我們將關注於最常用和最合適的單位。比如：
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
上面四種單位有着本質的區別。‘px’和‘pt’將字體設置爲固定大小，而‘%’和‘em’允許頁面瀏覽者自行調整字體的顯示尺寸
縮寫[font]
CSS屬性font是上述各有關字體的CSS屬性的縮寫用法。
比如說下面四行應用於p元素的代碼：
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
如果用font屬性的話，上述四行代碼可簡化爲：
p {font: italic bold 30px arial, sans-serif; }
font屬性的值應按以下次序書寫：
font-style | font-variant | font-weight | font-size | font-family
四：文本
文本主要包括下列CSS屬性：
text-indent.,text-align,text-decoration,letter-spacing.
文本縮進[text-indent]
CSS屬性text-indent用於爲段落設置首行縮進，以令其具有美觀的格式。在下例中，我們爲採用p元素的段落應用了30像素的首行縮進。
p {text-indent: 30px;}
文本對齊[text-align]
CSS屬性text-align與HTML屬性align的功能相同。該屬性的值可以是：left（左對齊）、right（右對齊）或者center（居中）。除了上面三種選擇以外，你還可以將該屬性的值設爲justify（兩端對齊），即伸縮行中的文字以左右靠齊。報刊雜誌經常採用這種佈局。
在下例中，標題（th）中的文字被設置爲右對齊，而表中數據（td） 被設置爲居中。正常的文本段落被設置爲兩端對齊。
th {text-align: right;}
td {text-align: center;}
p {text-align: justify; }
文本裝飾[text-decoration]
CSS屬性text-decoration令我們可以爲文本增添不同的“裝飾”或“效果”。例如，你可以爲文本增添下劃線、刪除線、上劃線等等。在接下來的例子中，我們爲h1標題增添了下劃線，爲h2標題增添了上劃線，爲h3標題增添了刪除線。
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
字符間距[letter-spacing]
CSS屬性letter-spacing用於設置文本的水平字間距。我們可以把期望的字間距寬度作爲這個屬性的值。例如，假如你希望p元素裏的文本段落的字間距爲3個像素，而h1標題的字間距爲6個像素，代碼可以這樣寫：
h1 {letter-spacing: 6px; }
p {letter-spacing: 3px;}
文本轉換[text-transform]
CSS屬性text-transform用於控制文本的大小寫。無論字母本來的大小寫，你可以通過該屬性令它首字母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase）。
比如，單詞“headline”在展現給網頁瀏覽者時，可以是“HEADLINE”或者“Headline”。
text-transform屬性有四個可選值：
capitalize將每個單詞的首字母轉換爲大寫。
uppercase所有字母都轉換爲大寫。
lowercase所有字母都轉換爲小寫
none不作任何轉換——文本怎麼寫的就怎麼顯示。
五：鏈接
在前面講到的屬性也可以應用到鏈接上（比如修改顏色、字體、添加下劃線等）。但不同的是，CSS允許你根據鏈接是未訪問的、已訪問的、活動的、是否有鼠標懸停等分別定義不同的屬性。這樣，我們便可爲網站增添奇特而有用的效果。你需要通過僞類（pseudo-class）來控制這些效果。
僞類是什麼？
僞類（pseudo-class）令你可以在爲HTML元素定義CSS屬性的時候將條件和事件考慮在內。
我們來看一個例子。正如你所知道的，在HTML裏，鏈接是通過a元素來定義的。因此，在CSS裏，我們可以將a作爲一個選擇器
a {color: blue;}
一個鏈接可以有不同的狀態。例如，它可以是已訪問過的，也可以是未訪問過的。你可以通過僞類分別爲訪問過的鏈接和未訪問過的鏈接設置不同的樣式。
a:link {color: blue;}
a:visited {color: red;}
爲未訪問過的鏈接和已訪問過的鏈接分別使用僞類a:link和a:visited。活動的鏈接對應的僞類爲a:active，有鼠標懸停的鏈接對應的僞類爲a:hover。
僞類： active
僞類:active用於活動的鏈接（即獲得當前焦點的鏈接）。
a:active {background-color: #FFFF00;}
僞類： hover用於有鼠標懸停的鏈接。
如果你要當鼠標光標移到鏈接上時將鏈接顯示爲橙色斜體，那麼CSS可以這樣寫：
a:hover {color: orange;
font-style: italic; }
如何去掉鏈接的下劃線是一個常見的問題。
a {text-decoration:none;}
六：元素的分類與標識（class和id）
1.用class對元素進行分類
我們希望白葡萄酒的鏈接全部顯示爲黃色，紅葡萄酒的鏈接全部顯示爲紅色，其餘的鏈接顯示爲缺省的蘭色。爲了實現這一要求，我們將鏈接分爲兩類。對鏈接的分類是通過爲鏈接設置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>
然後，我們就可以爲白葡萄酒和紅葡萄酒的鏈接分別應用不同的風格了。
a {color: blue;}
a.whitewine {color: #FFBB00;}
a.redwine {color: #800000; }
如上例所示，你可以通過在樣式表裏利用.classname來爲屬於某一類的元素定義CSS屬性。
利用id標識元素
除了可以對元素進行分類以外，你還可以標識單個元素。這是通過HTML屬性id實現的。HTML屬性id的特別之處在於，在同一HTML文檔中不能有兩個具有相同id值的元素。文檔中的每個id值都必須是唯一的。在其他情況下，你應該使用class屬性。下面，我們來看一個使用id屬性的例子：
<h1 id="c1">第1章</h1>
...
<h2 id="c1-1">第1.1節</h2>
...
<h2 id="c1-2">第1.2節</h2>
假如我們要求第1.2節顯示爲紅色，那麼CSS可以這樣寫：
#c1-2 {
color: red;
}
如上例所示，你可以在樣式表裏通過#id爲特定元素定義CSS屬性。