1. CSS 介绍
CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式。
CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和 结构分离。
CSS 是在 HTML 文档结构的基础上进行样式定义的。
- HTML 提供了页面的内容和结构（标题、段落、表单、图片等）。
- CSS 则用来控制这些内容"如何显示"（颜色、大小、位置、间距、动画等）。
例如，在前一个文章中，通过 HTML标签的学习，我们做出了一个用户登录页面的框架，这个页面可以通过 CSS 进行美化，即 CSS 可以理解为化妆术，对页面展示的内容进行 "化妆"。
2. 语法规范
选择器 + {⼀条/N条声明}
- 选择器决定针对谁修改 (找谁)
- 声明决定修改啥. (干啥)
- 声明的属性是键值对. 使用 ; 区分键值对，使用 : 区分键和值
注意 ：CSS 要写到 style 标签中(后⾯还会介绍其他写法) ，style 标签可以放到页面任意位置，⼀般放到 head 标签内。
【CSS 使⽤ /* */ 作为注释. (使用 ctrl + / 快速切换)】
示例：选择 div 标签作为选择器，声明修改 div 标签的内容的{字体颜色，字体大小等}
通过浏览器运行：
3. css 引入方式
3.1 行内样式
在标签内使用 style 属性，属性值是 css 属性键值对。
示例：
通过上述的例子，也说明 style 遵循就近原则，哪个较近，就用哪个颜色。
行内样式，只适合于写简单样式，只针对某个标签生效；缺点是不能写太复杂的样式。
3.2 内部样式
定义 <style> 标签，在标签内部定义 css 样式。其实我们前面讲语法规范时所用到的例子就是一个内部样式。
语法：
css
<style>
选择器 {
声明属性: 值;
............
}
</style>不过内部样式不常使用，因为会出现大量的代码冗余，内部样式只对当前一个 HTML 页面有效，如果有10个页面都是相同的样式，那么采用内部样式就必须在每一个页面的 <style> 里把同样的 CSS 代码重新写一遍，不方便后期的维护（假设你要把全局按钮颜色从蓝色改成红色，你需要分别打开 10 个页面，手动修改 10 次）。
3.3 外部样式
定义**<link>** 标签（<link> 标签通常放在 <head> 中），通过href 属性引入外部 css 文件。只需改一个 .css 文件，所有页面自动生效，html和css实现了完全的分离。
将样式定义在 style.css 文件中：
然后通过 link 标签的 href 属性引入 style.css 中的样式：
其中：
- rel 属性是 relationship（关系）的缩写。它告诉浏览器：当前 HTML 文档与被链接的资源之间是什么关系。
- 例如以下的例子， stylesheet 表示链接到的 style.css 文件与当前页面的关系是"样式表"。
通过浏览器运行：
4. 规范
1）样式大小写
虽然 CSS 不区分大小写，我们开发时统⼀使用小写字母。
2）空格规范
- 冒号后面带空格
- 选择器和 { 之间也有⼀个空格。
5.CSS 选择器
CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性
5.1 标签选择器
标签选择器（也叫类型选择器）的作用是：选中 HTML 页面中所有特定类型的标签，并为它们统一设置 CSS 样式。
语法：
直接写标签名，后面跟上花括号内的样式规则：
如以下的代码，将所有 div 标签中的文字变成 矢车菊蓝：
通过浏览器运行：
发现 div3 并没有变成设置的颜色，这是因为浏览器默认给 <a> 标签设置了独立的颜色样式 ，并且它不会自动继承父元素的 color，所以 div3 的文字颜色不变。
想要让 a 标签变色，可以直接给 a 标签加样式：
或者可以这样写：
5.2 id 选择器
id 选择器的作用是：选中 HTML 页面中具有指定 id 属性的唯一元素/标签，并为其应用 CSS 样式。
语法：
在 CSS 中，id 选择器以**#**开头，后面紧跟 id 值：
示例：
5.3 class 选择器
class 选择器的作用是：选中 HTML 页面中所有具有指定 class 属性的元素/标签，并统一应用 CSS 样式。
语法：
在 CSS 中，class 选择器以**.**开头，后面紧跟类名：
示例：
5.4 通配符选择器
通配符选择器的作用是：选中 HTML 页面中的所有元素（包括 <html>、<body>、div、p、span 等所有标签，甚至伪元素等），并为它们统一应用 CSS 样式。
语法：
示例：
5.5 复合选择器
复合选择器（也称为组合选择器）的作用是：通过多个简单选择器组合在一起，更精确、更具体地选中页面中的目标元素。它可以减少 class 或 id 的滥用，让 CSS 更具结构化和可维护性。
复合选择器将多个简单选择器组合在一起，利用元素的特征和 DOM 关系（交集、后代、子元素、兄弟等）来精确命中目标元素，从而实现更精准、更语义化的样式控制。
示例：
示例2：无序列表标签 <ul> 和 有序列表标签 <ol>
如果只想要 a 标签改变样式，可以使用 复合选择器来设置：
6. 常用 CSS样式
例如以下的 html：
html
<div class="test">我是文本</div>6.1 color
设置字体颜色
除了上述中 通过 英文单词 表达颜色的方式，还可以通过
**rgb()**颜色模式表达：
- RGB 代表 红（Red）、绿（Green）、蓝（Blue） 三个通道，每个通道取值范围 0~255（或 0%~100%），通过混合产生各种颜色。
例如 蓝色，它的三原色比例如下图：红色0，绿色0，蓝色是255，也就是纯蓝色
可以通过这个调色盘，选出我们想要的颜色：
还可以使用 hex十六进制 的方式表示：
甚至可以设置颜色的透明度：
6.2 font-size
设置字体大小
6.3 border
设置边框
边框是⼀个复合属性（有上-top 下- bottom 左-left 右-right）, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断。
如以上的 border 属性，对应的设置分别是设置 边框粗细，边框样式，边框颜色。
可以拆开来设置：
- border-width：设置边框粗细
- border-style：设置边框样式
- dotted：点状
- solid：实线
- double：双线
- dashed：虚线
- border-color：设置边框颜色，等同于 color
border: 2px solid pink; 就等同于以下代码:
我们说过，边框是分上下左右的，我们可以分别对它的四个边框进行样式的设置，
即border-width: 5px; 就等于以下的代码：
我们也可以直接这样写border-width: 2px 3px 5px 3px ，因为边框默认情况下，是按照顺时针方向分别设置边框的，即 上右下左。
同样的，style 和 color 也可以通过上述的两种方式去分别设置样式：
6.4 width/height
设置宽度和高度
注意：只有块级元素可以设置宽高。因为块级元素独占一行，就可以设置宽高，而行内元素不独占一行，不能设置宽高。
对 行内标签设置同样的样式：
使用 display 属性可以修改元素的显示模式
- display: block 改成块级元素 [常用]
- display: inline 改成行内元素 [很少用]
将行内标签改为块级标签：
6.5 padding/margin
padding: 内边距, 设置内容和边框之间的距离。
内容默认是顶着边框来放置的，用 padding 来控制这个距离
margin: 外边距, 设置标签和标签之间的距离。
padding 和 margin 是 复合样式, 可以对四个方向分开设置
- padding/margin-top
- padding/margin-bottom
- padding/margin-left
- padding/margin-right
示例：
想要让标签与标签之间不要挨在一起，可以使用 margin 设置外边距，让它们的距离分开：
但是通过上述的设置后，块标签之间错位了，由于边距标签是复合样式，通过上述的 margin 设置后，边框的四个方向全都生效了，由于这里只是想要让 标签和标签之间不要挨在一起，因此单独设置 下bottom 边框即可：
在 div1 盒子中，在嵌套一个 div3 ：
此时给 div3 设置它的 宽度和高度，以及边框：
此时给这个 div3 设置一下它的外边距，那么相对于 div1来说，就是设置 div1 的内边距padding：
或者，直接在 div3 内设置：
我们可以通过浏览器去调试一下，看看以上边框以及边距的设置效果：按 F12
我们设置的内容全部在这里显示了。