我的位置: 首页  >   揭秘CSS  >   1.3.1 样式规则语法

1.3.1 样式规则语法

编辑:比特教程网    时间:2018-09-25 12:28    


样式规则是CSS的基本单位,每个样式规则由选择器(selector)和声明块(declaration block)两个基本部分构成。

选择器决定为哪些元素应用样式,声明块定义相应的样式。声明块包裹在一对花括号中。声明块由一条或多条声明(declaration)组成,每条声明由一个属性和一个值组成,属性和值之间用冒号隔开。属性是希望设置的样式属性,每个属性有一个值。

具体来讲,一个样式规则由选择器、属性和值这 3 部分构成。格式如下:

selector { property: value; }

为了全面描述一个元素的样式,通常需要指定多个属性,每个属性就需要一条声明,多条声明之间用分号隔开(最后一条声明可以省略分号)。如:

h1 { color: red; font-size: 14px }

上述样式规则中,h1 是选择器,其中包含两条声明。第一条声明中,color 是属性, red是 color 属性的值;第二条声明中,font-size 是属性,14px 是 font-size 属性的值。样式规则的结构如图 1‑2 所示:

CSS样式规则的结构

图1-2  CSS样式规则的结构

上述规则就表示,为页面上的所有 h1 标题应用样式,其作用是将 h1 元素内的文本颜色定义为红色,同时将字体大小设置为 14 像素。

一个样式规则中包含多条声明时,声明的顺序并不重要,并且多条可以在一行内书写,也可以在多行内书写。为了阅读方便,建议一行只写一条声明,一般是将选择器和左大括号放在第一行,然后一条声明写一行,右大括号则单独放在最后一行。由于浏览器会忽略样式规则中的所有空格和跳格,建议使用空格或跳格为每条声明增加缩进,并在冒号和属性值之间增加一个空格。如:

h1 {   color: red;   font-size: 14px;}

在定义属性时,如果属性的值由多个单词组成,单词之间存在空格,则必须把属性值放在引号中。引号既可以是单引号,也可以是双引号。如:

p {   font-family: 'Times New Roman';}

本样式规则中,font-family属性的值为Times New Roman,由于该值是多个单词组成,所以加上了引号。

某些经常在一起使用的样式属性,可以组合起来使用一个特殊的复合属性。复合属性中,属性会包含多个值,值之间需要使用空格隔开。

如,描述边框的border-width、border-style、border-color属性,就可以使用复合属性 border 来一次性设置完成。

img {   border: 1px solid blue;}

CSS对所有的属性和值都有严格要求,如果声明的属性名称在CSS规范中不存在,或者属性的值不符合该属性的要求,则该声明就不会生效。



上一节:1.3 CSS语法

下一节:1.3.2 CSS注释语法