以下文章為轉載...希望對大家有所幫助
CSS簡介：
在今天，不會CSS（Casading Style Sheets 層疊樣式表）的網頁製作員不可以稱為專業的網頁製作人員。會HTML語言再學CSS並不難，因為CSS跟HTML一樣也是一種標記語言，甚至很多屬性都是來源於HTML。
CSS的編輯方法同HTML一樣，也可以是任何文本編輯器或網頁編輯軟件，還有專門用來編輯CSS的軟件。 如果你寫的CSS語句是當成外部樣式表而在HTML文件中調用，那它的擴展名存成.css就可。假如你的網站每頁使用的都是這個樣式表，那麼你修改這個文件就修改了整個網站的外觀，所花的時間可能只要兩三分鐘！
■ 一點說明：
我們在這裡講述的是CSS的一些基本使用方法，起的一個入門的作用，更詳細的技巧將不作更多介紹了，這就是為什麼稱作「CSS不完全手冊」的原因。
■ CSS使用方法：
CSS在HTML中應用有三種方法：
第一種是包含在<head>...</head>標記裡，例如：
<head>
<style type="text/css">
<!--
h1 {font-family:宋體;font-size:12pt;color=blue}
-->
</style>
</head>
<body>
<h1> 在這裡使用了H1標記</h1>
</body>
第二種是行間定義，例如：
<body>
<h1 style="font-family:宋體;font-size:12pt;color=blue">這是行間定義的H1標記</h1>
</body>
第三種是外部調用樣式文件，跟第一種類似，例如：
<head>
<LINK REL="stylesheet" href="sample.css">
</head>
第四種是也是導入樣式文件，跟第三種類似，例如：
<head>
<style type="text/css">
<!--
@import url(
http://www.yourname...yle.css);
-->
</style>
</head>
■ 分類：
CSS真是偉大，能化一為萬。假如你有幾段文字，每一段都要這樣：將第一行設成黃色，第二行設成紅色，第三行設成藍色，第四行設成綠色……其實這很容易做到。你在CSS中如下為每一行定義一個類。
P.first {color:yellow} P.second {color:red} P.third {color:blue} P.fourth {color:green} 依次定義下去。在你的HTML代碼中就是這樣使用以上的定義類。 <P class=first>這裡是第一行，使用的是class=first</p> <P class=secont>這裡是第二行，使用的是class=secont</p> <P class=third>這裡是第三行，使用的是class=third</p> <P class=fourth>這裡是第四行，使用的是class=fourth</p>
■ 更靈活的分類：
在上面我們定義的類是前面都有一個 P，也就限定了這個類只限於<P>標記使用。如果我們在定義的時候去掉 P， 但 . 仍然要。比如：.first {color:yellow}，這樣定義的類更加靈活，可應用於任何HTML標籤，例如:
<h2 class=first >在H2標記中使用class=first</h2>
■ 選擇符 ID：
其實CLASS只是一個類的選擇符，另一個選擇符 ID 具有同樣的功能。不過使用ID選擇符的類定義的時候要將 . 換成 # ，使用時要在類別名上加上引號。
H1 #001 {color:red}
#002 {color:blue}
使用：
<H1 ID="#001"> H1標記使用#001類</H1>
<H3 ID="#002"> H3標記使用#002類</H1>
<P ID="#002"> P標記使用#002類</H1>
■ FONT-FAMILY屬性：
每部機器上都裝有多種字體，瀏覽器會使用默認的字體瀏覽網頁，比如簡體中文版WINDOWS漢字默認是宋體，英文默認是ARIAL。 使用FONT-FAMILY屬性則可以規定瀏覽器用什麼字體解讀網頁。
■ FONT-FAMILY語法實例：
h2 {font-family:times,impact,sans-serif}
說明如下:
helvetica是瀏覽器首先尋找的字體名稱，如果有就使用它。在helvetica字體沒有找到的情況下，則會尋找impact字體，如果找到就使用它。如果以上兩種字體都沒有找到，則指示瀏覽使用sans-serif（通用字體）。在你不能保證你列出的字體瀏覽者一定會安裝時，將一種通用字體加在字體列表中是一種好的做法。因此我們提倡使用最基本的字體製作網頁，比如中文用宋體，英文用ARIAL，這樣使得你的網頁不會因為瀏覽器沒能使用合適的字體解讀而變樣。
■ 其它相關內容：
通用字體有以下幾類，其中cursive和fantasy不被NC支持：
"serif"(比如Times);
"sans-serif"(比如Helvetica);
"cursive"(比如Comic Sans);
"fantasy"(比如Western);
"monospace"(比如Courier)
其他使用事項：
如果一種字體的名稱中有空格，如"Times New Roman"，在CSS語句中要用引號包含該字體。
例：Body {font-family:"Times New Roman",serif}
如果該語句已在雙引號裡，則字體名降級為單引號。
例：<P style="font-family:'Times New Roman',serif">
如果該語句包括其它CSS規則，字體說明應放在最後。
例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}
■ 繼承：
繼承：就是在子元素沒有定義樣式的情況下，它將採用上一級元素的樣式定義。
優先級：根據繼承來理解優先級也就容易。最近的樣式優先級最高。 比如:
CSS在<heda>聲明 I{font-family:impact}；
但在HTML語句中又如下定義：<P> 要顯示的文字在<I><font face="Times">這裡</font></I></P> 在此例中樣式表要求用IMPACT字體，而FONT標記要求用TIMES字體，最終瀏覽器使用的會是TIMES。作為CSS標準制定者，要求將CSS優先，他們認為像以上的例子中應該用IMPACT字體。可以瀏覽器產商照顧使用者的舊習慣，使用了FONT標記中的字體，儘管FONT已不被提倡。
■ 更好的方法--關聯：
我並講不出拋棄FONT標記的理由，只知道這是潮流。顯然CSS提供更好的方法避免你在像上面的例子一樣使用FONT標記，那就是： 關聯。 可以在HEAD部分的CSS定義中加入如下行： P I {font-family:times} /*P和I之間的空格不能少*/
在HTML中： <P>要顯示的文字在<I>這裡</I></p>
雖然你沒有使用FONT FACE，但根據HEAD部分的CSS定義，P標記裡的I標記使用的字體一定是TIMES。要提起注意的是那行CSS樣式只作用於P標記裡的I標記。
■ 大小控制方法：
以下是控制文字大小的三種方法：
使用大小單位，pt(點),px(像素),em,及其他單位；
使用關鍵字(xx-small,x-small,small,medium,large,x-large,xx-large)；
使用比例參數(150%等)。
例如：
p {font-size:12pt};
p {font-size:large};
p {font-size:200%};
■ 字體風格：
斜體 p {font-style:italic};
粗體 p {font-weight:bold};
在字重的設定方面，還有lighter(更輕)和bolder(更重)，還可以使用數字100,200到900最重。
字體風格和字重都有一個共同的參數normal，一旦設為normal也就取消了字重和風格設置。
■ FONT-VARIANT：
FONT-VARIANT 可以將正常文字尺寸縮小一半後轉為大寫：
h2 {font-variant:small-caps}
■ TEXT-TRANSFORM：
完全控制字母大小寫：
全部大寫：h2 {text-transform:uppercase};
全部小寫：h2 {text-transform:lowercase};
單詞第一個字母大寫：h2 {text-transform:capitalize};
取消所有設定：h2 {text-transform:none};
■ TEXT-DECORATION：
哪天你突發奇想，希望鏈接沒有下劃線，現在你可以做到：
文字下劃線：A:link{text-decoration:underline};
文字上劃線：A:link{text-decoration:overline};
文字刪除線：A:link{text-decoration:line-through};
文字閃爍：A:link{text-decoration:blink};
不要任何效果：A:link{text-decoration:none}
■ 字間距：
利用字間距屬性word-spacing，可以調整單詞間的距離。
h2 {word-spacing:5pt}
■ 字母間距：
利用字母間距屬性letter-spacing，可以調整單詞中每個字母間的距離。
h2 {letter-spacing:10pt};
■ 行高：
與字距不同的是行距line-height，它調整的是行與行間垂直方向的距離，有三種方法設置：
數值：h3 {font-size:12pt; line-height:2};/*此處line-height=2x12pt=24pt */
長度單位：h3 {font-size:12pt; line-height:24pt};
比例：h3 {font-size:12pt; line-height:200%};
無論是字距或字母間距或行距都有一個共同的參數：normal，一旦設為normal就是要瀏覽器使用默認值。
■ 水平對齊：
利用文字對齊屬性text-align，可以控制段落的水平對齊：
h2 {text-align:center}
h2 {text-align:left}
h2 {text-align:right}
這項屬性可作用於<P>,<h1>-<h6>,<blockquote>和<ul>標記。
■ 垂直對齊：
利用垂直對齊屬性vwrtical-align，可以控制對像（包括文字或圖形）相對於母體的垂直位置：
h2 {vertical-align:top}
h2 {vertical-align:text-top}
h2 {vertical-align:bottom}
h2 {vertical-align:text-bottom}
h2 {vertical-align:baseline}
h2 {vertical-align:middle}
h2 {vertical-align:sub}/*上標*/
h2 {vertical-align:super}/*下標*/
這些屬性具體對齊效果如何，希望大家自已去試驗。
■ 首行縮進：
首行縮進text-indent，在文檔排版中經常用到：
h3 {text-indent:24pt};
