CSS 概览
CSS（Cascading Style Sheets，层叠样式表）用于描述 HTML / XML 文档的视觉表现，包括颜色、字体、间距、布局和动画等。它与 HTML、JavaScript 一起构成前端开发的核心基础。
CSS 是什么
- HTML 负责结构
- CSS 负责样式
- JavaScript 负责交互
CSS 的“层叠”体现在：当多条规则命中同一元素时，浏览器会结合来源、优先级、书写顺序来计算最终样式。
基本语法
css
selector {
property: value;
property: value;
}selector：匹配要应用样式的元素property：样式属性名，如color、marginvalue：属性值，如red、16px
引入方式
- 行内样式：
style="..." - 内部样式：
<style>...</style> - 外部样式：
<link rel="stylesheet" href="...">
通常推荐外部样式，便于复用与维护。
常见属性分类
- 文本：
font-family、font-size、line-height、text-align - 盒模型：
margin、padding、border、box-sizing - 背景：
background-color、background-image - 布局：
display、position、flex、grid - 视觉：
opacity、visibility、overflow
常用单位
- 绝对单位：
px、pt - 相对单位：
%、em、rem、vw、vh
实践中，字号和间距优先考虑 rem，组件内部可结合 em，响应式布局常用 %、vw、vh。
颜色写法
css
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0 100% 50%);继承、层叠与优先级
- 继承：如
color、font-family会从父元素继承 - 层叠：冲突时根据规则比较
- 优先级（由高到低）：
- 行内样式
- ID 选择器
- 类 / 属性 / 伪类
- 元素 / 伪元素
现代 CSS 能力
- Flexbox：一维布局
- Grid：二维布局
- 媒体查询：响应式设计
- 过渡和动画：
transition、animation - 变换：
transform - 自定义属性：CSS Variables
- 容器查询：Container Queries
工程实践建议
- 采用语义化 class 命名（如 BEM）
- 限制选择器层级，避免过深嵌套
- 使用设计令牌（颜色、间距、字号变量）
- 为布局和主题能力预留扩展（深色模式、响应式断点）