CSS3属性概述

课后整理 2020-12-22

CSS属性众多,在W3C CSS 2.0版本中共有122个标准属性(http://www.w3.org/TR/CSS2/propidx.html),在W3C CSS 2.1版本中共有115个标准属性(http://www.w3.org/TR/CSS21/propidx.html),其中删除了CSS 2.0版本中7个属性:font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3C CSS 3.0版本中又新增加了20多个属性(http://www.w3.org/Style/CSS/current-work#CSS3)。

CSS属性被分为不同的类型,如字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。对于初学者来说,初学CSS的最大障碍是如何熟悉并掌握这些属性的使用。关于CSS属性的详细列表和用法可以参阅本书提供的CSS参考手册。

【提示】

不要急于记住每个CSS属性,不要急于一下吃透它们的用法,更不能机械记忆,如果使用背英语单词的方法来记忆,效果势必会很差。

最佳的方法是边学习边记忆,在实践中逐个突破。当学习网页排版时,不妨集中精力把字体和文本属性研究一下。当学习网页布局时,不妨再研究与盒模型和布局相关的几个属性。

记忆这些属性时,一定要结合实践,不断去尝试并举一反三。只有这样你才能够完全掌握CSS所有属性,并能够熟练应用。例如,当准备学习CSS布局时,不妨先集中精力把与CSS盒模型相关的属性记住,此时可以绘制一个图,如图1所示。

CSS属性的名称比较有规律,且名称与意思紧密相连,根据意思记忆属性名称是一个不错的方法。CSS盒模型讲的就是网页中任何元素都会显示为一个矩形形状,它可以包括外边距、边框、内边距、宽和高等。用英文表示就是:margin(外边距,或称为边界)、border(边框)、padding(内边距,或称为补白)、height(高)和width(宽0,盒子还有background(背景)。

图1  CSS盒模型相关的属性

外边距按方位又可以包含margin-top、margin-right、margin-bottom、margin-left共4分支属性,分别表示顶部外边距、右侧外边距、底部外边距和左侧外边距。

同样的道理,内边距也可以包含padding-top、padding-right、padding-bottom、padding-left、padding属性。边框可以分为边框类型、粗细和颜色,因此可以包含border-width、border-color和border-style属性,这些属性又可以按四个方位包含很多属性,例如,border-width属性又分为border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性。

属性列表和详细说明请读者参考CSS3参考手册。