CSS 基础：让网页变漂亮的奥秘
一、CSS 是什么？
HTML 负责内容结构，CSS 负责样式外观。字体、颜色、间距、布局——全都是 CSS 的活儿。
二、三种引入方式
<!-- 内联样式（不推荐）-->
<p style="color:red;">红色文字</p>
<!-- style 标签 -->
<style>
p { color: blue; }
</style>
<!-- 外部 CSS 文件（推荐）-->
<link rel="stylesheet" href="style.css">
三、CSS 选择器
/* 标签选择器 */
p { color: #333; }
/* class 选择器（可复用） */
.highlight { background: yellow; }
/* id 选择器（唯一） */
#header { height: 60px; }
/* 后代选择器 */
.article h2 { font-size: 1.5em; }
/* 伪类 */
a:hover { color: red; }
四、盒模型
每个 HTML 元素都是一个矩形盒子，由四部分组成：内容 → 内边距 → 边框 → 外边距
.box {
width: 200px;
padding: 20px;
border: 1px solid #ddd;
margin: 10px;
box-sizing: border-box;
}五、Flex 布局
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background: #6366f1;
color: white;
display: flex;
align-items: center;
justify-content: center;
}六、实战：制作卡片网格
<!DOCTYPE html>
<html>
<head>
<style>
- { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui; background: #f5f5f5; padding: 20px; }
.grid { display: flex; gap: 20px; flex-wrap: wrap; }
.card { flex: 1; min-width: 240px; background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.card h3 { color: #6366f1; margin-bottom: 12px; }
.card p { color: #666; line-height: 1.6; }
</style>
</head>
<body>
<div class="grid">
<div class="card"><h3>Git 版本控制</h3><p>掌握版本控制，让代码管理井井有条。</p></div>
<div class="card"><h3>Linux 服务器</h3><p>学会命令行，轻松管理服务器。</p></div>
<div class="card"><h3>JavaScript 入门</h3><p>让网页动起来的前端脚本语言。</p></div>
</div>
</body>
</html>七、常见错误
宽度超出容器：解决方法：box-sizing: border-box;
Flex 项目不换行：给容器加 flex-wrap: wrap; 并给项目设置 min-width。