CSS：基础选择器

一、CSS语法规则

二、CSS引入方式

三、基础选择器

3.1 标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,频面中煤一类标签指定
统一的CSS 样式。
语法

标签名{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
}

1. 作用
   标签选择器可以把某一类标签全部选择出来,比如所有的< div >标签和所有的< span >标签。
2. 优点
   能快速为页面中同类型的标签统一设置样式。
3. 缺点
   不能设计差异化样式,只能选择全部的当前标签。

3.2 类选择器

如果想要差异化选择不同的标签，单独选-个或者某几个标签,可以使用类选择器
语法

.类名{
	属性1:属性值1;

例如,将所有拥有red类的HTML元素均为红色。

.red{
	color: red;
}

语法
结构需要用class属性来调用class类的意思

<div class= 'red' >变红色 </div>

• 注意
  ①类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
  ②可以理解为给这个标签起了一个名字来表示。
  ③长名称或词组可以使用中横线来为选择器命名。
  ④不要使用纯数字、中文等命名 , 尽量使用英文字母来表示。

类选择器-多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的。
简单理解就是一个标签有多个名字.

多类名使用方式

.red{
	color: red;
}
.font20{
	font-size: 20px;
}

<div class="red font20"> 刘德华</div>

1. 在标签class属性中写多个类名
2. 多个类名中间必须用空格分开

3.3 id选择器

• 结构：#id属性值 { css属性名：属性值； }
• 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
• 注意点：

1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
   
   

3.4 补充：类与id的区别

• class类名与id属性值的区别
  • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
  • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
• 类选择器与id选择器的区别
  • 类选择器以 . 开头
  • id选择器以 # 开头
• 实际开发的情况
  • 类选择器用的最多
  • id一般配合js使用，除非特殊情况，否则不要使用id设置样式
  • 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

3.5 通配符选择器

• 结构：* { css属性名：属性值； }
• 作用：找到页面中所有的标签，设置样式
• 注意点：1. 开发中使用极少，只会在极特殊情况下才会用到