web標準化 用CSS定義標題的幾個執行個體

css|web|web標準

• 原文：What is the Best Way to Mark up the Title of a Document?
• 說明：本文是 《Web Standards Solutions: The Markup and Style Handbook》一書中的一章。書號：ISBN:1590593812。我們會陸續翻譯此書中有價值的章節。
• 原作者：Dan Cederholm
• 翻譯：阿宏

　　一個文檔標題，最好的定義方法是什嗎？要回答這個問題，先設想我們要在一個頁面上定義文章的標題，通常我們有三個方法來實現這個簡單目的：

　　方法一： 有意義嗎？

<span class="heading">文章標題</span>

　　雖然在某些情況下<span>會是一個方便的標籤，但它並不能表達出標題的完整含義。採用這個方法的一個好處是，我們可以對它附加一個CSS規則，分配其一個heading class，使其文字象標題一樣顯示。

.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}

　　ok，現在所有的標題都用heading class標記成了大號的粗體字型，並且為藍色。太棒了！但是這樣做對嗎？如果有人用一個不支援CSS的瀏覽器來觀看，會怎樣呢？

　　舉個例子，如果我們設定的這個外部樣式表的規則不被老版本的瀏覽器支援，會怎樣？又或者有視覺障礙的人用螢幕助讀程式來閱讀這個頁面，又會怎樣？一個訪問者通過這些途徑所看到（或聽到）的應該和這個頁面上正常的文本沒有任何區別。

　　儘管class="heading"為這個標籤增加了一點意義，但<span>仍然只是一個普通的標籤，可以被大多數瀏覽器的預設樣式所修改掉。

　　搜尋引擎檢索這個頁面時會略過<span>標籤，就好象它不存在一樣，不會對其可能包含的關鍵字給於一點額外的重視。在後面我們會更多的談到搜尋引擎和標題的關係。

　　最後，由於<span>標籤是一個內嵌元素，我們可能需要把它嵌套在一個額外的區塊層級元素中，比如<p>標籤或<div>標籤，為的是使它能夠形成單獨的行，這會進一步被非必要的代碼弄亂你的標籤。而這些額外增加的標籤卻是必須的，這樣才能使不支援CSS的瀏覽器顯示出沒有差別的文本。

　　方法二:<p>和<b>組合

　　<p><b>文章標題</b></p>

　　使用一個段落標籤，將會給我們帶來塊級的顯示，<b>會把文本變成粗體。但是用這個方法標記一個重要的標題時，我們面對的是同樣無意義的結果。

　　不象方法A，<b>標籤能在可視化的瀏覽器中把文字顯示成粗體——甚至在不支援CSS的瀏覽器中。但是和<span>標籤一樣，搜尋引擎也不會因為有一些東西在段落中被加粗了而給予更高的優先。

　　難以設計樣式

　　用普通的<p>和<b>的組合，也帶來了另一個缺憾——無法把這個標題設計成不同於其他段落的樣式。我們可能想用一個特別的樣式來突出標題，來使頁面內容更清晰更具結構，但是用這個方法只能使其顯示成粗體。

　　方法三:樣式加實質

　　<h1>文章標題</h1>

　　恩，多麼好的標題定義。大多數的網頁設計者對它都很熟悉。其實適當的使用它們，<Hn> 就能為頁面內容提供靈活的、可索引的、以及可樣式化的結構。

　　這也是聰明的定義方法，你會發現它很簡單。不再需要額外的標籤，你可以說，這僅僅比另外兩個方法節省了一點點的位元組，可以忽略不計，但節省一點是一點。

　　<h1>一直到<h6>，代表了標題的六個層級，從最重要的（<h1>）到最次要的（<h6>）。他們本身就是塊級的，不需要增加其它元素來使其單獨成行。簡單，有效——就是好工具。

　　輕鬆定製樣式

　　因為我們使用<h1>標籤是唯一的，而<b>或<p>標籤更適合使用在整個頁面，所以我們可以用各種各樣的CSS方法來樣式化。

　　更重要的是，儘管完全不用樣式，一個標題標籤也能明顯的表示出一個標題！可視化的瀏覽器把 <h1>顯示成更大的粗體。一個非樣式化的頁面將以被期望的那樣顯示文檔結構，用適當的標題標籤來傳達意思。

　　螢幕助讀程式、PDA、手機、以及可視化的和非可視化的瀏覽器都會明白，碰到一個標題標籤時該做的事情，正確的處理，比頁面上的普通文本更重視的來對待。而使用<span>標籤，那些不支援CSS的瀏覽器就不會特別的對待它。

　　討厭的預設樣式

　　以往，由於瀏覽器預設的預設值非常的醜陋，設計者們也許會避免完全的使用標題標籤。或者，因為預設值的巨大尺寸而避免使用<h1>或<h2>，取而代之的是用更高數值的標題標籤來實現更小的尺寸。

　　然而，需要重點強調的是，我們可以很簡單的用CSS來改變這些標題標籤——舉個例子，一個< ;h1>並非一定是佔滿大半螢幕的巨大標版。在後面，我將證明用CSS來樣式化標題標籤是多麼的簡單，希望可以協助你減輕巨大的恐懼。

　　對搜尋引擎友好的

　　這是一個巨大的好處。搜尋引擎喜歡標題標籤。另一方面，一個<span>標籤或者普通的加粗的段落標籤卻在意味著次要一點。適當的用<h1>到<h6>標記你的標題，只需要你的一點點努力，然而卻讓搜尋引擎更容易的檢索到你的頁面，讓人們最終能找到它們。

　　搜尋引擎機器人會給予標題標籤特別的關注——這是你可能放置一些關鍵詞的地方。就象檢索到 <title>和<meta>，它們會順著標題標籤往頁面下面尋找。如果你不使用這些標籤，那麼包含在裡面的關鍵詞將不會被認為是有價值的，從而被忽略掉。

　　所以只要付出一點點的努力，你就能增加人們基於頁面的內容找到你的網站的可能性。聽上去不錯，不是嗎？

　　關於標題的次序

　　在範例中，這個特別的標題是頁面中最重要的，因為它是文檔的標題。因此，我們使用最重要的標題標籤，<h1>。順應W3C的規範，一些人認為跳過數個標題級是個不好的使用。舉個例子，想象我們在下面的頁面：

　　<h1>文章標題</h1>

　　我們接下去的標題（如果不是用另一個<h1>重複的話）應該是<h2>，然後是<h3 >，等等。你也許不應該在<h1>後面跳過一級，直接跟上<h3>。我傾向於同意以上的觀點，順著行文保持層級的連續性，來構造一個排版結構。這樣的話，給一個已經存在的頁面添加標題和樣式就更容易了，你會減少因使用超出的數字而導致的錯誤。

　　前面提到的，設計者也許會用<h4>來標籤一個頁面上最重要的標題，僅僅是因為它的預設的字型尺寸不象<h1>那樣令人生厭的巨大。但是記住，先結構，後設計。我們總是能用CSS來把標題樣式化成任何我們喜歡的文字尺寸。

　　簡單的樣式

　　使用CSS，最容易做的事情就是給我們的標題設定不同的字型樣式。我們可以建立一個CSS規則，它將把樣式應用到頁面中出現的所有<h1>標籤（或者是整個網站，當使用一個外部樣式表的時候）。隨後，如果我們想要改變整個網站上所有出現<h1>標籤的地方的顏色、尺寸、字型的話，我們所有需要做的事情就是修改一些CSS規則，然後它們將立即改變。聽上去非常誘惑人，不是嗎？

　　讓我們認識一下我們自己的超級酷的標題：

<h1>Super Cool Page Title</h1>

　　用CSS改變顏色、字型和尺寸：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}

　　頁面上所有找到<h1>的地方都將應用Arial字型（或者是預設的sans-serif字型）、24點大小以及蘭色，就象圖2-2顯示的。

圖2-2： 應用樣式後的標題

　　接著，讓我們在文字的下面增加一條1點寬的灰色邊框，以增強清晰度（看圖2-3）：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}

圖2-3：帶有灰色下邊框的樣式化標題

　　我們在文字的下方增加了一點補白，來讓線條附近寬鬆一點。由於標題是一個區塊層級元素，所以它的邊界不僅僅到文字，而是與頁面的水平寬度靈活的保持一致。

　　值得指出的是，這個特別的建立邊框的方法是一個由三部分組成的語句：寬度、式樣、顏色。試著改變它們的值，看看會產生什麼不同的效果。

　　增加背景

　　背景可以增強標題的整潔效果。增加一點補白和背景顏色，我們就有了一個不需要圖片的，但又很有樣子的標題。如下：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}

　　我們把文字改成白色，周圍加上4個點的補白，再把背景改成綠色。就象圖2-4顯示的那樣，這可以建立一個好看的綠色條來橫貫頁面，分隔段落。

圖2-4： 帶有背景色和補白的標題

　　背景和邊框

　　在標題下面增加一個窄窄的邊框，加上淡淡的背景色，你能夠建立一種三維的效果，卻不需使用圖片。

　　這個CSS和前面的例子很相似，僅僅改變一點顏色和在底部增加一個2點寬的邊框。

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}

　　試著建立各種不同的同色陰影，產生的立體效果如圖2-5顯示。

圖2-5：帶有背景和下部邊框的標題

　　平鋪的背景

　　當背景圖片被一起加入後，就變得更富有創造性了。用Photoshop或者你喜歡的圖片編輯器，建立一個10*10的圖片，圖片的頂部有黑色的邊框，漸層的灰色一直到底部，象圖2-6顯示的。

圖2-6：A 在Photoshop中建立10×10點大小的圖片（被放大了）

　　我們可以用CSS把這個極小的圖片平鋪在<h1>的底部：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}

　　repeat-x會通知瀏覽器僅在水平方向平鋪（repeat-y 將在垂直方向平鋪）。我們再把圖片設定在bottom，又增加了額外的padding-bottom，我們可以調節平鋪的圖片和上面文字之間的距離。（看圖2-7）

圖2-7： 帶有平鋪背景的標題

　　可替換的表徵圖

　　處理行內的裝飾性圓點和表徵圖時，作為代替硬式編碼方式，我們可以繼續使用CSS的background屬性來把表徵圖設定在文字左邊。這個方法可以迅速的改變整個網站的look and feel——升級一個CSS檔案從而立刻改變整個網站的頁面。

　　代碼和前面平鋪範例很相似：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}

　　這裡，我們在左邊留出了額外的空間（在那兒我們將顯示一個表徵圖），設為no-repeat，是為了讓背景圖片只顯示一次（看圖2-8）。我們把它放置在距離首部0點和距離頂部50%的位置上。

圖2-8：A： 帶有表徵圖的標題

　　輕鬆升級

　　設想這樣一個情景來代替前面的例子，我們已經在一個包含100個文檔的網站中用<img>標籤編碼了這些表徵圖。這些表徵圖匹配著整個網站各個的題目。幾個星期後，網站的所有者決定更改這個網站的look and feel。新的表徵圖和老的表徵圖有著不同的規格。天哪！我們將需要回到所有的100個文檔裡面，去改變每一個<img>標籤，來更新它的image路徑。對於一個項目的預算，這額外所需的時間就會延遲原先的期限。時間就是金錢。

　　把那些非必須的，裝飾性的圖片保持在CSS檔案中，就可以使得更改背景圖片只需幾分鐘，而不再需要幾天，整個網站可以立刻得到升級。你應該開始明白把結構層和表現層的標記分離開的力量了吧。

　　可變換的效果

　　下面的技巧在某些情況下會很有用。這是我在2003年4月，用標準重構Fast Company magazine（www.fastcompany.com）網站時大量採用的方法。

　　我們在整個網站的大多數<h3>標題中使用了13*13點的小表徵圖，就象這樣：

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif"
width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>

　　我們用這種方法編碼有兩個原因。一個原因是，有各種各樣的表徵圖，它取決於標題的主題（讀書俱樂部的一本書，引號標記著每天的引用，等等）。第二個原因是，當時，我們每個月都會根據當前發行的雜誌封面來更換整個網站的色彩配置。這種更換要成為可能，當然要用CSS。

　　要讓這些表徵圖隨著頁面上其它元素一起變換顏色，並不需要每次都建立新的表徵圖。我們建立一個僅使用兩種色彩的表徵圖：白色和透明色（變換的色彩將被透出來）。圖2-9顯示了這些表徵圖中的一個例子，它們被使用在首頁上的每日引言中。

圖2-9：A 13×13 點大小的透明表徵圖（放大的）

　　透過表徵圖中透明的部分，我們再次使用簡便的CSS中background屬性設定想讓它透出來的顏色。另外我們還想讓色彩僅僅出現在表徵圖的後面，而不影響到標題的文字，因此我們又用下面的方法將規則僅施加於包含在<h3>內的<img>標籤。

h3 img {
background: #696;
}

　　前面的代碼確定了所有包含在<h3>內的<img>標籤都有一個綠色的背景。色彩透過圖片的透明部分顯示出來，而白色的部分仍然保持白色。每個月，我們都能用一個不同的色彩值來升級CSS規則，從而改變整個網站中的每個標題以及相關聯的表徵圖的色彩。這就象變魔術！

　　對齊<img>標籤

　　為了讓表徵圖和文本正確的排齊（我們想讓它垂直置中），我們加入了以下CSS規則：

h3 img {
background: #696;
vertical-align: middle;
}

　　這樣保證了包含於<h3>標籤中的圖片對齊於它的文本中點。圖2-10顯示了標題的效果。

圖2-10： 應用CSS背景的透明圖片的效果

　　這個方法還有另一個值得注意的地方——不但可以用一個單獨CSS代碼塊來指定圖片背後要顯示出的背景顏色，同樣也可以在CSS代碼塊的內部指定。

　　舉個例子，讓我們回到前面“可替換的表徵圖”例子，增加一些背景色彩：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding-left: 30px;
background: #696 url(transparent_icon.gif) no-repeat 0 50%;
}

　　transparent_icon.gif將放置在我們在前面所指定的色彩上面，用的是同樣的規則（看圖2-11）——這裡是#696，一個可愛的綠色。

圖2-11：帶有背景圖片和色彩的標題

　　這個技巧使得放置一些與頁面色彩相關聯的小圓角或者裝飾性的圖片變得特別的方便。這些非必須的圖片被完全的包含在CSS檔案中，如果將來要升級，那將可以非常容易的改換。