全面掌握CSS与CSS3样式：从基础到高级特性

本文档是一份详尽的CSS（Cascading Style Sheets）和CSS3样式指南，涵盖了从基础到高级特性的全面介绍。首先，我们了解CSS的基本概念，包括CSS添加方法，有三种主要方式：行内样式、内嵌样式和外部样式表。 1. 行内样式：直接在HTML元素中使用`style`属性，如示例中的`<p style="color:red;">`，可以直接设置元素的样式，但这种方式的优先级最低。 2. 内嵌样式：将CSS规则放在HTML元素的`<style>`标签中，提供了更灵活的管理，如`: p { color: red; }`，优先级高于行内样式。 3. 外部样式表：通过`.css`文件，将样式定义在一个独立的文档中，便于维护和复用。外部样式可以通过`<link>`标签链接到HTML文档，具有最高优先级。样式间的层叠遵循就近原则，即行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式。 接下来，文档深入讨论了CSS选择器，这是控制网页元素样式的关键。有多种选择器类型，如： - 标签选择器（如`p`，`h1`），根据元素标签来选择。 - 类别选择器（如`.one`），用于匹配具有特定类的元素。 - ID选择器（如`#left`），针对具有唯一ID的元素。 - 嵌套选择器（如`p span`），组合多个选择器来指定特定层级的元素。 - 集体声明（如`h1, p`），同时应用样式到多个元素。 CSS样式部分详细讲解了文本样式（如字体、颜色、尺寸等）、背景与超链接样式、列表与表格样式，以及布局与定位技术，如盒模型（`overflow`、`border`、`padding`和`margin`）和定位机制（`display`、`float`和`position`）。CSS3部分则引入了更多创新特性，如圆角边框、阴影效果、文本与文字样式增强、2D和3D转换、过渡与动画等。 CSS3(I)至(V)章节分别探讨了不同类型的CSS3特性，如渐变、动画、投影、3D转换等，这些都是现代Web设计中不可或缺的部分。 这份CSS样式一览表为初学者和专业开发人员提供了全面且深入的参考，无论是在学习还是工作中，都能找到所需的基础知识和高级技巧。