1. 什么是css?

2.css引入方式

2.1 内嵌式

2.2 外联式

提示: 需要在html文件中link目标样式表;

2.3 行内式

注意: 单独生效一个标签;

2.4 引入方式特点

3. 基础选择器

3.1 标签选择器

3.2 类选择器

3.3 id选择器

3.4 通配符选择器

4. 文字基本样式

4.1 字体样式

4.1.1 字体大小

4.1.2 字体粗细

4.1.3 倾斜

4.1.4 字体

4.1.5 字体font相关属性连写

4.2 文本样式

4.2.1 文本缩进

4.2.2 内容水平对齐方式

注意: 如果图在body里面, 则给body加对齐, 图才会按需要对齐;

4.2.3 文本修饰

4.2.4 行高

注意: 上图的 size/line-height 不是二选一的意思;

4.2.5 颜色

4.2.6 拓展(标签水平居中的写法)

5. 选择器进阶

5.1 复合选择器

5.1.1 后代选择器

5.1.2 子代选择器

5.1.3 并集选择器

5.1.4 交集选择器

注意: p和.box之间没有其他字符

5.1.5 hover伪类选择器

5.1.6 Emmet语法(扩展)

6. 背景相关属性

6.1 背景颜色

6.2 背景图片

提示: 背景图显示在背景色上面;

6.2 背景图平铺

6.3 背景图位置

6.4 背景相关属性连写

6.5 (拓展) img标签和背景图片的区别

提示: 重要的用img, 不重要的用背景图;

7. 元素的显示模式(显示方式)

7.1 块级元素

7.2 行内元素

7.3 行内块元素

7.4 元素显示模式转换

7.5 HTML嵌套规范注意点

注意：
(1) p、h不能相互嵌套;
(2) p、div不能相互嵌套;

8. CSS特性

8.1 继承性

提示:
(1) 文字控制属性的都能继承;
(2) 非文字控制属性的都不能继承;

8.1.2 继承失效的特殊情况

8.2 层叠性

8.3 优先级

8.3.1 权重叠加计算

8.3.1.1 题目1

答案: 蓝色; (blue)

8.3.1.2 题目2

答案: 天蓝色; (skyblue)

8.3.1.3 题目3

答案: pink;

8.3.1.4 题目4

答案: yellow;

8.3.1.5 题目5

答案: red;

9. 盒子模型

9.1 内容区域的宽度和高度

9.2 边框(border)

提示: border是复合属性

9.2.1 边框(border) - 单方向设置

9.2.2 边框(border) - 单个属性

97. Pxcook(像素大厨)

98. 谷歌调试工具

98.1 基础

(1) 黄色感叹号;
说明语法有问题;
(2) 带删除线;
说明没有生效; 是层叠或者自己注释的代码;

98.2 差错流程(遇到样式查不出来, 要学会通过调试工具找错)

99. 问题

(1) 样式层叠问题