css样式表全称是层叠样式表，英文为Cascading Style Sheets，它是用来控制网页外观与排版的语言。与HTML负责页面结构不同，css专门定义元素该用什么字体、占多大空间、处于什么位置。早期网页把样式直接写在标签里，改版极其痛苦，后来样式表把表现层独立出来，开发和维护效率明显提升。
css样式表的基本组成
一条css规则由选择器和声明块构成。选择器决定样式作用在哪些元素上，声明块里是一个个属性与值的配对。比如要把所有段落文字设为灰色，可用p { color: gray; }这样的规则。多个声明之间用分号隔开，最后一个声明后的分号可省略但建议保留，避免后续追加时出错。
样式表内部还能通过注释提升可读性，注释写成/* 这是注释 */的形式，不会被浏览器解析。理解这种结构，就能明白为什么同样的HTML在不同css下长得完全不一样。下面是一段最基础的外部样式表内容：
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 文章标题样式 */
h1 {
font-size: 24px;
color: #333;
line-height: 1.5;
}
/* 段落样式 */
p {
font-size: 16px;
color: #666;
margin-bottom: 12px;
}
css样式表的三种引入方式
内联样式直接写在元素的style属性里，例如<p style="color:red;">文本</p>。它的优先级最高，但复用性差，只适合临时调试或极个别特殊节点。内部样式表放在HTML的<style>标签中，通常位于<head>里，对本页面生效，适合单页独立样式。
外部样式表则是单独的.css文件，通过<link>标签引入。它是生产环境的主流做法，多个页面可共用一份文件，修改一次全站更新。配合浏览器缓存，还能减少重复下载。三种方式可共存，最终效果按层叠规则计算，后文会详细说明。
| 引入方式 | 书写位置 | 适用场景 |
|---|---|---|
| 内联样式 | 元素style属性 | 快速验证、局部覆盖 |
| 内部样式 | HTML内<style>标签 | 单页独有样式 |
| 外部样式 | 独立.css文件 | 多页复用、项目维护 |
层叠与继承机制
“层叠”是css的核心词，指当多条规则命中同一元素时，浏览器依据来源、优先级、书写顺序决定用哪条。一般来说，内联样式权重大于内部和外部，选择器越具体权重越高，同权重时后写的覆盖先写的。这种机制让样式既能全局统一，又能局部微调。
继承则是部分属性会从父元素自动传给子元素，比如文字颜色、字体族。并非所有属性都继承，像margin、border就不会。合理利用继承能少写很多重复代码。遇到样式不生效时，先用开发者工具看计算后的属性，往往能发现是被更高权重规则覆盖或没继承到。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式表示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<p>这段文字会继承父级的字体设置</p>
</div>
</body>
</html>
为什么需要css样式表
如果没有样式表，网页只能是默认字体和流布局，毫无品牌感与交互体验。css让表现与结构分离，HTML只管语义，css管视觉，后期换肤、适配手机、做暗黑模式都只需改样式。对团队协作而言，前端切图与后端套模板的边界也更清晰。
此外，css样式表支持媒体查询，能针对屏幕宽度给出不同规则，这是响应式设计的基础。从单纯美化到工程化管控，样式表已成为现代Web不可或缺的一环。搞清楚css样式表是什么，才算真正踏进前端大门。