CODING FACTORY

CSS 教程 / CSS 是什么？它与 HTML 有什么区别？

CSS
创建时间 2026-11-08 最后修改 2026-11-08

CSS（Cascading Style Sheets，层叠样式表）控制 HTML 文档的外观和布局，包括颜色、字体、间距和元素位置。HTML 描述内容及其结构；CSS 决定该结构如何呈现。

HTML 和 CSS 如何分工

想象一下您正在创建一个关于花园的信息页面。“Small Garden”（小花园）是页面上最重要的标题，这在HTML中由h1表示。CSS决定标题是否以绿色显示以及字体大小。仅因为颜色是绿色并不意味着普通段落具有标题的含义。

技术 在 Small Garden 页面中的职责 例子
HTML 指明内容是什么以及其作用 标题是h1，描述是p，链接是a
CSS 指定该元素的视觉表现形式 标题颜色、通知边框和内边距
JavaScript 根据事件处理操作和数据更改 通过按按钮更改预订状态

JavaScript 是一种为网页添加行为的编程语言。CSS 也可以在鼠标悬停时更改形状或显示动画，所以更改屏幕不一定意味着使用了 JavaScript。在这里，我们首先关注内容和外观的分离。

为什么在编写 CSS 之前页面已经有样式

浏览器有默认样式。这就是为什么标题显示较大，段落之间有间距，以及链接会出现下划线，而无需直接编写 CSS。默认字体和边距可能因浏览器和用户设置而异。通过添加 CSS，您可以自定义所需的外观。

将以下 HTML 粘贴到文本编辑器中，保存为 UTF-8 格式的 index.html，然后在浏览器中打开。确保文件名不是 index.html.txt。如果文件扩展名被隐藏，请在编辑器的保存格式和文件属性中检查扩展名。

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

这个片段是文本结构的示例。如果你想立即开始，可以使用下面的完整示例。如果你先阅读标题和说明文字，当更改 CSS 时，就很容易区分实际内容是否发生了变化或者只是外观变化。

阅读选择器、属性和值

h1 {
  color: #087f5b;
}

h1 是选择器，color 是属性，#087f5b 是它的值。属性和值由冒号连接形成声明，例如 color: #087f5b;。六位十六进制颜色表示红色、绿色和蓝色分量。更多细节，请参见 CSS 语法：选择器、声明、注释和错误。

此规则将 HTML 中 h1 元素的文本颜色更改为绿色。它不会翻译句子或添加段落。要仅区分和装饰提示文字，请在 HTML 中添加 class="notice" 并从 CSS 中选择 .notice。点号是 CSS 中的类选择器表示法，在 HTML 的类名中不包含该点号。

有关 CSS 控制网页文档呈现的解释，也可以在 MDN 的 CSS 入门 中找到。

运行完整的小花园示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

当您打开保存的文件时，您会看到浅色背景上的绿色标题，营业时间信息将带有边框和间距。style 元素内的内容是 CSS。下表提供了阅读示例中使用的主要属性的简要说明。

属性 在示例中的作用
color / background-color 分别指定文本颜色和背景颜色。
font-family / line-height 指定字体系列和行高。无单位的 1.7 是行高，等于字体大小的 1.7 倍。
margin / padding margin 是元素边框外的空间；padding 是内容与边框之间的内部空间。
border 同时指定边框的厚度、线型和颜色。1px solid 是一条厚度为 1 像素的实线。
max-width 限制内容区域的最大宽度。如果屏幕较窄，它不一定会占据此值的宽度。

你在此阶段不需要记住每个属性。首先确定选择器匹配的元素，以及每条声明改变了该元素的哪个方面。外部样式表可以让多个页面复用同一套设计。更多详情，请参见 使用内联、内部和外部样式应用 CSS。

改变三个值并比较结果

  1. 将 h1 规则中 color 的值改为 #1d4ed8。如果你保存并重新加载，只有大标题会变成蓝色。游客指南中的 h2 和普通段落的颜色不受此规则影响。
  2. 将 body 中的 line-height 从 1.7 更改为 2。正文行高会更大。通过插入一段超过两行的段落或缩小窗口，你可以更容易地看到差异。
  3. 将 .notice 中的 background-color 替换为 #fff4cc。仅营业时间信息的背景会变为黄色。整个页面的背景在 body 中单独指定，因此保持不变。

不要一次更改所有三个值，每次修改一项后保存并检查。如果结果不同，请检查更改的文件与浏览器中打开的文件是否相同，以及大括号、冒号是否齐全。完成练习后，将三个值重置为原始状态，刷新页面，并与原始屏幕进行比较。在此过程中，关键是保持 HTML 的标题、段落和链接结构。

CSS
同分类其他文章