標記語言——標題

互聯網 發(fā)布時間：2008-10-17 18:55:27 作者：佚名

點擊這里返回網頁教學網　HTML教程　欄目．上文：Chapter1 清單原文出處標準化設計解決方案 - 標記語言和樣式手冊 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 從標記語法談起 Chapter2 標題總覽: 不但

加上背景
背景能給標題加上精巧的效果.只要加上背景色與一些留白,不需要用到圖片我們就可以創(chuàng)造出清新的標題風格.舉例來說:
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:設定背景和底邊的標題
平鋪背景
用上圖片的話,就能發(fā)揮更多的創(chuàng)意了.就讓我們用photoshop創(chuàng)建一個10X10的小圖片,最上面是黑色的邊框,然后下面是從上到下的灰色梯度(如圖2-6):

圖2-6 用Photoshop創(chuàng)建的小圖片
我們可以用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就是在垂直方向上排列),同時我們設定了將圖片放置在標題的底部,并加上一些下部內補丁,以便調整圖片和標圖文字之間的距離(如圖2-7)

圖2-7:設定平鋪背景的標題示例
方便替換的圖標
我們也可以使用cssdebackground屬性來設定放在文字左邊的小圖標以此來代替寫死圖片標簽的方法,為標題加上裝飾用的小圖標.這個方法能使在未來的日子里改變網站顯示效果的工作變得十分輕松—只需要替換那么一個css規(guī)則,就能同時改變整個網站的顯示效果.
代碼和上面的平鋪背景大致相同:
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像素,并且對起垂直中線.