CSS（Cascading Style Sheets，层叠样式表）负责网页的“长相”：颜色、字体、间距、位置、动效都由它控制。HTML 搭骨架，CSS 描眉眼。本篇带你把 CSS 的核心概念一次理清。
一、CSS 是什么
CSS 通过“选择器”选中 HTML 元素，再用“属性: 值”的方式描述外观。所谓“层叠”，是指同一条规则可以来自多个来源，浏览器按优先级合并出最终样式。理解层叠规则是写好 CSS 的前提。
三种写法的优先级：行内样式 > ID 选择器 > 类 / 伪类 / 属性选择器 > 标签选择器 > 通配符。等优先级时，后写的覆盖先写的。
二、选择器
选择器是 CSS 的“瞄准器”，决定这条规则作用在谁身上。新手先掌握下面几类。
/* 标签选择器 */
p { line-height: 1.8; }
/* 类选择器 */
.btn { padding: 10px 20px; }
/* ID 选择器（少用，优先级太高） */
#header { background: #2D4A3E; }
/* 后代选择器 */
.card p { color: #5B4D3F; }
/* 伪类 */
a:hover { color: #9E3B2E; }
/* 属性选择器 */
input[type="email"] { border-color: #6B4423; }
拓冰提示
优先用“类选择器”组织样式，避免滥用 ID 和
!important。一旦 !important 满天飞，后期改样式会变成灾难。
三、盒模型
每个元素都是一个“盒子”，由内容（content）、内边距（padding）、边框（border）、外边距（margin）四层组成。理解盒模型是理解布局的基础。
.box {
width: 200px;
padding: 20px;
border: 2px solid #6B4423;
margin: 16px;
/* 关键：让宽度包含 padding 和 border */
box-sizing: border-box;
}
避坑提醒
默认
box-sizing: content-box 会让 padding 和 border 撑大盒子，新手经常因此算错尺寸。建议全局设 box-sizing: border-box，省心又省算。
四、布局：Flex 与 Grid
现代布局有两把利器：Flex 适合一维方向（横向或纵向）排列，Grid 适合二维网格。复杂页面往往是 Flex + Grid 配合使用。
/* Flex 横向居中 */
.nav {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
gap: 20px;
}
/* Grid 三列网格 */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}过去那些用 float、position: absolute 凑出来的布局，现在 90% 都能用 Flex / Grid 更优雅地实现。拓冰在做定制站时几乎不再使用 float 布局。
五、响应式
响应式的核心是“媒体查询”：根据屏幕宽度切换不同的样式。结合上文提到的 viewport 设置，就能让同一个页面在手机、平板、电脑上都好看。
/* 默认（移动端优先） */
.container { width: 100%; padding: 0 16px; }
/* 平板及以上 */
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
}
/* 桌面及以上 */
@media (min-width: 1100px) {
.container { max-width: 1080px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}响应式的更多细节（断点设计、移动优先、常见布局模式）我们放在《响应式布局教程》里展开。学完 CSS，下一步就是让网页“动起来”——学 JavaScript。