HTML基础教程（十八）样式- CSS：别让HTML裸奔！CSS，网页世界的超级化妆师与整骨专家

最新推荐文章于 2025-11-24 21:19:42 发布

原创

最新推荐文章于 2025-11-24 21:19:42 发布 · 548 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

第一章：缘起：当HTML决定“裸奔”

想象一下这个场景：你熬夜爆肝，用HTML精心搭建了一个网站的结构——标题、段落、列表、链接，一应俱全，逻辑清晰。你兴奋地按下F12在浏览器中预览……

然后你沉默了。

这页面，怎么说呢……有一种返璞归真的“美”。所有内容从上到下堆叠，字体千篇一律，链接是扎眼的蓝色还带条下划线，按钮长得像上世纪90年代的文物。就像一个只有骨架的模型，严谨，但毫无生气。

这就是没有CSS的HTML。它提供了全部的内容和结构，但它“裸奔”了。

此时的你，仿佛一位拥有顶级食材（HTML）却不懂任何烹饪技巧（CSS）的厨师，做出来的菜虽然能吃，但绝对称不上美味佳肴。

而CSS（Cascading Style Sheets，层叠样式表）的登场，就如同一位米其林三星大厨、一位顶级服装设计师和一位空间布局大师的三合一合体。它的使命只有一个：给HTML骨架穿上华丽的衣服，化上精致的妆容，让它住进精心装修的房子。

第二章：CSS核心魔法：选择器、属性和值

CSS的语法非常简单，它的核心魔法由三部分组成：

选择器 {
    属性: 值;
    另一个属性: 值;
}

选择器 (Selector)：它的工作是“精准点名”。你想给谁化妆？是所有的<p>标签，还是那个特别的id="main-title"的标题？就像是化妆师喊：“那个穿红衣服的小姑娘，过来一下！” 或者 “所有戴眼镜的，看这里！”
属性 (Property)：你要改变什么？是颜色(color)、字体(font-size)、还是位置(margin)？这相当于化妆师决定是给你涂口红还是画眼线。
值 (Value)：具体改成什么样？颜色是red还是#ff0000？字体是16px还是2em？这就是决定用“迪奥999”还是“阿玛尼405”色号。

示例1：给“裸奔”的HTML穿上基础外衣

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 选中所有 <p> 标签 */
        p {
            color: #333; /* 深灰色文字，更柔和 */
            font-size: 18px;
            line-height: 1.6; /* 增加行高，更易阅读 */
        }

        /* 选中所有 <h1> 标签 */
        h1 {