1. CSS
1.1 概念
CSS（Cascading Style Sheet），层叠样式表，用于控制页面的样式
CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离（类似于对页面的展示进行 “化妆”）
1.2 基本语法规范
选择器 + {一条 / N 条声明}
- 选择器决定针对谁修改（找谁）
- 声明决定修改啥（干啥）
- 声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值
tip：
- CSS 要写到 style 标签中
- style 标签可以放到页面的任意位置，一般放到 head 标签内
- CSS 使用 /* */ 作为注释（Ctrl + /）
1.3 引入方式
CSS 有 3 中引入方式，语法如下：
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用 style 属性，属性值是 CSS 属性键值对 | <div style="color:green">绿色</div> |
| 内部样式 | 定义 <style> 标签，在标签内部定义 CSS 样式 | <style>h1{...}</style> |
| 外部样式 | 定义<style>标签，通过 href 属性引入外部 CSS 文件 | <link rel="stylesheet" href="[CSS 文件路径]"> |
对比：
- 1. 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用
- 2. 行内样式，只适合于写简单样式，只针对某个标签生效
- 3. 外部样式，html 和 css 实现了完全分离，企业开发常用方式
1.4 规范
样式大小写：虽然 CSS 不区分大小写，但是推荐开发时统一使用小写字母
空格规范：1. 冒号后面带空格；2. 选择器和 { 之间也有一个空格
1.5 CSS 选择器
CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性
CSS 选择器主要分为以下几种：
1) 标签选择器
2) 类选择器
一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要用空格分隔，这种做法可以让代码更好复用）
3) ID 选择器
4) 通配符选择器
5) 复合选择器
tip：
- 以上三个标签选择器 ul li a 中的任何一个，都可以替换成类选择器，或者 id 选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合
- 不一定是相邻的标签，也可以是 “孙子” 标签
- 如果需要选择多种标签，可以使用 , 分隔，如 p, div { } 表示同时选中 p 标签和 div 标签，逗号前后可以是以上任意选择器，也可以是选择器的组合
1.6 常用 CSS
1.6.1 color 设置字体颜色
<style>
.text1 {
color: red;
}
</style>颜色的几种表达方式：
- 英文单词，如 red、blue
- rgb 代码的颜色，如 rgb(255, 0, 0)
- 十六进制的颜色，如 #ff00ff
1.6.2 font-size 字体大小
.text1 {
font-size: 32px;
}1.6.3 border 边框
边框是一个复合属性，可以同时设置多个样式，不分前后顺序，浏览器会根据设置的值自动判断
.text1 {
border: 1px solid purple;
}以上 border 属性的对应设置的维度分别为边框粗细，边框样式，边框颜色
也可以拆开来设置，如下：
| 样式 | 说明 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-style | 设置边框样式 | dotted : 点状 solid：实线 double：双线 dashed：虚线 |
| border-color | 设置边框颜色 | 同 color |
上面的 border: 1px solid purple; 就等同于以下代码
.text1 {
border-width: 1px;
border-style: solid;
border-color: purple;
}tip：
1.6.4 width / height（宽度 / 高度）
只有块级元素可以设置宽高
块级元素是 HTML 标签的一种显示模式，对应的还有行内元素
常见块级元素：h1-h6、p、div 等
常见行内元素：a span
块级元素独占一行，可以设置宽高
行内元素不独占一行，不能设置宽高
可使用 display 属性修改元素的显示模式
display：block 改成块级元素（常用）
display：inline 改成行内元素（很少用）
1.6.5 padding 内边距
设置内容和边框之间的距离
内容默认是顶着边框来放置的，用 padding 来控制这个距离
padding 也是一个复合样式，可以对四个方向分开设置
- padding-top
- padding-right
- padding-bottom
- padding-left
1.6.6 外边距
设置元素和元素之间的距离
margin 也是一个符合样式，可以给四个方向都加上外边框
- margin-top
- margin-right
- margin-bottom
- margin-left
