CSS
本词条介绍的是Web前端开发领域的CSS（Cascading Style Sheets，层叠样式表）。CSS是一种用于描述HTML或XML文档外观和格式的样式表语言，负责网页的视觉呈现，是现代Web开发的核心技术之一。
技术定义
CSS是由万维网联盟（W3C）制定和维护的样式表语言标准。它通过将内容与表现分离的设计理念，使开发者能够独立控制网页的布局、颜色、字体等视觉元素，而无需修改HTML结构。CSS采用选择器和声明块的语法结构，通过规则集来定义元素的样式属性。
CSS与HTML、JavaScript共同构成了现代Web开发的三大基础技术。HTML负责内容结构，CSS负责视觉呈现，JavaScript负责交互行为，三者协同工作实现完整的网页功能。
发展历史
早期发展
1994年，挪威计算机科学家哈肯·维姆·莱（Håkon Wium Lie）在欧洲核子研究中心（CERN）工作期间首次提出CSS的概念。当时网页样式控制混乱，不同浏览器有各自的样式实现方式，急需统一的标准。
1996年12月，W3C正式发布CSS Level 1（CSS1）规范，定义了基本的字体、颜色、对齐等样式属性。这是CSS标准化的重要里程碑，为网页设计提供了统一的样式控制方法。
标准演进
1998年5月，CSS Level 2（CSS2）发布，引入了绝对定位、相对定位、z-index层叠控制等重要特性，大幅增强了布局能力。CSS2.1作为修订版本于2011年正式成为推荐标准，修复了原始CSS2规范中的诸多问题。
2011年开始，W3C改变了CSS的发展策略，不再发布单一的大版本，而是将CSS分解为多个独立的模块（Modules），每个模块独立演进。这种模块化方式使得新特性能够更快地标准化和实施，通常被统称为CSS3。
基本语法
语法结构
CSS的基本语法由选择器（Selector）和声明块（Declaration Block）组成。选择器指定要应用样式的HTML元素，声明块包含一个或多个样式声明，每个声明由属性和值组成。
基本格式为：选择器后跟花括号，花括号内是属性-值对，用冒号分隔，多个声明用分号分隔。例如，设置段落文字颜色和字体大小的规则包含选择器p和两个声明。
选择器类型
CSS提供了丰富的选择器类型。元素选择器直接使用HTML标签名；类选择器使用点号加类名；ID选择器使用井号加ID名；属性选择器根据元素属性匹配；伪类选择器选择特定状态的元素；伪元素选择器选择元素的特定部分。
组合选择器包括后代选择器、子选择器、相邻兄弟选择器等，可以实现复杂的元素定位。选择器的优先级遵循特定规则，ID选择器优先级最高，其次是类选择器，元素选择器优先级最低。
引入方式
CSS有三种主要引入方式。外部样式表通过link标签引入独立的CSS文件，适合多页面共享样式；内部样式表在HTML文档的head部分使用style标签定义，适合单页面专用样式；内联样式直接在HTML元素的style属性中定义，优先级最高但不推荐大量使用。
核心特性
层叠与继承
层叠（Cascading）是CSS名称的核心概念，指多个样式规则可以同时作用于同一元素，最终样式由优先级、特异性和源顺序共同决定。当多个规则冲突时，浏览器按照特定算法计算最终应用的样式。
继承机制使得子元素自动获得父元素的某些样式属性，如字体、颜色等。这减少了代码重复，提高了样式管理效率。但并非所有属性都可继承，边框、内外边距等盒模型属性通常不继承。
盒模型
CSS盒模型是布局的基础概念，将每个HTML元素视为一个矩形盒子。盒子由内容区（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。标准盒模型和IE盒模型在宽度计算上有所不同，可通过box-sizing属性控制。
定位机制
CSS提供多种定位方式。静态定位是默认方式，元素按文档流排列；相对定位相对于元素原始位置偏移；绝对定位相对于最近的已定位祖先元素定位；固定定位相对于视口定位；粘性定位结合相对和固定定位的特点。
布局技术
传统布局使用浮动（float）和定位实现。现代CSS引入了更强大的布局方案：Flexbox（弹性盒布局）适合一维布局，提供灵活的空间分配和对齐能力；Grid（网格布局）适合二维布局，可以同时控制行和列，实现复杂的页面结构。
高级功能
响应式设计
媒体查询（Media Queries）是CSS3的重要特性，允许根据设备特征（如屏幕宽度、分辨率、方向）应用不同样式。这是实现响应式网页设计的核心技术，使网页能够适配从手机到桌面的各种设备。
动画与过渡
CSS3引入了原生动画能力。过渡（Transition）实现属性值的平滑变化；动画（Animation）通过关键帧定义复杂的动画序列；变换（Transform）实现元素的旋转、缩放、倾斜和移动。这些特性使得无需JavaScript即可创建流畅的视觉效果。
预处理器
为了增强CSS的编程能力，社区开发了多种预处理器，如Sass、Less和Stylus。它们引入了变量、嵌套、混合、函数等编程特性，提高了样式代码的可维护性和复用性。预处理器代码需要编译为标准CSS才能在浏览器中运行。
应用领域
CSS广泛应用于各类Web项目。在网站开发中，CSS负责整体视觉风格、品牌形象和用户体验；在Web应用中，CSS实现复杂的界面布局和交互反馈；在移动端开发中，CSS配合响应式设计适配不同屏幕；在电子邮件设计中，CSS控制邮件的格式和样式。
现代前端框架如React、Vue、Angular都深度集成CSS，提供了组件化的样式管理方案。CSS-in-JS、CSS Modules等新技术进一步推动了样式开发的演进。
浏览器兼容性
不同浏览器对CSS特性的支持程度存在差异。开发者需要考虑目标用户的浏览器分布，使用渐进增强或优雅降级策略。Can I Use等工具可以查询特性的浏览器支持情况。厂商前缀（如-webkit-、-moz-）用于实验性特性，但随着标准成熟逐渐被淘汰。
性能优化
CSS性能优化包括多个方面：减少选择器复杂度，避免过深的嵌套；合并和压缩CSS文件，减少HTTP请求；使用CSS Sprites合并小图标；避免使用@import，优先使用link标签；利用浏览器缓存；关键CSS内联以加快首屏渲染。合理的CSS架构能显著提升网页加载速度和渲染性能。
未来发展
CSS持续演进，新特性不断涌现。CSS变量（Custom Properties）提供原生变量支持；容器查询允许根据父容器尺寸应用样式；级联层（Cascade Layers）提供更精细的样式优先级控制；子网格增强Grid布局能力。这些新特性使CSS更加强大和灵活，推动Web设计的创新发展。
