CSS

这一课你将能做到

1. 用选择器选中页面元素并设置样式
2. 理解盒模型（content、padding、border、margin）
3. 用 Flexbox 实现常见布局

为什么要学

HTML 搭好骨架后，页面是「裸奔」的——黑字白底、左对齐、无间距。CSS 负责让页面好看：颜色、字体、间距、布局、动画。

人话：CSS 是「装修队」，把毛坯房变成精修房。

先建立图像

/* 选择器 { 属性: 值; } */
h1 {
    color: #2563eb;      /* 文字颜色 */
    font-size: 24px;     /* 字体大小 */
    margin-bottom: 16px; /* 下外边距 */
}

浏览器解析后：

元素 <h1> 被选中
  → 应用 color: 蓝色
  → 应用 font-size: 24px
  → 应用 margin-bottom: 16px

跟着做

步骤 1：三种引入方式

<!-- 1. 内联样式（不推荐） -->
<p style="color: red;">红色文字</p>

<!-- 2. 内部样式表 -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>

<!-- 3. 外部样式表（推荐） -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

外部样式表最常用，便于维护和缓存。

步骤 2：选择器

/* 元素选择器 */
p { color: #333; }

/* 类选择器（最常用） */
.btn { padding: 8px 16px; }
.btn-primary { background: #2563eb; }

/* ID 选择器（唯一） */
#header { height: 64px; }

/* 后代选择器 */
.card p { line-height: 1.6; }

/* 子元素选择器 */
.list > li { margin-bottom: 8px; }

/* 伪类 */
a:hover { color: #2563eb; }
input:focus { border-color: #2563eb; }

步骤 3：盒模型

.box {
    width: 200px;           /* 内容宽度 */
    padding: 16px;          /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    margin: 8px;            /* 外边距 */
}

实际占用宽度 = 200 + 16×2 + 1×2 + 8×2 = 250px

/* 推荐：border-box 让 width 包含 padding 和 border */
* {
    box-sizing: border-box;
}

步骤 4：Flexbox 布局（现代布局）

/* 水平排列，间距均匀 */
.nav {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;            /* 垂直居中 */
    gap: 16px;                      /* 元素间距 */
}

/* 卡片网格 */
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.card {
    flex: 1 1 300px; /* 最小 300px，可伸缩 */
}

步骤 5：实战——课程卡片

.course-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.course-title {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}
.course-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}