目录
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;

本文详细介绍了CSS的基础知识,包括标签与类选择器、ID选择器、样式类型(行内、内部、外部)、选择器优先级、属性(如背景、字体、文本等)、盒子模型、元素类型、浮动和定位方法。
2830

被折叠的 条评论
为什么被折叠?



