用CSS定義標(biāo)題和幾個(gè)實(shí)例

一個(gè)文檔標(biāo)題，最好的定義方法是什么？要回答這個(gè)問題，先設(shè)想我們要在一個(gè)頁(yè)面上定義文章的標(biāo)題，通常我們有三個(gè)方法來實(shí)現(xiàn)這個(gè)簡(jiǎn)單目的：

方法一： 有意義嗎？

<span class="heading">文章標(biāo)題</span> 雖然在某些情況下<span>會(huì)是一個(gè)方便的標(biāo)簽，但它并不能表達(dá)出標(biāo)題的完整含義。采用這個(gè)方法的一個(gè)好處是，我們可以對(duì)它附加一個(gè)CSS規(guī)則，分配其一個(gè)heading class，使其文字象標(biāo)題一樣顯示。

.heading { font-size: 24px; font-weight: bold; color: blue; } ok，現(xiàn)在所有的標(biāo)題都用heading class標(biāo)記成了大號(hào)的粗體字體，并且為藍(lán)色。太棒了！但是這樣做對(duì)嗎？如果有人用一個(gè)不支持CSS的瀏覽器來觀看，會(huì)怎樣呢？

舉個(gè)例子，如果我們?cè)O(shè)置的這個(gè)外部樣式表的規(guī)則不被老版本的瀏覽器支持，會(huì)怎樣？又或者有視覺障礙的人用屏幕閱讀器來閱讀這個(gè)頁(yè)面，又會(huì)怎樣？一個(gè)訪問者通過這些途徑所看到（或聽到）的應(yīng)該和這個(gè)頁(yè)面上正常的文本沒有任何區(qū)別。

盡管class="heading"為這個(gè)標(biāo)簽增加了一點(diǎn)意義，但<span>仍然只是一個(gè)普通的標(biāo)簽，可以被大多數(shù)瀏覽器的缺省樣式所修改掉。

搜索引擎檢索這個(gè)頁(yè)面時(shí)會(huì)略過<span>標(biāo)簽，就好象它不存在一樣，不會(huì)對(duì)其可能包含的關(guān)鍵字給于一點(diǎn)額外的重視。在后面我們會(huì)更多的談到搜索引擎和標(biāo)題的關(guān)系。

最后，由于<span>標(biāo)簽是一個(gè)內(nèi)嵌元素，我們可能需要把它嵌套在一個(gè)額外的塊級(jí)元素中，比如<p>標(biāo)簽或<div>標(biāo)簽，為的是使它能夠形成單獨(dú)的行，這會(huì)進(jìn)一步被非必要的代碼弄亂你的標(biāo)簽。而這些額外增加的標(biāo)簽卻是必須的，這樣才能使不支持CSS的瀏覽器顯示出沒有差別的文本。

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

<p><b>文章標(biāo)題</b></p> 使用一個(gè)段落標(biāo)簽，將會(huì)給我們帶來塊級(jí)的顯示，<b>會(huì)把文本變成粗體。但是用這個(gè)方法標(biāo)記一個(gè)重要的標(biāo)題時(shí)，我們面對(duì)的是同樣無意義的結(jié)果。

不象方法A，<b>標(biāo)簽?zāi)茉诳梢暬臑g覽器中把文字顯示成粗體——甚至在不支持CSS的瀏覽器中。但是和<span>標(biāo)簽一樣，搜索引擎也不會(huì)因?yàn)橛幸恍〇|西在段落中被加粗了而給予更高的優(yōu)先。

難以設(shè)計(jì)樣式

用普通的<p>和<b>的組合，也帶來了另一個(gè)缺憾——無法把這個(gè)標(biāo)題設(shè)計(jì)成不同于其他段落的樣式。我們可能想用一個(gè)特別的樣式來突出標(biāo)題，來使頁(yè)面內(nèi)容更清晰更具結(jié)構(gòu)，但是用這個(gè)方法只能使其顯示成粗體。

方法三:樣式加實(shí)質(zhì)

<h1>文章標(biāo)題</h1> 恩，多么好的標(biāo)題定義。大多數(shù)的網(wǎng)頁(yè)設(shè)計(jì)者對(duì)它都很熟悉。其實(shí)適當(dāng)?shù)氖褂盟鼈儯?lt;Hn> 就能為頁(yè)面內(nèi)容提供靈活的、可索引的、以及可樣式化的結(jié)構(gòu)。

這也是聰明的定義方法，你會(huì)發(fā)現(xiàn)它很簡(jiǎn)單。不再需要額外的標(biāo)簽，你可以說，這僅僅比另外兩個(gè)方法節(jié)省了一點(diǎn)點(diǎn)的字節(jié)，可以忽略不計(jì)，但節(jié)省一點(diǎn)是一點(diǎn)。

<h1>一直到<h6>，代表了標(biāo)題的六個(gè)級(jí)別，從最重要的（<h1>）到最次要的（<h6>）。他們本身就是塊級(jí)的，不需要增加其它元素來使其單獨(dú)成行。簡(jiǎn)單，有效——就是好工具。

輕松定制樣式

因?yàn)槲覀兪褂?lt;h1>標(biāo)簽是唯一的，而<b>或<p>標(biāo)簽更適合使用在整個(gè)頁(yè)面，所以我們可以用各種各樣的CSS方法來樣式化。

更重要的是，盡管完全不用樣式，一個(gè)標(biāo)題標(biāo)簽也能明顯的表示出一個(gè)標(biāo)題！可視化的瀏覽器把 <h1>顯示成更大的粗體。一個(gè)非樣式化的頁(yè)面將以被期望的那樣顯示文檔結(jié)構(gòu)，用適當(dāng)?shù)臉?biāo)題標(biāo)簽來傳達(dá)意思。

屏幕閱讀器、PDA、手機(jī)、以及可視化的和非可視化的瀏覽器都會(huì)明白，碰到一個(gè)標(biāo)題標(biāo)簽時(shí)該做的事情，正確的處理，比頁(yè)面上的普通文本更重視的來對(duì)待。而使用<span>標(biāo)簽，那些不支持CSS的瀏覽器就不會(huì)特別的對(duì)待它。

討厭的默認(rèn)樣式

以往，由于瀏覽器默認(rèn)的缺省值非常的丑陋，設(shè)計(jì)者們也許會(huì)避免完全的使用標(biāo)題標(biāo)簽?；蛘?，因?yàn)槿笔≈档木薮蟪叽缍苊馐褂?lt;h1>或<h2>，取而代之的是用更高數(shù)值的標(biāo)題標(biāo)簽來實(shí)現(xiàn)更小的尺寸。

然而，需要重點(diǎn)強(qiáng)調(diào)的是，我們可以很簡(jiǎn)單的用CSS來改變這些標(biāo)題標(biāo)簽——舉個(gè)例子，一個(gè)< ;h1>并非一定是占滿大半屏幕的巨大標(biāo)版。在后面，我將證明用CSS來樣式化標(biāo)題標(biāo)簽是多么的簡(jiǎn)單，希望可以幫助你減輕巨大的恐懼。

對(duì)搜索引擎友好的

這是一個(gè)巨大的好處。搜索引擎喜歡標(biāo)題標(biāo)簽。另一方面，一個(gè)<span>標(biāo)簽或者普通的加粗的段落標(biāo)簽卻在意味著次要一點(diǎn)。適當(dāng)?shù)挠?lt;h1>到<h6>標(biāo)記你的標(biāo)題，只需要你的一點(diǎn)點(diǎn)努力，然而卻讓搜索引擎更容易的檢索到你的頁(yè)面，讓人們最終能找到它們。

搜索引擎機(jī)器人會(huì)給予標(biāo)題標(biāo)簽特別的關(guān)注——這是你可能放置一些關(guān)鍵詞的地方。就象檢索到 <title>和<meta>，它們會(huì)順著標(biāo)題標(biāo)簽往頁(yè)面下面查找。如果你不使用這些標(biāo)簽，那么包含在里面的關(guān)鍵詞將不會(huì)被認(rèn)為是有價(jià)值的，從而被忽略掉。

所以只要付出一點(diǎn)點(diǎn)的努力，你就能增加人們基于頁(yè)面的內(nèi)容找到你的站點(diǎn)的可能性。聽上去不錯(cuò)，不是嗎？

關(guān)于標(biāo)題的次序

在范例中，這個(gè)特別的標(biāo)題是頁(yè)面中最重要的，因?yàn)樗俏臋n的標(biāo)題。因此，我們使用最重要的標(biāo)題標(biāo)簽，<h1>。順應(yīng)W3C的規(guī)范，一些人認(rèn)為跳過數(shù)個(gè)標(biāo)題級(jí)是個(gè)不好的使用。舉個(gè)例子，想象我們?cè)谙旅娴捻?yè)面：

<h1>文章標(biāo)題</h1> 我們接下去的標(biāo)題（如果不是用另一個(gè)<h1>重復(fù)的話）應(yīng)該是<h2>，然后是<h3 >，等等。你也許不應(yīng)該在<h1>后面跳過一級(jí)，直接跟上<h3>。我傾向于同意以上的觀點(diǎn)，順著行文保持級(jí)別的連續(xù)性，來構(gòu)造一個(gè)排版結(jié)構(gòu)。這樣的話，給一個(gè)已經(jīng)存在的頁(yè)面添加標(biāo)題和樣式就更容易了，你會(huì)減少因使用超出的數(shù)字而導(dǎo)致的錯(cuò)誤。

前面提到的，設(shè)計(jì)者也許會(huì)用<h4>來標(biāo)簽一個(gè)頁(yè)面上最重要的標(biāo)題，僅僅是因?yàn)樗娜笔〉淖煮w尺寸不象<h1>那樣令人生厭的巨大。但是記住，先結(jié)構(gòu)，后設(shè)計(jì)。我們總是能用CSS來把標(biāo)題樣式化成任何我們喜歡的文字尺寸。

簡(jiǎn)單的樣式

使用CSS，最容易做的事情就是給我們的標(biāo)題設(shè)置不同的字體樣式。我們可以建立一個(gè)CSS規(guī)則，它將把樣式應(yīng)用到頁(yè)面中出現(xiàn)的所有<h1>標(biāo)簽（或者是整個(gè)站點(diǎn)，當(dāng)使用一個(gè)外部樣式表的時(shí)候）。隨后，如果我們想要改變整個(gè)站點(diǎn)上所有出現(xiàn)<h1>標(biāo)簽的地方的顏色、尺寸、字體的話，我們所有需要做的事情就是修改一些CSS規(guī)則，然后它們將立即改變。聽上去非常誘惑人，不是嗎？

讓我們認(rèn)識(shí)一下我們自己的超級(jí)酷的標(biāo)題：

<h1>Super Cool Page Title</h1>

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

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

頁(yè)面上所有找到<h1>的地方都將應(yīng)用Arial字體（或者是缺省的sans-serif字體）、24點(diǎn)大小以及蘭色，就象圖2-2顯示的。

應(yīng)用樣式后的標(biāo)題

接著，讓我們?cè)谖淖值南旅嬖黾右粭l1點(diǎn)寬的灰色邊框，以增強(qiáng)清晰度（看圖2-3）：

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

帶有灰色下邊框的樣式化標(biāo)題

我們?cè)谖淖值南路皆黾恿艘稽c(diǎn)補(bǔ)白，來讓線條附近寬松一點(diǎn)。由于標(biāo)題是一個(gè)塊級(jí)元素，所以它的邊界不僅僅到文字，而是與頁(yè)面的水平寬度靈活的保持一致。

值得指出的是，這個(gè)特別的創(chuàng)建邊框的方法是一個(gè)由三部分組成的語(yǔ)句：寬度、式樣、顏色。試著改變它們的值，看看會(huì)產(chǎn)生什么不同的效果。

增加背景

背景可以增強(qiáng)標(biāo)題的整潔效果。增加一點(diǎn)補(bǔ)白和背景顏色，我們就有了一個(gè)不需要圖片的，但又很有樣子的標(biāo)題。如下：

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

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

帶有背景色和補(bǔ)白的標(biāo)題

背景和邊框

在標(biāo)題下面增加一個(gè)窄窄的邊框，加上淡淡的背景色，你能夠創(chuàng)建一種三維的效果，卻不需使用圖片。

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

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

試著創(chuàng)建各種不同的同色陰影，產(chǎn)生的立體效果如圖2-5顯示。

帶有背景和下部邊框的標(biāo)題

平鋪的背景

當(dāng)背景圖片被一起加入后，就變得更富有創(chuàng)造性了。用Photoshop或者你喜歡的圖片編輯器，創(chuàng)建一個(gè)10*10的圖片，圖片的頂部有黑色的邊框，漸變的灰色一直到底部。

在Photoshop中創(chuàng)建10×10點(diǎn)大小的圖片（被放大了）

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

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

repeat-x會(huì)通知瀏覽器僅在水平方向平鋪（repeat-y 將在垂直方向平鋪）。我們?cè)侔褕D片設(shè)置在bottom，又增加了額外的padding-bottom，我們可以調(diào)節(jié)平鋪的圖片和上面文字之間的距離。（看圖2-7）

帶有平鋪背景的標(biāo)題

可替換的圖標(biāo)

處理行內(nèi)的裝飾性圓點(diǎn)和圖標(biāo)時(shí)，作為代替硬編碼的方式，我們可以繼續(xù)使用CSS的background屬性來把圖標(biāo)設(shè)置在文字左邊。這個(gè)方法可以迅速的改變整個(gè)站點(diǎn)的look and feel——升級(jí)一個(gè)CSS文件從而立刻改變整個(gè)站點(diǎn)的頁(yè)面。

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

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

這里，我們?cè)谧筮吜舫隽祟~外的空間（在那兒我們將顯示一個(gè)圖標(biāo)），設(shè)為no-repeat，是為了讓背景圖片只顯示一次。我們把它放置在距離首部0點(diǎn)和距離頂部50%的位置上。

帶有圖標(biāo)的標(biāo)題

輕松升級(jí)

設(shè)想這樣一個(gè)情景來代替前面的例子，我們已經(jīng)在一個(gè)包含100個(gè)文檔的站點(diǎn)中用<img>標(biāo)簽編碼了這些圖標(biāo)。這些圖標(biāo)匹配著整個(gè)站點(diǎn)各個(gè)的題目。幾個(gè)星期后，站點(diǎn)的所有者決定更改這個(gè)站點(diǎn)的look and feel。新的圖標(biāo)和老的圖標(biāo)有著不同的規(guī)格。天哪！我們將需要回到所有的100個(gè)文檔里面，去改變每一個(gè)<img>標(biāo)簽，來更新它的image路徑。對(duì)于一個(gè)項(xiàng)目的預(yù)算，這額外所需的時(shí)間就會(huì)推遲原先的期限。時(shí)間就是金錢。

把那些非必須的，裝飾性的圖片保持在CSS文件中，就可以使得更改背景圖片只需幾分鐘，而不再需要幾天，整個(gè)站點(diǎn)可以立刻得到升級(jí)。你應(yīng)該開始明白把結(jié)構(gòu)層和表現(xiàn)層的標(biāo)記分離開的力量了吧。

可變換的效果

下面的技巧在某些情況下會(huì)很有用。這是我在2003年4月，用標(biāo)準(zhǔn)重構(gòu)Fast Company magazine（www.fastcompany.com）站點(diǎn)時(shí)大量采用的方法。

我們?cè)谡麄€(gè)站點(diǎn)的大多數(shù)<h3>標(biāo)題中使用了13*13點(diǎn)的小圖標(biāo)，就象這樣：

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

我們用這種方法編碼有兩個(gè)原因。一個(gè)原因是，有各種各樣的圖標(biāo)，它取決于標(biāo)題的主題（讀書俱樂部的一本書，引號(hào)標(biāo)記著每天的引用，等等）。第二個(gè)原因是，當(dāng)時(shí)，我們每個(gè)月都會(huì)根據(jù)當(dāng)前發(fā)行的雜志封面來更換整個(gè)站點(diǎn)的配色方案。這種更換要成為可能，當(dāng)然要用CSS。

要讓這些圖標(biāo)隨著頁(yè)面上其它元素一起變換顏色，并不需要每次都創(chuàng)建新的圖標(biāo)。我們創(chuàng)建一個(gè)僅使用兩種色彩的圖標(biāo)：白色和透明色（變換的色彩將被透出來）。

A 13×13 點(diǎn)大小的透明圖標(biāo)（放大的）

透過圖標(biāo)中透明的部分，我們?cè)俅问褂煤?jiǎn)便的CSS中background屬性設(shè)置想讓它透出來的顏色。另外我們還想讓色彩僅僅出現(xiàn)在圖標(biāo)的后面，而不影響到標(biāo)題的文字，因此我們又用下面的方法將規(guī)則僅施加于包含在<h3>內(nèi)的<img>標(biāo)簽。

h3 img { background: #696; }

前面的代碼確定了所有包含在<h3>內(nèi)的<img>標(biāo)簽都有一個(gè)綠色的背景。色彩透過圖片的透明部分顯示出來，而白色的部分仍然保持白色。每個(gè)月，我們都能用一個(gè)不同的色彩值來升級(jí)CSS規(guī)則，從而改變整個(gè)站點(diǎn)中的每個(gè)標(biāo)題以及相關(guān)聯(lián)的圖標(biāo)的色彩。這就象變魔術(shù)！

對(duì)齊<img>標(biāo)簽

為了讓圖標(biāo)和文本正確的排齊（我們想讓它垂直居中），我們加入了以下CSS規(guī)則：

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

這樣保證了包含于<h3>標(biāo)簽中的圖片對(duì)齊于它的文本中點(diǎn)。圖2-10顯示了標(biāo)題的效果。

應(yīng)用CSS背景的透明圖片的效果

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

舉個(gè)例子，讓我們回到前面“可替換的圖標(biāo)”例子，增加一些背景色彩：

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將放置在我們?cè)谇懊嫠付ǖ纳噬厦?，用的是同樣的?guī)則——這里是#696，一個(gè)可愛的綠色。

帶有背景圖片和色彩的標(biāo)題

這個(gè)技巧使得放置一些與頁(yè)面色彩相關(guān)聯(lián)的小圓角或者裝飾性的圖片變得特別的方便。這些非必須的圖片被完全的包含在CSS文件中，如果將來要升級(jí)，那將可以非常容易的改換。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標(biāo)題：用CSS定義標(biāo)題和幾個(gè)實(shí)例
網(wǎng)站URL：http://www.muchs.cn/news36/313136.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、電子商務(wù)、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)