CSS 即层叠样式表，控制网页的视觉呈现。HTML 负责内容结构，CSS 负责样式装饰，两者配合构成现代网页的基础。CSS 的引入彻底改变了网页开发，让样…

CSS 即层叠样式表，控制网页的视觉呈现。HTML 负责内容结构，CSS 负责样式装饰，两者配合构成现代网页的基础。CSS 的引入彻底改变了网页开发，让样式与结构分离成为可能。

CSS 基本语法包括选择器和声明块。选择器指向要样式化的 HTML 元素，声明块包含一个或多个属性-值对。大括号包裹声明，多个声明用分号分隔。属性名和属性值之间用冒号分隔。

选择器是 CSS 的核心概念。标签选择器直接匹配 HTML 标签名。类选择器以点号开头，可复用。ID 选择器以井号开头，唯一使用。属性选择器根据标签属性匹配，伪类选择器匹配元素状态。

派生选择器通过空格建立祖先-后代关系。后代选择器匹配所有后代，子元素选择器用大于号只匹配直接子元素。相邻兄弟选择器用加号，通用兄弟选择器用波浪号。

伪类选择器针对元素特殊状态。:hover 鼠标悬停效果，:active 点击效果，:focus 输入焦点。:first-child 匹配作为父元素第一个子元素的元素。:nth-child 伪类支持复杂选择。

伪元素选择器创建虚拟元素。::before 和 ::after 插入内容到元素前后。::first-line 选择首行文本，::first-letter 选择首字母。可用于清除浮动、实现标签效果。

CSS 盒模型是布局基础。每个元素都是矩形盒子，包含内容、内边距、边框、外边距。box-sizing 属性控制计算方式。content-box 宽度不含内边距和边框，border-box 包含两者。

display 属性决定元素类型和布局方式。block 元素独占一行，inline 元素共占一行。flex 将元素设为弹性容器，grid 将元素设为网格容器。inline-block 兼具两者特点。

Flexbox 布局是现代 CSS 布局利器。容器的 flex-direction 设置主轴方向。justify-content 设置主轴对齐，align-items 设置交叉轴对齐。flex-wrap 控制换行。子元素通过 flex 属性分配空间。

Grid 布局擅长二维布局。grid-template-columns 定义列，grid-template-rows 定义行。fr 单位均分可用空间。gap 设置网格间距。grid-area 指定元素放置位置。

定位属性控制元素位置。static 是默认值，正常文档流。relative 相对自身位置偏移。absolute 相对最近定位祖先定位。fixed 相对视口定位。sticky 滚动时表现为相对定位。

浮动属性让元素脱离文档流向左或向右移动。clear 属性清除浮动影响。浮动曾用于实现文字环绕和多栏布局，但 Flexbox 和 Grid 出现后，浮动主要用于内容环绕。

颜色和背景塑造视觉。color 设置文本颜色。background-color 设置背景色。background-image 设置背景图片。linear-gradient 和 radial-gradient 创建渐变背景。

字体样式控制文字外观。font-family 设置字体系列。font-size 设置字号。font-weight 设置粗细。font-style 设置斜体。line-height 设置行高，影响文本可读性。

盒阴影和圆角美化元素。box-shadow 添加阴影效果，可设多组阴影。border-radius 设置圆角，可设不同半径。两者结合创造立体感。

过渡和动画创造动感。transition 属性定义过渡效果，监听属性变化时平滑过渡。@keyframes 定义关键帧动画，animation 属性应用动画。动画让界面更生动。

响应式设计适配多设备。媒体查询 @media 根据条件应用样式。max-width 和 min-width 控制设备宽度范围。移动优先设计先为移动端编写样式，再为大屏添加媒体查询。

CSS 预处理器增强 CSS 能力。Sass 引入变量、嵌套、混合器、继承等特性。Less 和 Stylus 也是流行选项。预处理器需编译为标准 CSS 后运行。

CSS 变量即自定义属性，以双破折号开头定义。使用 var 函数调用，可设回退值。变量支持动态修改，主题切换等功能通过修改变量实现。

层叠规则决定冲突样式优先级。重要性 !important 最高，来源权重其次，特异性越强优先级越高，源码顺序最后的样式生效。理解层叠规则是精通 CSS 的关键。

Flexbox 和 Grid 常结合使用。外层容器用 Grid 划分整体布局，内部各区域用 Flexbox 处理内容排列。两者互补，构成现代 CSS 布局的核心技术。

浏览器兼容是实际开发必须考虑的因素。前缀如 -webkit-、-moz- 支持老旧浏览器。使用 caniuse 查询支持情况。 Autoprefixer 工具自动添加前缀。

CSS Reset 和 Normalize 统一浏览器默认样式。Reset 完全重置，Normalize 保留合理默认并修复不一致。现代开发常用替代方案如 Tailwind CSS 的基础样式。

动画性能优化避免卡顿。transform 和 opacity 变化可被 GPU 加速。will-change 属性提示浏览器优化。使用 translate 代替 top/left 定位。

继承规则控制属性传递。字体和颜色相关属性默认继承。inherit 强制继承，initial 重置为默认值，unset 组合前两者。先继承后层叠。

CSS 新特性持续发展。容器查询根据父容器而非视口条件应用样式。:has() 父选择器革新选择器能力。color-mix() 函数混色。Native Layers 简化层叠管理。

掌握 CSS 需要不断实践。从基础布局开始，挑战复杂界面。学习优秀网站源码，分析他人解决方案。持续关注新特性，提升效率。

CSS 的美在于创造。通过代码将设计稿变为现实，让界面美观且易用。深入理解其原理和技巧，才能得心应手。

（本文为 CSS 技术系列文章的第 1 篇）