3.3 综合案例——制作炫彩网站Logo
使用CSS可以给网页中的文字设置不同的字体样式，下面就来制作一个网站的文字Logo，具体步骤如下所示。
step 01 分析需求。本案例要求简单，使用标记h1创建一个标题文字，然后使用CSS样式对标题文字进行修饰，可以从颜色、尺寸、字体、背景、边框等方面入手。案例完成后，其效果如图3-5所示。
图3-5 五彩标题显示
step 02 构建HTML页面。创建HTML页面，完成基本框架并创建标题，其代码如下所示。
<html> <head> <title>炫彩Logo</title> </head> <body> <h1> <span class=c1>缤</span> <span class=c2>纷</span> <span class=c3>夏</span> <span class=c4>衣</span></h1> </body> </html>
在IE 11.0浏览器中浏览效果如图3-6所示，可以看到标题h1在网页中显示，没有任何修饰。
图3-6 标题显示
step 03 使用内嵌样式。如果要对h1标题修饰，需要添加CSS，此处使用内嵌样式，在<head>标记中添加CSS，其代码如下所示。
<style>
h1 {}
</style>
在IE 11.0浏览器中浏览效果如图3-7所示，可以看到此时没有任何变化，只是在代码中引入了<style>标记。
图3-7 引入style标记
step 04 改变颜色、字体和尺寸。添加CSS代码，改变标题样式，其样式在颜色、字体和尺寸上面设置，代码如下所示。
h1 {
font-family: Arial, sans-serif;
font-size: 50px;
color: #369;
}
在IE 11.0浏览器中浏览效果如图3-8所示，可以看到字体大小为50像素，颜色为浅蓝色，字形为Arial。
图3-8 添加文本修饰标记
step 05 加入灰色底线。为h1标题加入底线，其代码如下所示。
padding-bottom: 4px; border-bottom: 2px solid #ccc;
在IE 11.0浏览器中浏览效果如图3-9所示，可以看到“缤纷夏衣”文字下面添加了一个边框，边框和文字距离是4像素。
图3-9 添加边框样式
step 06 增加背景图。使用CSS样式为标记<h1>添加背景图片，其代码如下所示。
background: url(01.jpg) repeat-x bottom;
在IE 11.0浏览器中浏览效果如图3-10所示，可以看到“缤纷夏衣”文字下面添加了一个背景图片，图片在水平（X）轴方向进行平铺。
图3-10 添加背景
step 07 定义标题背景图片宽度。使用CSS属性将标题背景图片变短，使其长度正好符合四个字的宽度，其代码如下。
width:250px;
在IE 11.0浏览器中浏览效果如图3-11所示，可以看到“缤纷夏衣”文字下面背景图缩短，正好和文字宽度相同。
图3-11 定义背景图片宽度
step 08 定义字体颜色。在CSS样式中，为每个字定义颜色，其代码如下。
在IE 11.0浏览器中浏览效果如图3-12所示，可以看到每个字显示不同的颜色。
图3-12 定义字体颜色