正在加载...

CSS 简介

纯 HTML 可以显示文字和链接，但在你控制颜色、间距和布局之前，页面看起来并不完整。CSS 正是把结构化标记变成有设计感页面的语言。

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是为 HTML 文档添加样式的标准语言。你编写规则告诉浏览器元素应如何呈现：文字颜色、字体、外边距、背景、布局等。HTML 回答「这是什么内容？」CSS 回答「它应如何呈现？」

HTML 与 CSS 协同工作

把 HTML 想成页面骨架，把 CSS 想成服装与润色。你仍需要扎实的 HTML——标题、段落、链接与地标——这样 CSS 才有有意义的元素可样式化。本课程假定你已掌握基础 HTML。

📊 HTML 与 CSS 的角色

层级 主要职责 典型问题
HTML 结构与含义 这是标题、段落还是链接？
CSS 呈现与布局 什么颜色、尺寸、间距与排列？
JavaScript（稍后） 行为与交互 用户点击时会发生什么？

你将在后续课程学习 JavaScript。现在请保持清晰分工：结构在 HTML，外观在 CSS。

初识 CSS 规则

一条 CSS 规则包含选择器（样式化什么）与声明（如何样式化）。声明放在花括号内，使用属性和值。

一条简单规则

css
CSS Code 
h1 {
color: navy;
font-size: 2rem;
}

这条规则做什么

  • h1 是选择器——它选中每个 h1 元素
  • color: navy; 设置文字颜色
  • font-size: 2rem; 设置标题大小
  • 每条声明以分号结束
    你将在后续课深入学习选择器与单位。这里只需看清规则形态。

在页面上看见 CSS

浏览器把 CSS 规则应用到匹配的 HTML 元素。下面的短页面使用内部 <style> 块，让你在一个文件中同时看到 HTML 与 CSS。后续课会讲外部样式表及其他添加 CSS 的方式。

带 style 块的 HTML

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

发生了什么变化

没有 <style> 规则时，页面使用浏览器默认外观。有了 CSS，背景更柔和，标题变为深蓝，段落获得更易读的行距。相同的 HTML 内容——不同的呈现。

为什么「cascading」重要（预览）

CSS 中的「Cascading」表示样式可来自多处，浏览器用层叠与优先级（specificity）决定哪条规则胜出。你还不需要完整算法。记住这一点：多条规则可指向同一元素，而 CSS 有清晰系统来确定最终外观。后续关于层叠与优先级的课会把它讲实用。

自己动手试

  1. 创建名为 intro.html 的文件。
  2. 粘贴带 style 的 HTML 示例，保存并用浏览器打开。
  3. 把 h1 规则中的 color: #1a365d; 改为 color: teal;，保存并刷新。
  4. 确认标题颜色已更新。若无变化，检查是否已保存以及是否刷新了正确标签页。

常见错误

  • 指望 CSS 创建页面结构——用 HTML 元素做标题、列表和链接；再用 CSS 样式化它们
  • 没有选择器或花括号就写属性名，导致浏览器忽略声明
  • 声明后忘记分号，可能破坏同一规则中的下一条属性
  • 只把可见内容写在 CSS 里——CSS 样式化内容；它不能替代 HTML 文本

小结

  • CSS 为 HTML 页面添加样式：颜色、字体、间距、布局与呈现
  • HTML 组织内容结构；CSS 控制其外观
  • 一条 CSS 规则把选择器与 { } 内的属性/值声明配对
  • 可从 <style> 块开始，再过渡到外部样式表
  • Cascading 表示多条规则可能同时适用；后续课解释谁胜出
  • 通过编辑小规则并刷新浏览器来练习

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程