🎨 CSS 开发教程
本教程由沈阳农业大学 大学生网络信息中心运行部提供，适用于校园网站开发
第一章： CSS 基础
1.1 CSS是什么？
CSS（Cascading Style Sheets，层叠样式表）是一种控制网页样式与布局的语言。它与HTML的关系可以比喻为：
- 📐 HTML - 网页的骨架（结构）
- 🎨 CSS - 网页的皮肤与衣服（样式）
1.2 CSS的作用
| 功能类别 | 具体能力 | 示例 |
|---|---|---|
| 文本样式 | 字体、颜色、边距、行距 | font-size: 16px; |
| 盒子模型 | 大小、排列、边框、背景 | padding: 10px; |
| 布局控制 | 响应式设计、多设备适配 | @media (max-width: 768px) |
| 动画交互 | 过渡效果、动态变换 | transition: all 0.3s; |
1.3 引入CSS的三种方式
方式1：行内样式（不推荐）
<p style="color: red;">红色文字</p>
- ✅ 优点：快速测试
- ❌ 缺点：样式与结构混杂
方式2：内嵌样式（小项目可用）
<head>
<style>
p {
color: red;
}
</style>
</head>
- ✅ 优点：适合简单页面
- ❌ 缺点：样式写在HTML中，不够分离
方式3：外部样式表（推荐）
<!-- HTML文件 -->
<link rel="stylesheet" href="style.css">
/* style.css */
p {
color: red;
}
-✅ 推荐方式，样式与结构分离，维护性强，适合项目开发
提示
- 每个页面使用一个主 CSS 文件，例如 style.css
- 使用类名（class）来控制样式，而不是依赖标签或ID
- 开发过程中可借助浏览器开发者工具（F12）实时查看样式效果
第二章： CSS 选择器
CSS 选择器的作用是选中 HTML 中的元素，让你可以对它们添加样式
2.1 常见基础选择器
① 元素选择器（标签名）
p {
color: #333;
}
- 所有
<p>标签都会变色
② 类选择器（最常用）
<p class="intro">欢迎访问</p>
.intro {
font-size: 18px;
}
- 使用 class 可以对某类元素统一设置样式
③ ID 选择器（只用于唯一元素）
<div id="header"></div>
#header {
background: #f0f0f0;
}
- ID 一般只在某个唯一模块使用，项目中不推荐滥用
2.2 组合选择器
① 后代选择器（空格）
.nav a {
color: blue;
}
- 所有
.nav中的<a>链接变蓝
② 子代选择器（>）
.container > p {
margin: 0;
}
- 只选中
.container的直接子元素<p>
③ 多个选择器一起（逗号）
h1, h2, h3 {
font-weight: bold;
}
2.3 属性选择器
input[type="text"] {
border: 1px solid #ccc;
}
2.4 状态伪类选择器
a:hover {
color: red;
}
input:focus {
outline: none;
}
- 常用于交互样式，例如鼠标悬停、表单焦点等
第三章： 盒模型 + 元素显示模型
这部分是掌握 CSS 布局的核心基础，了解后可以更好地控制大小、边距、对齐等问题
3.1 CSS 盒模型
在 CSS 中，每个元素都被看作一个盒子，包含以下几层结构：
+--------------------------+ | margin | | +------------------+ | | | border | | | | +------------+ | | | | | padding | | | | | | +------+ | | | | | | |content| | | | | | | +------+ | | | | | +------------+ | | | +------------------+ | +--------------------------+
| 属性 | 说明 |
|---|---|
| content | 元素的内容区域（文字、图片等） |
| padding | 内容和边框之间的内边距 |
| border | 边框线 |
| margin | 外边距，用于和其他元素之间的距离 |
示例代码
.box {
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 30px;
}
box-sizing 设置尺寸计算方式
默认情况下，width 和 height 只计算 content 部分。 为了更方便控制尺寸，我们通常统一设置：
* {
box-sizing: border-box;
}
- 所有
padding和border会包含在width/height中，更好算尺寸
可视化调试技巧
- 按 F12 → Elements → 点选任意盒子 → 查看右侧盒模型结构图
3.2 元素的显示类型
| 类型 | 描述 | 示例标签 |
|---|---|---|
| block | 独占一行，可设置宽高 | div, p, section |
| inline | 行内显示，不可设置宽高 | span, a, strong |
| inline-block | 行内显示 + 可设置宽高 | 布局小组件常用 |
示例对比
<div class="box">Block 元素</div>
<span class="inline">Inline 元素</span>
.box {
display: block;
width: 200px;
background: lightblue;
}
.inline {
display: inline;
background: lightcoral;
}
- 若要让一个元素既可设置大小又能在一行排列 → 用
display: inline-block;
小技巧
- 表单元素默认是
inline，可使用display: block;调整布局 - 行内元素加
margin-top/bottom可能不生效 → 改为inline-block - 可以通过
display: none;实现隐藏元素
第四章： 字体，文本，背景
网页中最常见的文字排版样式
4.1 字体相关属性
| 属性 | 作用 | 常用值 |
|---|---|---|
font-size | 字体大小 | 16px、1rem |
font-weight | 字体粗细 | normal、bold、600 |
font-family | 字体类型 | "PingFang SC", "Microsoft YaHei", sans-serif |
4.2 文本样式属性
| 属性 | 作用 | 常用值 |
|---|---|---|
color | 文字颜色 | #333、red |
line-height | 行高 | 1.5（推荐） |
text-align | 文本对齐 | left、center、right |
text-decoration | 文本装饰线 | none（去除链接下划线） |
letter-spacing | 字符间距 | 1px（调整紧凑度） |
4.3 背景相关属性
| 属性 | 作用 | 常用值 | 示例 |
|---|---|---|---|
background-image | 设置背景图片 | url("图片路径") | url("banner.jpg") |
background-size | 控制背景图尺寸 | cover（充满）contain（完整显示）100% 100%（拉伸） | background-size: cover |
background-position | 调整背景图位置 | centertop/bottomleft/rightx% y% | center top20% 50% |
background-repeat | 控制平铺方式 | no-repeatrepeatrepeat-x/repeat-y | no-repeat |
background-attachment | 滚动行为 | scroll（默认）fixed（固定） | fixed |
background | 简写属性 | 任意顺序组合以上属性 | url("bg.jpg") center/cover no-repeat |
4.4 实用代码片段
/* 基础样式 */
body {
font-family: "PingFang SC", sans-serif;
color: #333;
line-height: 1.5;
background: #f5f5f5;
}
/* 标题 */
h1 {
font-size: 2rem;
font-weight: bold;
color: #1e90ff;
}
/* 链接 */
a {
color: #1e90ff;
text-decoration: none;
}
a:hover { text-decoration: underline; }
/* 卡片 */
.card {
background: white;
padding: 1rem;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 响应式图片背景 */
.hero {
background: url("picture.jpg") center/cover;
min-height: 200px;
}
第五章： Flex & Grid 布局
Flex 是一维布局系统，擅长横向或纵向排列元素，非常适合菜单栏、卡片排列、表单布局等。 Grid 是二维布局系统，擅长 同时控制行和列，适合构建复杂布局或固定网格结构
5.1 Flex 弹性布局
启用 Flex 布局
.container {
display: flex;
}
主轴方向：flex-direction
flex-direction: row; /* 默认，水平方向 */
flex-direction: column; /* 垂直方向 */
主轴对齐方式：justify-content
| 属性值 | 含义 |
|---|---|
flex-start | 左对齐（默认值） |
flex-end | 右对齐 |
center | 居中 |
space-between | 两端对齐，元素间等间距 |
space-around | 元素周围间距相等 |
.container {
justify-content: space-between;
}
交叉轴对齐方式：align-items
align-items: stretch; /* 默认，高度拉伸填满容器 */
align-items: center; /* 垂直居中 */
align-items: flex-start; /* 顶部对齐 */
align-items: flex-end; /* 底部对齐 */
子项占比控制：flex
.item {
flex: 1; /* 平均分配空间 */
}
✅ 示例：横向导航栏
<nav class="nav">
<a href="#">首页</a>
<a href="#">课程</a>
<a href="#">联系我们</a>
</nav>
.nav {
display: flex;
justify-content: space-around;
background: #f5f5f5;
padding: 1rem;
}
.nav a {
text-decoration: none;
color: #333;
}
5.2 Grid 网格布局
启用 Grid 布局
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列平均分 */
gap: 1rem;
}
常用语法
.container {
grid-template-rows: auto auto;
grid-template-columns: 200px 1fr 200px;
gap: 20px; /* 行列间距 */
}
✅ 示例：卡片排列
<div class="grid">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.card {
background: #fff;
padding: 1rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
选择建议
| 情况 | 推荐布局 |
|---|---|
| 横向/纵向排列 | Flex |
| 简单响应式卡片排列 | Grid |
| 布局中只有一行或一列变化 | Flex |
| 多列+多行、固定网格 | Grid |
第六章： 响应式设计
响应式设计的目标是：一个页面适配多个设备（手机、平板、电脑等），不需为每种设备写多个页面
6.1 移动优先理念
现代响应式设计推荐：优先针对小屏幕设计样式，再逐步覆盖大屏样式。
/* 默认样式：适用于手机 */
body {
font-size: 16px;
padding: 1rem;
}
/* 平板及以上 */
@media (min-width: 768px) {
body {
font-size: 18px;
padding: 2rem;
}
}
/* 桌面端 */
@media (min-width: 1024px) {
body {
font-size: 20px;
padding: 3rem;
}
}
6.2 媒体查询基础语法
@media (条件) {
/* 仅当条件满足时生效 */
}
常见断点（可自行调整）
| 设备 | 最小宽度断点 |
|---|---|
| 手机 | 默认样式（无需 media） |
| 平板 | @media (min-width: 768px) |
| 桌面 | @media (min-width: 1024px) |
| 大屏 | @media (min-width: 1280px) |
🔧 示例：两列布局在手机上变成单列
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 2fr;
}
}
🧩 示例：隐藏菜单（移动端折叠）
.menu {
display: none;
}
@media (min-width: 768px) {
.menu {
display: block;
}
}
🔘 视口单位
.header {
height: 100vh; /* 全屏高度 */
width: 100vw; /* 全屏宽度 */
font-size: calc(16px + 1vw); /* 动态字体 */
}
🧪 动手练习：实现简洁卡片信息块
请编写 HTML + CSS，完成以下效果（响应式建议使用 Flex 实现）：
要求：
- 容器
.card宽度不固定，高度自适应 - 内边距 20px，圆角 8px，阴影不突兀
- 标题加粗，副标题为灰色小字
- 鼠标悬停时，卡片背景稍微变亮，阴影增强
- 整体风格参考组件化写法，类命名语义化