【技能锤炼】
【案例3-1】《春晓》
一、案例描述
1、考核知识点
CSS样式规则、引入CSS样式表
2、练习目标
Ø 熟练掌握CSS样式规则。
Ø 灵活运用CSS行内式的引用方法。
3、需求分析
使用CSS对网页进行修饰时，首先需要了解CSS样式规则及引入CSS样式表的方法，本案例按照CSS样式规则的格式并使用CSS行内式的方法输出一首诗《春晓》。
4、案例分析
1) 效果如图3-1所示。
图3-1 《春晓》效果
2) 具体实现步骤如下：
a) 使用CSS行内式为页面元素引入样式。
b) 按照CSS样式规则为标题设置成微软雅黑、蓝色、26px字体。
c) 按照CSS样式规则为段落设置成微软雅黑、红色、28px字体。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>春晓</title>
6 </head>
7 <body>
8 <h3>春晓</h3>
9 <p>
10 春眠不觉晓，<br />处处闻啼鸟。<br />
11 夜来风雨声，<br />花落知多少。
12 </p>
13 </body>
14 </html>
2、定义CSS样式
使用行内式CSS样式表为页面添加样式，将第8~9行代码更改如下：
<h3style="font-family:'微软雅黑';color:#00F;font-size:28px;">春晓</h3>
<pstyle="color:red;font-family:'微软雅黑';font-size:26px;">
保存后，在谷歌浏览器中预览，效果如图3-2所示。
图3-2 《春晓》
注意：
1、CSS样式中多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。但是，为了便于增加新样式最好保留。
【案例3-2】制作Google Logo效果
一、案例描述
1、 考核知识点
类选择器
2、 练习目标
Ø 灵活使用类选择器控制元素。
Ø 熟练掌握CSS内嵌式的引用方法。
3、 需求分析
要想将CSS样式应用于特定的HTML元素，除了要掌握引入CSS样式表的方法，还需要掌握CSS基础选择器的使用。本案例通过使用类选择器来控制元素，并运用CSS内嵌式的方法来实现制作Google Logo的效果。
4、 案例分析
1) 效果如图3-3所示。
图3-3 Google Logo效果
2) 具体实现步骤如下：
a) 使用内嵌式引入CSS样式表。
b) 分别为页面元素定义不同的类。
c) 通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体；
第二个字母“o”设置为红色、加粗、60px字体；
第三个字母“o”设置为黄色、加粗、60px字体；
第四个字母“g”设置为蓝色、加粗、60px字体；
剩余字母“le”按默认样式输出。
二、案例实现
1、制作页面结构
新建HMTL文件，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>google</title>
6 </head>
7 <body>
8 <strong>G</strong>
9 <strongclass="o">o</strong>
10 <strongclass="oo">o</strong>
11 <strongclass="g">g</strong>le
12 </body>
13 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <styletype="text/css">
2 .g{color:#176CEE;font-size:60px; }
3 .o{color:#D4412D;font-size:60px;}
4 .oo{color:#FFB404;font-size:60px; }
5 </style>
保存后，在谷歌浏览器中预览，效果如图3-4所示。
图3-4 Google Logo
注意：
1、需要注意的是，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
【案例3-3】《关山月》
一、案例描述
1、 考核知识点
引入CSS样式表、标记选择器
2、 练习目标
Ø 熟练运用标记选择器控制元素。
Ø 掌握CSS导入式的引用方法。
3、 需求分析
通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础选择器—标记选择器。本案例通过使用标记选择器来控制元素，并运用CSS导入式的方法来输出一首诗《关山月》。
4、 案例分析
1) 效果如图3-5所示。
图3-5 《关山月》效果
2) 具体实现步骤如下：
a) 新建两个外部样式表red.css、blue.css。
b) 使用导入式引入CSS样式表。
c) 在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。
d) 在外部样式表blue.css中，通过标记选择器设置段落为16px字体、蓝色、居中效果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>关山月</title>
6 <styletype="text/css">
7 @importurl("red.css");
8 @importurl("blue.css");
9 </style>
10 </head>
11 <body>
12 <h1>关山月</h1>
13 <h2>李白</h2>
14 <p>花间一壶酒，独酌无相亲。</p>
15 <p>举杯邀明月，对影成三人。</p>
16 <p>月既不解饮，影徒随我身。</p>
17 <p>暂伴月将影，行乐须及春。</p>
18 <p>我歌月徘徊，我舞影零乱。</p>
19 <p>醒时同交欢，醉后各分散。</p>
20 <p>永结无情游，相期邈云汉。</p>
21 </body>
22 </html>
2、定义CSS样式
使用导入式引入CSS样式表为页面添加样式，具体如下：
新建样式表red.css，具体代码如下：
h1{font-size:30px;color:red;text-align:center;}
h2{font-size:30px;color:red;text-align:center;}
新建样式表blue.css，具体代码如下：
p{font-size:16px;color:blue;text-align:center;}
保存后，在谷歌浏览器中预览，效果如图3-6所示。
图3-6 《关山月》
注意：
1、导入式是针对外部样式表文件的。对HTML头部文档应用style标记，并在<style>标记内的开头处使用@import语句，即可导入外部样式表文件。需要注意的是，style标记内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上面。
2、所有的HTML标记名都可以作为标记选择器，例如body、h1、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都有效。
【案例3-4】通配符选择器
一、案例描述
1、考核知识点
通配符选择器
2、练习目标
Ø 掌握通配符选择器的应用。
Ø 灵活掌握CSS内嵌式的引用方法。
3、需求分析
使用CSS对网页进行修饰时，如果需要设置的样式对所有的HTML标记都生效，就需要使用通配符选择器。本案例通过使用通配符选择器来控制页面中的所有元素，达到页面中的所有元素都显示同一种样式的效果。
4、案例分析
1) 效果如图3-7所示。
图3-7 通配符选择器应用效果
2) 具体实现步骤如下：
a) 使用内嵌式引入CSS样式表。
b) 使用通配符选择器为页面中的所有标记设置为18px、红色、不加粗、不倾斜的正常字体。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>通配符选择器</title>
6 </head>
7 <body>
8 <h1>我是标题H1标记</h1>
9 <h2>我是标题H2标记</h2>
10 <div>我是div标记</div>
11 <p>我是段落P标记</p>
12 <em>我是斜体标记</em>
13 <strong>我是加粗标记</strong>
14 <span>我是span标记</span>
15 <b>我是b标记</b>
16 </body>
17 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <styletype="text/css">
2 *{color:red; font-size:18px;font-style:normal; font-weight:normal;}
3 </style>
保存后，在谷歌浏览器中预览，效果如图3-8所示。
图3-8 通配符选择器的应用
从图3-8可以看出，页面中的所有标记都显示为18px、红色、不加粗、不倾斜的正常字体。
注意：
1、实际网页开发中不建议使用通配符选择器，因为他设置的样式对所有的HTML标记都生效，而不管标记是否需要该样式，这样反而降低了代码的执行速度。
【案例3-5】设置字体样式
一、案例描述
1、考核知识点
字体样式属性
2、练习目标
Ø 掌握常见的CSS字体样式属性。
Ø 熟练运用CSS字体样式属性控制字体效果。
3、需求分析
浏览网页时会发现网页中有各式各样的字体，颜色也五颜六色。为了方便地控制网页中的字体，CSS提供了一系列的字体样式属性，主要包括：font-size、font-family、font-weight、font-style、@font-face、word-wrap属性。本案例通过使用以上属性来控制字体的样式，并对比不同的显示效果。
4、案例分析
1) 效果如图3-9所示。
图3-9 CSS字体样式属性效果
2) 具体实现步骤如下：
a) 使用<p>标记搭建页面结构，并为每个<p>标记定义不同的类。
b) 为第一个<p>标记设置“微软雅黑”字体、18像素、红色、倾斜、加粗的的段落效果；
c) 为第二个p>标记设置为服务器字体、24像素、蓝色的段落效果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>CSS字体样式属性</title>
6 </head>
7 <body>
8 <pclass="part1">我是设置为微软雅黑、18像素、倾斜、加粗的红色字体</p>
9 <p>我是使用@font-face属性定义的服务器字体，显示为24像素的蓝色字体</p>
10 </body>
11 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <styletype="text/css">
2 @font-face{
3 font-family:ziti; /*服务器字体名称*/
4 src:url(font/FZJZJW.TTF); /*服务器字体名称*/
5 }
6 .part1{
7 font-family:"微软雅黑";
8 font-size:18px;
9 color:red;
10 font-style:italic;
11 font-weight:bold;
12 }
13 .part2{
14 font-family:ziti; /*设置字体样式*/
15 font-size:24px;
16 color:blue;
17 }
18 </style>
保存后，在谷歌浏览器中预览，效果如图3-10所示。
图3-10 CSS字体样式属性效果
