欢迎学习网站设计：使用样式表 (CSS)

你好，未来的网页设计师们！本章将带你告别枯燥的黑白文档，让你的网站变身为精美、专业的网页。
我们将跳出基础结构（HTML 内容层），专注于表现层 (Presentation Layer)，即控制网页外观的一切要素。

为什么要学习这个？ 使用样式表 (CSS) 可以确保整个网站风格统一，节省大量时间，并使未来的修改变得简单快捷！这就像是一个建筑项目：你是愿意给酒店的每一个房间单独刷漆，还是只设置一套统一的主色调应用到整栋大楼呢？

什么是层叠样式表 (CSS)？

CSS 代表层叠样式表 (Cascading Style Sheets)。它们是用来描述 HTML 文档呈现方式（外观和格式）的语言。

  • 目的： 将内容（页面上有什么，由 HTML 定义）与表现（它看起来怎么样，由 CSS 定义）分离开来。
  • 表现层： CSS 完全运行在网页开发的表现层。
  • 一致性： 如果你需要修改 50 个页面中所有一级标题 (<h1>) 的字号，你只需要修改 CSS 文件中的一行代码，而不是去修改 50 个独立的 HTML 文件。
快速类比：HTML 与 CSS

想象一下人体：
HTML 是骨骼和器官（结构和内容）。
CSS 是衣服、化妆和发型（表现和风格）。

样式表的类型与层叠层级

应用样式的方法有几种，但在 IGCSE 考试中，我们主要关注两种：外部（链接）样式表和内联样式属性。

1. 链接（外部）样式表

这些是保存为层叠样式表格式（以 .css 结尾）的独立文件。
它们包含了整个网站（或特定页面）的所有样式规则，并被链接 (attached) 到 HTML 文档中。

  • 创建： 你必须以层叠样式表格式保存样式（例如 styles.css）。
  • 链接： 使用 <link> 标签将它们链接到 HTML 页面的 <head> 部分中。
  • 文件路径： 链接外部样式表时，必须使用相对路径（例如 "../styles/main.css"）。这是因为绝对路径（以 C:/ 或 D:/ 开头）在网站上传到服务器后会失效。

2. 内联样式属性

这些是直接写在特定 HTML 标签内部的样式，使用的是 style 属性。
示例：<p style="color: blue;">这段文字是蓝色的。</p>

样式的层级（层叠）

“层叠”一词意味着 CSS 规则会向下流动，并且某些规则可以覆盖其他规则。这就是多个链接样式表和内联样式的层级关系。

当冲突发生时（例如两条不同的规则试图定义同一个标题的样式）：

  1. 内联样式属性的优先级最高。它们直接应用于元素，因此会覆盖其他所有样式。（这是最严格的“老板”。）
  2. 外部样式表（链接样式表）紧随其后。如果链接了多个外部样式表，通常在 <head> 部分中最后链接的样式表具有更高的优先权。（遵循“后来居上”原则。）

关键总结： 内联样式通常仅用于特定的、唯一的覆盖需求，而外部样式表用于处理整体设计的统一性。

样式、类与标签

CSS 允许你通过两种主要方法应用格式：直接定位 HTML 元素（样式）或创建可重用的自定义属性（类）。

1. 定义通用样式（标签选择器）

样式 (Style) 会自动定位特定 HTML 标签的所有实例。

  • 你将创建外部样式来为网页中的标签设置格式，包括 h1, h2, h3, p, li 等标签。
  • 如果你定义了 h1 {color: red;}，页面上所有的 <h1> 都将显示为红色。

2. 定义类 (Class)

类 (Class)（使用点号定义，例如 .warning）是一种自定义样式，你可以将其应用于任何 HTML 元素（<h1>, <p>, <div> 等）。

  • 类是为了实现可重用的、非标准格式而创建的。
  • 要应用类，请在 HTML 标签中使用 class 属性。示例：<p class="warning">...</p>。
  • 你必须能够将类应用到网页中的元素上。

样式与类的区别： 样式（标签选择器）自动定位所有特定类型的元素（例如所有的 <p> 标签）。而类是一个自定义的、可重用的名称，仅在 HTML 中显式调用时才会应用。

你必须掌握的核心 CSS 属性

你需要能够创建通用的外部样式和内联样式属性，主要涉及以下几个方面：

1. 字体属性

这些属性控制文本的外观。你必须能够指定字体属性，包括：

  • 字体族 (Font Family)： 具体的字体类型（例如 Arial, 'Times New Roman', Sans-serif）。
  • 大小 (Size)： 以磅 (pt) 或像素 (px) 为单位。
  • 颜色 (Colour)： 使用颜色名称（red）或十六进制代码（#FF0000）。
  • 对齐 (Alignment)： 左对齐、右对齐、居中、两端对齐。
  • 增强 (Styling)： 将文字设置为粗体、斜体或下划线（虽然下划线通常通过文本修饰属性完成，但你必须了解其概念）。

2. 背景属性

这些属性控制内容背后的外观。

  • 背景颜色 (Background Colour)： 设置元素（例如标题或整个网页主体）背后的颜色。
  • 背景图片 (Background Images)： 将图片设置为元素的背景。

3. 表格属性

表格（包括 table, table row, table header, and table data 元素）需要特定的样式才能看起来既专业又清晰。

你必须能够定义包括以下属性：

  • 大小： 设置宽度和高度（使用像素或百分比值）。
  • 背景颜色： 为单元格或整个表格着色。
  • 对齐：
    - 水平对齐： 左对齐、右对齐、居中。
    - 垂直对齐： 顶部对齐、中间对齐、底部对齐。
  • 间距与内边距：
    - 内边距 (Padding)： 单元格内部的空间，即内容与单元格边框之间的距离。
    - 间距 (Spacing)： 相邻单元格之间的距离。
  • 边框：
    - 颜色和粗细。
    - 可见/不可见： 允许你显示或隐藏网格线。
    - 折叠 (Collapsed)： 使边框看起来整洁的标准技术（将相邻单元格的边框合并为一条线）。
✅ 常见错误警示！(内边距 Padding vs. 间距 Spacing)

学生经常混淆表格中的 Padding 和 Spacing。
Padding 会将内容从单元格的内边缘推开。
Spacing 会将单元格从彼此之间推开（就像表格单元格的外边距一样）。

使用样式表文件

在实际操作中，你通常会获得一个样式表文件或被要求创建一个。

1. 保存样式表

确保你的样式文件正确保存为层叠样式表格式（.css 扩展名）。这会告知网页浏览器，该文件包含的是表现规则，而非 HTML 内容。

2. 使用相对文件路径

正如前面所讨论的，当你链接外部样式表到 HTML 文件时，必须使用相对文件路径。

  • 为什么？ 相对路径描述了 CSS 文件相对于 HTML 文件的位置（例如，“向上找一层文件夹，然后进入 'styles' 文件夹”）。这确保了无论网站托管在哪里，链接都能正常工作。

3. 注释

养成在外部样式表中添加注释的良好习惯。

  • 注释解释了代码各部分的功能。这对自己以及后续可能编辑该文件的其他开发人员都非常有帮助。
    示例：/* 本部分用于格式化所有主标题标签 */
  • 注释会被网页浏览器忽略；它们不会显示在网页上。

💪 样式表学习要点总结

1. CSS（表现层）处理格式和样式。
2. 层级：内联样式会覆盖外部样式。
3. 样式 vs. 类：样式定位所有特定的标签（h1, p）。类是自定义的、可重用的名称（.special）。
4. 基础属性：掌握字体控制、背景颜色/图片，以及所有特定的表格属性（边框折叠、内边距、间距、对齐）。
5. 文件管理：始终使用相对文件路径并保存为 .css。