网页开发与制作 CSS3入门 拓展案例-Google Logo.docVIP

【拓展案例3-1】 制作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-2】《赋得古原草送别》 一、案例描述 考核知识点 引入CSS样式表、标记选择器 练习目标 熟练运用标记选择器控制元素。 掌握CSS导入式的引用方法。 需求分析 通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础选择器—标记选择器。本案例通过使用标记选择器来控制元素，并运用CSS导入式的方法来输出一首诗《赋得古原草送别》。 案例分析 效果如图3-5所示。 《赋得古原草送别》效果 具体实现步骤如下： 新建两个外部样式表red.css、blue.css。 使用导入式引入CSS样式表。 在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。 在外部样式表blue.css中，通过标记选择器设置段落为16px字体、蓝色、居中效果。 二、案例实现 1、制作页面结构 新建HTML页面，具体代码如下： !doctype html html head meta charset=utf-8 title关山月/title style type=text/css @import url(red.css); @import url(blue.css); /style /head body h1赋得古原草送别/h1 h2白居易/h2 p离离原上草，一岁一枯荣。/p p野火烧不尽，春风吹又生。/p p远芳侵古道，晴翠接荒城。/p p远芳侵古道，晴翠接荒城。/p /body /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所示。 《赋得古原草送别》 注意： 1、导入式是针对外部样式表文件的。对HTML头部文档应用style标记，并在style标记内的开头处使用@import语句，即可导入外部样式表文件。 需要注意的是，style标记内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上面。 2、所有的HTML标记名都可以作为标记选择器，例如body、h