CSS 基础

这一课你将能做到

1. 说清楚 CSS 在 Web 中的位置和作用
2. 写出第一条 CSS 规则并看到效果
3. 用三种方式把 CSS 引入 HTML，知道各自适用场景
4. 理解「层叠」和「优先级」的基本规则

为什么要学

HTML 决定了网页「有什么」，CSS 决定了网页「长什么样」。没有 CSS，所有网页都是黑字白底、靠左排列，长得跟 1995 年一样。学会了 CSS，你才能把设计稿变成真实的网页。

人话：HTML 是盖房子的毛坯，CSS 是装修——刷什么颜色的墙、铺什么地板、灯挂多高，全靠 CSS。

先建立图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 第一印象</title>
    <style>
        h1 { color: tomato; text-align: center; }
        p  { color: #555; font-size: 18px; }
    </style>
</head>
<body>
    <h1>我是红色大标题</h1>
    <p>我是灰色段落，字号 18 像素。</p>
</body>
</html>

浏览器渲染后：

   我是红色大标题     ← 番茄红、居中
我是灰色段落，字号 18 像素。

跟着做

步骤 1：认识 CSS 语法

CSS 由「规则」组成，每条规则长这样：

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

例如：

p {
    color: blue;      /* 文字颜色 */
    font-size: 16px;  /* 字号 */
}

p 是选择器（选中所有段落），大括号里是声明块，每行一个「属性: 值;」。

步骤 2：三种引入方式

方式一：内联样式——写在标签的 style 属性里

<p style="color: red;">只有这一段是红色</p>

方式二：内部样式表——写在 <head> 的 <style> 标签里

<head>
    <style>
        p { color: green; }
    </style>
</head>

方式三：外部样式表——独立 .css 文件，用 <link> 引入（推荐）

style.css：

p { color: blue; }

index.html：

<head>
    <link rel="stylesheet" href="style.css">
</head>

步骤 3：动手比较三种方式

新建 demo.html，输入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <style>
        .internal { color: green; }
    </style>
</head>
<body>
    <p style="color: red;">内联：红色</p>
    <p class="internal">内部：绿色</p>
    <p>无样式：默认黑色</p>
</body>
</html>

保存后用浏览器打开，观察三段文字颜色差异。