什么是 层叠样式表？
层叠样式表是一种用于描述 HTML 和 XML 文档呈现的样式语言，控制网页的布局、颜色、字体和动画效果。CSS 将内容与样式分离，支持 Flexbox、Grid 布局和媒体查询等现代特性，是构建响应式网页和跨设备用户界面的核心技术。
快速了解
| 创建时间 | 1996 年（W3C 推荐标准） |
|---|---|
| 规范文档 | 官方规范 |
工作原理
CSS 由 Håkon Wium Lie 于 1994 年首次提出，并于 1996 年成为 W3C 推荐标准。'层叠'指的是当多个规则针对同一元素时，确定应用哪些样式规则的优先级方案。CSS 将内容（HTML）与呈现分离，使网站更易于维护和更具可访问性。现代 CSS 包括强大的功能，如 Flexbox、Grid、自定义属性（变量）、动画和用于响应式设计的媒体查询。CSS3 引入了持续发展的模块化规范。
主要特点
- 将内容与呈现分离
- 样式规则的层叠优先级系统
- 支持使用媒体查询的响应式设计
- 包括 Flexbox 和 Grid 布局系统
- 支持动画和过渡效果
- 自定义属性（CSS 变量）实现可重用性
常见用途
- 网站样式和主题
- 响应式网页设计
- UI 组件样式
- 打印样式表
- 动画和视觉效果
示例
Loading code...常见问题
CSS Grid 和 Flexbox 有什么区别？
Flexbox 是一维的，设计用于在行或列中布局项目。CSS Grid 是二维的，允许同时控制行和列。对于组件布局使用 Flexbox，对于页面级布局使用 Grid。
CSS 优先级是如何工作的？
CSS 优先级决定当多个规则针对同一元素时应用哪些样式。内联样式优先级最高，其次是 ID，然后是类/属性/伪类，最后是元素。更具体的选择器会覆盖不太具体的选择器。
什么是 CSS 自定义属性（变量）？
CSS 自定义属性（变量）是用 -- 前缀定义的实体，用于在整个样式表中存储可重用的值。声明方式如 --primary-color: #3498db，使用方式为 var(--primary-color)。它们支持动态主题和更便捷的维护。
媒体查询如何用于响应式设计？
媒体查询根据设备特性（如视口宽度）应用 CSS 规则。语法：@media (max-width: 768px) { ... }。它们通过在不同屏幕尺寸下更改布局、字体大小或隐藏元素来实现响应式设计。
什么是 CSS 盒模型？
CSS 盒模型描述元素的渲染方式：内容（最内层）、内边距、边框和外边距（最外层）。默认情况下，宽度/高度仅应用于内容。使用 box-sizing: border-box 可将内边距和边框包含在元素的总尺寸中。