CSS（Cascading Style Sheets，层叠样式表） 是一种用于描述 HTML（超文本标记语言）或 XML（可扩展标记语言）文档样式 的编程语言。它分离了网页的 内容（结构） 和 表现（样式），使得开发者可以更高效地控制网页的布局、颜色、字体、动画等视觉效果，同时提升代码的可维护性和复用性。

核心作用

1.分离内容与样式

• 传统 HTML 中，样式直接嵌入标签（如 <font color="red">），导致代码冗余且难以维护。
• CSS 将样式统一管理，通过 <link> 标签引入外部样式表或 <style> 标签定义内部样式，实现 “结构与表现分离”。

2.控制网页视觉效果

• 支持字体、颜色、背景、边框、间距、布局（如 Flexbox、Grid）、响应式设计等丰富样式属性。
• 示例：

/* 选择所有段落，设置字体颜色为蓝色，字号 16px */
p {
  color: blue;
  font-size: 16px;
}

3.层叠性与优先级

• 层叠性：当多个样式规则作用于同一元素时，根据规则的优先级（如内联样式 > 内部样式 > 外部样式）和顺序决定最终显示效果。
• 优先级规则：
  • 内联样式（style 属性）：最高优先级（权重 1000）。
  • ID 选择器（#id）：权重 100。
  • 类选择器（.class）、属性选择器（[attribute]）、伪类（:hover）：权重 10。
  • 标签选择器（div）、伪元素（::before）：权重 1。

发展历程

• 1994 年：Håkon Wium Lie 首次提出 CSS 概念，用于解决 HTML 样式控制的局限性。
• 1996 年：CSS1 正式发布，定义了字体、颜色、背景等基础样式。
• 2000 年：CSS2 扩展了布局（如浮动、定位）、媒体查询（@media）、打印样式等功能。
• 2009 年后：CSS3 分模块逐步发布，引入圆角（border-radius）、阴影（box-shadow）、渐变（linear-gradient）、动画（@keyframes）、弹性布局（Flexbox）、网格布局（Grid）等现代特性，显著提升网页设计的灵活性和表现力。
• 现代发展：结合预处理器（如 Sass、Less）、后处理器（如 PostCSS）和框架（如 Bootstrap），CSS 开发效率大幅提升，响应式设计和动效实现更加便捷。

 

CSS 是前端开发的核心技术之一，它让网页从单调的文本结构转变为视觉丰富、交互流畅的用户界面。随着技术演进，CSS 不断吸收新特性（如 CSS Houdini、容器查询），未来将进一步简化复杂布局和动效的实现，成为构建现代化 Web 的重要基石。