1️⃣前言
- 今天的笔记是：
- CSS概述、基础选择器（包括标签选择器、类选择器、id选择器和通配符选择器）
2️⃣概述
🌱什么是CSS？
- CSS（
Cascading Style Sheets）指的是层叠样式表，是一种描述HTML文档样式的语言。也就是说CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
特点如下：
🌳CSS语法规范
CSS样式规则由两部分组成：
- 选择器
- 一条或多条声明
举个例子：
- 选择器就是选择某个标签，后跟一对花括号，里面设置着具体样式；
- 每一条声明都是由属性和属性值构成（值键对形式），属性和属性值之间用
:分开； - 属性是对指定对象设置的样式属性（例如字体颜色或大小等）；多个样式之间用分号
;隔开；
选择器可以分为基础选择器和复合选择器，这篇笔记先记录基础选择器的使用。
🌻CSS引入方式
CSS的三种引入方式：
- 行内CSS
行内样式表又称内联样式表。我们知道，HTML标签有一个style属性。行内CSS就是在HTML元素标签内部的style属性中设置样式，这种方式适用于设置简单样式。
举个例子：
也就是说，行内CSS可以为单个元素设置唯一的样式，方法是将style属性添加到元素属性中（style属性可以包含任何CSS属性）
- 内部CSS
内部样式表又称嵌入式样式，就是将CSS样式单独拿出来放在<style>标签写入html页面内部。
<style>标签理论上可以放在HTML文档的任何位置，但是通常我们会将其放在文档的<head>标签中。内部样式表使得整个文档的结构更加清晰，方便我们控制当前页面中的元素样式。
- 外部CSS
通常在开发中，样式较多，此时一般使用外部样式表。做法是将样式单独写到CSS文件中，再将CSS文件导入到HTML文档中。
步骤为：
- 新建一个后缀名为：
.css的样式文件，将需要的样式代码写入到该文件中； - 在HTML文档中，使用
<link>标签引入该样式文件。
举个例子，当我们需要将style.css文件导入HTML文档时，link标签使用方法如下：
浏览器会从style.css文件中读到样式声明，并以此来格式化文档。需要注意的是，CSS文件中不能包含任何HTML元素。样式表的后缀扩展名为.css。使用外部样式表，使得我们让多个页面具有公共的样式更加的方便，只需引入样式文件即可。
🎐注释
在CSS中，注释以/*开始，以*/结束
使用注释可以很好的记录一些想法以及备注，浏览器会忽略注释。
3️⃣基础选择器
基础选择器就是由单个选择器组成，一般包括标签选择器、类选择器、id选择器和通配符选择器。
💡标签选择器
标签选择器又称元素选择器，用于指定HTML里的某个标签名称作为选择器，为这些选择的标签指定统一的CSS样式。
- 作用
标签选择器可以把某一类标签全部选出来。比如将HTML中全部的<p>标签选中。
- 优点
快速为页面中同一类型的标签统一设置样式。
- 缺点
无法差异化设置样式。
- 举例
比如我们将HTML文档中所有段落的文本都设置为蓝色并且居中显示，那么如下所示：
💡类选择器
由于标签选择器能将所有选中的标签都设置统一的样式，导致无法差异化修饰元素。此时，类选择器可以解决这个问题。
类选择器可以单独选择某个标签或者若干个标签。语法如下：
因此，类选择器的用法如下：
- 在HTML标签中设置
class属性，指定一个类名； - 在
<style>标签中使用类选择器设置特定样式； - 类选择器使用
.，后跟类名（类名就是指定标签中的class属性的值，由我们自己定义） .类名后面紧跟花括号，并在花括号里面编写指定的样式；
当然，标签的class属性可以有多个类名，类名之间用空格隔开。这个标签就可以具有这些类名的样式。多类名的好处在于可以将一些样式放到类里面，每个标签都可以调用这个公共的类，也能调用自己独有的类，这同样也节省了CSS代码，统一修改样式也更加方便。
💡id选择器
由于HTML元素的id属性是唯一的，因此id选择器可以为某个标签指定特定的样式。也就是说，id选择器用于选择一个唯一的元素，用id属性名来设置id选择器，CSS中id选择器以“#”来定义，后跟该元素的id。
语法如下:
我们知道id属性在每个HTML的标签中只出现一次，因此id选择器与类选择器的区别在于使用次数上，id选择器好比身份证号码，无法重复使用，所以id选择器适用于页面上具有唯一性的元素上。
举例：
效果如下：
💡通配符选择器
通配符选择器又称通用选择器，在CSS中，通配选择器使用星号*来定义通配符选择器，其表示为当前页面中所有标签设置样式。
语法如下：
💡小结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 用于选出所有指定的标签 | 无法差异性选择 | 较多 | p { color: red; } |
| 类选择器 | 用于选出指定类名的标签 | 可以根据需求选择 | 很多 | .red { color: red; } |
| id选择器 | 一次只能选择一个标签 | id属性在每个HTML标签中只出现一次 | 一般和js搭配 | #nav { color: red; } |
| 通配符选择器 | 为所有的标签设置样式 | 选中全部，有些可能不需要 | 在特殊情况下使用 | * { color: red; } |
4️⃣写在最后
好了，本篇笔记就到写这，欢迎大家到评论区一起讨论！
