精通HTML5+CSS3+JavaScript网页设计（视频教学版）（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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 定义字体颜色

上一章目录下一章