CSS 教程¶

什么是 CSS？¶

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局。它将样式与 HTML 结构分离，使网页更易于维护和重用。

基本语法¶

选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

示例：

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

引入 CSS 的方式¶

方式	说明	适用场景
外部样式表	`<link rel="stylesheet" href="style.css">`	推荐，多页面共享
内部样式表	`<style>` 标签写在 `<head>` 中	单页面
内联样式	`style="color: red"` 写在标签上	极少使用，优先级最高

选择器¶

基础选择器¶

选择器	示例	说明
元素选择器	`p {}`	选择所有 `<p>` 元素
类选择器	`.class {}`	选择 `class="class"` 的元素
ID 选择器	`#id {}`	选择 `id="id"` 的元素（唯一）
通配选择器	`* {}`	选择所有元素

组合选择器¶

选择器	示例	说明
后代选择器	`div p {}`	选择 div 内所有 p
子代选择器	`div > p {}`	选择 div 的直接子元素 p
相邻兄弟	`h2 + p {}`	紧接 h2 后的第一个 p
通用兄弟	`h2 ~ p {}`	h2 之后的所有 p

伪类与伪元素¶

/* 伪类：元素的状态 */
a:hover { color: red; }        /* 鼠标悬停 */
a:active { color: green; }     /* 鼠标按下 */
input:focus { border-color: blue; }  /* 获取焦点 */
li:first-child { font-weight: bold; } /* 第一个子元素 */
li:nth-child(odd) { background: #f0f0f0; } /* 奇数行 */

/* 伪元素：元素的特定部分 */
p::first-line { font-weight: bold; }  /* 第一行 */
p::before { content: "→ "; }          /* 前插入 */
p::after { content: " ←"; }           /* 后插入 */

盒模型¶

每个 HTML 元素都可以看作一个矩形盒子，由以下部分组成：

┌─────────────────── margin ───────────────────┐
│  ┌──────────────── border ─────────────────┐  │
│  │  ┌────────────── padding ─────────────┐ │  │
│  │  │  ┌────────── content ────────────┐ │ │  │
│  │  │  │                               │ │ │  │
│  │  │  └───────────────────────────────┘ │ │  │
│  │  └────────────────────────────────────┘ │  │
│  └─────────────────────────────────────────┘  │
└───────────────────────────────────────────────┘

盒模型属性：

.box {
    width: 300px;         /* 内容区宽度 */
    height: 200px;        /* 内容区高度 */
    padding: 20px;        /* 内边距 */
    border: 2px solid black;  /* 边框 */
    margin: 10px;         /* 外边距 */
    box-sizing: border-box;  /* width 包含 border + padding */
}

box-sizing 对比： - content-box（默认）：width 只包含内容区 - border-box：width 包含内容区 + padding + border（推荐）

布局方式¶

正常流布局¶

块级元素从上到下排列，行内元素从左到右排列。

Flexbox 布局（一维）¶

Flexbox 是最强大的一维布局模型，适合行或列的排列。

.container {
    display: flex;           /* 开启 Flex 布局 */
    flex-direction: row;     /* 主轴方向：row/column */
    justify-content: center; /* 主轴对齐 */
    align-items: center;     /* 交叉轴对齐 */
    flex-wrap: wrap;         /* 是否换行 */
    gap: 10px;               /* 子元素间距 */
}

.item {
    flex: 1;                 /* 等分剩余空间 */
    align-self: center;      /* 单独对齐方式 */
}

常用 Flexbox 模式：

/* 水平垂直居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 等分布局 */
.equal {
    display: flex;
}
.equal > * {
    flex: 1;
}

/* 底栏固定 */
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content { flex: 1; }

Grid 布局（二维）¶

CSS Grid 是最强大的二维布局模型，适合行和列同时控制的复杂布局。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 三列，比例 1:2:1 */
    grid-template-rows: auto 1fr auto;     /* 三行 */
    gap: 20px;                              /* 间距 */
}

.header {
    grid-column: 1 / -1;   /* 跨所有列 */
}

.sidebar {
    grid-row: 2;           /* 位于第二行 */
}

.main {
    grid-column: 2 / 3;    /* 位于第二列 */
}

Grid 常用写法：

/* 响应式网格：自动填充 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

/* 经典页面布局 */
.page {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
}

响应式设计¶

媒体查询¶

/* 移动端优先 */
.container {
    display: block;
}

/* 平板：>= 768px */
@media (min-width: 768px) {
    .container {
        display: flex;
    }
}

/* 桌面：>= 1024px */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

常用断点¶

设备	断点
手机	< 768px
平板	768px ~ 1024px
桌面	> 1024px

常用样式属性¶

文字与字体¶

.text {
    color: #333;                /* 文字颜色 */
    font-size: 16px;            /* 字体大小 */
    font-weight: bold;          /* 粗细：normal/bold/100~900 */
    font-family: "Microsoft YaHei", sans-serif;  /* 字体 */
    line-height: 1.6;           /* 行高 */
    text-align: center;         /* 对齐 */
    text-decoration: none;      /* 下划线 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);  /* 文字阴影 */
}

背景与边框¶

.box {
    background-color: #f0f0f0;
    background-image: url('bg.png');
    background-size: cover;
    background-position: center;
    border: 1px solid #ccc;
    border-radius: 8px;     /* 圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 阴影 */
}

动画与过渡¶

/* 过渡 */
.button {
    background-color: blue;
    transition: all 0.3s ease;
}
.button:hover {
    background-color: darkblue;
    transform: scale(1.1);
}

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.element {
    animation: fadeIn 0.5s ease-out;
}

Position 定位¶

定位方式	特性
`static`	默认，正常文档流
`relative`	相对自身原来位置偏移，不脱离文档流
`absolute`	脱离文档流，相对最近的非 static 祖先定位
`fixed`	脱离文档流，相对视口定位（固定导航栏）
`sticky`	混合定位，滚动到阈值后固定

.absolute-example {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 完美居中 */
}

.fixed-example {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

综合练习¶

动手实践

使用 Flexbox 和 Grid 实现一个博客页面布局： 1. 顶部固定导航栏 2. 左侧文章列表、右侧侧边栏的两栏布局 3. 底部页脚 4. 卡片网格（使用 Grid，自动适应屏幕宽度） 5. 导航栏悬浮时变色（hover 效果）

学习建议¶

多用 Chrome 开发者工具：查看盒模型、调试布局
Flexbox Froggy：一个趣味游戏帮助学习 Flexbox
Grid Garden：趣味游戏帮助学习 Grid
参考资料：MDN CSS 文档