Python Space

Appearance

CSS ​

如果说 HTML 负责“页面里有什么”，那么 CSS 负责“页面长什么样”。

只写 HTML 的页面当然也能显示，但通常会很朴素，甚至有点难看。真正让页面变得整洁、易读、层次清楚、有视觉风格的，是 CSS。

所以你学 CSS 的重点，不是死记硬背一堆属性，而是理解：

  • 样式写给谁
  • 样式会产生什么视觉效果
  • 页面里的空间、大小、位置到底是怎么控制的

本节目标 ​

  • 理解 CSS 的作用
  • 理解样式规则的基本写法
  • 学会使用选择器选中元素
  • 学会设置文字、颜色、背景、边框、间距
  • 理解盒模型
  • 理解常见布局与定位
  • 能独立把一个简单 HTML 页面美化出来

什么是 CSS ​

CSS 的全称是 Cascading Style Sheets，中文一般叫“层叠样式表”。

你可以先把它简单理解成：专门负责网页外观和布局的规则系统。

例如：

  • 字体大小
  • 文字颜色
  • 背景颜色
  • 边框样式
  • 内容间距
  • 元素位置

这些都属于 CSS 的职责。

CSS 的基本写法 ​

先看最简单的例子：

css
h1 {
  color: blue;
  font-size: 32px;
}

这段代码的意思是：

  • 选中页面里的所有 h1
  • 把文字颜色设置为蓝色
  • 把字号设置为 32px

一条 CSS 规则通常由两部分组成：

  1. 选择器
  2. 声明块

选择器和声明块 ​

选择器 ​

选择器负责回答一个问题：

“这段样式到底给谁用？”

例如：

css
h1

它表示选中所有 h1 标签。

声明块 ​

声明块写在花括号里，用来描述具体样式。

css
{
  color: blue;
  font-size: 32px;
}

每一条样式通常写成：

css
属性名: 属性值;

例如：

css
color: red;

CSS 写在哪里 ​

CSS 常见有三种写法。

1. 行内样式 ​

html
<h1 style="color: red;">欢迎学习 CSS</h1>

优点是直接、简单。
缺点是结构和样式混在一起，不适合正式项目。

2. 内部样式表 ​

html
<style>
  h1 {
    color: red;
  }
</style>

这种写法通常放在 HTML 的 head 里，适合小页面练习。

3. 外部样式表 ​

html
<link rel="stylesheet" href="style.css">

这是正式项目中最常用的写法。样式写在独立的 style.css 文件里，更容易维护。

常见选择器 ​

标签选择器 ​

css
p {
  color: red;
}

表示选中所有 p 标签。

class 选择器 ​

css
.title {
  color: green;
}

对应 HTML：

html
<h1 class="title">页面标题</h1>

class 是最常用的选择方式之一，因为它灵活且可复用。

id 选择器 ​

css
#box {
  width: 300px;
}

对应 HTML：

html
<div id="box"></div>

id 通常用于页面中唯一的元素。

后代选择器 ​

css
.card p {
  color: #666;
}

表示：选中 .card 内部所有的 p 标签。

多个选择器并列 ​

css
h1, h2, h3 {
  color: #1d4ed8;
}

表示：同时给 h1、h2、h3 应用同一套样式。

文字相关样式 ​

文字是页面里最常见的内容，所以这部分一定要熟。

字号 ​

css
font-size: 16px;

字体粗细 ​

css
font-weight: bold;

字体 ​

css
font-family: "Microsoft YaHei", sans-serif;

文字颜色 ​

css
color: #333;

行高 ​

css
line-height: 1.8;

对齐方式 ​

css
text-align: center;

颜色和背景 ​

背景颜色 ​

css
background-color: #f5f5f5;

背景图片 ​

css
background-image: url("bg.png");

背景不重复 ​

css
background-repeat: no-repeat;

背景位置 ​

css
background-position: center;

边框和圆角 ​

边框 ​

css
border: 1px solid #ddd;

这条规则里包含三部分：

  • 粗细：1px
  • 样式：solid
  • 颜色：#ddd

圆角 ​

css
border-radius: 12px;

阴影 ​

css
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

这可以让卡片、按钮、面板更有层次感。

宽高 ​

css
width: 300px;
height: 200px;

你也会经常看到：

css
max-width: 800px;
min-height: 100px;

它们分别表示：

  • 最大宽度
  • 最小高度

盒模型 ​

盒模型是 CSS 最核心的基础之一。

你可以把页面中的每个元素都想象成一个盒子。这个盒子由四层组成：

  1. content：内容区域
  2. padding：内边距
  3. border：边框
  4. margin：外边距

例如：

css
.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 30px;
}

怎么理解这四层 ​

  • 内容区：真正放文字和图片的地方
  • 内边距：内容和边框之间的空白
  • 边框：盒子的边界
  • 外边距：盒子和其他元素之间的距离

为什么很多人学 CSS 会乱 ​

因为很多布局问题，本质上都不是“样式没生效”，而是你没有分清：

  • 空隙是 padding
  • 还是 margin
  • 元素大小是内容宽高
  • 还是加上边框和内边距后的整体尺寸

padding 和 margin 的区别 ​

padding ​

控制内容和边框之间的距离。

css
padding: 20px;

margin ​

控制元素和外部其他元素之间的距离。

css
margin: 20px;

一个简单理解方式：

  • padding 是“盒子内部留白”
  • margin 是“盒子外部留白”

display：元素如何显示 ​

block ​

块级元素，通常独占一行。

css
display: block;

inline ​

行内元素，不会独占一行。

css
display: inline;

inline-block ​

既可以和其他元素排在一行，又可以设置宽高。

css
display: inline-block;

none ​

隐藏元素。

css
display: none;

常见布局方式 ​

1. 普通文档流 ​

默认情况下，块级元素会从上到下排列，行内元素会从左到右排列。

对于很多简单页面，这已经够用了。

2. 浮动 float ​

css
float: left;

早期布局常用浮动做左右排版，但现在已经不是首选。不过你还是要知道它的存在，因为很多旧项目里能看到。

3. 定位 position ​

常见值有：

  • static
  • relative
  • absolute
  • fixed

相对定位 ​

css
position: relative;
top: 10px;
left: 20px;

表示相对自己原来的位置进行偏移。

绝对定位 ​

css
position: absolute;
top: 0;
right: 0;

通常用于把元素精确放到某个位置。

固定定位 ​

css
position: fixed;
bottom: 20px;
right: 20px;

常见于“返回顶部”按钮、悬浮客服按钮。

一个完整小案例：课程卡片 ​

先写 HTML：

html
<div class="card">
  <h2>Python 学习空间</h2>
  <p>适合零基础学习者系统入门 Python、数据库、Django 和爬虫。</p>
  <a href="#">开始学习</a>
</div>

再写 CSS：

css
.card {
  width: 360px;
  padding: 24px;
  margin: 40px auto;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.card h2 {
  margin-bottom: 12px;
  color: #1d4ed8;
  font-size: 24px;
}

.card p {
  margin-bottom: 16px;
  color: #4b5563;
  line-height: 1.8;
}

.card a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #2563eb;
  color: #fff;
  text-decoration: none;
}

这个案例里，你已经用到了：

  • 选择器
  • 宽度
  • 边框
  • 圆角
  • 外边距
  • 内边距
  • 阴影
  • 字体颜色
  • 按钮样式

这已经是一个接近真实页面模块的例子了。

常见错误 ​

1. 选择器写对了，但没选中目标 ​

例如你写了：

css
.title {
  color: red;
}

但 HTML 没有：

html
class="title"

样式当然不会生效。

2. 把 margin 和 padding 搞混 ​

这是最常见的布局错误之一。

3. 给行内元素直接设置宽高，却发现没效果 ​

有些行内元素默认不适合直接设置宽高，此时通常要改成：

css
display: inline-block;

4. 样式写了，但浏览器没变化 ​

要检查：

  • CSS 文件有没有正确引入
  • 选择器是否选中元素
  • 属性名有没有写错
  • 分号有没有漏掉

练习题 ​

练习 1 ​

给一个 HTML 页面添加：

  • 标题颜色
  • 正文字号
  • 页面背景色

练习 2 ​

写一个卡片模块，包含：

  • 标题
  • 说明文字
  • 按钮

并设置边框、圆角、阴影。

练习 3 ​

练习 margin 和 padding 的区别：

  • 给卡片外面留 30px 间距
  • 给卡片内部文字和边框之间留 20px 间距

练习 4 ​

写一个“课程列表”区域，让三个卡片上下排列，并保持统一间距。

练习 5 ​

尝试用 position: fixed 做一个固定在右下角的按钮。

本节小结 ​

CSS 的核心任务，是让 HTML 结构真正变成一个可读、好看、层次清晰的页面。

你这一节最重要的收获应该是：

  • 会写 CSS 基本规则
  • 理解常见选择器
  • 会控制文字、颜色、边框、背景和间距
  • 理解盒模型
  • 知道布局和定位的基本思路

只要这些基础打牢，后面你做页面、看 Django 模板、分析网页结构时，都会轻松很多。

Built with VitePress.

Copyright © 2026