网页设计基础 使用CSS技术美化网页 第3章 使用CSS技术美化网页_补充案例.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 16 第3章 补充案例 【案例3-1】《七步诗》 一、案例描述 考核知识点 CSS样式规则 练习目标 熟练掌握CSS样式规则。 灵活运用CSS行内式的引用方法。 需求分析 使用CSS对网页进行修饰时，首先需要了解CSS样式规则及引入CSS样式表的方法，本案例按照CSS样式规则的格式并使用CSS行内式的方法输出一首《七步诗》。 案例分析 效果如图3-1所示。 《七步诗》效果 具体实现步骤如下： 使用CSS行内式为页面元素引入样式。 按照CSS样式规则为标题设置成微软雅黑、蓝色、26px字体。 按照CSS样式规则为段落设置成微软雅黑、红色、28px字体。 二、案例实现 新建HMTL文件，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title七步诗/title /head body h3 style=font-family:微软雅黑;color:#00F;font-size:26px;七步诗/h3 font style=color:red;font-family:微软雅黑;font-size:28px; 煮豆燃豆萁，br /豆在釜中泣。br / 本是同根生，br /相煎何太急。 /font /body /html 保存后，在火狐浏览器中预览，效果如图3-2所示。 《七步诗》效果 注意： 1、CSS样式中多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。但是，为了便于增加新样式最好保留。 【案例3-2】 制作Google Logo效果 一、案例描述 考核知识点 CSS基础选择器 练习目标 灵活使用类选择器控制元素。 熟练掌握CSS内嵌式的引用方法。 需求分析 要想将CSS样式应用于特定的HTML元素，除了要掌握引入CSS样式表的方法，还需要掌握CSS基础选择器的使用。本案例通过使用类选择器来控制元素，并运用CSS内嵌式的方法来实现制作Google Logo的效果。 案例分析 效果如图3-3所示。 Google Logo效果 具体实现步骤如下： 使用内嵌式引入CSS样式表。 分别为页面元素定义不同的类。 通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体； 第二个字母“o”设置为红色、加粗、60px字体； 第三个字母“o”设置为黄色、加粗、60px字体； 第四个字母“g”设置为蓝色、加粗、60px字体； 剩余字母“le”按默认样式输出。 二、案例实现 新建HMTL文件，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titlegoogle/title style type=text/css .g{color:#176CEE; font-size:60px; font-weight:bold;} .o{color:#D4412D;font-size:60px; font-weight:bold;} .oo{color:#FFB404; font-size:60px; font-weight:bold;} /style /head body span class=gG/span span class=oo/span span class=ooo/span span class=gg/spanle /body /html 保存后，在火狐浏览器中预览，效果如图3-4所示。 Google Logo效果 注意： 1、需要注意的是，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。 【案例3-3】《关山月》 一、案例描述 考核知识点 导入式CSS样式 练习目标 熟练运用标记选择器控制元素。 掌握CSS导入式的引用方法。 需求分析 通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础