CSS3 简介

现代 CSS 入门

CSS (Cascading Style Sheets，层叠样式表) 是用于描述网页呈现效果的语言。曾经被称为“CSS3”的内容现在被简单地认为是现代 CSS，因为这门语言不断演进。

现代 CSS 被设计为向后兼容，这意味着较新的特性通常不会破坏为旧版本 CSS 编写的样式。

本节介绍当代 CSS 的关键概念和能力。

CSS 模块与演进

CSS 的发展现在被组织成模块，而不是像 CSS3 这样大的版本号。每个模块专注于特定的功能集（例如，颜色、背景、布局），并独立演进。

这种模块化方法使得 CSS 可以逐步增长，定期添加新特性。

一些基础且重要的 CSS 模块包括：

• 选择器（Selectors）：用于定位 HTML 元素的进阶方式。
• 盒模型（Box Model）：控制元素的大小、内边距（padding）、边框（border）和外边距（margin）。
• 背景与边框（Backgrounds and Borders）：设置元素背景和边框的样式。
• 颜色与值（Colors and Values）：定义颜色（包括透明度）、单位等等。
• 文本效果（Text Effects）：排版、文本对齐、间距、阴影等。
• 布局（Layout）：在页面上排列元素的技术，特别是：
• • Flexbox (Flexible Box Layout，弹性盒布局)：用于一维布局（行或列）。
• • 网格布局（Grid Layout）：用于二维布局（行和列）。
• 变换（Transforms）：应用 2D 和 3D 旋转、缩放、倾斜和位移。
• 过渡与动画（Transitions & Animations）：创建平滑的视觉变化和复杂的动画。
• 用户界面（User Interface）：设置表单元素和 UI 组件的样式。
• 媒体查询（Media Queries）：根据设备特性（如屏幕尺寸）应用不同的样式。

浏览器支持与标准化

CSS Level 3 及更高版本中定义的大多数特性在现代常青浏览器（如 Chrome、Firefox、Safari、Edge）中都得到了很好的支持。

较新的 CSS 特性最初可能支持程度不同。开发者经常使用以下资源：

• **MDN Web Docs (Mozilla Developer Network)：**关于 CSS 属性和浏览器兼容性的全面文档。
• **Can I use…：**一个专门跟踪各种 Web 技术浏览器支持情况的网站。

CSS 由万维网联盟（W3C）标准化。随着模块的成熟，它们会成为 W3C 官方推荐标准（Recommendations），标志着稳定性和广泛实现。

CSS 的持续演进为 Web 开发者提供了强大的工具，以创建复杂、响应式且视觉吸引力的用户界面。