CSS 是什么:它如何与 HTML、JavaScript 配合控制网页样式
CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页外观和布局的语言。它决定文字多大、颜色是什么、元素排成一行还是一列、页面在手机和电脑上分别长什么样。如果你已经会写 HTML，CSS 就是让页面从“有内容”变成“能看”的那一层；如果还没接触过 HTML，建议先理解标签如何描述内容结构，再回来看 CSS 会顺畅很多。
CSS 在网页三层分工中的位置
一个网页通常由三种技术各管一件事：
| 技术 | 负责 | 类比 |
|---|---|---|
| HTML | 结构：页面上有哪些内容，谁是标题、谁是段落、谁是按钮 | 房子的墙和房间 |
| CSS | 表现：这些内容长什么样、摆在哪里 | 装修、颜色、家具摆放 |
| JavaScript | 行为：用户操作后发生什么，数据如何变化 | 水电、开关、自动门 |
三者可以各自独立存在。只有 HTML 的页面能读但很朴素；加上 CSS 后视觉成型；再加上 JavaScript 才能响应用户点击、动态更新内容。CSS 不负责逻辑，JavaScript 也不负责“这个按钮应该是蓝色”——分工清楚，维护起来才不会互相打架。
CSS 的基本工作方式：选择器 + 声明块
一条 CSS 规则由两部分组成：
- 选择器：指出“要样式化哪些元素”，比如所有
<p>、class 为card的元素。 - 声明块：用花括号包住若干条声明，每条声明是“属性: 值;”。
p {
color: #333;
font-size: 16px;
}
这段规则的意思是：页面上所有 <p> 段落，文字颜色为深灰，字号 16 像素。浏览器读到后，会把这些样式应用到匹配的元素上。
“层叠”是 CSS 的核心机制：同一个元素可能被多条规则命中，浏览器按来源、优先级（specificity）和书写顺序决定最终用哪条。优先级相同时，后写的覆盖先写的，这也是为什么调整顺序有时能直接改变效果。
三种引入 CSS 的方式
- 外部样式表：把样式写在单独的
.css文件里，用<link>引入。适合正式项目，多个页面共用一套样式，改一处全站生效。
<link rel="stylesheet" href="style.css">
-
内部样式：写在 HTML 的
<style>标签里，只作用于当前页面。适合单页演示或临时调试。 -
行内样式：直接写在元素的
style属性上，只作用于该元素。优先级最高，但难以复用，通常只用于个别动态场景。
<p style="color: red;">这段文字是红色的</p>
选择哪种方式，取决于样式需要被多少页面复用。复用范围越大，越应该放到外部样式表。
一个最小可运行的例子
新建一个 index.html，内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 示例</title>
<style>
body {
font-family: sans-serif;
background: #f5f5f5;
}
.card {
background: white;
padding: 16px;
border-radius: 8px;
max-width: 320px;
margin: 40px auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card h1 {
font-size: 20px;
color: #1a1a1a;
}
</style>
</head>
<body>
<div class="card">
<h1>你好，CSS</h1>
<p>这段文字被样式控制着。</p>
</div>
</body>
</html>
用浏览器打开这个文件，你会看到一张居中的白色卡片，带圆角和阴影。验证方法：把 background: white; 改成 background: yellow; 并刷新，卡片背景立刻变黄，说明样式确实生效。常见卡点：如果没变化，先检查选择器拼写、花括号和分号是否完整——CSS 对语法错误不会报错，只会静默忽略那一条声明。
什么时候需要 CSS，什么时候不需要
- 只是写一段纯文本说明、不关心外观：可以只用 HTML。
- 需要控制排版、配色、响应式布局：必须用 CSS。
- 需要根据用户操作实时改变样式：用 JavaScript 修改元素的 class 或 style，样式规则本身仍写在 CSS 里。
把“长什么样”尽量留在 CSS，“做什么”交给 JavaScript，是前端代码保持可维护的基本习惯。