第3章 CSS3入门_补充案例.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 20 PAGE 1 第三章 补充案例 【案例3-1】 《春晓》 一、案例描述 考核知识点 CSS样式规则、引入CSS样式表 练习目标 熟练掌握CSS样式规则。 灵活运用CSS行内式的引用方法。 需求分析 使用CSS对网页进行修饰时，首先需要了解CSS样式规则及引入CSS样式表的方法，本案例按照CSS样式规则的格式并使用CSS行内式的方法输出一首诗《春晓》。 案例分析 效果如图3-1所示。 《春晓》效果 具体实现步骤如下： 使用CSS行内式为页面元素引入样式。 按照CSS样式规则为标题设置成微软雅黑、蓝色、26px字体。 按照CSS样式规则为段落设置成微软雅黑、红色、28px字体。 二、案例实现 1、制作页面结构 新建HTML页面，具体代码如下： !doctype html html head meta charset=utf-8 title春晓/title /head body h3春晓/h3 p 春眠不觉晓，br /处处闻啼鸟。br / 夜来风雨声，br /花落知多少。 /p /body /html 2、定义CSS样式 使用行内式CSS样式表为页面添加样式，将第8~9行代码更改如下： h3 style=font-family:微软雅黑;color:#00F;font-size:28px;春晓/h3 p style=color:red;font-family:微软雅黑;font-size:26px; 保存后，在谷歌浏览器中预览，效果如图3-2所示。 《春晓》 注意： 1、CSS样式中多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。但是，为了便于增加新样式最好保留。 【案例3-2】 制作Google Logo效果 一、案例描述 考核知识点 类选择器 练习目标 灵活使用类选择器控制元素。 熟练掌握CSS内嵌式的引用方法。 需求分析 要想将CSS样式应用于特定的HTML元素，除了要掌握引入CSS样式表的方法，还需要掌握CSS基础选择器的使用。本案例通过使用类选择器来控制元素，并运用CSS内嵌式的方法来实现制作Google Logo的效果。 案例分析 效果如图3-3所示。 Google Logo效果 具体实现步骤如下： 使用内嵌式引入CSS样式表。 分别为页面元素定义不同的类。 通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体； 第二个字母“o”设置为红色、加粗、60px字体； 第三个字母“o”设置为黄色、加粗、60px字体； 第四个字母“g”设置为蓝色、加粗、60px字体； 剩余字母“le”按默认样式输出。 二、案例实现 1、制作页面结构 新建HMTL文件，具体代码如下： !doctype html html head meta charset=utf-8 titlegoogle/title /head body strong class=gG/strong strong class=oo/strong strong class=ooo/strong strong class=gg/strongle /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css .g{color:#176CEE; font-size:60px; } .o{color:#D4412D;font-size:60px; } .oo{color:#FFB404; font-size:60px; } /style 保存后，在谷歌浏览器中预览，效果如图3-4所示。 Google Logo 注意： 1、需要注意的是，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。 【案例3-3】《关山月》 一、案例描述 考核知识点 引入CSS样式表、标记选择器 练习目标 熟练运用标记选择器控制元素。 掌握CSS导入式的引用方法。 需求分析 通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础选择器—标记选择器。本案例通过使用标记选择器来控制元素，并运用CSS导入式的方法来输出一首诗《关山月》。 案例分析 效果如图3-5所示。 《关山月》效果 具体实现步骤如下： 新建两个外部样式表red.css、blue.css。 使用导入式引入CSS样式表。 在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。 在外部样式表blue.cs