我们继续学习CSS3，两小时内掌握 CSS3 的核心基础，并能用它来美化你的 HTML 网页。CSS3 是网页的“衣服和妆容”，让原本枯燥的 HTML 变得美观、现代、有交互感。

下面我将以 零基础小白视角，用最清晰、最实用、最通俗易懂的方式，带你快速掌握 CSS3 的核心知识，并配上多个完整可运行的案例。

一、什么是 CSS3？

  • CSS 全称是 Cascading Style Sheets（层叠样式表）。
  • 它的作用是：控制网页的外观——颜色、字体、布局、动画等。
  • CSS3 是 CSS 的最新版本，新增了圆角、阴影、动画、渐变、响应式布局等强大功能。

✅ 简单说：HTML 是网页的“骨架”，CSS 是网页的“皮肤和衣服”，即网页的外观。

二、CSS 基本语法

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

示例：

h1 {
    color: red;
    font-size: 24px;
}
  • h1 是选择器（选中所有 <h1> 标签）。
  • color 是属性（文字颜色）。
  • red 是color属性的值。
  • 每条规则以 ; 结尾。

CSS3 选择器是 “如何选中 HTML 元素” 的核心工具。掌握它们，你就能精准地为页面中的任意元素设置样式。

一、什么是 CSS 选择器？

选择器（Selector） 是 CSS 规则的第一部分，用来“告诉浏览器：我要给哪些 HTML 元素加样式”。

p {
    color: red;
}

上面的 p 就是一个选择器，表示“选中所有 <p> 标签”。

二、CSS3 选择器分类详解

1. 基础选择器（最常用）
选择器 作用 示例
元素选择器 选中指定标签名的元素 p { color: red; }
类选择器 .class 选中 class="xxx" 的元素 .btn { background: blue; }
ID 选择器 #id 选中 id="xxx" 的元素（唯一） #header { width: 100%; }
通配符选择器 * 选中所有元素 * { margin: 0; padding: 0; }
示例：
<p class="highlight" id="intro">这是一段文字</p>

p { color: black; }
.highlight { font-weight: bold; }
#intro { border: 1px solid #ccc; }
* { box-sizing: border-box; }

注意：

  • class 可重复使用，适合多个元素。
  • id 页面中应唯一，优先级最高。
2. 组合选择器（组合多个条件）
选择器 作用 示例
后代选择器 A B 选中 A 内部的所有 B（无论嵌套多深） div p → 所有在 div 中的 p
子元素选择器 A > B 选中 A 的直接子元素 B（只一层） ul > li → ul 的直接 li 子项
相邻兄弟选择器 A + B 选中紧接在 A 后面的 B 兄弟元素 h1 + p → 紧跟 h1 的第一个 p
通用兄弟选择器 A ~ B 选中 A 后面所有的 B 兄弟元素 h1 ~ p → h1 后面所有 p
示例：
<div>
    <p>第一段</p>
    <p>第二段</p>
</div>
<h1>标题</h1>
<p>介绍1</p>
<p>介绍2</p>

div p        { color: blue; }     /* 两个 p 都变蓝 */
div > p      { font-size: 18px; }  /* 只有 div 的直接子 p 生效 */
h1 + p       { font-weight: bold; } /* 只有“介绍1”加粗 */
h1 ~ p       { background: yellow; } /* “介绍1”和“介绍2”都黄底 */
3. 属性选择器（根据属性选中）
选择器 作用 示例
[attr] 有某个属性的元素 [href] → 所有带 href 的 a 标签
[attr=value] 属性等于某值 [type="text"] → 文本输入框
[attr~=value] 属性包含单词（空格分隔） [class~="btn"] → class 包含 btn
`[attr =value]` 属性以 value 开头或 value- 开头
[attr^=value] 属性值以 value 开头 [src^="https"] → HTTPS 图片
[attr$=value] 属性值以 value 结尾 [href$=".pdf"] → 所有 PDF 链接
[attr*=value] 属性值包含 value [title*="教程"] → 标题含“教程”
示例：
/* 所有外部链接加图标 */
a[href^="http"]::after {
    content: " 🔗";
}

/* 所有 PDF 下载链接变红 */
a[href$=".pdf"] {
    color: red;
}

/* 所有密码输入框 */
input[type="password"] {
    background: #f0f0f0;
}
4. 伪类选择器（基于状态或位置）
选择器 作用 示例
:hover 鼠标悬停时 a:hover { color: red; }
:focus 元素获得焦点（如输入框被点击） input:focus { border: 2px solid blue; }
:active 元素被激活（如按钮按下） button:active { transform: scale(0.95); }
:visited 已访问的链接 a:visited { color: purple; }
:first-child 第一个子元素 li:first-child → 第一个 li
:last-child 最后一个子元素 li:last-child → 最后一个 li
:nth-child(n) 第 n 个子元素 tr:nth-child(2n) → 偶数行
:nth-of-type(n) 同类型第 n 个 p:nth-of-type(2) → 第二个 p
:not(selector) 不匹配某个选择器 :not(.red) → 不是 .red 的元素
实用案例：
/* 表格隔行变色 */
tr:nth-child(even) {
    background: #f9f9f9;
}

/* 第一个段落加大字号 */
p:first-child {
    font-size: 1.2em;
    font-weight: bold;
}

/* 按钮悬停效果 */
.button:hover {
    background: #0056b3;
}

/* 输入框聚焦时发光 */
input:focus {
    outline: none;
    box-shadow: 0 0 5px #007bff;
}

/* 排除某个元素 */
li:not(:last-child) {
    margin-bottom: 10px;
}
5. 伪元素选择器（创建虚拟元素）

用于选中元素的特定部分，如首字、首行、或插入内容。

选择器 作用 示例
::before 在元素内容前插入内容 p::before { content: "📌 "; }
::after 在元素内容后插入内容 a::after { content: " →"; }
::first-letter 选中首字母（常用于首字下沉） p::first-letter { font-size: 2em; }
::first-line 选中第一行 p::first-line { font-weight: bold; }
::selection 选中文本时的样式 ::selection { background: yellow; }
示例：
/* 引用开头加引号 */
blockquote::before {
    content: "“";
    font-size: 2em;
    color: #ccc;
}

/* 清除浮动（经典用法） */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 首字下沉 */
p::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 8px;
}

三、选择器优先级（权重）

当多个规则冲突时，浏览器按优先级决定用哪个。

选择器类型 权重
内联样式 style="" 1000
#id 100
.class, [attr], :hover 10
元素选择器 p, div 1
* 通配符 0

计算示例：

  • #nav .item a → 100 + 10 + 1 = 111
  • div.sidebar p → 1 + 10 + 1 = 12
  • 所以前者优先级更高。

提示：避免滥用 !important，它会破坏样式可维护性。

四、实战案例：用选择器美化导航菜单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>选择器实战</title>
    <style>
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            background: #333;
        }

        nav li {
            margin: 0 10px;
        }

        nav a {
            display: block;
            padding: 10px 15px;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
        }

        /* 鼠标悬停 */
        nav a:hover {
            background: #007bff;
        }

        /* 当前页面链接高亮 */
        nav a[aria-current="page"] {
            background: #dc3545;
            font-weight: bold;
        }

        /* 第一个菜单项特殊样式 */
        nav li:first-child a {
            margin-left: 0;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" aria-current="page">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
</body>
</html>

五、总结：CSS3 选择器速查表

类型 示例 说明
基础 p, .class, #id, * 最常用
组合 div p, div > p, h1 + p, h1 ~ p 精准定位
属性 [href], [type="text"], [href$=".pdf"] 动态匹配
伪类 :hover, :focus, :nth-child(2n), :not(.red) 状态与位置
伪元素 ::before, ::after, ::first-letter 虚拟内容

三、如何在 HTML 中使用 CSS？

方法1：内联样式（不推荐，仅了解）

<p style="color: blue; font-size: 18px;">这段文字是蓝色的</p>

方法2：内部样式表（推荐初学者）

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

方法3：外部样式表（最佳实践，实际项目中常用）

  1. 创建一个文件：style.css
  2. 在 HTML 中引入：
<head>
    <link rel="stylesheet" href="style.css">
</head>

建议：初学用“内部样式表”，熟练后用“外部样式表”。

四、CSS3 核心功能与实战案例（重点！）

1. 文本样式

p {
    color: #333;           /* 文字颜色 */
    font-size: 16px;       /* 字号 */
    font-family: Arial, sans-serif; /* 字体 */
    text-align: center;    /* 对齐：left, center, right */
    line-height: 1.5;      /* 行高 */
    text-decoration: none; /* 去掉下划线（常用于a标签） */
}

2. 背景样式

body {
    background-color: #f0f0f0;        /* 背景颜色 */
    background-image: url('bg.jpg');  /* 背景图片 */
    background-repeat: no-repeat;     /* 不重复 */
    background-position: center;      /* 居中 */
    background-size: cover;           /* 图片覆盖整个区域 */
}

background: #f0f0f0 url(bg.jpg) no-repeat center; 可简写。

3. 盒模型（Box Model）——CSS 核心概念！

每个元素都是一个“盒子”，包含：

  • width （宽）/ height（高）：内容区域。
  • padding：内边距（内容与边框之间）。
  • border：边框。
  • margin：外边距（盒子与其他元素的距离）。
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    box-sizing: border-box; /* 让 padding 和 border 包含在 width 内 */
}

注意：不加 box-sizing: border-box; 容易导致布局错乱！

4. 圆角与阴影（CSS3 新特性）

.card {
    border-radius: 15px;          /* 圆角 */
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2); /* 阴影：水平 垂直 模糊 颜色 */
    transition: box-shadow 0.3s; /* 平滑过渡 */
}

.card:hover {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.4); /* 鼠标悬停时阴影变大 */
}

5. 渐变背景（CSS3）

.gradient-bg {
    background: linear-gradient(45deg, #ff6b6b, #5f27cd);
    height: 200px;
}
  • linear-gradient：线性渐变。
  • 45deg：角度。
  • 支持多种颜色：#ff6b6b, #5f27cd, #00d2d3。

6. Flex 布局（CSS3 布局神器）

让元素水平垂直居中变得极其简单！

.container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    height: 100vh;            /* 占满整个视口高度 */
}

<div class="container">
    <h1>居中的标题</h1>
</div>

Flex 是现代网页布局的核心，必须掌握！

7. 动画与过渡（CSS3）

过渡（hover 效果）
.button {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.button:hover {
    background: #0056b3; /* 鼠标悬停时变深蓝 */
}
关键帧动画
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.bouncing {
    animation: bounce 1s infinite;
}

五、实战案例（完整 HTML + CSS）

案例1：美化按钮

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 按钮</title>
    <style>
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: all 0.3s;
            font-weight: bold;
        }
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <a href="#" class="btn">点击我</a>
</body>
</html>

案例2：卡片式布局

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 卡片</title>
    <style>
        .card {
            width: 300px;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            margin: 20px auto;
            text-align: center;
            transition: transform 0.3s;
        }
        .card:hover {
            transform: scale(1.05);
        }
        .card img {
            width: 100%;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="https://via.placeholder.com/300x200" alt="示例图片">
        <h3>卡片标题</h3>
        <p>这是一段描述文字，展示CSS3的美化能力。</p>
    </div>
</body>
</html>

案例3：居中登录框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录框</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(45deg, #f093fb, #f5576c);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-box {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
            width: 300px;
            text-align: center;
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px;
            width: 100%;
            border-radius: 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <h2>登录</h2>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <button>登录</button>
    </div>
</body>
</html>

六、总结：你将掌握的 CSS3 核心技能

技能 用途
选择器 选中 HTML 元素
盒模型 理解布局基础
border-radius 圆角按钮、卡片
box-shadow 阴影效果
background: linear-gradient() 渐变背景
display: flex 灵活布局、居中对齐
transition 平滑动画效果
@keyframes 自定义动画

下一步建议

  1. 继续学习响应式设计：使用 @media 让网页在手机上也能完美显示。
  2. 学习 CSS 框架：如 Bootstrap、Tailwind CSS，提升开发效率。
  3. 结合 JavaScript：实现更复杂的交互效果。

现在，你已经具备了用 CSS3 美化网页的能力！打开编辑器，复制上面的案例，动手改一改颜色、大小、动画，看看效果变化，这是最快的学习方式！

# css3
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区