Skip to content

CSS

学习 CSS——控制网页外观的语言，从颜色、字体到布局。

你将学到

  • CSS 是什么、如何为 HTML 添加样式
  • 选择器如何定位要美化的元素
  • 盒模型——margin、border、padding、content
  • 如何用 Flexbox 做布局

概念讲解

CSS

CSS（Cascading Style Sheets，层叠样式表）控制网页的外观。HTML 提供结构，CSS 决定这结构长什么样——颜色、字体、间距、布局、动画。

选择器

选择器指定要美化哪些 HTML 元素。声明块列出属性和值：

h1 {
  color: #2563eb;
  font-size: 2rem;
}

.button {
  background: blue;
  padding: 10px 20px;
}
  • h1 —— 元素选择器（所有 <h1> 标签）。
  • .button —— 类选择器（带 class="button" 的元素）。
  • #nav —— id 选择器（id="nav" 的元素）。

盒模型

每个元素都是一个矩形盒子，分四层：

  1. Content —— 文本或图片本身。
  2. Padding —— 边框内、内容外的空间。
  3. Border —— 盒子边线。
  4. Margin —— 边框外、推开其他元素的空间。

理解盒模型对处理间距至关重要。元素"挤"在一起或对不齐，多半是盒模型在作怪。

Flexbox

Flexbox 是现代排列元素的方式（成行或成列）。给容器加 display: flex，子元素就成了可对齐、可分配的 flex 项：

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  gap: 16px;                /* 项与项之间的间距 */
}

Flexbox 取代了旧的 float 布局，是每个 Web 开发者应最先学的布局工具。

层叠

"层叠"意味着多条规则可作用于同一元素。冲突时，CSS 按特异性（选择器有多精确）和源顺序（后写的胜出）裁决。这就是为什么你的样式有时不生效——别处有更具体的规则覆盖了它。

示例代码

              /* 用盒模型和 flexbox 美化的卡片组件 */
.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;          /* 内部空间 */
  margin: 16px 0;         /* 外部空间 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-title {
  color: #2563eb;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;              /* 去掉默认外边距 */
}

卡片用 padding 留内部空间、margin 留外部间隔。header 用 flexbox 把标题和操作按钮推到两端。

动手试一试

  • SVG Optimizer

    SVG 用 CSS 美化。优化一个 SVG 并查看其中的 CSS 属性。

  • Image Color Picker

    从图片取色用于你的 CSS——拿到精确的十六进制值。

常见错误

错误写法

用内联样式（style='...'）而非类。

正确做法

把样式放进 .css 文件用类选择器。内联样式难维护、无法缓存，还会以令人困惑的方式覆盖样式表。

错误写法

混淆 margin（外部空间）与 padding（内部空间）。

正确做法

padding 在边框内加空间，扩大可点击区域；margin 在外部加空间，推开邻居。点击目标用 padding，元素间隔用 margin。

相关资源

相关代码片段

相关速查表

练习 CSS

1 个练习

练习 CSS

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误