CSS3 的模块化方法的介绍

时间:2021-04-16

  对于最新版本的 CSS,工作小组决定不再使用单独的整体规范,而是将其分为单独的文档,称为模块。每个模块都在 CSS,Version 2(CSS2) 中加入了新功能或扩展了一些特性。

  有些模块已经很成熟,已经开发了 5 至 10 年(也可能更多年)。在 W3C 的完整性层级中有 推荐建议 或 候选建议。这表示已经基本完成。我们再看一些更有趣、更重要的模块。

  选择器

  CSS 不能没有选择器。选择器用于对 HTML 中的元素进行风格设置。

  此模块包含 CSS, Version 1 (CSS1) 和 CSS2 中现有的选择器,并扩展了一些新特性。添加的内容主要是一些结构化伪类,如 E:empty,它匹配空元素,还有 E::nth-child(n) ,它匹配某个元素的第 n 个子节点。还有其他新的选择器包含否定伪类,如 E:not(s),它否定一个简单选择器,UI 元素声明伪类,如 E:enabled 和 E:disabled,它们匹配启用或禁用的元素。

  流行 JavaScript 库如 jQuery、Dojo 和 YUI 的用户会熟悉新的 CSS, Version 3 (CSS3) 选择器,因为他们以前就包含在库的 CSS 选择器引擎中了。

  颜色

  颜色设置了 CSS 中与颜色相关的方面,包括透明度及颜色值记号。新的颜色值包括红、绿、蓝 + 一个 Alpha 通道 (RGBA) 以及色相、饱和度、亮度 + 一个 Alpha 通道 (HSLA)。

  背景和边框

  背景和边框定义了背景属性,如 background-color 和 background-image,以及定义了边框的风格。此模块中的新功能包括拉伸背景图片、边框图片、方框阴影,还有在 Web 历史上需求最多的功能,设置方框圆角。

  多列布局

  多列布局允许开发人员将内容放入灵活定义的列中。

  媒体查询

  媒体查询是对 CSS 中 @media 规则和 HTML 中 media 属性的增强,它添加了一些参数,如显示大小、颜色深度和长宽比。 此模块可以让开发人员更具体地将内容设置成不同大小,以及设置一个类中各个设备的功能。

  媒体查询在 Ethan Marcotte 的 Responsive Web Design 中有着重要作用,这是流行文章 A List Apart 及后续书籍的主题 。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章