前端基础-CSS注释
三、css注释
语法：/*注释的内容*/
四、css基本选择器
1.标签选择器
通过标签来选择元素，标签{css样式}
示意图 |
|---|
在这里插入图片描述
2.id选择器
通过id属性来选择元素，#id名{css样式}
示意图 |
|---|
在这里插入图片描述
注意：id选择要保证页面中的唯一性，这是语义
3.class类选择器
通过class属性选择元素，.类名{css样式}
示意图 |
|---|
在这里插入图片描述
Google小案例：
案例图示 |
|---|
在这里插入图片描述
代码
<!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样式}
示意图 |
|---|
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录