CSS是层叠样式表的英文缩写，全称为Cascading Style Sheets，是专门用于描述网页文档表现层的样式语言，和HTML负责结构、JavaScript负责交互共同组成了现代网页开发的核心技术栈。它通过将样式规则与HTML元素绑定，实现对网页视觉效果的精准控制。
CSS的核心作用
CSS的主要价值在于将网页的结构和内容分离，让开发者可以独立管理页面的样式，避免重复编写样式代码，降低维护成本。具体作用包括以下几个方面：
- 控制网页元素的视觉属性，比如文字颜色、字体大小、背景颜色、边框样式等
- 实现页面布局，包括盒模型定位、浮动布局、弹性布局、网格布局等多种布局方式
- 适配不同设备的屏幕尺寸，通过媒体查询实现响应式设计，让页面在手机、平板、电脑上都能正常显示
- 实现简单的动画和过渡效果，提升页面的交互体验
CSS的基本语法结构
CSS的样式规则由选择器和声明块两部分组成，选择器用于匹配需要设置样式的HTML元素，声明块包含一条或多条样式声明，每条声明由属性和属性值组成，用分号分隔。
/* 这是CSS注释，选择器匹配所有p标签元素 */
p {
/* 设置文字颜色为深灰色 */
color: #333333;
/* 设置字体大小为16像素 */
font-size: 16px;
/* 设置行高为1.5倍 */
line-height: 1.5;
}
CSS的引入方式
在实际开发中，CSS可以通过三种方式引入到HTML文档中，开发者可以根据场景选择合适的引入方式：
| 引入方式 | 实现方式 | 适用场景 |
|---|---|---|
| 行内样式 | 直接在HTML元素的style属性中编写样式 | 仅用于单个元素的临时样式调整，不推荐大规模使用 |
| 内部样式表 | 在HTML文档的<head>标签内通过<style>标签编写样式 | 适用于单个页面的独立样式，页面间无法复用 |
| 外部样式表 | 将CSS代码写在独立的.css文件中，通过<link>标签引入到HTML | 适用于多页面项目，样式可复用，维护成本最低 |
CSS的核心概念
层叠性
层叠是CSS的核心特性之一，当多个样式规则作用于同一个元素时，会根据优先级和来源顺序决定最终生效的样式。优先级通常遵循内联样式大于内部样式表大于外部样式表，同优先级下后定义的样式会覆盖先定义的样式。
继承性
部分CSS属性可以被子元素继承，比如文字颜色、字体大小、行高等文本相关属性，子元素如果没有单独设置这些属性，会默认继承父元素的对应样式。而盒模型、定位、背景等属性通常不会被继承。
盒模型
所有HTML元素都可以看作是一个矩形盒子，盒模型由内容区、内边距、边框、外边距四部分组成。开发者可以通过box-sizing属性控制盒模型的计算方式，默认值为content-box，设置宽高仅包含内容区，设置为border-box时宽高会包含内容区、内边距和边框。
/* 设置所有元素的盒模型为border-box，更符合开发直觉 */
* {
box-sizing: border-box;
}
/* 定义一个宽度为200px的盒子，内边距10px，边框1px实线黑色 */
.box {
width: 200px;
padding: 10px;
border: 1px solid #000000;
/* 外边距上下10px，左右自动，实现水平居中 */
margin: 10px auto;
}
CSS的常见应用场景
除了基础的样式设置，CSS还可以实现很多实用的效果，比如通过flex属性实现弹性布局，通过grid属性实现网格布局，通过@media规则实现响应式适配，通过transition和animation属性实现过渡和动画效果。下面是一个简单的弹性布局示例：
/* 容器设置为弹性布局 */
.container {
display: flex;
/* 子元素水平居中 */
justify-content: center;
/* 子元素垂直居中 */
align-items: center;
/* 子元素换行 */
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #f5f5f5;
}
/* 子元素样式 */
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: #409eff;
color: #ffffff;
/* 文字居中 */
text-align: center;
line-height: 100px;
}
随着前端技术的发展，CSS也在不断迭代新的特性，比如CSS变量、容器查询、:has()选择器等，这些新特性进一步提升了CSS的开发效率和能力边界，让开发者可以用更简洁的代码实现更复杂的样式效果。