目录
1 CSS介绍
学习网站:
https://developer.mozilla.org/zh-CN/docs/Web
https://www.w3school.com.cn/
Cascading Style Sheets 层叠样式表
2 div和span标签
<div></div>和<span></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;