在這一章中，我們會介紹影響文本顯示的一些最常用的屬性。有很多CSS屬性專門用來幫助我們設置文本樣式。通過使用CSS，我們可以控制文本的字體、風格和顏色，甚至可以控制文本上加的裝飾。
我們可用font-family屬性定制頁面中使用的字體。 字體會對頁面設計產生巨大影響。在CSS中，字體劃分為”字體系列”(font-family)，我們可以從中指定希望頁面中各個元素使用的字體。例如：
body { font-family: Verdana, Geneva, Arial, sans-serif;}我們可用font-size屬性控制字體大小。字體大小(font size)對于Web頁面的設計和可讀性也有很大影響。例如：
body { font-size: 14px;}我們可用color屬性為文本設置顏色。例如：
body { color: silver;}我們可用font-weight屬性影響字體的粗細。例如：
body { font-weight: bold;}我們可使用text-decoration屬性為文本增加更多風格。通過使用text-decoration屬性，可以對文本加一些裝飾，包括上劃線、下劃線和刪除線。例如：
body { text-decoration: underline;}我們已經見過font-family屬性，到目前為止總是將這個屬性的值指定為“sans-serif”。對于font-family屬性還可以更有創意一些，可以指定為其他的字體，不過首先來了解字體系列到底是什么？下面就來簡單看一下······ 每個font-family包含一組有共同特征的字體。共有5個字體系列：sans-serif、serif、monospace、cursive和fantasy。每個字體系列都包括大量字體。
sans-serif字體系列：Verdana、Arial Black、Trebuchet MS、Arial、Geneva。 sans-serif字體系列包括沒有襯線的字體，sans-serif表示“沒有襯線”。與serif字體相比，通常認為sans-serif字體在計算機屏幕上更容易識讀。serif字體系列：Times、Times New Roman、Georgia。 serif字體系列包括有襯線的字體。很多人一看到這種字體就想到新聞報紙的文字排版。襯線是字母末端的裝飾性“小細節”。monospace字體系列：Courier、Courier New、Andale、Mono。 monospace字體系列中的字體包含固定寬度的字符。例如，一個“i”在水平方向所占的寬度與一個“m”所占的寬度是相同的。這些字體主要用于顯示軟件代碼示例。cursive字體系列：Comic、Sans、Apple、Chancery。 cursive字體系列包括看似手寫的字體，有時會看到標題中使用這些字體。fantasy字體系列：LAST、NINJA、Impact。 fantasy字體系列包含有某種風格的裝飾性字體。仔細查看這些字體系列：serif字體看起來很高雅、很傳統，而sans-serif字體外觀很清晰，可讀性好。monospace字體就好像是打字機打出來的。cursive和fantasy字體給人一種有趣或者很有風格的感覺。
我們之前已經見過font-family屬性了，現在再來看一個更有意思的例子：
body { font-family: Verdana, Geneva, Arial, sans-serif;}font-family：使用font-family屬性可以指定多個字體，只需要輸入這些字體名，并用逗號分隔。Verdana, Geneva, Arial：要完全按照這里的拼寫輸入字體名，大小寫字母必須一致。通常，你指定的font-family(即font-family規范)包含一個候選字體列表，它們都來自同一個字體系列。sans-serif：最后總是放一個通用的字體系列名，如“serif”、“sans-serif”、“cursive”或“monospace”。了解以上知識之后，我們就要清楚font-family規范是如何工作的？瀏覽器會這樣解釋你在font-family規范中列出的字體：
查看用戶計算機上是否有Verdana字體，如果有，這個元素(在這里就是<body>元素)就會使用這個字體。如果Verdana不可用，再查找Geneva字體，如果這個字體可用，它將作為body元素的字體。如果Geneva不可用，再查找字體Arial，如果這個字體可用，它將作為body元素的字體。最后，如果前面指定的特定字體都沒有找到，就使用瀏覽器的默認“sans-serif”字體。利用font-family屬性，你可以創建一個首選字體列表。我們希望大多數瀏覽器都能有你的第一個選擇，不過，如果沒有，至少可以確保瀏覽器能提供同一個字體系列中的一個通用字體。 下面我們來看一下以下幾個問題：
如果一個字體名中包含多個單詞，比如Courier New，我怎么指定這樣一個字體呢？ 答：只需要在font-family聲明中的字體名兩邊加上引號，就像這樣：
font-family: "Courier New", Courier;這么說，font-family屬性實際上就是一組候選字體，是嗎？ 答：沒錯。它實際上就是一個字體優先列表。第一個是你最希望使用的，后面是一個不錯的替代字體，再后面更多的替代字體。對于最后一個字體，應當指定最全面的通用“sans-serif”或“serif”，它與列表中指定的所有其他字體應當在同一個字體系列中?！皊erif”和“sans-serif”是真正的字體嗎？ 答：“serif”和“sans-serif”并不是具體的字體名。不過，如果font-family聲明中指定的前幾個字體都無法找到，瀏覽器就會選擇一個實際字體來代替“serif”或“sans-serif”。取代它的字體是瀏覽器定義的該字體系列的默認字體。我怎么知道使用哪個字體？serif還是sans-serif？ 答：沒有固定的原則。不過，在計算機顯示中，很多人認為sans-serif最適合體文本。你會發現很多設計中體文本都使用sans-serif字體，或者會混合使用serif字體和sans-serif字體。所以，這實際上取決于你的喜歡，以及你希望頁面有怎樣的外觀。關于字體，很不幸的是，你沒有辦法控制用戶計算機上安裝什么字體。不僅如此，他們還往往使用不同的操作系統。例如，也許你的Mac上有某些字體，而在用戶PC上很可能沒用這些字體。所以，如何處理這種情況呢？嗯，一種靠得住的策略是創建一個字體列表，其中包含最適合你的頁面的字體，并希望用戶已經安裝了這些字體。不過，如果他們沒有這些字體，至少我們可以依靠瀏覽器來提供相同字體系列中的一種通用字體。 這時我們就需要引入Web字體了，我們可以使用Web字體(Web Font)向用戶的瀏覽器提供一種字體。為此，要用到CSS的一個比較新的特性：@font-face規則。這個規則允許你定義一種字體的名字和位置，然后可以在你的頁面中使用。
有了Web字體，你可以充分利用現代瀏覽器的一個新功能，能夠向用戶直接提供新的字體。一旦提供了新字體，瀏覽器就能使用Web字體，就像使用所有其他字體一樣，甚至可以用CSS指定文本樣式。下面詳細分析Web字體如何工作：
要利用Web字體，瀏覽器首先得獲取一個引用這些字體的HTML頁面。
瀏覽器再獲取這個頁面所需的Web字體文件。字體文件包含在web頁面中使用這種字體時瀏覽器所需的一切信息。 
現在，獲取這個字體之后，瀏覽器顯示頁面時就會使用這個字體了。 
現在，我們來解決以下問題：
woff或者Web開放字體格式(Web open font format)到底是什么？ 答：woff是作為Web字體的標準字體格式出現的，你會看到，如今所有現代瀏覽器上都對woff提供了支持。也就是說，這個領域以前一直缺少標準化，不同的瀏覽器會支持不同的字體格式。如果要為可能不支持woff的瀏覽器提供Web字體，就需要提供一個或多個格式作為候選。在這方面，Web字體托管服務(后面會介紹到)會有很大幫助。所以要使用一個Web字體，我必須在一個服務器上托管字體文件，是嗎？ 答：如果你只是要測試字體，實際上可以把這些字體作為本地文件，存儲在你自己的文件系統中并引用(就像存儲和引用本地圖像一樣)。不過，如果你想為Web上的用戶提供字體，就必須把這些文件放在一個服務器上，或者利用一個托管服務，如Google的字體托管服務，這是免費的。如果我要使用一個Web字體，能不能肯定我的用戶一定能用這種字體？ 答：只要他們有一個現代瀏覽器(另外不考慮網絡連接或服務器問題)，那么大多數情況下都可以確信這一點。不過，如果他們使用一些比較老的瀏覽器，或者不支持Web字體的移動設備，那就不行了，你仍然需要提供候選字體。想為頁面增加一種特殊的字體？下面一步一步說明如何使用Web字體和CSS中的@font-face規則來實現。
找到一個字體 如果還沒有合適的字體，可以訪問一些提供字體的網站，現在這些網站有很多，會提供免費以及需要授權的字體，允許你在頁面中使用。確保有所需字體的所有格式 關于Web字體有一個好消息：@font-face CSS規則基本上已經成為所有現代瀏覽器的一個標準。不過也有一個壞消息：存儲字體使用的具體格式還不是一個標準(不過已經離這個目標越來越接近了)。實際上，不同的瀏覽器對很多不同的格式提供了不同程度的支持。下面是一些常用的格式(以及各自的文件擴展名)：
TrueType字體：.ttfOpenType字體：.otf TrueType字體和OpenType字體緊密相關，OpenType建立在TrueType基礎之上(比TrueType更新)Embedded OpenType字體：.eot Embedded OpenType(EOT)是OpenType的一種壓縮形式，這種格式是專用的(Microsoft)，僅IE提供支持。SVG格式：.svg Scalable Vector Graphics或SVG是一種通用圖像格式，SVG字體使用這種格式表示字符。Web開發字體格式：.woff Web開發字體格式建立在TrueType基礎之上，已經發展為Web字體的一個標準。大多數現代瀏覽器都對這種格式提供了很好的支持。大多數現代瀏覽器上支持最為廣泛的格式是Web開發字體格式，所以這也是我們推薦使用的格式。你可以為較老的瀏覽器提供一個候選字體，我們將使用TrueType作為候選，因為這種字體在所有瀏覽器上也得到了很好的支持(但IE除外)。
把你的字體文件放在Web上 你可能想把你的字體文件放在Web上，這樣用戶的瀏覽器就能訪問這些字體?；蛘咭部梢岳镁W上的很多在線字體服務，這些服務會為你托管這些文件。不論哪一種情況，你都需要字體文件的URL。例如，我們已經把這些文件放在wickedlysmart.com上：
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.woffhttp://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.ttf在CSS中增加@font-face屬性 你已經得到了“Emblema One“字體的.woff和.ttf版本的URL，所以現在可以為外部樣式文件(如xxx.css)增加一個@font-face規則。把這個規則增加到文件的最上面，放在body規則之上：
@font-face { font-family: "Emblema One"; src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.ttf")}規則以@font-face開頭。
font-family: “Emblema One”：與正常的規則不同，正常規則會選擇一組元素并指定樣式，而@font-face規則會建立一個字體，將指定一個font-family名，以便以后使用。在@font-face規則中，我們使用font-family屬性為這個字體創建一個名字，可以使用你喜歡的任何名字，不過通常最好與字體名一致。src屬性告訴瀏覽器在哪里可以得到這個字體。對于瀏覽器可設別的每一個文件，我們要分別指定一個src值。在這里，我們將提供現代瀏覽器可以設別的.woff和.ttf字體。@font-face規則告訴瀏覽器：要加載由src URL指定的字體文件。瀏覽器會嘗試加載每一個src文件，直到找到它能支持的一個文件。一旦加載，會為這個字體分配font-family屬性中指定的名字，在這里就是“Emblema One”。
在CSS中使用font-family名 一旦用@font-face規則在瀏覽器中加載一個字體，接下來就可以使用這個字體了，可以用font-family屬性引用你指定的字體名。例如，我們想要改變頁面中<h1>標題的字體，讓它使用“Emblema One”字體，為此，我們要為<h1>增加一個規則，如下所示：
注意：TTF和WOFF字體格式在IE8及以前的版本中不可用。如果你希望支持那些使用較老IE瀏覽器的用戶，需要對Web字體多做一點工作，要使用一個EOT字體。 現在，我們來解決以下問題：
@font-face規則不論看起來還是從表現上講都不像一個CSS規則，不是嗎？ 答：你說對了，可以認為@font-face是一個內置的CSS規則，而不是一個選擇器規則。@font-face并不選擇一個元素。利用@font-face規則，可以獲取一個Web字體，并為它分配一個font-family名。最前面的@就是一個很好的線索，說明這不是一個普通的CSS規則。還有其他需要了解的內置CSS規則嗎？ 答：有。你還會看到兩個常用的規則，分別是@import和@media。@import允許導入其他CSS文件(而不是HTML中通過一個<link>鏈入)，另外@media允許創建特定于某些“媒體”類型的CSS規則，如印刷頁、桌面屏幕或手機。Web字體看起來很棒，使用Web字體有什么缺點嗎？ 答：確實有一些缺點。首先，獲取Web字體需要花費一些時間，所以第一次獲取Web字體時，你的頁面性能可能會受影響。另外，管理多個字體文件也是件痛苦的事情。最后，你可能會發現，移動設備和小型設備并不支持Web字體，所以你的設計里一定要考慮候選字體。我能用@font-face使用多個定制字體嗎？ 答：可以。如果你使用@font-face來加載字體。對于你想用的每一種字體，要確保服務器上有相應的字體文件，而且要為每個字體創建一個單獨的@font-face規則，所以要分別指定唯一的名字，不過，記住要確保只選擇Web頁面中真正需要的字體。每一個額外的字體都會額外增加頁面的加載時間，所以如果頁面中有多個Web字體，Web頁面的加載會變慢。如果太慢，可能會讓你的用戶很不滿！你提到有些服務可以為我托管Web字體，即Web字體托管服務。你能再說詳細點嗎？ 答：當然可以！FontSquirrel(http://www.fontsquirrel.com/)就是一個很好的網站，這里提供了很多開源、免費的字體，可以把這些字體上傳到你的服務器。利用他們的字體庫，可以很容易地提供一個給定字體的多個格式。Google Web字體服務(http://www.google.com/webfonts)也很不錯，可以讓Google為你完成管理字體和CSS的所有具體工作。在這種情況下，你只需要鏈接Google服務上你想要的字體，然后在你的CSS中使用相應的字體名就可以了，非常容易！我們需要知道如何指定字體大小，具體來說，指定字體大小的方法有很多。下面先來看指定font-size的一些方法，然后討論哪種方法最好，可以保證字體大小，還能做到用戶友好。
px 可以按像素指定字體大小，就像圖像使用的像素尺寸一樣。用像素指定字體大小時，就是在告訴瀏覽器字母高度是多少像素。例如，在body規則中指定font-size：
body { font-size: 14px;}在CSS中，指定像素數時，先要指定一個數，后面是“px”，“px”必須緊跟在像素數后面，之間不能有空格。這說明font-size應當是14像素高。 設置一個字體高度為14像素，這說明字母的最低部分與最高部分之間有14像素。
% 用像素指定字體大小時，會明確指出字體具體有多大，與之不同，用一個百分數指定字體大小時，會相對于另一個字體大小指出這個字體有多大。因此，font-size: 150%;，說明這個字體大小應當是另一個字體大小的150%。不過，是另外哪一個字體大小呢？嗯，由于font-size是從父元素繼承的一個屬性，指定一個百分數字體大小時，就是相對于父元素的字體大小。 下面來看這是如何工作的：
這里按像素指定了body的字體大小，并把一級標題的大小指定為150%。
em 還可以使用em指定字體大小，類似于百分數，這也是一個相對度量單位。使用em時，不是指定一個百分數。而是要指定一個比例因子?？梢赃@樣使用em：
body { font-size: 14px;}h1 { font-size: 150%;}h2 { font-size: 1.2em;}假設你使用這種度量來指定<h2>標題的大小。<h2>標題的大小將是父元素字體大小的1.2倍，在這里就是1.2乘以14px，大約17px(實際上是16.8，不過大多數瀏覽器會把它四舍五入為17)。
關鍵字 還要一種指定字體大小的方法：關鍵字。可以把一個字體大小指定為xx-small，x-small，small，medium，large，x-large或xx-large，瀏覽器會把這些關鍵字轉換為像素值，它會使用瀏覽器中定義的默認值來完成這個轉換。 各個關鍵字對應的大小通常有以下關系。每個大小大約比前一個大小大20%，small通常定義為大約12像素。不過，要記住，各個瀏覽器中這些關鍵字的定義并不一定相同，如果用戶愿意，他們還可能重新給出他們自己的定義。可以這樣使用關鍵字：
body { font-size: small;}大多數瀏覽器中，這會使體文本大小約為12像素。
指定字體大小確實有很多選擇：px，em，百分數和關鍵字。你要使用哪一個呢？下面給出指定字體大小的一個小秘訣，利用這個秘訣，可以在大多數瀏覽器中得到一致的結果。
選擇一個關鍵字(我們推薦使用small或medium)，指定它作為body規則中的字體大小。這相當于頁面的默認字體大小。使用em或百分數，相對于body字體大小指定其他元素的字體大小(選擇em還是百分數由你決定，因為實際上這兩種方法的作用是一樣的)。 不錯的秘訣，不過這有什么好處呢？是這樣的：如果相對于body字體大小定義其他元素的字體大小，那么改變Web頁面中的字體大小就會很容易，只需要改變body字體大小就可以了。下面來看這是如何工作的。首先，為你的<body>元素設置一個大小。然后，相對于這個大小設置所有其他字體大小，就像這樣：
注意：如果使用像素指定字體大小，老版本的IE將不支持文本縮放。很遺憾，如果用戶使用老版本的IE，倘若你的字體大小使用像素指定的，這些用戶就無法調整字體的大小。這正是我們不建議按像素指定字體大小的一個原因。如果你使用像素，對于部分用戶來說，頁面的可用性會降低，盡管這種情況可能不會持續太久，因為用戶已經陸續開始對他們的瀏覽器進行升級。 幸運的是，如果你遵循前面的秘訣，提供一個關鍵字來定義頁面體的字體大小，再使用em或百分數為其他元素指定相對大小，這樣當要求瀏覽器放大或縮小文本時，IE也能正確地縮放你的字體。 現在我們來看下面的問題：
這么說，通過在<body>元素中定義一個字體大小，實際上我是在為頁面定義一個默認大小，是嗎？這是怎么回事？ 答：對，你說的沒錯。通過在<body>元素中設置一個字體大小，這樣在設置其他元素的字體大小時就可以相對于其父元素來設置。這有什么好處呢？嗯，如果你需要改變字體大小，那么只需要改變body字體大小，所以其他元素都會按比例改變。我們真的需要考慮用戶調整瀏覽器字體大小嗎？我從來沒有考慮過。 答：是的。幾乎所有瀏覽器都允許用戶將頁面的文本變大或變小，很多用戶會利用這個特性。如果你采用一種相對方式定義字體，用戶調整頁面字體大小時就沒有任何問題。不過要當心不要使用像素大小，因為有些瀏覽器在調整像素大小時會有麻煩。em和百分數有什么區別？它們看起來是一樣的。 答：基本說來，它們是達到相同目的的兩條不同途徑。它們都提供了一種靈活方法，可以相對于父元素的字體大小指定一個字體大小。很對人發現百分數比em更容易理解，另外在CSS中也更容易閱讀。不過你完全可以選擇自己喜歡的方法。如果我沒有指定字體大小，是不是只能得到默認字體大小？ 答：是的，這些默認字體大小取決于你的瀏覽器，甚至取決于你運行的瀏覽器版本。不過大多數情況下，默認的body字體大小都為16像素。那么標題的默認大小是多大？ 答：同樣的，這也取決于瀏覽器，不過一般來講，<h1>是默認體文本字體大小的200%，<h2>是150%，<h3>是120%，<h4>是100%，<h5>是90%，<h6>是60%。注意默認地，<h4>字體大小與body字體大小相同，<h5>和<h6>要小一些。那么，在body規則中能不能不使用大小關鍵字，而使用em或%？如果我使用90%作為body的字體大小，這到底是什么意思？它是誰的90%？ 答：對，你可以這樣做。如果在body規則中指定字體大小為90%，這將是默認字體大小的90%，我們剛說過，默認字體大小通常是16像素，所以它的90%就大約是14像素。如果你希望一個字體大小與關鍵字指定的大小稍有區別，就可以使用%或em。font-weight屬性允許你控制文本的粗細。我們知道，粗體文本看起來比正常文本更深，而且往往要“胖”一點。可以將元素的font-weight屬性設置為bold，來使用粗體文本，如下所示：
font-weight: bold;也可以反過來。如果一個元素默認地設置為bold，或者從父元素繼承了粗體，可以如下去掉粗體樣式：
font-weight: normal;還要兩個相對font-weight屬性：bolder和lighter。使用這兩個屬性值時，會相對于所繼承的值使文本樣式稍粗一些或者稍細一些。這些值很少使用，因為沒有多少字體支持粗細程度的微小差別，實際上這兩個值通常沒有任何效果。 還可以把font-weight屬性設置為100到900之間的一個數(100的倍數)，不過同樣的，這個特性也未得到字體和瀏覽器的廣泛支持，所以通常并不使用。
斜體文本是傾斜的，有時還有額外的彎曲襯線。在CSS中可以使用font-style屬性為文本增加斜體風格，如font-style: italic;，不過，并不是所有字體都支持斜體風格(italic)，所以你得到的實際上稱為傾斜(oblique)文本，傾斜文本也是傾斜的，不過這種字體并不是使用一組專門設計的傾斜字符，而是由瀏覽器將正常文字傾斜。故，也可以使用font-style屬性得到傾斜文本，如：font-style: oblique;。 實際上你會發現，取決于你選擇的字體和瀏覽器，有時這兩種風格看起來是一樣的，有時則不同。所以，除非確實非得區分斜體和傾斜文本，這對你非常重要，否則完全可以任選一種使用。如果確實很重要，你就需要對不同的字體和瀏覽器組合進行測試，來得到最佳效果。 小結：
首先，我們需要知道Web顏色是如何工作的？我們已經看到頁面上很多地方都可以加顏色：背景顏色、邊框顏色和字體顏色。不過，這些顏色在計算機上究竟是如何工作的？下面來看一下。 Web顏色是按構成顏色的紅、綠、藍三個分量所占數量來指定的。每種顏色會分別指定一個從0到100%的數值，然后把它們混合起來得到最終的顏色。例如，如果把紅色100%、綠色100%和藍色100%混合在一起，就會得到白色。注意，在計算機屏幕上，將顏色混合在一起會得到一種更亮的顏色。畢竟，光就是混合而成的！ 不過，如果每個顏色分量(紅、綠和藍)不是100%，比如只是60%，會得到什么顏色呢？不太白，是嗎？換句話說，你會得到一個灰色，因為我們仍然是將這三種顏色等量相加，不過沒有那么多光發送到屏幕上。 或者，假設把紅色80%和綠色40%混合在一起。你覺得會得到一個橙色，是嗎？嗯，你說的沒錯，確實是一個橙色。注意，如果一個顏色分量為0，它不會影響另外兩個顏色分量。同樣的，這是因為沒有藍光與紅光和綠光混合。 那么，如果紅、綠和藍色都是0%，混合在一起會得到什么？這說明，根本沒有向屏幕發送任何光，所以會得到黑色。
為什么我要知道這些“顏色理論”？我直接按名字指定顏色不就行了嗎？比如”red“、”green“或”blue“，不行嗎？我們當然可以使用喜歡的顏色名，不過CSS只定義了大約150個顏色名。但我們會告訴你另外一種指定顏色的方法，允許你指定遠遠不止150種顏色。事實上，你可以使用一個包含1600萬種顏色的調色板。 CSS提供了很多種指定顏色的方法。你可以指定顏色名，或者按紅、綠、藍相對百分比指定顏色，也可以使用一個十六進制碼指定顏色，這是描述顏色紅、綠、藍分量的一種簡寫形式。不過，到目前為止，十六進制碼是指定Web顏色最為常用的方法。但要記住，所有這些指定顏色的方法最終都是要告訴瀏覽器：一個顏色中紅、綠、藍分量分別是多少。 下面分別介紹在CSS中指定顏色的各種方法。
要在CSS中描述顏色，最直接的方法就是使用顏色名。有16種基本顏色和150種擴展顏色可以采用這種方法指定。假設你希望指定“silver”作為一個body元素的背景色，可以在CSS中這樣寫：
body { background-color: silver;}所以，按名指定一個顏色時，只需要輸入顏色名作為相應的屬性值。CSS顏色名是不區分大小寫的，所以輸入silver，Silver或SILVER都是允許的。要記住，這些顏色名只是預定義了紅、綠、藍三種顏色分量的多少。
還可以按紅、綠、藍分量的多少來指定一個顏色。所以，假設你希望指定橙色作為一個body元素的背景色，它由紅色80%，綠色40%和藍色0%構成。可以這樣做：
body { background-color: rgb(80%, 40%, 0%);}rgb(80%, 40%, 0%)：“rgb”是red，green，blue的縮寫。然后在小括號里指定紅、綠、藍的百分比，每個分量后面都有一個百分號(%)。還可以將紅、綠、藍值指定為0到255之間的一個數值。所以不用指定為紅色80%，綠色40%和藍色0%，可以使用紅色204(255的80%)，綠色102(255的40%)，藍色0(255的0%)來指定?？梢匀缦轮苯邮褂脭抵抵付伾?/p>body { background-color: rgb(204, 102, 0);}
注意：在小括號里直接指定數值而不是百分數，不要加%。 下面我們來解決以下問題：
為什么會有兩種不同的方法來指定rgb值？百分數不是更直接嗎？ 答：有時百分數確實更直接，不過使用0到255之間的一個數也是有一定道理的。這個數與1字節信息中包含的數值個數有關。所以，由于歷史和技術方面的原因，通常使用255作為顏色中指定紅、綠、藍值的度量單位。一個十六進制碼中，每組2位數字分別代表顏色的紅、綠、藍分量。所以前兩位數字表示紅色，接下來兩位表示綠色，最后兩位表示藍色，就像這樣：#cc6600。十六進制碼總是以#開頭。 下面，我們來分解一個十六進制碼指定的顏色：
現在得到了各個分量的數值，準確地知道了這個顏色中紅、綠、藍各有多少。
小結：
現在我們已經掌握了指定顏色的多種不同的方法。以我們的橙色為例，它由紅色80%，綠色40%和藍色0%組成。在CSS中，可以采用任何一種方法指定這個顏色：
body { background-color: rgb(80%, 40%, 0%);}body { background-color: rgb(204, 102, 0);}body { background-color: #cc6600;}現在，我們來回答兩個問題：
我現在知道該如何指定顏色了，不過怎么選擇能合理搭配的字體顏色呢？ 答：要準確地回答這個問題，需要一本書才能講清楚，不過選擇字體顏色有一些基本原則。最重要的是，對于文本和背景，要使用對比度最大的顏色，這樣能幫助提高可讀性。例如，白色背景上的黑色文本對比度就最高。沒有必要一直使用黑白色，不過可以嘗試讓文本使用深色，而背景使用淺色。我見過類似#cb0的十六進制碼，這是什么意思？ 答：如果每一組分量中兩位數字都相同，你可以使用簡寫。因此，例如，#ccbb00可以縮寫為#cb0，或者#11eeaa可以縮寫為#1ea。不過如果十六進制碼是#ccbb10，則不能使用縮寫。如果顏色的十六進制碼中每一位都相同(都是同一個數)，這些顏色都是灰色，從深灰(接近黑色)到淺灰色(接近白色)。文本裝飾允許你為文本增加一些裝飾性的效果，如下劃線、上劃線和刪除線。要增加一個文本裝飾，只需設置元素的text-decoration屬性。就像這樣：
em { text-decoration: line-through;}這個規則會使<em>元素上有一個從文本中間穿過的橫線。 一次可以設置多個裝飾。假如你想同時對一個元素加下劃線和上劃線，可以如下指定文本裝飾：
這個規則使得<em>元素有一個下劃線和一個上劃線。 如果文本繼承了你不想要的文本裝飾，可以使用值“none”來去去除裝飾：
利用這個規則，<em>元素將沒有任何裝飾。
現在，我們來回答以下三個問題：
如果<em>有兩個不同的規則，一個指定了上劃線，另一個指定了下劃線，它們會累加嗎？這兩個裝飾都能得到嗎？ 答：不能。你要把這兩個值合并到一個規則中，才能同時得到這兩個文本裝飾。對于text-decoration只會選擇一個規則，不同規則中的裝飾不會累加在一起。只有為text-decoration樣式選擇的規則才能確定使用什么裝飾，所以要得到這兩個裝飾，唯一的辦法就是在同一個text-decoration聲明中同時指定。我一直想問，為什么color屬性不叫text-color？ 答：color屬性實際上控制著一個元素的前景色，所以它會控制文本和邊框顏色，不過你也可以用border-color屬性為邊框指定自己的顏色。我喜歡刪除線裝飾。能不能在我編輯的文本上使用這個裝飾，來指示需要刪除的內容？ 答：當然可以，不過還要一種更好的方法。HTML提供了一個我們還沒有談到的元素：<del>，它能把HTML中的某些內容標記為要刪除的內容。還要一個類似的元素，名為<ins>，這會標記要插入的內容。通常瀏覽器會分別用一個刪除線和下劃線指定這些元素的樣式，你也可以用你喜歡的方式指定它們的樣式。通過使用<del>和<ins>，在指定樣式的同時還可以指出內容的含義。如果我們不想用下劃線來裝飾文本，那么可以使用邊框。如在<h1>和<h2>元素下面增加一個下邊框：
現在<h1>和<h2>元素下面有一個下邊框，而不是下劃線。 注意：這些下邊框一直延伸到頁面邊緣，而不只是在文本下面出現。
新聞熱點
疑難解答
