經典實用CSS教程詳細講解

css|教程

　　CSS（Cascading Stylesheets，層疊樣式表）是一種製作網頁的新技術，現在已經為大多數的瀏覽器所支援，成為網頁設計必不可少的工具之一。使用CSS能夠簡化網頁的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數量，大大減少了重複勞動的工作量。尤其是當你面對的是有數百個網頁的網站時，CSS簡直象是神對我們的恩賜！

　　前言

　　CSS（Cascading Stylesheets，層疊樣式表）是一種製作網頁的新技術，現在已經為大多數的瀏覽器所支援，成為網頁設計必不可少的工具之一。

　　W3C（The World Wide Web Consortium）把動態HTML（Dynamic HTML）分為三個部分來實現：指令碼語言（包括javascript、Vbscript等）、支援動態效果的瀏覽器（包括Internet Explorer、Netscape Navigator等）和CSS樣式表。

　　一．層疊樣式表的特點

　　且不說過去的網頁缺少動感，就是在網頁內容的排版布局上也有很多困難，如果不是專業人員或特別有耐心的人，很難讓網頁按自己的構思和創意來顯示資訊。即便是掌握了HTML語言精髓的人也要通過多次地測試，才能駕馭好這些資訊的排版，過程十分漫長和痛苦。為了Internet的發展，讓更多人早日踏足這個多姿多彩的世界，新的HTML協助工具輔助呼之欲出。

　　樣式表就是在這種需求下誕生的，它首先要做的是為網頁上的元素精確地定位，可以讓網頁設計者象導演一樣，輕易地控制由文字、圖片組成的演員們，在網頁這個舞台上按劇本要求好好地表演。

　　其次，它把網頁上的內容結構和格式控制相分離。瀏覽者想要看的是網頁上的內容結構，而為了讓瀏覽者更好地看到這些資訊，就要通過格式控制來幫忙了。以前兩者在網頁上的分布是交錯結合的，查看修改很不方便，而現在把兩者分開就會大大方便網頁的設計者。內容結構和格式控制相分離，使得網頁可以光由內容構成，而將所有網頁的格式控制指向某個CSS樣式表檔案。這樣一來的好出表現在兩個方面：

　　第一，簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器儲存在緩衝裡，加快了下載顯示的速度，也減少了需要上傳的代碼數量（因為重複設定的格式將被只儲存一次）。

　　第二，只要修改儲存著網站格式的CSS樣式表檔案就可以改變整個網站的風格特色，在修改頁面數量龐大的網站時，顯得格外有用。避免了一個一個網頁的修改，大大減少了重複勞動的工作量，當你面對的是有數百個網頁的網站時，CSS簡直象是神對我們的恩賜！^_^

　　二．添加層疊樣式表的方法

　　我們為網頁添加樣式表的方法有四種。

　　1．最簡單的方法是直接添加在HTML的標識符（tag）裡：

　　< Tag style=”properties”>網頁內容< /tag>

　　舉個例子：

　　< p style=”color: blue; font-size: 10pt”>CSS執行個體< /p>

　　代碼說明：

　　用藍色顯示字型大小為10pt的“CSS執行個體”。儘管使用簡單、顯示直觀，但是這種方法不怎麼常用，因為這樣添加無法完全發揮樣式表的優勢“內容結構和格式控制分別儲存”。

　　2．添加在HTML的頭資訊標識符< head>裡：

< head>

< style type=”text/css”>

< !--

樣式表的具體內容

-->

< /style>

< /head>

　　type=”text/css”表示樣式表採用MIME類型，協助不支援CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以原始碼的方式顯示我們設定的樣式表。但為了保證上述情況一定不要發生，還是有必要在樣式表裡加上注釋標識符“< !--注釋內容-->”。

　　3．連結樣式表

　　同樣是添加在HTML的頭資訊標識符< head>裡：

< head>

< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>

< /head>

　　*.css是單獨儲存的樣式表檔案，其中不能包含< style>標識符，並且只能以css為尾碼。

　　Media是可選的屬性，表示使用樣式表的網頁將用什麼媒體輸出。取值範圍：

·Screen（預設）：輸出到電腦螢幕

·Print：輸出到印表機

·TV：輸出到電視機

·Projection：輸出到投影儀

·Aural：輸出到擴音器

·Braille：輸出到凸字觸覺感知裝置

·Tty：輸出到電傳打字機

·All：輸出到以上所有裝置

　　如果要輸出到多種媒體，可以用逗號分隔取值表。

　　Rel屬性工作表示樣式表將以何種方式與HTML文檔結合。取值範圍：

·Stylesheet：指定一個外部的樣式表

·Alternate stylesheet：指定使用一個互動樣式表

　　4．聯合使用樣式表

　　同樣是添加在HTML的頭資訊標識符< head>裡：

< head>

< style type=”text/css”>

< !--

@import “*.css”

其他樣式表的聲明

-->

< /style>

< /head>

　　以@import開頭的聯合樣式表輸入方法和連結樣式表的方法很相似，但聯合樣式表輸入方式更有優勢。因為聯合法可以在連結外部樣式表的同時，針對該網頁的具體情況，做出別的網頁不需要的樣式規則。

　　需要注意的是：

·聯合法輸入樣式表必須以@import開頭。

·如果同時輸入多個樣式表有衝突的時候，將按照第一個輸入的樣式表對網頁排版。

·如果輸入的樣式表和網頁裡的樣式規則衝突時，使用外部的樣式表。

　　三．層疊樣式表的格式

　　一般來說，樣式表的聲明分為選擇符（selector）和塊{}（block），塊裡包含屬性（properties）和屬性的取值（value），基本格式如下：

　　選擇符

　　其它格式1：

　　選擇符1，選擇符2，選擇符3

　　有時候多個選擇符將使用相同的設定，為了簡化代碼，我們可以一次性為它們設定樣式，並在多個選擇符之間加上“，”來分隔它們。

　　當有多個屬性的時候，必須在兩個屬性之間用“；”來分隔。

　　其它格式2：

　　選擇符1 選擇符2

　　和格式1非常相似，只是在選擇符之間少加了“，”，但作用卻大不相同。表示如果選擇符2包括的內容同時包括在選擇符1裡的時候，所設定的樣式規則才起作用。

　　四．層疊樣式表的分類

　　為了使網頁的格式不過分的單調，必需讓相同的選擇符也能分類，並能按照不同的類別來進行不同的樣式設計。基本格式如下：

　　選擇符.類別名

　　類別名將可以在HTML的標識符裡引用：

　　< 標識符 class=類別名>網頁內容

　　五．層疊樣式表的偽類

　　除了上述的分類方式外，為了使分類的使用更靈活多樣，又產生了偽類的概念。類和偽類有什麼樣的區別呢？

　　一般地說，選擇符可以和多個類採用捆綁的形式來設定，這樣雖然能夠為同一個選擇符建立多種不同的樣式，但捆綁的形式同時也限制了設定的類為其它的選擇符所使用。偽類的產生就是為瞭解決這個問題，每個預聲明的偽類都可以被所有的HTML標識符引用，當然有些塊級內容的設定除外。基本格式如下：

　　.偽類名

　　偽類可以被任何標識符在HTML裡引用。

　　<標識符 class=偽類名>網頁內容

　　六．控制字型的樣式

　　控制字型的樣式包括控制字型類型、字型大小、字型風格、字型粗細四個部分。

　　1．字型類型

　　平時在使用WORD之類的文書處理軟體的時候，經常需要調整字型的顯示，比如說“Arial”、“Impact”、“Verdana”等字型都是筆者使用的較多的。

　　基本格式如下：

　　font-family: 字型名稱

　　如果在font-family後加上多種字型的名稱，瀏覽器回按字型名稱的順序逐一在使用者的電腦裡尋找已經安裝的字型，一旦遇到與要求的相匹配的字型，就按這種字型顯示網頁內容，並停止搜尋；如果不匹配就繼續搜尋，直到找到為止，萬一樣式表裡的所有字型都沒有安裝的話，瀏覽器就會用自己預設的字型來替代顯示網頁的內容。

　　注意：

·當指定多種字型時，用“，”分隔每種字型名稱。

·當字型名稱包含兩個以上分開的單詞時，用“”把該字型名稱括起來。

·當樣式規則外已經有“”時，用‘’代替“”。

　　2．字型大小

　　基本格式如下：

　　font-size: 字型大小參數

　　字型大小的取值範圍：

·以Point為單位：點單位在所有的瀏覽器和操作平台上都適用

·以Em為單位：指字母要素的尺寸，和Point相同距離

·以Pixes為單位：像素可以使用於所有的操作平台，但可能會因為瀏覽者的螢幕解析度不同，而造成顯示上的效果差異

·以in（英寸）為單位

·以cm（厘米）為單位

·以mm（毫米）為單位

·以pc（印表機的字型大小）為單位

·以ex（x-height）為單位

·smaller：比當前文字的預設大小更小一號

·larger：比當前文字的預設大小更小大號

·使用比例關係

·xx-small

·x-small

·small

·medium

·large

·x-large

·xx-large

　　3．字型風格

　　字型風格只能控制各種斜體字的顯示。

　　基本格式如下：

　　font-style: 斜體字的名稱

　　4．字型粗細

　　字型粗細控制粗體字的顯示，取值範圍從數字100~900，瀏覽器預設的字型粗細為400。另外可以通過參數lighter和bolder使得字型在原有基礎上顯得更細或更粗些。

　　基本格式如下：

　　font-weight: 字型粗細

　　七．控制文字的樣式

　　控制文字的樣式包括文字大小寫、文字修飾兩個部分。

　　1．文字大小寫

　　文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對局部的文字設定大小寫。

　　基本格式如下：

text-transform: 參數

　　參數取值範圍：

·uppercase：所有文字大寫顯示

·lowercase：所有文字小寫顯示

·capitalize：每個單詞的頭字母大寫顯示

·none：不繼承母體的文字變形參數

注意：繼承是指HTML的標識符對於包含自己的標識符的參數會繼承下來。

　　2．文字修飾

　　文字修飾的主要用途是改變瀏覽器顯示文字連結時的底線。

　　基本格式如下：

　　text-decoration: 參數

　　參數取值範圍：

·underline：為文字加底線

·overline：為文字加上劃線

·line-through：為文字加刪除線

·blink：使文字閃爍

·none：不顯示上述任何效果

　　八．控制文本的樣式

　　控制文本的樣式包括單詞距離、字母距離、文本行距、文本水平對齊、文本垂直對齊文本縮排六個部分。

　　1．單詞間距

　　單詞間距指的是英文每個單詞之間的距離，不包括中文文字。

　　基本格式如下：

　　word-spacing: 間隔距離

　　間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

　　2．字母間距

　　字母間距是指英文字母之間的距離，功能、用法，以及參數的設定和單詞間距很相似。

　　基本格式如下：

letter-spacing: 字母間距

　　3．行距

　　行距是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數的第三條橫線就是電腦所認為的該行的基準線。

　　基本格式如下：

　　line-height: 行間距離

　　行間距離取值：

·不帶單位的數字：以1為基數，相當於比例關係的100%

·帶長度單位的數字：以具體的單位為準

·比例關係

　　注意：如果文字字型很大，而行距相對較小的話，可能會發生上下兩行文字互相重疊的現象。

　　4．文本水平對齊

　　文本水平對齊可以控制文本的水平對齊，而且並不僅僅指文字內容，也包括設定圖片、影像資料的對齊。

　　基本格式如下：

text-align: 參數

參數的取值：

·left：靠左對齊

·right：靠右對齊

·center：置中對齊

·justify：相對左靠右對齊

　　但需要注意的是，text-alight是塊級屬性，只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等標識符裡。

　　5．文本垂直對齊

　　文本的垂直對齊應當是相對於文本母體的位置而言的，不是指文本在網頁裡垂直對齊。比如說，表格的儲存格裡有一段文本，那麼對這段文本設定垂直置中就是針對儲存格來衡量的，也就是說，文本將在儲存格的正中顯示，而不是整個網頁的正中。

　　基本格式如下：

vertical-align: 參數

參數取值：

·top：頂對齊

·bottom：底對齊

·text-top：相對文本頂對齊

·text-bottom：相對文本底對齊

·baseline：基準線對齊

·middle：中心對齊

·sub：以下標的形式顯示

·super：以上標的形式顯示

　　6．文本縮排

　　文本縮排可以使文本在相對預設值較窄的地區裡顯示，主要用於中文板式的首行縮排，或是為大段的引用文本和備忘做成縮排的格式。

　　基本格式如下：

text-indent: 縮排距離

縮排距離取值：

·帶長度單位的數字

·比例關係

但是需要注意的是，在使用比例關係的時候，有人會認為瀏覽器預設的比例是相對段落的寬度而言的，其實事實並非如此，整個瀏覽器的視窗才是瀏覽器所預設的參照物。

另外，text-indent是塊級屬性，只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等標識符裡。

　　九．控制顏色和背景的樣式

　　控制顏色和背景的樣式包括顏色屬性、背景顏色、背景圖片、背景圖片重複、背景圖片固定、背景定位六個部分。

　　1．顏色屬性

　　基本格式如下：

　　color: 參數

　　顏色參數取值範圍：

·以RGB值表示

·以16進位（hex）的色彩值表示

·以預設顏色的英文名稱表示

　　以預設顏色的英文名稱表示無疑是最為方便的，但由於預定義的顏色種類太少，所以更多的網頁設計者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數位形式精確地表示顏色，而且也是很多映像製作軟體（如Photoshop）裡預設使用的規範，這樣一來就為圖片和網頁更好地結合打下了堅實的基礎。

　　2．背景顏色

　　在HTML當中，要為某個對象加上背景色只有一種辦法，那就是先做一個表格，在表格中設定完背景色，再把對象放進儲存格。這樣做比較麻煩，不但代碼較多，還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕鬆地直接搞定了，而且對象的範圍很廣，可以是一段文字，也可以只是一個單詞或一個字母。

　　基本格式如下：

　　background-color: 參數

　　參數取值和顏色屬性一樣。

　　3．背景圖片

　　基本格式如下：

　　background-image: url(URL)

　　URL就是背景圖片的存放路徑。如果用“none”來代替背景圖片的存放路徑，將什麼也不顯示。

　　4．背景圖片重複

　　背景圖片重複控制的是背景圖片平鋪與否，也就是說，結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片。

　　基本格式如下：

　　background-repeat: 參數

　　參數取值範圍：

·no-repeat：不重複平鋪背景圖片

·repeat-x：使圖片只在水平方向上平鋪

·repeat-y：使圖片只在垂直方向上平鋪

　　如果不指定背景圖片重複屬性，瀏覽器預設的是背景圖片向水平、垂直兩個方向上平鋪。

　　5．背景圖片固定

　　背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設定背景圖片固定屬性，瀏覽器預設背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時傷害瀏覽者的視力，所以可以解除背景圖片和文字內容的捆綁，該為和瀏覽器視窗捆綁。

　　基本格式如下：

　　background-attachment: 參數

　　參數取值範圍：

·fixed：網頁滾動時，背景圖片相對於瀏覽器的視窗而言，固定不動

·scroll：網頁滾動時，背景圖片相對於瀏覽器的視窗而言，一起滾動

　　6．背景定位

　　背景定位用於控制背景圖片在網頁中顯示的位置。

　　基本格式如下：

　　background-position: 參數表

　　參數取值範圍：

·帶長度單位的數字參數

·top：相對前景對象頂對齊

·bottom：相對前景對象底對齊

·left：相對前景對象靠左對齊

·right：相對前景對象靠右對齊

·center：相對前景對象中心對齊

·比例關係

　　參數中的center如果用於另外一個參數的前面，表示水平置中；如果用於另外一個參數的後面，表示垂直置中。

　　十．控制列表的樣式

　　列表是HTML裡一種很有用的顯示方式，可以把相關的並列內容整齊地垂直排列，使網頁顯得整潔專業，並讓瀏覽者有一目瞭然的感覺。

　　樣式表為列表增加了一些功能，控制列表的樣式包括列表樣式、圖形符號、列表位置三個部分。

　　1．列表符號

　　列表符號是指顯示於每一個清單項目前的符號標識。

　　基本格式如下：

　　list-style-type：參數

　　參數取值範圍：

·disc：圓形

·circle：空心圓

·square：方塊

·decimal：十進位數字

·lower-roman：小寫羅馬數字

·upper-roman：大寫羅馬數字

·lower-alpha：小寫希臘字母

·upper-alpha：大寫希臘字母

·none：無符號顯示

參數中的disc是預設選項。

　　2．圖形符號

　　圖形符號指原來列表的項目符號將可以使用圖形來代替。

　　基本格式如下：

list-style-image：URL

URL是用來代替項目符號的圖形檔案的地址，可以使用相對位址或絕對位址。

　　3．列表位置

　　列表位置描述列表在何處顯示。

　　基本格式如下：

　　list-style-position：參數

　　參數取值範圍：

·inside：在BOX模型內部顯示

·outside：在BOX模型外部顯示

　　這裡又出現了一個新的概念：BOX模型。BOX是指一種容器，包含了應用樣式規則的對象，具體介紹將在後文中給出。

　　十一．控制使用者介面的樣式

　　在網頁上，滑鼠平時呈箭頭形，指向連結時成為手形，等待網頁下載時成為沙漏形……這似乎是約定俗成的。雖然這樣的設計能使我們知道瀏覽器現在的狀態或是可以做什麼，但這些好像還不能完全地滿足我們的需要。就拿連結來說，可以是指向一個協助檔案，也可以是向前進一頁或是向後退一頁，針對如此多的功能光靠千篇一律的手形滑鼠是不能說明問題的。值得慶幸的是，CSS提供了多達13種的滑鼠形狀，供我們選擇。

　　基本格式如下：

　　cursor：滑鼠形狀參數

　　CSS滑鼠形狀參數表： 

　　滑鼠形狀：CSS代碼

　　style="cursor:hand" 　　　　　手形

　　style="cursor:crosshair" 　　十字形

　　style="cursor:text" 　　　　　文本形

　　style="cursor:wait" 　　　　　沙漏形

　　style="cursor:move" 　　　　十字箭頭形：

　　style="cursor:help" 　　　　　問號形

　　style="cursor:e-resize" 　　　右箭頭形

　　style="cursor:n-resize" 　　　上箭頭形

　　style="cursor:nw-resize" 　　左上箭頭形

　　style="cursor:w-resize" 　　　左箭頭形

　　style="cursor:s-resize" 　　　下箭頭形

　　style="cursor:se-resize" 　　右下箭頭形

　　style="cursor:sw-resize" 　　左下箭頭形

　　十二．控制BOX的樣式

　　樣式表規定了一個容器BOX，它將要儲存一個對象的所有可操作的樣式。包括了對象本身、邊框空白、對象邊框、對象間隙四個方面。

　　為了大家更好地理解這些屬性的意義，以及互相之間的關係，請看下面這個圖示：

　　1．邊框空白（MARGIN）

　　如圖所示，位於BOX模型的最外層，包括四項屬性。

　　格式分別如下：

·margin-top：頂部空白距離

·margin-right：右邊空白距離

·margin-bottom：底部空白距離

·margin-left：左邊空白距離

　　空白的距離可以用帶長度單位的數字表示。

　　如果使用上述屬性的簡化方式margin，可以在其後連續加上四個帶長度單位的數字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個數字中間要用空格分隔。

　　2．對象邊框（BORDER）

　　如圖所示，位於邊框空白和對象空隙之間，包括了七項屬性。

　　格式分別如下：

·border-top：頂邊框寬度

·border-right：右邊框寬度

·border-bottom：底邊框寬度

·border-left：左邊框寬度

·border-width：所有邊框寬度

·border-color：邊框顏色

·border-style：邊框樣式參數

　　其中border-width可以一次性設定所有的邊框寬度，border-color同時設定四面邊框的顏色時，可以連續寫上四種顏色，並用空格分隔。上述連續設定的邊框都是按border-top、border-right、border-bottom、border-left的順序。

　　Border-style相對別的屬性而言稍稍複雜些，因為它還包括了多個邊框樣式的參數：

·none：無邊框。

·dotted：邊框為點線。

·dashed：邊框為長短線。

·solid：邊框為實線。

·double：邊框為雙線。

·groove：根據color屬性顯示不同效果的3D邊框

·ridge：根據color屬性顯示不同效果的3D邊框

·inset：根據color屬性顯示不同效果的3D邊框

·outset：根據color屬性顯示不同效果的3D邊框

　　3．對象間隙（PADDING）

　　如圖所示，位於對象邊框和對象之間，包括了四項屬性。

基本格式如下：

·padding-top：頂部間隙

·padding-right：右邊間隙

·padding-bottom：底部間隙

·padding-left：左邊間隙

　　和MARGIN類似，PADDING也可以用padding一次性設定所有的對象間隙，格式也和MARGIN相似，不再一一列舉了。

　　十三．顯示控制樣式

　　基本格式如下：

　　display: 參數

　　參數取值範圍：

·block（預設）：在對象前後都換行

·inline：在對象前後都不換行

·list-item：在對象前後都換行，增加了項目符號

·none：無顯示

　　十四．空白控制樣式

　　基本格式如下：

　　空白屬性決定如何處理元素內的空格。

　　white-space: 參數

　　參數取值範圍：

　　normal：把多個空格替換為一個來顯示

　　pre：忠實地按輸入顯示空格

　　nowrap：禁止換行

　　但要注意的是，write-space也是一個塊級屬性。