1.2 CSS标签选择器，类选择器
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代码