CSS 基础

这一课你将能做到

1. 使用选择器（元素、类、ID、属性、后代、组合器）精确选中页面元素
2. 理解层叠、继承和特异性的计算规则，能预测样式冲突时的最终结果
3. 使用 CSS 自定义属性（变量）管理颜色、间距等设计令牌，写出可维护的样式代码

为什么要学

HTML 搭好了骨架，CSS 负责让页面「好看」。但 CSS 不是简单的「键值对装饰语言」——它的核心机制是层叠（Cascading），即当多个规则同时作用于一个元素时，浏览器如何决定哪个生效。不理解层叠、继承和特异性，你会在「为什么我的样式不生效」「为什么改了这里那里也变了」的问题中反复挣扎。

CodeForge 的课程卡片列表有统一的品牌色、间距和圆角，这些值在几十个地方重复出现。使用 CSS 自定义属性（--primary: #2563eb）可以把这些值集中管理，改一处全局生效，避免「漏改一个地方导致颜色不一致」的尴尬。

先建立图像

浏览器如何决定元素最终样式？

1. 来源：浏览器默认样式 < 用户样式 < 作者样式（你的 CSS）< !important
2. 层叠：后写的覆盖先写的（同优先级、同特异性时）
3. 特异性：行内 > ID > 类/属性/伪类 > 元素/伪元素
4. 继承：部分属性（如 color、font-family）自动继承父元素
          部分属性（如 margin、padding）不继承

跟着做

步骤 1：选择器类型与用法

创建 css-intro.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 基础练习</title>
  <style>
    /* 元素选择器 */
    p { line-height: 1.6; }

    /* 类选择器 */
    .card { background: white; border-radius: 12px; padding: 1.5rem; }

    /* ID 选择器 */
    #hero { text-align: center; padding: 3rem 1rem; }

    /* 后代选择器：nav 里面的所有 a */
    nav a { color: #334155; text-decoration: none; }

    /* 子代选择器：ul 的直接子元素 li */
    ul > li { margin-bottom: 0.5rem; }

    /* 相邻兄弟选择器：紧跟 h2 后面的第一个 p */
    h2 + p { color: #64748b; font-size: 0.9375rem; }

    /* 通用兄弟选择器：h2 后面的所有 p */
    h2 ~ p { margin-top: 0.5rem; }

    /* 属性选择器 */
    input[type="email"] { border: 1px solid #cbd5e1; }
    a[href^="https"] { color: #2563eb; } /* 以 https 开头 */
    a[href$=".pdf"] { color: #dc2626; }   /* 以 .pdf 结尾 */

    /* 伪类 */
    a:hover { text-decoration: underline; }
    button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
    li:first-child { font-weight: 600; }

    /* 伪元素 */
    h1::after {
      content: "";
      display: block;
      width: 60px;
      height: 4px;
      background: #2563eb;
      margin-top: 0.75rem;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/courses">课程</a></li>
      <li><a href="https://example.com">外部链接</a></li>
    </ul>
  </nav>

  <section id="hero">
    <h1>CSS 基础精讲</h1>
    <p>掌握选择器、层叠与现代样式管理。</p>
  </section>

  <section class="card">
    <h2>课程特色</h2>
    <p>实战驱动，每课都有可运行代码。</p>
    <p>覆盖 Flexbox、Grid、响应式设计。</p>
  </section>

  <form>
    <input type="email" placeholder="邮箱">
    <input type="password" placeholder="密码">
  </form>
</body>
</html>