CSS入門教程.doc

第8章 CSS入門CSS，層疊樣式表(Cascading Style Sheets)，是指通過定義樣式，規(guī)定了頁面如何顯示HTML元素。這些CSS描述往往脫離與HTML文檔的內(nèi)容，從而達到內(nèi)容與形式的分離。樣式表定義如何顯示HTML元素，而且通常保存在外部的.css文件中。通過僅僅編輯一個簡單的CSS文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。從某些角度來講，CSS實際上是一門博大精深的學問。和Java語言不一樣，CSS更偏重與設計，一些專業(yè)的WEB開發(fā)人員除了掌握CSS的基本知識外，還需要有一定的藝術(shù)功底，甚至心理學知識，因為他們不僅僅要讓頁面漂亮，更重要的是要讓用戶擁有更好的體驗。由于篇幅的關系，在本章只能讓大家對CSS有一個大致的了解，僅僅是一個入門，對CSS感興趣的讀者，可以參考一些專業(yè)的CSS書籍。本章主要講解：q CSS的簡單介紹q 如何使用CSS控制頁面顯示q 使用CSS的注意點和技巧q CSS應用實例8.1 認識和使用CSSHTML標簽原本被設計為用于定義文檔內(nèi)容。通過使用 、 這樣的標簽，HTML的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息，而文檔的布局由瀏覽器來完成。但是現(xiàn)實中，由于很多的程序員（這些程序員通常不是專門的頁面設計師，而是后臺Java或是.NET程序員）對這點理解得不夠，讓HTML做了太多不應該讓它來完成的工作。比如很多開發(fā)者會使用一個表格嵌套表格的方式來進行頁面布局。當文檔比較簡單的時候，或許這種方法不存在太大的問題，但是當文檔復雜超過一定程度之后，這種使用表格布局的方法愈發(fā)顯示出弊端：調(diào)整起來十分困難，無用的標簽越來越多等等。另外，很多人在標簽內(nèi)部控制頁面元素的表現(xiàn)形式，比如字體、顏色、對齊方式等等。同樣的，當頁面復雜到一定程度，或者頁面?zhèn)€數(shù)多到一定的程度之后，你想修改任意一個樣式，都要花很多的時間和精力，而且還容易漏改或者改錯。以上是兩種常見的不科學的WEB客戶端編程方式，這樣的做法使得創(chuàng)建文檔內(nèi)容與文檔表現(xiàn)形式分離的站點變得越來越困難。為了解決這個問題，萬維網(wǎng)聯(lián)盟（W3C），這個非營利的標準化聯(lián)盟，肩負起了HTML標準化的使命，并在HTML4.0之外創(chuàng)造出層疊樣式表CSS。8.1.1 如何引入樣式表當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：1、外部樣式表當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。2、內(nèi)部樣式表當單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在head部分通過 標簽定義內(nèi)部樣式表。body background-color: redp margin-left: 20px3、內(nèi)聯(lián)樣式當特殊的樣式需要應用到個別元素時，就可以使用內(nèi)聯(lián)樣式。使用內(nèi)聯(lián)樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。This is a paragraph8.1.2 如何使用CSSCSS語法由三部分構(gòu)成：選擇器、屬性和值：selector property: value選擇器 (selector)通常是你希望定義的HTML元素或標簽，屬性(property)是你希望改變的屬性，并且每個屬性都有一個值（value）。屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration）：body color: blue上面這行代碼的作用是將body元素內(nèi)的文字顏色定義為藍色。在上述例子中，body是選擇器，而包括在花括號內(nèi)的的部分是聲明。聲明依次由兩部分構(gòu)成：屬性和值，color為屬性，blue為值。如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最后一條規(guī)則是不需要加分號的，不過建議每條聲明的末尾都加上分號，好處是，當你從現(xiàn)有的規(guī)則中增減聲明時，會盡可能的減少出錯的可能性。就像這樣：p text-align:center; color:red;建議每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：p text-align: center; color: black; font-family: arial;8.1.3 選擇器我們想要通過CSS來控制HTML元素，首先我們要通過一定的方法找到這個元素。在CSS中通過選擇器（selector）來定位元素。1、類型選擇器類型選擇器用來尋找特定類型的元素，比如段落、錨或是標題，只需要指定希望應用樣式的元素的名稱，類型選擇器有時候也被稱為元素選擇器或簡單選擇器。pcolor:red;atext-decoration:underline;h1font-weight:bold;2、派生選擇器派生選擇器可以用來尋找特定元素的后代元素。比方說，你希望列表中的strong元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個派生選擇器：li strong font-style: italic; font-weight: normal; 我是粗體字，不是斜體字，因為我不在列表當中，所以這個規(guī)則對我不起作用我是斜體字。這是因為 strong 元素位于 li 元素內(nèi)。我是正常的字體。在上面的例子中，只有l(wèi)i元素中的strong元素的樣式為斜體字，無需為strong元素定義特別的class或id，代碼更加簡潔。3、id 選擇器id選擇器可以選擇標有特定id的HTML元素，id 選擇器以#來定義。下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：#red color:red;#green color:green;下面的HTML代碼中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。這個段落是紅色。這個段落是綠色。注意：id屬性一般只能在每個HTML文檔中出現(xiàn)一次。id就像人的名字，如果一個屋子里面有兩個都叫李三的人，有人喊“李三”，你就不知道喊的是哪個了。同樣道理在一個頁面里，如果兩個不同的元素擁有相同的id，也很容易混淆。雖然有可能在很大部分瀏覽器中多次使用同一個id不會出現(xiàn)問題，但在標準上這絕對是錯誤的使用，而且很可能在某些瀏覽器中引發(fā)問題。id選擇器也可以用于建立派生選擇器，請看下面示例：#sidebar p font-style: italic;text-align: right;margin-top: 0.5em;上面的樣式只會應用于出現(xiàn)在id是sidebar的元素內(nèi)的段落。這個元素很可能是div或者是表格單元。雖然被標注為sidebar的元素只能在文檔中出現(xiàn)一次，但是這個id選擇器作為派生選擇器卻可以被使用很多次：#sidebar p font-style: italic;text-align: right;margin-top: 0.5em;#sidebar h2 font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;在這里，與頁面中的其他p、h2元素明顯不同的是，sidebar 內(nèi)的p、h2元素得到了特殊的處理。4、類選擇器在CSS 中，類選擇器以一個點號顯示：.center text-align: center在上面的例子中，所有class屬性為center的HTML元素均為居中。在下面的HTML代碼中，h1和p元素都有center類。這意味著兩者都將遵守.center選擇器中的規(guī)則。注意：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla或Firefox中起作用。This heading will be center-alignedThis paragraph will also be center-aligned.和id選擇器一樣，類選擇器也可被用作派生選擇器：.fancy td color: #f60;background: #666;在上面這個例子中，類名為fancy的更大的元素內(nèi)部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個div）元素也可以基于它們的類而被選擇：td.fancy color: #f60;background: #666;在上面的例子中，類名為fancy的表格單元將是帶有灰色背景的橙色。你可以將類fancy分配給任何一個表格元素任意多的次數(shù)。那些以fancy標注的單元格都會是帶有灰色背景的橙色。當然，任何其他被標注為fancy的元素也不會受這條規(guī)則的影響。這都是由于我們書寫這條規(guī)則的方式，這個效果被限制于被標注為fancy的表格單元（即使用td元素來選擇fancy類）。注意：和id不一樣，每個HTML文檔中允許有多個元素的class屬性是一樣的，也就是說class可以反復使用。8.2 使用CSS的注意點通過前面的學習，你已經(jīng)會使用簡單的CSS來控制HTML文檔的樣式了，本節(jié)主要講解CSS使用過程中的一些注意點，另外再探討一下CSS的繼承和層疊的特性。8.2.1 CSS單位CSS中很多屬性的值是有單位的，CSS的單位包括長度單位和顏色單位。1、長度單位在CSS中，長度是一種度量尺寸，用于寬度、高度、字號、字和字母間距、文本的縮排、行高、頁邊距、貼邊、邊框線寬以及許許多多的其他屬性。長度可以是絕對長度，也可以是相對長度。 CSS常用的絕對長度值有厘米（cm）、毫米（mm）、英寸（in）、點（pt）、派卡（pc）等等。絕對長度值的使用范圍比較有限，只有在完全知道外部輸出設備的具體情況下，才使用絕對長度值。也就是說，絕對長度值最好用于打印機輸出設備，而在僅僅作為屏幕顯示時，使用絕對長度值意義不大，應該盡量使用相對長度值。相對長度就是需要定義尺寸的元素按照系統(tǒng)和瀏覽器默認大小為標準，相應地按比例縮放。這樣就不會產(chǎn)生難以辨認的情況。百分比單位以及某些HTML標簽(如至等)就是一種相對長度。另外，CSS還支持下列三種長度的相對單位：em（當前字體中字母M的寬度）、ex（當前字體中字母X的高度）、px（一個象素的大?。?使用em和ex的目的就是為所給的字體設置合適的寬度，而沒有必要知道字體有多大，在顯示時，可通過比較當前字體中的M和X來確定。字體越大，所對應的em和ex也就越大。 以象素為單位的長度是相對于顯示器上的象素(或許為方形)的高度和寬度。影像的寬度和高度經(jīng)常是以象素給出的。象素測量法通常也不是個好方法。首先，象素的大小依分辯率變化較大，大多數(shù)用戶都會將顯示器設置成盡可能高的分辯率，從而導致象素太小，而無法閱讀。 2、顏色單位 適當?shù)卦诓煌牟课皇褂貌煌念伾?，能使HTML頁面充滿生氣，還可以通過顏色把讀者的注意力吸引到關鍵的部分。 定義顏色值可以使用百分比值。在這種情況下，紅、綠、藍顏色值的等級用百分比數(shù)來確定。格式是：color:rgb(R%,G%,B%)。指定顏色的另一種方法是使用范圍在0255之間的整數(shù)來設置。格式是color:rgb(128,128，128)。定義顏色的第三種方法是使用十六進制數(shù)組定義顏色。這種定義的方法對于經(jīng)常進行程序設計的人來說比較熟悉。定義顏色時使用三個前后按順序排列的十六進制數(shù)組表示，例如“#FC0EA8”。這種定義的方式就是形如#RRGGBB的格式。即在紅、綠、藍的位置上添上需要的十六進制值。定義顏色最后一種方法也最簡單的方法是指定顏色的名稱，CSS有17個預先確定的顏色，它們是：aqua（水綠色）、black（黑色）、blue（藍色）、fuchsia（紫紅色）、gray（灰色）、green（綠色）、lime（檸檬綠色）、maroon（褐紅色）、navy（藏青色）、olive（橄欖色）、orange（橙色）、purple（紫色）、red（紅色）、silver（銀色）、teal（青色）、white（白色）、yellow（黃色）8.2.2 CSS的繼承及其問題根據(jù)CSS的規(guī)定，子元素從父元素繼承屬性。看看下面這條規(guī)則：body font-family: Verdana, sans-serif; 根據(jù)上面這條規(guī)則，站點的body元素將使用Verdana字體（假如訪問者的系統(tǒng)中存在該字體的話）。通過 CSS 繼承，子元素將繼承最高級元素（在本例中是body）所擁有的屬性（這些子元素諸如p、td、ul、ol、ul和li等），所有body的子元素，不需要再自行定義，都應該顯示Verdana字體，子元素的子元素也一樣。這在大部分的新版瀏覽器中，確實是這樣的。但是在瀏覽器混戰(zhàn)年代里，有時候未必如我們所愿。瀏覽器提供商（Microsoft、Netscape等）為了自身的利益，都沒有遵守當時的一些標準。比方說，Netscape4就不支持繼承；微軟的IE直到IE6還存在部分不支持繼承的問題。我們又該如何面對這些問題呢？你可以通過使用一些冗余法則來處理舊式瀏覽器無法理解繼承的問題。body font-family: Verdana, sans-serif;p, td, ul, ol, li, dl, dt, dd font-family: Verdana, sans-serif; 上面這么做雖然會有些浪費，但是如果需要使老的瀏覽器訪問我們的網(wǎng)頁不至于顯示得很糟糕，就不得不這么做。如果你不希望從父元素中得到繼承，比方說，你希望段落的字體是Times，而不是從body繼承Verdana。你可以創(chuàng)建一個針對p的樣式，來擺脫父元素的樣式：body font-family: Verdana, sans-serif;td, ul, ol, ul, li, dl, dt, dd font-family: Verdana, sans-serif;p font-family: Times, Times New Roman, serif;8.2.3 層疊（Cascading）的意義對于CSS，一個重要的特性就是層疊Cascading。這個特性通過一定規(guī)則將多重樣式將層疊為一個。記住，這和繼承不是同一個概念。樣式可以規(guī)定在單個的HTML元素中，在HTML頁的頭元素中，或在一個外部的CSS文件中。甚至可以在同一個HTML文檔內(nèi)部引用多個外部樣式表。那么，當同一個HTML元素被不止一個樣式定義時，會使用哪個樣式呢？一般而言，所有頁面設計者的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中越往下優(yōu)先級越低。q 內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）q 外部樣式表（通過鏈接導入）和內(nèi)部樣式表（位于標簽內(nèi)部） q 瀏覽器缺省設置可以看出，內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）擁有最高的優(yōu)先權(quán)。另外，可以使用!important來提高優(yōu)先級，加了!important的外部樣式表比不加!important的內(nèi)聯(lián)樣式優(yōu)先級要高，但是比加了!important的內(nèi)聯(lián)樣式優(yōu)先級要低關于CSS的層疊性，還有一個需要注意的是：使用瀏覽器查看網(wǎng)頁的用戶，他們可以在瀏覽器中設置自己的樣式表，比如IE可以通過“工具”“internet選項”“常規(guī)” “外觀”“輔助功能”“用戶樣式表”來設置自定義樣式表。當網(wǎng)頁設計者和用戶的樣式表發(fā)生沖突，網(wǎng)頁設計者的樣式表的優(yōu)先級會高于用戶自定義的樣式表。為了讓我們的用戶具有更大的自由度，可以通過!important來提高自定義的樣式表的優(yōu)先級，如果考慮用戶和設計者的，那么層疊順序還有以下順序，越往下越低：q 標記為!important的用戶樣式q 標記為!important的頁面設計者樣式q 設計者樣式q 用戶樣式q 瀏覽器缺省樣式當使用了多個樣式表之后，樣式表之間可能會爭奪某個特定元素的控制權(quán)。在這些情況下，會根據(jù)選擇器的特殊性，運用一定的算法規(guī)則，來決定該元素最終按照那個樣式顯示。這個算法通過選擇器的不同，算出一個值，值大的樣式具有高的優(yōu)先級。這個算法看起來有些復雜也比較難記，一般來說有這樣的規(guī)則，越往下優(yōu)先級越低：q 元素的style屬性，即內(nèi)聯(lián)樣式，例如：q 具有ID選擇器的樣式，例如：#content color:red;q 具有類選擇器的樣式，例如：.content color:red;q 具有類型選擇器的樣式，例如：p color:red;另外，如果兩個樣式的優(yōu)先級相同，后定義的樣式優(yōu)先。這一點也很重要，比如在head部內(nèi)標簽中定義的樣式在標簽鏈接的外部樣式之后，那么真正起作用的是標簽內(nèi)的樣式。反過來head部內(nèi)標簽中定義的樣式在標簽鏈接的外部樣式之前，最后起作用的是通過標簽引入的外部樣式。8.2.4 絕對地址和相對地址CSS中有些屬性的值是一個URL，比如背景圖像。URL的寫法有兩種：絕對路徑和相對路徑。絕對路徑時含服務器協(xié)議（在網(wǎng)頁上通常是http:/或ftp:/）的完全路徑。絕對路徑包含的是精確位置而不用考慮當前文檔的位置，但是如果目標文檔被移動，則鏈接將無效。創(chuàng)建對當前站點以外文件的鏈接時必須使用絕對路徑。 與絕對路徑不同，相對路徑自身并不包含完整的路徑信息（例如不包含服務器協(xié)議），相對路徑描述的是被引用文檔和當前文檔之間的相對位置關系（文檔相對路徑）或被引用文檔和網(wǎng)站根目錄之間的相對位置關系（根相對路徑）。當在瀏覽器中點擊某個使用相對路徑的鏈接時，瀏覽器會自動獲取當前文檔的服務器協(xié)議、地址和端口等信息，并將該信息和相對路徑發(fā)送到服務器上，而服務器則根據(jù)當前文檔位置和相對路徑，計算出被引用文檔的絕對位置并獲取文檔，最終將結(jié)果返回給瀏覽器。根相對路徑以“/”開頭（請注意，不是“”），是從當前站點的根目錄到被引用文檔的完整路徑。例如，某個網(wǎng)站的根目錄為/home/wwwroot，其下有一個gif圖像/home/wwwroot/a/b/1.gif，則該圖像的根相對路徑為“/a/b/1.gif”。文檔相對路徑是指從當前文檔所在目錄訪問被引用文檔的路徑。也就是說，相對路徑描述的是當前文檔所在目錄和被引用文檔所在目錄的相對位置關系。例如，當前文檔的物理路徑是/home/wwwroot/a/1.htm，而被引用文檔的物理路徑是/home/wwwroot/b/2.htm，第二個文檔相對于第一個文檔的相對路徑就是“./b/2.htm”。在使用相對路徑時，我們需要知道如何描述當前文檔所在目錄以及如何描述當前文檔的上一級目錄（父目錄）。通常我們使用“./”或空描述當前文檔所在目錄，例如，當前文檔為/home/wwwroot/a/1.htm，則“./2.htm”和“2.htm”都是一個指向“/home/wwwroot/a/2.htm”的相對路徑。 在描述當前文檔所在目錄的上一級目錄時，我們使用前綴“./”。還是上面的例子，如果相對路徑為“./b/2.htm”，則我們請求的是物理路徑為“/home/wwwroot/b/2.htm”的文檔。 “./”和“./”可以任意組合，例如，“././”代表當前目錄的上一級目錄的上一級目錄。 在明白絕對路徑和相對路徑的概念和區(qū)別之后，我們還要了解什么時候使用它們的時機。一般來說，如果需要引用當前網(wǎng)站外部的文檔和素材，我們應該使用絕對路徑；而在引用當前網(wǎng)站內(nèi)部的文檔和素材時，我們應該使用相對路徑。由于相對路徑中不包含網(wǎng)站地址等信息，從而使得網(wǎng)站更容易移植（例如，更換網(wǎng)站域名）。一般來說，在制作內(nèi)部鏈接時，我們應該盡量使用文檔相對路徑，而不是根相對路徑，這樣做的原因是在本地預覽網(wǎng)站時，瀏覽器并不承認當前站點的根目錄為服務器，因此會導致鏈接錯誤的情況，使用文檔相對路徑則沒有這樣的問題。在CSS文件中書寫相對路徑：CSS文件是指在頁面中引用的外部樣式定義文件，該文件通常用于定義頁面中各種html標記的顯示效果。瀏覽器認為CSS文件是一個獨立的文檔，因此，在CSS中對素材的引用可以通過計算素材文件和該CSS文件之間的相對路徑來實現(xiàn)，而與引用該CSS文件的頁面所在的位置無關。例如，文檔“/home/wwwroot/a/index.htm”中引用了CSS文件“/home/wwwroot/a/css/main.css”，而在該CSS中引用了素材“/home/wwwroot/a/images/1.jpg”，則在CSS中對于該素材引用的相對路徑應該是“./images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。 8.2.5 其他注意點和技巧1、記得寫引號提示：如果屬性的值為若干單詞，則要給值加引號：p font-family: sans serif;2、空格和大小寫敏感大多數(shù)樣式表包含不止一條規(guī)則，而大多數(shù)規(guī)則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被閱讀和編輯：body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif;是否包含空格不會影響CSS在瀏覽器的工作效果，從這個角度來說CSS對大小寫不敏感。但是存在一個例外：選擇器中class和id名稱對大小寫是敏感的。3、選擇器的分組你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。h1,h2,h2,h3,h5,h6 color: green;4、同時使用兩個class通常我們只能為元素指定一個class屬性,但這并不等于你只能指定一個，你想指定多少就可以指定多少，例如：內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容通過同時使用兩個class(使用空格而不是逗號分割)，這個段落將同時應用兩個class中制定的規(guī)則。如果兩者中有任何規(guī)則重疊，那么后一個將獲得實際的優(yōu)先應用。5、使用注釋你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以/* 開頭，以*/ 結(jié)尾，如下:/* 定義段落樣式表 */p text-align: center; /* 文本居中排列 */ ccscolor: black; /* 文字為黑色 */ font-family: arial; /* 字體為arial */8.3 CSS使用實例到現(xiàn)在為止，你已經(jīng)知道了什么是CSS、為什么要使用CSS以及如何使用CSS，你或許已經(jīng)可以使用CSS對HTML文檔進行簡單的樣式控制。不過你可能還需要多進行一些練習，本節(jié)的內(nèi)容主要是一些CSS使用的示例，學習并理解它們，有助于你更好的掌握CSS。8.3.1 字體樣式使用CSS來控制HTML文檔的字體，主要使用下列CSS屬性。q font-family q font-style q font-variant q font-weight q font-size q font q font-familyfont-familyCSS屬性font-family的作用是設置一組按優(yōu)先級排序的字體列表，如果該列表中的第一個字體未在訪問者計算機上安裝，那么就嘗試列表中的下一個字體，依此類推，直到列表中的某個字體是已安裝的。有兩種類型的字體名稱：字體族名稱（family-name）和族類名稱（generic family）。字體族名稱，就是我們通常所說的“字體”，比如“Arial”、“Times New Roman”、“宋體”、“黑體”等等。 族類名稱，它是一組具有統(tǒng)一外觀的字體族。比如sans-serif，它代表一組沒有“腳”的字體。 一般來說，我們在給出字體列表時，應該先把首選字體放在前面，把候選字體放在后面，然后在列表的最后給出一個族類，這樣當指定字體都不可用時，至少可以采用一個相同族類的字體來顯示。下面是一個按優(yōu)先級排列的字體列表的例子：h1 font-family: arial, verdana, sans-serif;h2 font-family: Times New Roman, serif;h1標題將采用Arial字體顯示，如果訪問者的計算機未安裝Arial，那么就使用Verdana字體，假如Verdana字體也沒安裝的話，那么將采用一個屬于sans-serif族類的字體來顯示這個h1標題。同樣道理h2標題的字體首先會選用“Times New Roman”，沒有這個字體時會找一個serif族的字體。注意“Times New Roman”的寫法：因為其中包含空格，所以我們用引號將它括起來。font-styleCSS屬性font-style定義所選字體的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。在下例中，所有h2標題都將顯示為斜體。h1 font-family: arial, verdana, sans-serif;h2 font-family: Times New Roman, serif; font-style: italic;font-variantCSS屬性font-variant的值可以是：normal（正常）或small-caps（小體大寫字母）。small-caps字體是一種以小尺寸顯示的大寫字母來代替小寫字母的字體。如果font-variant屬性被設置為small-caps，而沒有可用的支持小體大寫字母的字體，那么瀏覽器多半會將文字顯示為正常尺寸（而不是小尺寸）的大寫字母。h1 font-variant: small-caps;h2 font-variant: normal;font-weightCSS屬性font-weight指定字體顯示的濃淡程度。其值可以是normal（正常）或bold（加粗）。有些瀏覽器支持采用100到900之間的數(shù)字（以百為單位）來衡量字體的濃淡。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;上面四種單位有著本質(zhì)的區(qū)別。px和pt將字體設置為固定大小，而%和em允許頁面瀏覽者自行調(diào)整字體的顯示尺寸。有些頁面瀏覽者可能是殘疾者、年長者、視力不佳者，或者他所使用的電腦顯示屏顯示質(zhì)量差。為了令你的網(wǎng)站對所有人都具有良好的可用性（accessibility），你應采用像%或em這種允許用戶調(diào)節(jié)字體顯示大小的單位。 fontCSS屬性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這一節(jié)我們學習了有關字體設置的用法。記住：CSS的一個主要優(yōu)勢就是可以在任何時候設置字體，你花幾分鐘就可以改變整個網(wǎng)站的字體。CSS節(jié)省時間，而且把事情簡化。8.3.2 文本樣式文本的顯示格式與式樣對于網(wǎng)頁設計師來說是一個重要問題。這一課將向你介紹CSS在文本布局方面令人激動的特性。本課將對下列CSS屬性進行講解：q text-indent q text-align q text-decoration q letter-spacing q text-transform text-indentCSS屬性text-indent用于為段落設置首行縮進，以令其具有美觀的格式。在下例中，我們?yōu)椴捎胮元素的段落應用了2個字符的首行縮進，這在顯示中文段落時非常有用。p text-indent: 2em;text-alignCSS屬性text-align與HTML屬性align的功能相同。該屬性的值可以是：left（左對齊）、right（右對齊）或者center（居中）。除了上面三種選擇以外，你還可以將該屬性的值設為justify（兩端對齊），即伸縮行中的文字以左右靠齊。報刊雜志經(jīng)常采用這種布局。 在下例中，標題（th）中的文字被設置為右對齊，而表中數(shù)據(jù)（td） 被設置為居中。正常的文本段落被設置為兩端對齊。 th text-align: right;td text-align: center;p text-align: justify;text-decorationCSS屬性text-decoration令我們可以為文本增添不同的“裝飾”或“效果”。例如，你可以為文本增添下劃線、刪除線、上劃線等等。在接下來的例子中，我們?yōu)閔1標題增添了下劃線，為h2標題增添了上劃線，為h3標題增添了刪除線。h1 text-decoration: underline;h2 text-decoration: overline;h3 text-decoration: line-through;letter-spacingCSS屬性letter-spacing用于設置文本的水平字間距。我們可以把期望的字間距寬度作為這個屬性的值。例如，假如你希望p元素里的文本段落的字間距為3個像素，而h1標題的字間距為6個像素，代碼可以這樣寫：h1 letter-spacing: 6px;p letter-spacing: 3px;text-transformCSS屬性text-transform用于控制文本的大小寫。無論字母本來的大小寫，你可以通過該屬性令它首字母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase）。比如，單詞“headline”在展現(xiàn)給網(wǎng)頁瀏覽者時，可以是“HEADLINE”或者“Headline”。text-transform屬性有四個可選值：q capitalize 將每個單詞的首字母轉(zhuǎn)換為大寫。例如：“john doe”將被轉(zhuǎn)換為“John Doe”。 q uppercase 所有字母都轉(zhuǎn)換為大寫。例如：“john doe”將被轉(zhuǎn)換為“JOHN DOE”。 q lowercase 所有字母都轉(zhuǎn)換為小寫。例如：“JOHN DOE”將被轉(zhuǎn)換為“john doe”。 q none 不作任何轉(zhuǎn)換文本怎么寫的就怎么顯示。 來舉個例子，我們將使用一個姓名列表。所有姓名都用（列表項）標簽來標記。我們希望對姓名采用首字母大寫的方式，而對標題采用全部大寫的方式。查看過該例的HTML代碼后你會發(fā)現(xiàn)，其實在HTML代碼里我們寫的姓名和標題全部都是小寫。h1 text-transform: uppercase;li text-transform: capitalize;8.3.3 顏色與背景顏色與背景也是HTML頁面里面經(jīng)常需要控制的部分，本節(jié)你將學習如何在網(wǎng)頁上設置元素的顏色與背景，以及定位和控制背景圖像的高級方法。CSS對于顏色與背景的控制主要通過下列CSS屬性：q color q background-color q background-image q background-repeat q background-attachment q background-position q background colorCSS屬性color用于指定元素的前景色。例如，假設你要讓頁面中的所有標題（headline）都顯示為深紅色，而這些標題采用的都是h1元素，那么可以用下面的代碼來實現(xiàn)把h1元素的前景色設為紅色。h1 color: #ff0000;之前已經(jīng)講過，顏色值可以用十六進制表示（比如上例中的#ff0000），也可以用顏色名稱（比如“red”）或RGB值（比如rgb(255,0,0)）表示。background-colorCSS屬性background-color用于指定元素的背景色。因為body元素包含了HTML文檔的所有內(nèi)容，所以，如果要改變整個頁面的背景色的話，那么為body元素應用background-color屬性就行了。 你也可以為其他包含標題或文本的元素單獨應用背景色。在下例中，我們?yōu)閎ody和h1元素分別應用了不同的背景色。body background-color: #FFCC66;h1 color: #990000;background-color: #FC9804;background-imageCSS屬性background-image用于設置背景圖像。如果要把某個圖片作為網(wǎng)頁的背景圖像，只要在body元素上應用background-image屬性、然后給出圖片的存放位置就行了。body background-color: #FFCC66;background-image: url(bg.gif);注意我們指定圖片存放位置的方式：url(bg.gif)。這表明圖片文件和樣式表存放在同一目錄下，但是不一定和HTML文件放在同一個目錄下。你也可以引用存放在其他目錄的圖片，只需給出存放路徑即可（比如url(./images/bg.gif)）；此外，你甚至可以通過給出圖片的地址來引用網(wǎng)絡上的圖片（比如url(/images/bg.gif)），當然你得保證圖片存在。background-repeatCSS屬性background-repeat就是用于控制平鋪的。background-repeat有四種不同取值。q background-repeat:repeat-x 圖像橫向平鋪q background-repeat:repeat-y 圖像縱向平鋪q background-repeat:repeat 圖像橫向和縱向都平鋪q background-repeat:no-repeat 圖像不平鋪如果我們要避免平鋪背景圖像，代碼應該這樣：body background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachmentCSS屬性background-attachment用于指定背景圖像是固定在屏幕上的，還是隨著它所在的元素而滾動的。一個固定的背景圖像不會隨著用戶滾動頁面而發(fā)生滾動（它是固定在屏幕上的），而一個非固定的背景圖像會隨著頁面的滾動而滾動。background-attachment有兩種不同取值。q background-attachment:scroll 圖像會跟隨頁面滾動q background-attachment:fixed 圖像是固定在屏幕上的例如下面的代碼將背景圖像固定在屏幕上。body background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position默認狀態(tài)下，背景圖像將被放在屏幕的左上角。但是你可以通過CSS屬性background-position來修改這一缺省設置，將背景圖像擺放在屏幕上你覺得滿意的地方。設置background-position屬性的值有多種方式。不過，它們都是坐標的格式。舉例來說，值“100px 200px”表示背景圖像將被放置在位于距瀏覽器窗口左邊100像素、頂部200像素處。 坐標可以是以百分比或固定單位（比如像素、厘米等）作為單位的值，也可以是“top”、“bottom”、“center”、“l(fā)eft”和“right”這些值。你可以這樣設置這個屬性：q background-position:2cm 2cm 圖像被放置在頁面內(nèi)距左邊2厘米、頂部2厘米的地方q background-position:50% 25% 圖像被放置在頁面內(nèi)水平居中、離頂部四分之一處q background-position:top right 圖像被放置在頁面的右上角在下例中，背景圖像被放置在頁面的右下角：body background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;backgroundCSS屬性background是上述所有與背景有關的屬性的縮寫用法。使用background屬性可以減少屬性的數(shù)目，因此令樣式表更簡短易讀。 比如說下面五行代碼：background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;如果使用background屬性的話，實現(xiàn)同樣的效果只需一行代碼即可搞定：background: #FFCC66 url(bg.gif) no-repeat fixed right bottom;各個值應按下列次序來寫： background-color | background-image | background-repeat | background-attachment | background-position如果省略某個屬性不寫出來，那么將自動為它取缺省值。比如，如果去掉background-attachment和background-position的話：background: #FFCC66 url(bg.gif) no-repeat;這兩個未指定值的屬性將被設置為缺省值：scroll和top left。8.3.4 鏈接樣式對于鏈接而言，前面幾節(jié)的屬性也可以應用到鏈接上（比如顏色、字體、添加下劃線等）。但是CSS還允許你根據(jù)鏈接的狀態(tài)，比如未訪問的、已訪問的、活動的、是否有鼠標懸停等分別定義不同的樣式。這些需要通過偽類（pseudo-class）來實現(xiàn)這些效果。偽類是什么？偽類（pseudo-class）令你可以在為HTML元素定義CSS屬性的時候?qū)l件和事件考慮在內(nèi)。 我們來看一個例子，我們知道在HTML里，鏈接是通過a標簽來定義的。因此，在CSS里，我們可以將a作為一個選擇器（selector），下面的定義我們將連接的文字顏色設置成藍色：a color: blue;另外，一個鏈接是可以有不同狀態(tài)的。例如，它可以是已訪問過的，也可以是未訪問過的。你可以