<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		span{font-size:180px;}
		.blue{color:blue;}
		.red{color:red;}
		.orange{color:yellow;}
		.green{color:green;}
	</style>
</head>
<body>

<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>

</body>
</html>

多学一招：一个元素可以有多个类名

小案例：

小案例效果图

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.fz-30{font-size:30px;}
		.red{color:red;}
		.green{color:green}
	</style>
</head>
<body>

<div class="fz-30 red">这是一个盒子</div>
<span class="fz-30">我是文本</span>
<p class="fz-30 green">段落部分</p>
<a class="fz-30" href="">我是超链接</a>

</body>
</html>

4.复合选择器

a) 标签选择器和类选择器一起使用

需求：给下面的类名叫box的p标签设置字体颜色为绿色

<p class="box">
    我是一个段落
</p>
<div class="box">
    我是一个盒子
</div>
<p>
    俺也是一个段落！！！
</p>

效果图

b) 用多个类名选择一个元素

示意图

c) 给多个元素设置同一种样式，每个元素中间用 ， 隔开:元素1，元素2{css样式}

示意图

前端基础-CSS详解

前端基础-CSS注释

三、css注释

四、css基本选择器

1.标签选择器

2.id选择器

3.class类选择器

4.复合选择器

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐