揭秘CSS(第 1 版)
1.3.1 样式规则语法
阅读(

概述

CSS简介

CSS开发环境

CSS语法

样式规则语法

样式规则是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规范中不存在,或者属性的值不符合该属性的要求,则该声明就不会生效。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验