本章主要内容:
● 组成样式表的元素
● CSS中使用的值的类型
● 如何在HTML文档中包含CSS
第1章通过示例1-1简单展示了CSS的功能,该示例显示了一个网页,其中包含了太阳系中的4个气体行星及一些相关描述。本章将介绍样式表的组成元素。
2.1 CSS规则
在分析样式表时,可以将它逐步分解为更小的部分。这些部分从大到小分别是:
● 样式表
● 规则
● 选择器
● 声明
● 属性
● 值
一些特殊字符(花括号、冒号和分号)用于标记一个部分的开始和结束,以便与其他部分相分隔。下面这条规则显示了一个样式表的几个部分以及分隔它们的特殊字符。
body {
width: 650px;
margin: 0 auto;
background: #000;
color: #FFF;
font: 12px sans-serif;
}
可以根据自己的喜好设置规则的布局;可以添加换行和空格来提高CSS的可读性、合理性和组织性。如果愿意的话,那么甚至可以把所有的代码放到一行中。
与HTML一样,可以使用空格和换行来提高CSS代码的可读性。大多数情况下,读取CSS的解释器并不关注样式表中存在多少空格或者使用了多少换行,只要在它们要求的地方使用了空格,那么使用1个或10个空格都可以。但是,人们必须经常使用某种结构以避免视觉疲劳,并且提高代码的可维护性和工作效率。
建议使用本书中的风格来提高可读性,但是您可能觉得其他某种风格更适合自己。保持一致性很重要,在选择了一种适合自己的风格后,就应坚持使用这种风格。
在一条规则中,选择样式化HTML文档中哪些元素的部分称为选择器。浏览器已经对大多数元素应用了一个默认样式(例如,h1元素比常规的文本要大),所以您只需要编写CSS来修改默认样式或者添加样式。