二、基础选择器

选择器的作用：选择页面中对应的标签（找他），方便后续设置样式（改他）

一）元素选择器（标签选择器）

作用：选中页面中所有与该标记名相匹配的元素，并运用统一样式

格式：元素名{声明块（属性）}

元素名     声明块
p    { color: blue;}
       属性名  属性值
/*代表：选中页面中所有p元素，应用样式
（页面中所有p标签的文字内容 都变成蓝色） */      

标签名{css属性名：属性值；}

注意点：

1.标签选择器选择的是一类标签，而不是单独的某一个；

2.标签选择器无论嵌套关系有多深，都能匹配并运用所声明的属性

二）类选择器

作用：选择页面上所有与该类名相匹配的元素，并运用统一样式

格式：.类名{声明块}

.one{color:yellow;}
/*首先得在html中用class属性取类名*/

1.注意点：

*所有标签上都有class属性，class属性的属性值被称为类名；

*类名可以由数字、字母、下划线、中划线组成，但不能以数字和中划线开头；

*一个标签可以有多个类名，类名之间由空格隔开；

*类名可重复，一个类选择器可以同时选中多个标签。

2.取类名的注意事项：

• 英文的小圆点开始，小圆点后面一定是英文字母，
• 可以添加符号“-”、“_”
• 大小写很敏感,如：Sp、sp 是两个不同的类名
• 类名尽量见名知意,避免出现aaa、bbb之类的，可以用英文、拼音等
• 不能是数字开头或是纯数字

3.主流的命名法：

驼峰命名法 footerTop； 蛇形命名法 footer_top; 匈牙利命名法 footer-top.

三）id选择器：

1.作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

2.格式：#id属性值{声明块} 例：

在html中：

<p id="snak">1008611</p>

在css中：

#snak {font-size: 16px;color: rgb(231, 39, 39)}

3.注意点：

1.所有标签都有id属性；

2.id属性值类似于身份证号码，在一个页面中是唯一的不可重复的

3.一个标签上只能写一个id属性；

4.一个id选择器只能选中一个标签。

四）类与id的区别：

1.class类名与id性值区别

*class类名相当于姓名,可以重复,一个标可以同时有多个类名； *id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值

2.类选择器与id选择器的区别

*类选择器以.开头

*id选择器以#开头

3.实际开发的情况

*类选择器用的最多

*id一般配合js使用，除非特殊情况，否则不要使用id选择器

五）通配符选择器

通配符*

会通配页面上所有的元素

例：

*{padding: 0px;margin: 0px;} 

就能将页面中所有h1、p等元素自带的格式如：padding、margin等统一设置为0px（取消掉）。

结构：*{声明块}

作用：找到页面中所有的标签设置样式

注意点：

1.开发中极少使用，只会在特殊情况下才会用到

2.一般用于除去页面中所有的padding和margin值

## 六）css重置（清除默认样式数据）

将重置文件放在自己的css的下面，让自己的css格式最优先考虑。

在html中关联就可以了（一个html文件可以关联多个css文件）

   <link rel="stylesheet" href="reset.css"> 

（重置文件保存在课堂练习文件夹中-reset）