CSS基础教程（四）创建样式表：别让页面再“裸奔”！CSS魔法手册：从入门到像素级掌控，附代码罐头一键开瓢！-优快云博客

引言：当HTML遇见CSS——一场命中注定的“包办婚姻”

想象一下这样一个场景：HTML是一位才华横溢的结构工程师，它用 <div>、<p>、<h1> 等砖瓦，一丝不苟地搭建起一栋网页大楼的承重墙和基本框架。这大楼结构坚固，功能齐全，但有一个致命问题——它丑！它就像一个毛坯房，光秃秃的墙壁，毫无美感的布局，所有内容都挤在一起，用户体验？不存在的。

就在这时，我们的超级英雄——CSS（Cascading Style Sheets，层叠样式表）闪亮登场！它就像是这位结构工程师命中注定的室内设计师、灯光师、视觉艺术家。CSS手持调色板、卷尺和魔法棒，负责给墙壁刷上最流行的莫兰迪色系，给家具安排最符合人体工学的布局，再打上恰到好处的氛围光。

所以，这场“包办婚姻”堪称天作之合：HTML负责结构（Structure），CSS负责表现（Presentation）。两者分离，是世界公认的最佳实践。今天，我们就来深入CSS的核心魔法——如何创建样式表，并让你成为掌控这场魔法的“大法师”。

第一章：三大样式的“入职申请书”——CSS的三种引入方式

给网页添加样式，主要有三种方式。它们就像三位性格迥异的求职者，各有各的优缺点，适用于不同的工作场景。

1. 行内样式 (Inline Styles)：单兵作战的“闪电侠”

这位是急脾气，追求极致的速度和精准控制。它直接写在HTML元素的 style 属性里，见效最快，优先级最高。

语法： <标签名 style="属性: 值; 属性2: 值2;">
优点：优先级最高，瞬间生效，适合临时测试或覆盖其他样式。
缺点： “粪”代码警告！它把内容和样式严重耦合，难以维护。想象一下你要修改100个按钮的颜色，就得找100个地方修改，简直是噩梦。违背了结构与表现分离的原则。

<p style="color: blue; font-size: 16px; border: 1px dashed red;">
  我是一段拥有“行内样式”的文字。看！我是蓝色的，16像素大，还有一条红色的虚线边框把我框起来了。我的样式只属于我一个人，独一无二！
</p>

2. 内嵌样式 (Internal Style Sheet)：守护一方的“独行侠”

这位侠客稳重一些，它通常驻扎在HTML文档的 <head> 区域里，被 <style> 标签包裹。它的势力范围是整个当前页面。

语法：

<head>
  <style>
   选择器 {
     属性: 值;
    }
  </style>
</head>

优点：实现了页面内样式与内容的分离，维护性比行内样式好很多。适合单个页面需要特殊样式，或者页面数量极少的项目。
缺点：它无法被其他页面复用。如果网站有十个页面，你就要在十个页面里写十遍相同的样式代码，效率低下。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式示例</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }

        .highlight {
            color: green;
            font-weight: bold;
            background-color: