CSS全称是Cascading Style Sheets，中文一般译为层叠样式表。如果说HTML是网页的骨架，那么CSS就是网页的皮肤和肌肉，它决定了页面中每一个元素的颜色、字体、大小、间距以及在屏幕上的摆放位置。没有CSS的网页只是一堆纯文本的堆砌，而有了CSS，页面才能变得美观、易读并且适配不同尺寸的设备。本文将带你系统地了解CSS的核心概念和常用技巧。
一、CSS的基本语法与选择器
CSS的规则由两部分组成：选择器和声明块。选择器用于定位你想要设置样式的HTML元素，声明块则由一条或多条“属性名：属性值”组成，每条声明以分号结尾。例如下面这段代码：
p {
color: #333;
font-size: 16px;
line-height: 1.6;
}
这段规则会把页面中所有的段落文字设置为深灰色、字号16像素、行高1.6倍。选择器是CSS中非常灵活的部分，常用的包括元素选择器、类选择器、ID选择器、属性选择器以及后代选择器等。其中类选择器以点号开头，是日常开发中使用频率最高的一种，因为它可以在多个元素上复用；而ID选择器以井号开头，具有更高的优先级，但一般不推荐用于样式，因为它的复用性差。
除了基础选择器，伪类和伪元素也很重要。伪类如:hover可以在鼠标悬停时改变样式，:nth-child(n)可以选择第n个子元素；伪元素如::before和::after可以在元素内容的前后插入装饰性内容，常用于图标、分隔线等效果。掌握这些选择器之后，你几乎可以精准地命中页面上的任何元素，而不需要修改HTML结构。
二、盒模型：理解元素占位的关键
CSS中每个元素都被看作一个矩形盒子，从内到外依次是内容区（content）、内边距（padding）、边框（border）和外边距（margin）。这个模型直接决定了元素的尺寸和元素之间的距离。默认情况下，设置width和height只影响内容区，再加上padding和border后，元素实际占用的空间会比你设定的数值更大，这也是很多新手发现“宽度对不上”的原因。
为了解决这个问题，现代开发中通常会把所有元素的盒模型改为box-sizing: border-box，这样width就代表内容、内边距和边框的总宽度，计算起来更直观：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
另外，外边距合并也是一个常见现象：当两个垂直相邻的块级元素相遇时，它们之间的间距不是两个margin相加，而是取较大值。理解这一行为有助于避免布局中莫名其妙的多余或缺失间距。盒模型是所有布局计算的基础，务必在实际项目中多加练习和验证。
三、现代布局方案：Flex与Grid
布局是CSS最核心的能力之一。早期的网页布局大量依赖浮动和定位，代码冗长且容易出问题。如今主流的方案是Flex弹性布局和Grid网格布局。Flex适合一维方向上的排列，比如导航栏、按钮组；Grid则擅长二维的行列结构，比如整体页面框架、卡片阵列。
Flex布局的使用非常简单，在父容器上设置display: flex后，子元素就会沿主轴排列：
.nav {
display: flex;
justify-content: space-between; /* 主轴两端对齐 */
align-items: center; /* 交叉轴垂直居中 */
gap: 16px; /* 子项间距 */
}
Grid布局则通过定义行和列来划分区域：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三等分列 */
gap: 20px;
}
两种布局还可以嵌套使用，用Grid搭建整体框架，用Flex处理局部细节。再配合媒体查询，就能轻松实现响应式设计，让页面在手机、平板和桌面端都有良好的展示效果。
四、层叠、继承与优先级
CSS名字中的“层叠”指的是多条规则同时作用于同一元素时的处理机制。浏览器会根据来源、选择器权重和书写顺序决定最终生效的样式。一般来说，行内样式权重最高，其次是ID选择器、类选择器和元素选择器。当权重相同时，写在后面的规则会覆盖前面的。
继承是另一个重要特性。某些属性如颜色、字体、行高会自动从父元素传递给子元素，因此通常只需在body上设置基础字体，整页文字就能统一风格。但边距、边框等属性不会继承，需要单独设置。理解层叠与继承，能帮助你在调试样式时快速找到“为什么这条规则不生效”的原因，避免盲目堆砌!important这种破坏维护性的做法。
五、实用技巧与性能建议
在编写CSS时，有一些经验值得遵循。第一，保持选择器简洁，避免过深的嵌套，层级越深浏览器匹配的开销越大。第二，优先使用transform和opacity制作动画，因为它们可以由GPU加速，比修改宽度、位置等属性流畅得多。第三，善用CSS变量来管理主题色和通用数值：
:root {
--primary-color: #1677ff;
--spacing: 16px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing);
}
使用变量后，修改一处即可全局生效，换主题也变得轻而易举。此外，现代CSS还提供了大量新特性，例如容器查询、子网格、锚点定位等，持续学习这些新能力可以让代码更简洁高效。总体来说，CSS看似简单，实则体系庞大，把选择器、盒模型、布局、层叠这四大基础打牢，再结合项目实践不断积累，你就能游刃有余地掌控网页的样式与布局。