CSS基础选择器

最新推荐文章于 2022-10-21 13:43:26 发布

Begin to change

最新推荐文章于 2022-10-21 13:43:26 发布

阅读量2.1k

点赞数 2

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_41404557/article/details/83477969

版权

网页设计专栏收录该内容

13 篇文章 9 订阅

订阅专栏

制作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”按默认样式输出。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>goodle</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="g">G</span>
	<span class="o">o</span>
	<span class="oo">o</span>
	<span class="g">g</span>le
</body>
</html>