CSS速成指南(1)

CSS是个比较大的主题,涉及各种不同的技术,而且也有许多专门介绍其用法及工作原理的书籍。但在本章中,笔者尽可能将其信息提炼成易于掌握的入门级内容,从而提供使用本书中的插件所需的所有信息。

如果你对CSS有所了解,那笔者建议你至少浏览一下本章,以便对这一主题作个快速回顾,因为本书的剩下部分将用到这些信息。

2.1  CSS规则

在学习样式表的内部工作机理之前,首先研究一下CSS的结构并分析一下用于构造CSS语句的规则。

每条语句都以一个选择器开头,这是规则所影响的对象。例如,在下面的语句中,h1就是被指定使用比默认值大240%的字体大小的选择器:

h1 { font-size:240%; }

通过给选择器的font-size属性提供一个新值,从而确保所有<h1>…</h1>标记对的内容都将以比默认值大240%的字体大小显示。这是通过在选择器后的{和}符号中提供一个或多个指派实现的(在这里是font-size:240%)。

冒号(:)前面的部分是属性,而其余部分是该属性使用的值。最后,用一个分号(;)结束语句,不过在本例中不是必需的(但如果在同一行上有另一个指派,则是必需的)。为了避免难以发现的错误,本书总是包括分号,即使有时并不必要。

2.1.1  多个指派

可用几种不同的方式创建多个属性指派。首先,可在同一行中连接它们,如下所示:

h1 { font-size:240%; color:blue; }

这就添加了另一个指派,将所有<h1>标题的颜色改为蓝色。也可以一行放置一个指派,如下所示:

h1 { font-size:240%;

color:blue; }

或者可以将这些指派稍隔开些,使得它们按分号列竖直对齐,如下所示:

h1 {

font-size:240%;

color:blue;

}

这样,可以很容易地看出每组新规则从哪里开始,因为选择器在第一列,后面的指派整齐地排列,且所有属性值有着相同的水平偏移量。

如何布局CSS没有对错之分,但个人建议至少每个CSS块要保持一致,这样可以一眼就看明白。这也是本书所采用的方法,本书总是设法使属性指派整齐而对称地排列,这样也易于理解各个单独的CSS规则。

2.1.2  注释

对CSS规则进行注释是个好习惯,即使只是描述主要的语句而不是所有语句。有两种不同的注释方法。第一,可将注释放在/*…*/标记对中,如下所示:

/* This is a CSS comment */

或者将注释扩展至多行,如下所示:

/* A Multi

?line

?comment */

警告:

如果使用多行注释,应避免在其中嵌套多个注释,否则将出现不可预见的错误。

读书导航