CSS 笔记

1. CSS 介绍

CSS（Cascading Style Sheets）即层叠样式表，是一种用来表现 HTML 或 XML 文档样式的语言。CSS 用来控制网页的布局、字体、颜色、背景、边框等外观显示。

CSS 语法简单，学习起来也比较容易。CSS3 新增了很多特性，使得 CSS 的应用更加广泛。

CSS 三大特性：

1. 层叠性：CSS 样式可以层叠，也就是说，可以将多个样式层叠在一起，按照优先级来应用。

2. 继承性：CSS 样式可以继承，也就是说，子元素可以继承父元素的样式。

3. 优先级：CSS 样式的优先级是确定的，具体的规则是：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。

2. CSS 语法

CSS 语法包括选择器、属性、值、单位等。

2.1 选择器

CSS 选择器是 CSS 中用于定位 HTML 元素的关键词。CSS 选择器可以分为四种：

1. 标签选择器：通过标签名来选择 HTML 元素。例如：h1、p、div 等。

2. 类选择器：通过 class 属性来选择 HTML 元素。例如：.intro、#header 等。

3. ID 选择器：通过 id 属性来选择 HTML 元素。例如：#main、#nav 等。

4. 组合选择器：通过多个选择器来选择 HTML 元素。例如：h1.intro、div#main.intro 等。

2.2 属性

CSS 属性是 CSS 中用来设置 HTML 元素样式的属性。CSS 属性包括字体、颜色、背景、边框、宽度、高度、位置等。

CSS 属性包括：

1. 字体属性：font-family、font-size、font-style、font-weight、line-height、text-align、text-decoration、text-transform。

2. 颜色属性：color、background-color、border-color。

3. 背景属性：background-image、background-repeat、background-position、background-size。

4. 边框属性：border、border-top、border-right、border-bottom、border-left、border-radius。

5. 尺寸属性：width、height、min-width、max-width、min-height、max-height。

6. 定位属性：position、top、right、bottom、left、z-index。

2.3 值

CSS 值是 CSS 属性的具体设置值。CSS 值包括颜色值、长度值、百分比值、关键字值等。

CSS 颜色值包括：

1. 十六进制颜色值：例如：#FF0000。

2. RGB 颜色值：例如：rgb(255, 0, 0)。

3. 颜色关键字：例如：red、green、blue、yellow、black、white。

CSS 长度值包括：

1. 绝对长度值：像素值、厘米值、英寸值、分米值等。

2. 相对长度值：em、px、% 等。

CSS 百分比值：以百分比表示的长度值，例如：50%。

CSS 关键字值：一些预定义的关键字，例如：auto、inherit、none、bold、normal 等。

2.4 单位

2.4.1绝对单位

绝对单位的值是固定的，与屏幕分辨率无关，通常用于需要精确控制的场景。

单位	含义	示例
px	像素（Pixel），屏幕上的一个点。	font-size: 16px;
cm	厘米（Centimeter）。	width: 10cm;
mm	毫米（Millimeter）。	margin: 5mm;
in	英寸（Inch），1英寸 = 2.54厘米。	height: 2in;
pt	点（Point），1pt = 1/72 英寸。	font-size: 12pt;
pc	派卡（Pica），1pc = 12pt。	width: 1pc;
特点：

• 绝对单位的尺寸固定，但在高分辨率屏幕上可能显得较小。

---

2.4.2相对单位

相对单位根据上下文动态计算，适合响应式设计。

1. 与字体大小相关的单位

单位	含义	示例
em	相对于父元素的字体大小，1em 表示当前字体大小的倍数。	font-size: 1.5em;
rem	相对于根元素（html）的字体大小，通常根元素字体大小是 16px。	font-size: 2rem;
ex	相对于当前字体的 x 高度（小写字母 x 的高度）。	line-height: 1ex;
ch	相对于当前字体中字符 0 的宽度。	width: 10ch;
区别：em 和 rem

• em 的大小受父级元素影响（嵌套会累积）。
• rem 始终相对于根元素，方便全局控制。

---

2. 与视口相关的单位

视口单位适合响应式布局设计。

单位	含义	示例
vw	相对于视口宽度的百分比，1vw = 视口宽度的 1%。	width: 50vw;
vh	相对于视口高度的百分比，1vh = 视口高度的 1%。	height: 100vh;
vmin	视口宽度和高度中较小的那个的 1%。	width: 10vmin;
vmax	视口宽度和高度中较大的那个的 1%。	width: 10vmax;
场景：

• vw/vh：用来设置宽高比例，例如全屏背景图。
• vmin/vmax：用来保持元素的宽高比适应视口。

---

3. 百分比单位（%）

单位	含义	示例
%	相对于父级元素的尺寸（宽度、高度、边距等）。	width: 50%;
特点：

• 动态计算，通常用于流式布局。

---

2.4.3其他特殊单位

单位	含义	示例
fr	表示网格布局（grid）中可用空间的分数单位。	grid-template-columns: 1fr 2fr;
auto	浏览器自动计算适当的值（宽度、高度等），无法直接量化为具体数值。	width: auto;
min-content	表示元素内容最小尺寸。	width: min-content;
max-content	表示元素内容最大尺寸。	width: max-content;
fit-content	根据内容和可用空间动态调整。	width: fit-content;
calc()	用来动态计算单位的值（可以混用单位）。	width: calc(100% - 50px);

---

2.4.5常见应用场景总结

1. 固定布局：使用 px 进行精确控制。
2. 流式布局：使用 % 或视口单位（vw, vh）适配屏幕。
3. 响应式设计：结合 rem 或视口单位，方便调整整体比例。
4. 自适应内容：用 auto、fit-content 等。
5. 网格布局：fr 常用于 grid 布局，分配剩余空间。

3. CSS 样式表

CSS 样式表是 CSS 代码的集合，包含了 HTML 文档的样式信息。样式表可以分为三种：

1. 内联样式：在 HTML 元素的 style 属性中直接定义 CSS 样式。

2. 内部样式表：在 HTML 文档的 head 部分定义 CSS 样式，通过 style 标签将样式表嵌入到 HTML 文档中。

4. CSS 规则

CSS 规则是 CSS 样式的集合，包含了选择器和属性。CSS 规则以分号结尾。

CSS 规则的语法格式如下：

选择器 {
  属性1: 值1;
  属性2: 值2;
  ...
}

5. CSS 注释

CSS 注释以 /* 和 */ 包围，用来描述 CSS 代码。

/* 这是 CSS 注释 */

6. CSS 优先级

CSS 优先级是 CSS 样式的重要性。CSS 优先级分为四级：

1. 内联样式：内联样式的优先级最高，可以覆盖其他样式。

2. 内部样式表：内部样式表的优先级次之，可以覆盖外部样式表。

3. 外部样式表：外部样式表的优先级最低，可以覆盖浏览器默认样式。

4. 浏览器默认样式：浏览器默认样式的优先级最低，不能被覆盖。

7. CSS 命名规范

CSS 命名规范是为了便于管理和维护 CSS 代码，遵循一定的命名规则。CSS 命名规范包括：

1. 选择器命名：选择器的命名要有意义，并且尽量简短。

2. 属性命名：属性的命名要有意义，并且尽量简短。

3. 值命名：值要简短，并且尽量使用预定义的颜色值或关键字值。

4. 单位命名：使用相对长度单位或绝对长度单位，不要使用其他单位。

5. 文件命名：CSS 文件名要与 HTML 文件名相对应。

8. CSS 布局

CSS 布局是 CSS 中用来控制网页的布局的技术。CSS 布局可以分为以下几类：

1. 盒模型：CSS 盒模型是 CSS 中用来控制元素的布局的一种技术。

2. 定位：CSS 定位是 CSS 中用来控制元素位置的一种技术。

3. 盒子模型：CSS 盒子模型是 CSS 中用来控制元素盒子的一种技术。

4. 多列布局：CSS 多列布局是 CSS 中用来控制多列布局的一种技术。

5. 文本布局：CSS 文本布局是 CSS 中用来控制文本的一种技术。

6. 表格布局：CSS 表格布局是 CSS 中用来控制表格的一种技术。

7. 轮廓样式：CSS 轮廓样式是 CSS 中用来控制元素轮廓的一种技术。

8. 动画效果：CSS 动画效果是 CSS 中用来控制动画效果的一种技术。

9. CSS 预处理器

CSS 预处理器是一种高级的编程语言，它扩展了 CSS 的功能，使得 CSS 代码更加简洁、易读、可维护。CSS 预处理器包括：

1. Sass：Sass 是一种 CSS 预处理器，它使用缩进来定义代码块，并提供变量、嵌套、混合、导入等功能。

2. Less：Less 是一种 CSS 预处理器，它使用类似于 JavaScript 的语法，可以简化 CSS 代码。

3. Stylus：Stylus 是一种 CSS 预处理器，它提供了丰富的函数和运算符，可以简化 CSS 代码。

10. CSS 工具

CSS 工具是用来辅助开发者编写 CSS 代码的工具。CSS 工具包括：

1. CSS 调试工具：CSS 调试工具可以帮助开发者检查 CSS 代码的错误。

2. CSS 压缩工具：CSS 压缩工具可以帮助开发者压缩 CSS 代码，减少文件大小。

3. CSS 格式化工具：CSS 格式化工具可以帮助开发者格式化 CSS 代码，使得代码更加易读。

4. CSS 校验工具：CSS 校验工具可以帮助开发者检查 CSS 代码的语法错误。

5. CSS 兼容性检查工具：CSS 兼容性检查工具可以帮助开发者检查 CSS 代码的兼容性问题。