如果你已经进入web前端开发开发世界，很幸运你会听说CSS，或更为正式的名称为层叠式样表(cascading style sheets)。 如果你不熟悉CSS，它是一种用于定义基于HTML内容是如何在web中显示的语言。 CSS可以用于控制布局、字距、颜色、字体等等，并且自从在1990年代中期开始流行以来，它已经成为”the Web” 的一个不可或缺的组件。

　　如果你积极地介入web内容的设计或开发，很幸运你也会听说过CSS3。 尽管你已经听说过它，你可能想知道它是什么，以及它与现有的CSS实现有何不同。

　　所有技术均随着时间推移而成熟，因此通常使用版本编号和”beta”等术语来表示它们。 这些标签允许你识别你正在使用特定技术的哪个版本，因此你可以确信地期待该软件将支持什么种类的功能。 CSS3 是 CSS 标准的第三版重现;它是一种成熟的层叠式样表语言，该语言能够在 HTML中定义支持更为丰富的内容表现的新功能。

　　新增功能

　　从一开始，CSS已经允许你为你的HTML内容的信息定制显示方式。 字体、颜色、背景图像、立体边界等等 均可以通过现有的CSS式样方便地进行配置。 CSS3不会降低 Web的现有能力，相反，它增加和扩展浏览器的能力以便支持更多功能和基于 HTML内容的更丰富的表现力。

　　CSS3模块

　　CSS规范的前几版重现完全包含了构成CSS语言的元素的定义。 在CSS3中，整个规范已经被划分为一组较短的规范，它们被称为模块(module)。 每个模块为给定的功能子集方面提供定义。 其中一个模块定义媒体选择器，一个模块定义颜色，还有一个模块定义SVG，等等。 模块方式允许CSS规范的某个特定部分能够作为一个标准进行审批和实施，这样做的速度要快于将包含所有功能的大型规范作为一个标准进行审批和实施的方式;而后面的方式无疑要花费更长的时间才能使得规范成为人们认可的标准。 总而言之，这意味着它是一个正在演化的标准，其中的特定部分可能在其它部分之前变成人们认可的标准。 你可以通过W3C了解关于CSS3规范的模块化设计的更多信息。

　　CSS3功能

　　从一开始，CSS已经允许你为你的HTML内容的信息定制显示方式。 字体、颜色、背景图像、立体边界等等 均可以通过现有的CSS式样方便地进行配置。 CSS3不会降低 Web的现有能力，相反，它增加和扩展浏览器的能力以便支持更多功能和基于 HTML内容的更丰富的表现力。

　　Web 2.0的发展趋势为其在基于web界面方面带来一个新的设计水准。 Web页面不再是一个单色、图像和方块的组合。 基于HTML的界面开始问世，它们能够利用非标准字体、复杂颜色梯度、圆角、以及更多优美和精致的外观图形。 用于创建这些界面的HTML和 CSS 的组合通常变得复杂、脆弱和不便使用。 CSS3引入了新的式样，它们更易于控制这些复杂界面的显示方式。

　　CSS3定义可以控制 div、span或其它HTML元素的圆角半径的式样，因此，在创建一个圆角的盒子时不再需要多个嵌套的HTML容器和切碎的图像组件。 现在，在一个单一的HTML容器中，通过简单的CSS定义就可以进行相应的指定操作。

　　CSS3 != HTML5

　　CSS3 通常被误解为 HTML5 功能的一个子集。 尽管CSS3和 HTML5 通常相互伴随，但它们含义不同。 HTML5是 HTML (Hyper Text Markup Language) 规范的第五版重现，它用于在 HTML 文档中定义结构、内容和功能。 HTML5支持新的标签和更丰富媒体内容，而CSS3 定义用于定制用户界面呈现方式的新规则。 具体来说，CSS3定义HTML内容在浏览器中的实际显示方式。

　　CSS3使用范围

　　在我们拥有CSS3的总体概念之后，我们应该知道在何处能够实际使用它。 所有主流桌面浏览器 (Internet Explorer、Chrome、Firefox、Safari和Opera) 均支持各种CSS3功能。

然而，只有这些浏览器的最新版本才能实际支持主要的CSS3功能。 这些浏览器的较早版本可能不支持所有的CSS3功能。 如果你的确希望在你自己的内容中充分利用CSS3式样的功能，则在你使用这些功能之前，必须确保你的目标用户能够支持相应的功能。

　　如果你的目标设备是移动浏览器，则你的运气不错。 现在，大多数最新的智能手机操作系统支持CSS3。 它们包括 iOS、Android、BlackBerry以及最新一代的 Windows设备的默认web浏览器。 实际上，移动浏览器具有一些CSS3功能的最佳支持能力。 问题是并不是所有的桌面和移动浏览器均以相同的方式支持所有的功能。

　　除了不是所有浏览器均以相同的水平支持所有CSS3功能之外，有些功能在特定的浏览器中的运行性能可能比在其它浏览器中表现更好，尽管它们均“支持”给定的功能。 这一现象在比较具有硬件加速的浏览器和没有硬件加速的浏览器的结果时尤其明显。

　　如果这还不足以说明上述现象的话，那么并不是所有浏览器均支持特定CSS3功能的相同语句这样的事实使得CSS3变得更为令人困惑。 由于CSS3规范目前仍未标准化，故许多浏览器厂商在它们的CSS3式样之前添加浏览器特定的ID前缀。 例如，CSS3式样” -webkit-border-radius ” 只能适用于基于webkit引擎的浏览器，即使其它浏览器支持它们自己的CSS3圆角(border-radius)实现方式。 在CSS3规范最后作为一个标准实施之前，这类矛盾非常突出，并且需要给出相应的解决方案。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。