CSS3核心基础-编程阁

我们继续学习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：外部样式表（最佳实践，实际项目中常用）

创建一个文件：style.css
在 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`	自定义动画

下一步建议

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

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