CSS基础选择器

  制作Google Logo效果

一、案例描述

1. 考核知识点

CSS基础选择器

1. 练习目标

• 灵活使用类选择器控制元素。
• 熟练掌握CSS内嵌式的引用方法。

1. 需求分析

要想将CSS样式应用于特定的HTML元素，除了要掌握引入CSS样式表的方法，还需要掌握CSS基础选择器的使用。本案例通过使用类选择器来控制元素，并运用CSS内嵌式的方法来实现制作Google Logo的效果。

1. 案例分析

1. 效果如图3-3所示。

1. Google Logo效果

1. 具体实现步骤如下：

1. 使用内嵌式引入CSS样式表。
2. 分别为页面元素定义不同的类。
3. 通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体；

第二个字母“o”设置为红色、加粗、60px字体；

第三个字母“o”设置为黄色、加粗、60px字体；

第四个字母“g”设置为蓝色、加粗、60px字体；

 剩余字母“le”按默认样式输出。

	
	
	


	G
	o
	o
	gle