第1章：CSS入门与样式美化
各位同学，咱们今天来聊聊CSS。说实话，我刚入行那会儿，觉得CSS就是给HTML「涂脂抹粉」的工具。后来才发现，这玩意儿才是决定页面好不好看、用户体验到不到位的关键。
CSS全称叫 Cascading Style Sheets，层叠样式表。名字挺长，但核心就一句话：控制HTML元素的呈现方式。你想想看，没有CSS的网页，就像没穿衣服的人——功能都在，但实在没法看。
1.1 CSS的三种引入方式
CSS怎么跟HTML结合？有三种方式。我个人的习惯是，小demo用内嵌，正式项目必须外链。但每种方式都有它的适用场景，咱们一个一个说。
1.1.1 行内样式
直接在HTML标签的 style 属性里写CSS。最直接，但也最不推荐。
<p style="color: red; font-size: 20px;">这段文字是红色的</p>我在项目中遇到过，有些老系统为了快速修复样式，临时用行内样式打补丁。结果后来维护的时候，满屏都是 style="..."，改一个颜色要翻十几个文件。嗯，那叫一个酸爽。
1.1.2 内嵌样式
在HTML的 <head> 里放一个 <style> 标签。适合单页面或小项目。
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>说白了，内嵌样式比行内好管理，但多个页面共享样式时就很尴尬——每个页面都得复制一遍。我刚开始做项目时就这么干过，后来被同事教育了。
1.1.3 外链样式
把CSS单独写成一个 .css 文件，用 <link> 引入。这是企业级项目的标准做法。
<head>
<link rel="stylesheet" href="style.css">
</head>1.2 选择器：CSS的「寻址系统」
选择器就是告诉浏览器：「嘿，你要给哪个元素上样式？」。CSS提供了多种选择器，咱们先掌握最常用的三种。
1.2.1 标签选择器
直接拿HTML标签名当选择器。简单粗暴，但一竿子打翻一船人。
p {
color: green;
}
h1 {
font-size: 32px;
}你想想看，如果页面上有10个 <p> 标签，用标签选择器会让它们全部变绿。有时候这正是我们想要的，但更多时候我们需要更精确的控制。
1.2.2 类选择器
用 . 开头，配合HTML的 class 属性。这是我最常用的选择器，没有之一。
.highlight {
background-color: yellow;
font-weight: bold;
}
.card {
border: 1px solid #ccc;
padding: 16px;
}<p class="highlight">这段文字有黄色背景</p>
<div class="card">这是一个卡片容器</div>类选择器可以复用，一个元素也可以有多个类。比如 class="card highlight"，两个样式叠加生效。我在项目中经常用这种方式做组件化设计，灵活得很。
1.2.3 ID选择器
用 # 开头，配合HTML的 id 属性。记住：一个页面里，ID是唯一的。
#header {
background-color: #333;
color: white;
height: 60px;
}
#submit-btn {
background-color: #007bff;
color: white;
}<div id="header">网站头部</div>
<button id="submit-btn">提交</button>!important 来强行覆盖——那场面，简直是灾难。
1.3 常用属性：让页面「活」起来
掌握了选择器，咱们来看看能设置哪些样式。我挑几个最常用的说说。
1.3.1 颜色与字体
| 属性 | 作用 | 示例 |
|---|---|---|
color |
文字颜色 | color: #ff6600; |
font-size |
字体大小 | font-size: 16px; |
font-weight |
字体粗细 | font-weight: bold; |
font-family |
字体类型 | font-family: "微软雅黑", sans-serif; |
text-align |
文字对齐 | text-align: center; |
p {
color: #333;
font-size: 14px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.8;
}颜色这块，我建议用十六进制（比如 #ff6600）或者RGB（比如 rgb(255, 102, 0)）。别用 red、blue 这种英文单词——颜色选择太少，而且不同浏览器解析可能有细微差异。
1.3.2 背景样式
.banner {
background-color: #f0f0f0;
background-image: url('bg.png');
background-size: cover;
background-position: center;
}背景属性可以组合使用。比如你想让一个区域有背景色，同时还有背景图，图没加载出来时颜色能兜底。我在项目中经常这么干，用户体验会好很多。
1.4 盒模型初探
盒模型是CSS的基石。说白了，每个HTML元素都是一个盒子。这个盒子由四部分组成：
- 内容区（content）：放文字、图片的地方
- 内边距（padding）：内容到边框的距离
- 边框（border）：盒子的边界线
- 外边距（margin）：盒子与其他元素的距离
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}你想想看，这个 .box 实际占用的宽度是多少？200 + 20*2 + 2*2 + 10*2 = 264px。很多新手在这里栽跟头——明明设了200px宽，怎么实际占了264px？
box-sizing: border-box; 可以让padding和border算在width里面。这样你设200px，实际就是200px。我写项目时，几乎都会在全局加上这个属性。
* {
box-sizing: border-box;
}盒模型这东西，刚开始觉得抽象。但你只要记住一句话：每个元素都是一个盒子，盒子有内容、有填充、有边框、有间距。多写几个demo，自然就理解了。
小结
这一章咱们聊了CSS的三种引入方式、三种基础选择器、几个常用属性，还有盒模型的基本概念。说实话，这些内容看起来简单，但都是后面所有CSS知识的地基。地基打不牢，后面盖楼肯定歪。
下一章咱们会深入盒模型，聊聊那些让人头疼的边距合并、定位方式。到时候你会发现，CSS其实挺有意思的——只要你摸清了它的脾气。
公众号:蓝海资料掘金营，微信deep3321