基础选择器之类选择器
如果想要差异化选择不同的标签,单独选择一个或几个标签,可以使用类标签。语法:.类名{属性1:属性值1;...}如:将所有拥有red类的HTML元素均为红色.red{color: red;}语法:结构需要用class属性来调用class的意思<div class = "red" >变红色< /div>类选择器在html中以class属性展示,在css中,类选择器以一个点“.”
·
如果想要差异化选择不同的标签,单独选择一个或几个标签,可以使用类标签。
语法:
.类名{
属性1:属性值1;
...
}
如:将所有拥有red类的HTML元素均为红色
.red{
color: red;
}
语法:
结构需要用class属性来调用class的意思
<div class = "red" >变红色< /div>
类选择器在html中以class属性展示,在css中,类选择器以一个点“.”号显示。
注意:
- 类选择器使用“.”(英文括号)进行识别,后面紧跟着类名(自定义,开发自己命名)。
- 可以理解为给这个标签起了一个名字,来表示
- 长名称或者词组可以使用横杠来为选择器命名
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
- 命名要有意义,尽量使别人一眼知道这个类名对的目的
- 命名规范:见web前端开发规范手册.doc
练习1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之类选择器</title>
<style>
/* 类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用 */
.actress {
color: pink;
}
.actor {
color: blue;
}
/* 词组可以用中横线来命名 */
.Sketch-actor {
color: aqua;
}
</style>
</head>
<body>
<ul>
<li class="actor">肖战</li>
<li class="actor">王一博</li>
<li class="actress">杨紫</li>
<li class="actress">杨幂</li>
<li class="actress">迪丽热巴</li>
<li class="Sketch-actor">宋小宝</li>
<li class="Sketch-actor">小沈阳</li>
</ul>
</body>
</html>
类选择器多场景练习2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名的使用场景</title>
<style>
.background-color-1 {
background-color: red;
}
.background-color-2 {
background-color: greenyellow;
}
.font {
font-size: 40px;
}
.width-height {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<!-- 某个标签可以添加多个类 -->
<div class="background-color-1 font width-height">甄姬</div>
<div class="background-color-2 width-height">庄周</div>
<div class=" font width-height" >安其拉</div>
<div class="background-color-1 font width-height">小乔</div>
</body>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)