- 精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）
- 王英英
- 775字
- 2019-12-09 14:24:01
6.6 綜合實例1——制作五彩標題
使用CSS可以給網頁標題設置不同的字體樣式，即建立一個CSS規則，將樣式應用到頁面中出現的所有<h1>標記或者是整個站點（當使用一個外部樣式表的時候）。如果我們想改變整個站點上所有出現<h1>標記的顏色、尺寸、字體，只需要修改一些CSS規則即可。
具體步驟如下所示：
01 分析需求
本實例要求簡單，使用標記<h1>創建一個標題，然后使用CSS樣式對標題進行修飾，可以從顏色、尺寸、字體、背景、邊框等方面入手。
02 構建HTML頁面
創建HTML頁面，完成基本框架并創建標題。其代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>五彩標題</title>
</head>
<body>
<body>
<h1>
<span class=c1>美</span>
<span class=c2>食</span>
<span class=c3>介</span>
<span class=c4>紹</span></h1>
</body>
</html>
在IE 11.0中的瀏覽效果如圖6-28所示。標題在網頁中的顯示沒有任何修飾。
圖6-28 標題顯示
03 使用內嵌樣式
如果要對標題進行修飾，需要添加CSS（此處使用內嵌樣式），在<head>標記中添加CSS，其代碼如下：
<style>
h1{}
</style>
此時沒有任何變化，只是在代碼中引入了<style>標記。
04 改變顏色、字體和尺寸
添加CSS代碼，改變標題樣式，在顏色、字體和尺寸上面對其樣式進行設置，代碼如下：
在IE 11.0中的瀏覽效果如圖6-29所示。其中，字體大小為24px，顏色為淺藍色，字形為Arial。
圖6-29 添加文本修飾標記
05 加入灰色邊框
為標題添加邊框，其代碼如下：
在IE 11.0中的瀏覽效果如圖6-30所示，在“美食介紹”文字下面添加了一個邊框，邊框和文字距離是4px。
圖6-30 添加邊框樣式
06 增加背景圖
使用CSS樣式為標記<h1>添加背景圖片，其代碼如下：
background:url(01.jpg) repeat-x bottom; /*設置背景圖片和水平平鋪模式*/
在IE 11.0中的瀏覽效果如圖6-31所示，在“美食介紹”文字下面添加了一個背景圖片，圖片在水平（X）軸方向進行平鋪。
圖6-31 添加背景
07 定義標題寬度
使用CSS屬性將背景圖變小，使其正好符合四個字體的寬度，其代碼如下：
width:120px;
在IE 11.0中的瀏覽效果如圖6-32所示，“美食介紹”文字下面的背景圖縮短，正好和字體寬度相同。
圖6-32 定義寬度
08 定義字體顏色
在CSS樣式中，為每個字定義顏色，其代碼如下。
在IE 11.0中的瀏覽效果如圖6-33所示，每個字都顯示出不同的顏色，加上背景色共有5種顏色。
圖6-33 定義字體顏色