CSS 简介

在动手写第一行 CSS 之前,我们先搞清楚几个根本问题:CSS 到底是什么?为什么需要它?它和 HTML 是什么关系?它的"层叠"两个字又是什么意思?理解了这些,后面的语法学习会顺畅得多。

CSS 是什么?

CSS 全称 Cascading Style Sheets(层叠样式表)。它是一种专门用来描述网页"长什么样"的语言——用什么颜色、多大字号、多宽多高、摆在什么位置、要不要圆角阴影,全都由 CSS 控制。

如果把网页比作一个人:HTML 是骨架和器官,CSS 是皮肤、衣服和妆容。同一个 HTML 结构,换一套 CSS,观感可以完全不同——同样的内容能做出极简、科技、复古、可爱等截然不同的风格。这也是为什么前端工程师常说"HTML 决定是什么,CSS 决定长什么样"。

CSS 简史:从"被嫌弃"到"网页的灵魂"

CSS 诞生于 1996 年,由 Håkon Wium Lie 和 Bert Bos 在 CERN(欧洲核子研究中心)提出。当时的网页几乎只有文字和图片,样式靠 HTML 标签的属性硬写(比如下面这种),代码又乱又难维护。

<!-- 早期 HTML4 用属性直接写样式(已废弃) -->
<font color="red" size="5">重要通知</font>
<table bgcolor="#f0f0f0" border="1">
  <tr><td>内容</td></tr>
</table>

<!-- 现代 HTML 只关心结构和语义,样式交给 CSS -->
<p class="notice">重要通知</p>

于是人们设计出 CSS,把"样式"从"结构"里彻底抽离出来。CSS 的版本演进大致是:

今天我们说的"学 CSS",本质上是在学 CSS3 的各个模块。规范在持续更新,新特性(如容器查询、子网格、has 选择器)还在不断加入。

为什么需要 CSS?三大核心理由

"层叠"两个字是什么意思?

CSS 名字里的 Cascading(层叠)是它最核心的设计。意思是:多条样式规则可以同时作用到同一个元素,浏览器按一套明确的规则决定最终用哪一条。这套规则主要看三样东西:

看个直观的例子,感受"层叠":

<style>
  p { color: black; }      /* 规则 1:所有段落黑色 */
  .note { color: blue; }   /* 规则 2:带 note 类的蓝色 */
  #hot { color: red; }     /* 规则 3:id 为 hot 的红色 */
</style>

<!-- 这个段落会显示什么颜色? -->
<p class="note" id="hot">三种规则都作用到我</p>
<!-- 答案:红色。因为 ID 优先级最高 -->

这个段落被三条规则同时作用:标签选择器说黑色,类选择器说蓝色,ID 选择器说红色。最终显示红色,因为 ID 优先级最高。这就是"层叠"——多条规则叠加,按优先级仲裁。后续讲选择器的章节会详细讲优先级算法。

先写第一段 CSS

说了这么多概念,先看一眼真正的 CSS 长什么样。下面这段把标题改成蓝色居中,把段落文字改成深灰:

/* 把所有 h1 标题变成蓝色,居中显示 */
h1 {
  color: #4f8cff;
  text-align: center;
}

/* 把所有段落文字变深灰 */
p {
  color: #333;
  line-height: 1.6;
}

语法非常简单:选择器 + 一对花括号,括号里写"属性:值"。不懂没关系,下一篇会详细讲。这里你只需要感受:CSS 就是这么直观的东西。

CSS 能做什么?

现代 CSS 能做的事远超大部分人想象。除了基础的改颜色字号,它还能:

该不该学 CSS?

如果你的方向是前端开发、全栈、UI 设计、甚至博客作者,CSS 几乎是必修课。学完本系列,你将能独立把任何设计稿还原成网页、做出自适应多端的页面、构建可切换主题的样式系统。

一个好消息是:CSS 不像编程语言那样需要逻辑思维,它更像是"调参"——改一改属性值,刷新看效果,反复迭代。门槛不高,但上限很高,值得长期投入。

← 返回 CSS 教程目录

下一篇 CSS 语法与引入方式 →

✈️💬