CSS 样式教程

CSS 是什么

CSS（Cascading Style Sheets，层叠样式表）负责网页的外观：颜色、字体、间距、布局和动画。HTML 决定"有什么"，CSS 决定"长什么样"。

三种引入方式

方式	写法	适用场景
内联样式	`<p style="color: red">`	临时调试
内部样式	`<style> ... </style>`	单页小项目
外部样式	`<link rel="stylesheet" href="style.css">`	正式项目（推荐）

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

CSS 的基本语法是选择器 + 声明块：

/* 选择器 { 属性: 值; } */
h1 {
  color: #6366f1;
  font-size: 32px;
  text-align: center;
}

选择器

选择器决定样式作用在哪些元素上。常用选择器：

选择器	示例	说明
标签	`p { }`	所有段落
类	`.card { }`	所有 class="card" 的元素
ID	`#logo { }`	id="logo" 的元素（唯一）
后代	`.nav a { }`	导航里的所有链接
子代	`ul > li { }`	直接子元素 li
伪类	`a:hover { }`	鼠标悬停时

/* 类选择器是使用频率最高的 */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 悬停效果 */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

💡 优先级

内联样式 > ID > 类/属性 > 标签，同优先级时后写的生效（层叠规则）。

盒子模型

每个元素都是一个"盒子"，由四层组成：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。

.box {
  width: 200px;            /* 内容宽度 */
  padding: 16px;           /* 内容与边框的距离 */
  border: 1px solid #ccc;  /* 边框 */
  margin: 20px;            /* 与其他元素的距离 */
  box-sizing: border-box;  /* 宽度包含 padding 和 border */
}

✅ 最佳实践

全局加上 * { box-sizing: border-box; }，可以避免"宽度算不准"的经典问题。

补充两个常用背景属性：background-color 设置背景色，background-image: linear-gradient(...) 设置渐变背景。

.hero {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #fff;
}

Flex 与 Grid 布局

Flexbox：一维布局

适合导航栏、卡片一行排列、垂直居中这类场景。核心三行：

.flex-row {
  display: flex;            /* 开启弹性布局 */
  justify-content: space-between; /* 主轴：两端对齐 */
  align-items: center;      /* 交叉轴：垂直居中 */
  gap: 12px;                /* 子元素间距 */
}

/* 子元素占满剩余空间 */
.flex-row .main { flex: 1; }

Grid：二维布局

适合卡片网格、整体页面骨架：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

/* 经典左右布局 */
.page {
  display: grid;
  grid-template-columns: 240px 1fr; /* 左 240px，右自适应 */
}

响应式设计

响应式设计让页面在不同屏幕尺寸下都能良好展示。核心工具是媒体查询和相对单位：

/* 默认样式（手机优先） */
.card { width: 100%; }

/* 屏幕宽度 ≥ 768px 时 */
@media (min-width: 768px) {
  .card { width: 48%; }
}

/* 屏幕宽度 ≥ 1024px 时 */
@media (min-width: 1024px) {
  .card { width: 31%; }
}

常用相对单位：

rem：相对根元素字号，适配文字大小
%：相对父容器宽度
vw / vh：相对视口宽/高
clamp(1rem, 3vw, 2rem)：区间内自适应

✅ 建议

先写手机端样式，再用 min-width 媒体查询逐步增强，是主流的"移动优先"写法。

引入 CSS 的三种方式

1. 外部样式表(推荐)

把 CSS 写在独立文件,用 <link> 引入,便于复用和缓存:

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

2. 内��样式表

写在 <style> 标签里,适合单页小项目:

<style>
  body { font-family: sans-serif; }
</style>

3. 内联样式

直接写在标签的 style 属性上,优先级最高但难以维护,尽量少用:

<p style="color: red;">这行是红色的</p>

✅ 最佳实践

生产项目一律使用外部样式表,配合构建工具压缩合并,页面加载更快。

选择器基础

选择器决定样式作用在哪些元素上,是 CSS 最重要的一课:

选择器	写法	示例
标签	`标签名`	`p { }` 所有段落
类	`.类名`	`.card { }` class="card"
ID	`#id`	`#header { }` id="header"
后代	`A B`	`nav a { }` nav 内的所有链接
子元素	`A > B`	`ul > li { }` 直接子级 li
伪类	`:伪类`	`a:hover { }` 鼠标悬停
属性	`[attr]`	`input[type="text"] { }`

/* 组合使用:导航栏里的当前项 */
.nav .item.active {
    background: #f97316;
    color: #fff;
}

⚠️ 注意

ID 选择器页面内必须唯一,且优先级过高,不利于覆盖,能用类选择器就用类选择器。

display 与常见取值

display 决定盒子的外在表现,最常见的三个取值:

取值	行为	典型标签
`block`	独占一行,可设宽高	div、p、h1
`inline`	行内排列,不可设宽高	span、a、strong
`inline-block`	行内排列但可设宽高	img、button

/* 隐藏元素:display:none 不占位;visibility:hidden 占位不可见 */
.hidden { display: none; }

/* 让 a 标签变成按钮样式 */
.btn {
    display: inline-block;
    padding: 8px 20px;
    background: #f97316;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}

position 定位体系

position 控制元素相对于谁定位,有五个取值:

取值	相对谁定位	是否脱离文档流
`static`	默认,无定位	否
`relative`	自己原来的位置	否(占位保留)
`absolute`	最近的已定位祖先	是
`fixed`	浏览器视口	是
`sticky`	滚动时钉住	否

/* 经典用法:父容器 relative + 子元素 absolute 定位 */
.badge-wrap { position: relative; }
.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

/* 吸顶导航 */
.nav { position: sticky; top: 0; }

⚠️ 注意

absolute 会脱离文档流,它的定位基准是最近的 position 非 static 的祖先,忘记给父元素加 relative 是新手最常见的 bug。

容器属性

Flexbox 解决一维布局:把子元素沿主轴排列。给父元素设 display: flex 后,子元素自动变成弹性项:

.container {
    display: flex;            /* 开启弹性布局 */
    flex-direction: row;      /* 主轴方向:row 横向 / column 纵向 */
    justify-content: center;  /* 主轴对齐 */
    align-items: center;      /* 交叉轴对齐 */
    gap: 16px;                /* 子项间距 */
    flex-wrap: wrap;          /* 放不下时换行 */
}

属性	取值示例	作用
`justify-content`	flex-start / center / space-between	主轴对齐
`align-items`	center / stretch / flex-end	交叉轴对齐
`flex-wrap`	nowrap / wrap	是否换行
`gap`	16px	子项间距

✅ 记住这个组合

display:flex + justify-content:center + align-items:center 是"水平垂直居中"的标准写法,再也不用 margin 魔法了。

项目属性

弹性项自身也有控制属性,最常用的是 flex 简写(放大/缩小/基准宽度):

.item {
    flex: 1;              /* 等分剩余空间,最常用 */
}
.item.wide {
    flex: 2;              /* 占两份,其他项各一份 */
}
.item.fixed {
    flex: 0 0 200px;      /* 固定 200px,不伸缩 */
}

其他常用项目属性:

属性	作用
`align-self`	单独覆盖某个项的交叉轴对齐
`order`	调整排列顺序,数值小的在前
`flex-grow`	剩余空间的分配比例
`flex-shrink`	空间不足时的收缩比例

/* 经典圣杯布局:中间自适应,两侧固定 */
.layout { display: flex; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }

实战:导航栏与卡片列表

导航栏

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* logo 左,菜单右 */
    padding: 0 24px;
    height: 56px;
    background: #1f2937;
}
.navbar .menu {
    display: flex;
    gap: 20px;
}
.navbar a { color: #fff; text-decoration: none; }

卡片等分布局

.card-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.card {
    flex: 1 1 240px;          /* 至少 240px,多则等分 */
    min-width: 240px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

💡 提示

flex 布局配合 flex-wrap: wrap + flex: 1 1 最小宽度,就能实现"响应式卡片流",是后台管理系统的万能布局。

媒体查询

媒体查询允许根据视口宽度等条件应用不同的样式,是响应式设计的核心:

/* 默认(手机优先)样式 */
.container { display: block; }

/* 宽度 ≥ 768px(平板) */
@media (min-width: 768px) {
    .container { display: flex; }
}

/* 宽度 ≥ 1024px(桌面) */
@media (min-width: 1024px) {
    .sidebar { display: block; }
}

常见断点参考:

断点	设备
`max-width: 575px`	手机竖屏
`min-width: 768px`	平板
`min-width: 1024px`	桌面

✅ 建议

采用移动优先策略:先写手机样式,再用 min-width 逐步增强,代码更干净。

相对单位与视口

响应式的另一关键是不用固定像素,改用相对单位:

单位	含义
`%`	相对父元素
`em`	相对自身字体大小
`rem`	相对根元素字体大小(默认 16px)
`vw / vh`	视口宽 / 高的 1%
`clamp()`	范围取值:min,首选,max

/* 字号随屏幕缩放但限制范围 */
.title {
    font-size: clamp(24px, 4vw, 48px);
}

/* 图片永远不溢出容器 */
img { max-width: 100%; height: auto; }

⚠️ 注意

不要忘记在 HTML 里加视口 meta 标签,否则手机端会按桌面宽度渲染:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动优先实战

一个典型的响应式页面骨架,从上到下依次增强:

/* 1. 手机:单列,字号偏小 */
body { font-size: 15px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* 2. 平板:两列 */
@media (min-width: 768px) {
    .grid { grid-template-columns: 1fr 1fr; }
    body { font-size: 16px; }
}

/* 3. 桌面:三列 + 更宽松的间距 */
@media (min-width: 1024px) {
    .grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
    .container { max-width: 1200px; margin: 0 auto; }
}

测试响应式的技巧:浏览器开发者工具的设备模拟(DevTools 左上角手机图标),可以快速切换各种屏幕尺寸。

💡 提示

响应式不是"每台设备写一套",而是一套代码 + 灵活的布局和单位,让内容自然流式适应。

第 1 / 15 节

CSS 是什么

三种引入方式

选择器

盒子模型

Flex 与 Grid 布局

Flexbox：一维布局

Grid：二维布局

响应式设计

引入 CSS 的三种方式

1. 外部样式表(推荐)

2. 内���样式表

3. 内联样式

选择器基础

display 与常见取值

position 定位体系

容器属性

项目属性

实战:导航栏与卡片列表

导航栏

卡片等分布局

媒体查询

相对单位与视口

移动优先实战

2. 内��样式表