【HTML5+CSS3+JavaScript(ES6)】CSS篇

目录

1 CSS介绍

2 div和span标签

3 选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

3.4 全局选择器

3.5 属性选择器

3.6 子字符串匹配选择器

3.7 伪类选择器

3.8 交集选择器和并集选择器

3.9 后代选择器

3.10 子代选择器

3.11 兄弟选择器

4 样式

4.1 行内样式

4.2 内部样式

4.3 外部样式

5 选择器优先级

5.1 从层叠来理解样式控制原理

5.2 非关系选择器优先级

5.3 关系选择器优先级

6 属性

6.1 背景颜色属性

6.2 字体属性

6.2.1 字体族属性

6.2.2 字体大小属性

6.2.3 字体风格属性

6.2.4 字体粗细属性

6.2.5 字体复合属性

6.3 文本属性

6.3.1 文本颜色属性

6.3.2 文本间距属性

6.3.3 文本划线属性

6.3.4 文本缩进属性

6.3.5 文本对齐属性

6.3.6 文本行高属性

6.4 其他属性

6.4.1 列表属性

6.4.2 边框属性

7 盒子模型

8 元素

8.1 块级元素

8.2 行内元素

8.3 行内块级元素

8.4 元素类型转换

9 浮动

10 定位

10.1 静态定位

10.2 相对定位

10.3 绝对定位

10.4 固定定位

---

1 CSS介绍

学习网站：

https://developer.mozilla.org/zh-CN/docs/Web

https://www.w3school.com.cn/

Cascading Style Sheets 层叠样式表

2 div和span标签

和是无语义化标签，只希望对标签进行样式控制和样式设置，不希望标签带有语义化。无语义化含义，可以将它们用于任何地方，都不会产生歧义，只受样式控制。

3 选择器

3.1 标签选择器

标签选择器也叫类型选择器、元素选择器

3.2 类选择器

3.3 ID选择器

多个标签用类class，单个的一般用id

3.4 全局选择器

3.5 属性选择器

3.6 子字符串匹配选择器

3.7 伪类选择器

普通伪类选择器：

行为伪类选择器：

3.8 交集选择器和并集选择器

3.9 后代选择器

3.10 子代选择器

3.11 兄弟选择器

邻接兄弟选择器：

通用兄弟选择器：

4 样式

4.1 行内样式

4.2 内部样式

4.3 外部样式

5 选择器优先级

5.1 从层叠来理解样式控制原理

5.2 非关系选择器优先级

加载文档流：

5.3 关系选择器优先级

关系选择器也叫组合选择器，将多个选择器以一种关系的方式组合在一起

6 属性

6.1 背景颜色属性

background-color

6.2 字体属性

6.2.1 字体族属性

font-family

6.2.2 字体大小属性

font-size

6.2.3 字体风格属性

font-style

6.2.4 字体粗细属性

font-weight

6.2.5 字体复合属性

font属性，支持同时设置多个字体属性，但顺序必须是：其他字体属性，字体大小，字体族

6.3 文本属性

6.3.1 文本颜色属性

6.3.2 文本间距属性

6.3.3 文本划线属性

6.3.4 文本缩进属性

6.3.5 文本对齐属性

6.3.6 文本行高属性

6.4 其他属性

6.4.1 列表属性

6.4.2 边框属性

7 盒子模型

8 元素

8.1 块级元素

8.2 行内元素

8.3 行内块级元素

8.4 元素类型转换

display属性

9 浮动

10 定位

定位：如何确定当前元素的位置

10.1 静态定位

position: static;

10.2 相对定位

position: relative;

10.3 绝对定位

position: absolute;

10.4 固定定位

position: fixed;