CSS是Cascading Style Sheets的缩写，中文译为层叠样式表。它是一种用于描述网页外观和排版格式的样式语言，与HTML、JavaScript并称为Web前端开发的三大基石。如果将一个网页比作一个人，HTML负责搭建骨骼结构，CSS则负责穿上衣服、化妆打扮，让网页呈现出美观的视觉效果。本文将带你深入了解CSS的定义、工作机制以及基本用法。
CSS是什么，它解决了什么问题
在CSS诞生之前，网页开发者想要改变文字颜色或段落间距，只能通过HTML标签的属性来实现，例如使用<font>标签设置字体。这种做法导致样式代码与结构代码混杂在一起，页面难以维护。当一个网站有几百个页面时，想要统一修改标题颜色，就需要逐页修改，工作量巨大且容易出错。
CSS的出现正是为了解决这个问题。它将样式信息从HTML结构中分离出来，让开发者可以把所有样式规则集中写在一个CSS文件中，然后让多个HTML页面共同引用。这样一来，只需修改一处样式，所有引用该文件的页面都会同步更新，大大提升了开发效率和可维护性。
此外，CSS还提供了强大的布局能力。从早期的浮动布局、定位布局，到现代的Flex弹性布局和Grid网格布局，CSS让开发者能够精确控制元素在页面中的位置和尺寸，实现从简单图文排版到复杂多栏响应式页面的各种设计需求。
层叠、继承与优先级：理解CSS的核心机制
CSS名字中的层叠二字，指的是当多条样式规则作用于同一个元素时，浏览器会按照一定的优先级规则决定最终采用哪一条。理解层叠机制是掌握CSS的关键。影响优先级的因素主要有三个：样式来源、选择器权重和书写顺序。
选择器权重是层叠机制中最常被讨论的部分。不同类型的选择器具有不同的权重值：标签选择器权重最低，类选择器次之，ID选择器更高，而内联样式则几乎覆盖一切，只有在声明后面加上!important才能超越它。当权重相同时，后书写的规则会覆盖先书写的规则。
继承是CSS的另一个重要特性。某些属性如文字颜色color、字体font-family、行高line-height等，会自动从父元素传递给子元素。利用继承特性，开发者只需在body元素上设置基础字体样式，整个页面的文字就会统一生效，无需逐个元素设置。但需要注意的是，像宽度、边距这类盒模型属性默认是不会被继承的。
CSS的基本语法与引入方式
CSS规则由两部分组成：选择器和声明块。选择器用于定位要修饰的HTML元素，声明块包含一条或多条声明，每条声明由属性名和属性值组成，以分号结尾。下面是一个最基本的CSS规则示例：
/* 选择器 { 属性: 值; } */
h1 {
color: #333333; /* 设置文字颜色 */
font-size: 32px; /* 设置字体大小 */
text-align: center; /* 设置文字居中 */
}在HTML页面中使用CSS有三种方式。第一种是内联样式，直接写在元素的style属性中，例如<p style="color:red;">，这种方式耦合度高，不推荐大量使用。第二种是内部样式表，将样式写在HTML文档头部的<style>标签中，适合小型单页项目。第三种是外部样式表，即把样式写在一个独立的.css文件中，再通过<link>标签引入，这是实际开发中最推荐的做法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 外部样式表引入方式 -->
<link rel="stylesheet" href="style.css">
<style>
/* 内部样式表 */
body { font-family: "Microsoft YaHei", sans-serif; }
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>常用选择器与盒模型入门
选择器是CSS定位元素的手段，掌握常用选择器是编写样式的基础。标签选择器直接匹配元素名，如p匹配所有段落；类选择器以点号开头，如.btn匹配所有class为btn的元素，是最常用的选择器；ID选择器以井号开头，如#header，匹配页面中唯一的元素。此外还有后代选择器、子元素选择器、伪类选择器（如:hover）和属性选择器等，它们可以组合使用，实现精确的元素定位。
盒模型是CSS布局的核心概念。每个HTML元素都被看作一个矩形的盒子，从内到外依次是内容区content、内边距padding、边框border和外边距margin。理解盒模型对于控制元素尺寸和间距至关重要。通过box-sizing: border-box可以将元素的宽高计算方式设置为包含padding和border，这在实际开发中非常实用。
.card {
width: 300px;
padding: 20px; /* 内边距 */
border: 1px solid #ddd; /* 边框 */
margin: 10px; /* 外边距 */
box-sizing: border-box; /* 宽度包含内边距和边框 */
border-radius: 8px; /* 圆角效果 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */
}总的来说，CSS是一种功能强大且不断演进的语言。现代CSS已经支持变量、动画、媒体查询、网格布局等高级特性，配合预处理器和框架可以应对几乎所有的界面设计需求。对于初学者来说，从选择器、盒模型和层叠机制入手，循序渐进地练习，就能逐步建立起完整的CSS知识体系，为后续学习前端开发打下坚实基础。