CSS选择器： 根据不同的需求选出不同的标签，进行美化装饰
1. 标签选择器
标签选择器(元素选择器)：用 HTML标签名作为选择器，按标签名称进行分类，为页面某一类标签指定统一的CSS样式
作用: 可以把某一类标签全部选中，进行css美化
优点：能够快速的为页面中 同类型的 统一设置CSS样式
缺点：不能差异化美化标签
语法
标签名 {
属性1: 属性值1
属性2: 属性值2
属性3: 属性值3
...
}
举个栗子
<style>
/* 给所有p标签内容设置黄颜色，给所有div标签内容设置蓝颜色 */
p {
color: yellow ;
}
div {
color: blue;
}
</style>
类选择器class(SSS)
类选择器 ： 需要以class属性来定义它的CSS样式
口诀： 类选择器口诀： 样式点定义，结构类调用，一个或多个，开发最常用
注：
- 类名可以由数字，字母，下划线中划线组成
- 一个标签可以有多个类名，类名之间以空格隔开
- 以个类选择器可以选择多个标签
- 类名可以重复
语法
.类名 {
属性1: 属性值1
属性2: 属性值2
...
}
举个栗子
<!-- 给所有class名叫rd的标签，设置其内容为红色....... -->
<style>
.rd {
color: red;
}
.yw {
color: yellow;
}
.be {
color:blue ;
}
.pk {
color: pink;
}
</style>
</head>
<body>
<div class="rd">我是div标签,我的calss是红色</div>
<div class="yw">我是div标签,我的class是黄色</div>
<div class="be">我是div标签,我的class是蓝色</div>
<div class="pk">我是div标签,我的class是粉色</div>
<p class="be" >我虽然是p标签,但我的class也是蓝色</p>
</body>
多类名选择器(SSS)
给一个标签设置多个类名，从而这些类名都能选中该标签
注：
1.也是为了简写css代码，相同属性用一个类名封装调用，修饰一群鸟，可以造出他们共有的属性，再根据不同的鸟调用不同的类选择器
语法
- 在标签class属性内写多个类名
- 多个类名中间用空格隔开
<div class="red font20">亚瑟</div>
举个栗子
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.font_20 {
font-size: 20px;
}
.font_40 {
font-size: 40px;
}
</style>
</head>
<body>
<!-- 定义多个class类名，将red，font_40修饰第一个div内容 -->
<!-- 定义多个class类名，将blue，font_20修饰第二个div内容 -->
<div class=" red font_40 " > 周星驰 </div>
<div class=" blue font_40 " > 发哥 </div>
</body>
举个栗子（改前）
<!--以下代码 只使用类选择器冗余，重复属性的应封装调用，节省资源 -->
<style>
.red {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.blue {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: blue;
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class="blue">蓝色</div>
<div class="red">红色</div>
</body>
举个栗子（改后）
<!--以下代码 只使用类选择器冗余，重复属性的应封装调用，节省资源 -->
<style>
.box {
width: 100px;
height: 100px;
}
.red {
/* 背景颜色 */
background-color: red;
}
.blue {
/* 背景颜色 */
background-color: blue;
}
</style>
</head>
<body>
<div class="red" box>红色</div>
<div class="blue" box>蓝色</div>
<div class="red" box>红色</div>
</body>
注意
- 各个类名之间用空格隔开
- 多类名选择器，比较节省CSS代码
5697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
