CSS（层叠样式表，全称 Cascading Style Sheets）是一种声明式语言，用于控制网页内容在浏览器中的呈现方式。它通过设置样式规则，定义页面元素的布局、颜色、字体、动画等外观效果，是 Web 开发中不可或缺的核心技术之一，与 HTML 和 JavaScript 并列为 Web 三大支柱技术。
CSS 的主要功能是为 HTML 元素添加样式，也支持其他标记语言（如 SVG 和 XML）。它通过一组规则为选定的元素指定样式，规则由 选择器 和 样式属性 组成，其中样式属性由 属性名 和 属性值 配对定义。
以下是一个简单的 CSS 示例，将页面中的所有 HTML 段落元素样式设为黑色背景和黄色文字：
p {
background-color: black;
color: yellow;
}CSS 具备以下特点：
- 层叠性：多重样式规则可以叠加，浏览器根据优先级和特定性决定最终应用的样式。
- 模块化：CSS 可通过外部文件、嵌入式样式表或行内样式分离内容与样式，提升开发效率与代码维护性。
- 响应式设计：借助媒体查询等功能，CSS 能适应不同设备和屏幕尺寸。
CSS 的强大功能使其成为现代网页设计中不可或缺的工具，能够帮助开发者轻松实现视觉上的吸引力和用户体验上的优化。
CSS 的引入方式主要有三种：行内样式、内嵌样式、外链样式。
直接在 HTML 元素的 style 属性中定义样式。
适合小范围、临时的样式调整，但不利于代码复用和维护。
<p style="color: red; font-size: 16px;">这是行内样式的示例</p>在 HTML 文件的 <style> 标签中定义样式，通常位于 <head> 内。
适合单个页面的样式设置，但对于多页面项目维护性较低。
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>通过 <link> 标签引入外部的 CSS 文件，常用于大型项目，利于代码复用和集中管理。
这是推荐的方式，能够保持结构与样式分离。
<head>
<link rel="stylesheet" href="index.css">
</head>外部 CSS 示例文件 (index.css)：
@charset "utf-8";
p {
color: green;
font-size: 18px;
}注意：css文件第一行代码需指定字符编码格式，防止出现乱码：
@charset "utf-8";
这三种方式可以根据具体需求灵活选择，甚至可以混合使用，但一般推荐优先使用外部样式表以保持代码整洁和维护性。
在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。
<link rel="stylesheet" href="样式表路径+名称.css">通过 <link> 标签引用外部 CSS 文件有以下主要好处：
-
实现样式与内容分离
将 CSS 样式单独存储在外部文件中，HTML 文件只专注于页面结构，便于维护和更新。
遵循 Web 开发的**关注点分离（Separation of Concerns）**原则，使代码更清晰。
-
提高代码复用性
外部 CSS 文件可以被多个 HTML 文件引用，无需为每个页面重复编写相同的样式。
当需要修改全局样式时，只需更新一个 CSS 文件即可，无需逐一修改每个 HTML 文件。
-
提升页面加载效率
外部 CSS 文件可以被浏览器缓存，当用户访问同一网站的多个页面时，样式文件无需重复下载，从而加快页面加载速度。
-
方便团队协作
团队成员可以分别负责 HTML 和 CSS 的编写与优化，提高开发效率。
外部 CSS 文件作为独立模块，可以在版本控制系统中单独跟踪和管理。
-
支持媒体查询和条件加载
使用 <link> 标签时，可以根据设备类型或屏幕尺寸加载不同的 CSS 文件，便于实现响应式设计。
<link rel="stylesheet" href="styles.css" media="screen and (max-width: 600px)">
在 CSS 中，不同的引用方式之间存在优先级，决定了样式规则的应用顺序。以下是 CSS 三种引用方式的优先级从低到高的总结：
优先级从低到高
-
外部样式表：
定义在外部的 .css 文件中，通过 <link> 引入。
优先级最低，适合全局通用的样式设置
-
内部样式表：
写在 HTML 文档的 <style> 标签中，通常位于 <head> 部分。
优先级高于外部样式表，适合页面局部的特殊样式设置
-
行内样式：
直接写在 HTML 元素的 style 属性中。
优先级最高，适合临时、个别元素的样式调整。
优先级规则的补充
除了引用方式，CSS 特殊性（Specificity） 和 重要性（!important） 也会影响优先级：
-
特殊性（Specificity）：选择器的特定性越高，优先级越高，例如：
内联样式的特殊性最高（如 style）。
ID 选择器比类选择器优先级高。
类选择器优先于标签选择器。
/* ID 选择器（优先级更高） */ #example { color: green; } /* 类选择器 */ .example { color: blue; } /* 标签选择器 */ p { color: red; }
-
重要性（!important）：
!important会覆盖正常优先级规则，即使其他样式优先级更高。应谨慎使用，避免难以维护的样式冲突。示例：
p { color: red !important; /* 无论其他规则如何，都会优先使用 */ }
总结
优先级总体规则为：
重要性 > 特殊性 > 引入方式 > 源代码顺序。
通常推荐避免滥用行内样式和 !important，优先使用外部样式表以提升代码的可维护性。
CSS 中常用的单位可以分为以下几类：相对单位、绝对单位、时间单位、角度单位和其他特殊单位。以下是具体介绍：
相对于某个参照值动态计算的单位，适应性更强，常用于响应式设计。
- em
-
定义：相对于父元素的字体大小（font-size）。
-
特点：会继承父元素的字体大小，如果嵌套会累积。
-
示例：
p { font-size: 2em; /* 如果父元素字体大小是 16px，则此处字体大小为 32px */ }
-
计算： $$ em = 像素值 / 父元素字体大小 $$
- rem
-
定义：相对于根元素（<html>）的字体大小。
-
特点：不受父元素影响，更适合全局和统一的响应式设计。
-
示例：
html { font-size: 16px; } p { font-size: 1.5rem; /* 16px * 1.5 = 24px */ }
-
计算： $$ 根元素字体大小 = 设备宽度/设计稿宽度 * 100 $$
$$ rem = 设计稿值 / 100 $$
- 百分比
-
定义：相对于父元素的某些属性值（如 width, height）。
-
特点：常用于布局中的宽高定义。
-
示例：
div { width: 50%; /* 占父元素宽度的 50% */ }
- vh 和 vw
-
定义：
vh：相对于视口高度的 1%。vw：相对于视口宽度的 1%。
-
特点：适用于全屏布局。
-
示例：
div { height: 50vh; /* 占视口高度的 50% */ width: 100vw; /* 占视口宽度的 100% */ }
- vmin 和 vmax
-
定义：
vmin：视口宽度和高度的最小值的 1%。vmax：视口宽度和高度的最大值的 1%。
-
特点：适合动态调整大小的组件。
-
示例：
div { font-size: 10vmin; /* 动态调整字体大小，基于视口 */ }
固定的单位，与屏幕分辨率无关，常用于打印或精确的尺寸定义。
- 像素（px）
-
定义：屏幕上的一个物理像素。
-
特点：使用广泛，适用于精确布局。
-
示例：
div { width: 100px; }
用于定义动画和过渡的持续时间。
- 秒（s）
-
定义：以秒为单位定义时间。
-
示例：
div { transition: all 2s; /* 动画持续 2 秒 */ }
- 毫秒（ms）
-
定义：以毫秒为单位定义时间。
-
示例：
div { transition: all 500ms; /* 动画持续 500 毫秒 */ }
用于旋转变换和渐变方向。
- 度（deg）
-
定义：以角度为单位，360° 表示一整圈。
-
示例：
div { transform: rotate(45deg); /* 旋转 45° */ }
- 弧度（rad）
-
定义：以弧度为单位，2π 表示一整圈。
-
示例：
div { transform: rotate(3.14rad); /* 旋转约 180° */ }
- 百分度（grad）和圈数（turn）
-
定义：
grad：400 百分度等于 360°。turn：1 turn 表示一整圈。
-
示例：
div { transform: rotate(1turn); /* 旋转一整圈 */ }
- 无单位值
-
定义：某些 CSS 属性（如 line-height 或 z-index）接受无单位值。
-
示例：
p { line-height: 1.5; /* 相对于字体大小的 1.5 倍 */ }
CSS 单位在不同场景有不同的适用性：
- 相对单位（如 em, rem, vw）适合响应式设计。
- 绝对单位（如 px, cm）适合固定尺寸或打印。
- 时间和角度单位主要用于动画和变换。
灵活选择合适的单位可以提高布局的适配性和设计效果。