一、CSS基础
1.CSS简介
2.CSS的编写位置
2.1 行内样式
2.2 内部样式
2.3 外部样式
3.样式表的优先级
4.CSS语法规范
5.CSS代码风格
二、CSS选择器
1.CSS基本选择器
- 通配选择器
- 元素选择器
- 类选择器
- id选择器
1.1 通配选择器
1.2 元素选择器
1.3 类选择器
1.4 ID选择器
1.5 基本选择器总结
2.CSS复合选择器
2.1 交集选择器
2.2 并集选择器
2.3 HTML元素间的关系
分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。
2.4 后代选择器
2.5 子代选择器
2.6 兄弟选择器
2.7 属性选择器
2.8 伪类选择器
一、动态伪类
二、结构伪类
三、否定伪类
四、UI伪类
五、目标伪类（了解）
六、语言伪类（了解）
2.9 伪元素选择器
3.选择器的优先级（权重）
三、CSS三大特性
四、CSS常用属性
1.像素的概念
2.颜色的表示
2.1 表示方式一：颜色名
编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：
- 红色：red
- 绿色：green
- 蓝色：blue
- 紫色：purple
- 橙色：orange
- 灰色：gray
…
1. 颜色名这种方式，表达的颜色比较单一，所以用的并不多。
2. 具体颜色名参考MDN 官方文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
2.2 表示方式二：rgb 或 rgba
编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。
- r 表示 红色
- g 表示 绿色
- b 表示 蓝色
- a 表示 透明度
举例：
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
- 小规律：
1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
2. rgb(0,0,0)是黑色，rgb(255,,255,255)是白色。
3. 对于rgba来说，前三位的rgb形式要保持一致，要么都是0-255，要么都是百分比。
2.3 表示方式三：HEX 或 HEXA
HEX的原理同与rgb一样，依然是通过：红、绿、蓝色进行组合，只不过要用6位（分成3组）来表达，
格式为：#rrggbb
每一位数字的取值范围是：0 ~ f，即（0 1 2 3 4 5 6 7 8 9 a b c d e f）
所以每一种光的最小值是：00，最大值是ff
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */
注意点：IE浏览器不支持HEXA ，但支持HEX 。
2.4 表示方式四：HSL 或 HSLA
3.CSS字体属性
3.1 字体大小
- 属性名：font-size
- 作用：控制字体的大小
- 语法：
div {
font-size: 40px;
}
- 注意点：
- Chrome 浏览器支持的最小文字为12px ，默认的文字大小为16px ，并且0px 会自动消失。
- 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
- 通常以给body设置font-size属性，这样body中的其他元素就都可以继承了。
- 借助控制台看样式：
3.2 字体族
- 属性名：font-family
- 作用：控制字体类型
- 语法：
div {
font-family:"STCaiyun","Microsoft YaHei",sans-serif
}
- 注意：
1.使用字体的英文名兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
2.如果字体包含空格，必须使用引号包裹起来。
3.可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）
4.windows系统中，默认的字体就是微软雅黑
3.3 字体风格
- 属性名：font-style
- 作用：控制字体是否为斜体
- 常用值：
- normal：正常（默认值）
- italic：斜体（使用字体自带的斜体效果）
- oblique：斜体（强制倾斜产生的斜体效果）
实现斜体时，更推荐使用italic - 语法：
div {
font-style: italic;
}
3.4 字体粗细
- 属性名：font-weight
- 作用：控制字体粗细。
- 常用值
- 关键字
lighter：细
normal：正常
bold：粗
bolder：很粗（多数字体不支持）
- 数值
1.100-1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）
2.100-300等同于lighter，400-500等同于normal，600及以上等同于bold
- 语法：
div {
font-weight:bold;
}
div {
font-weight:600;
}
在这里插入代码片