4.2 CSS 语法

CSS遵循标准的who{ what: how;}语法规则

CSS用于定义HTML元素的布局和样式,所以语法格式首先选定元素,然后设定键值对(1个或多个):

/* A CSS rule */
选择器(selector){ 属性(property): 值(value);}

你可以理解为是一个谁{什么:怎么样}的三元组:

who{ what: how;}
  • 选择器定义,也就是哪个HTML元素
  • 属性定义元素的什么特征
  • 定义怎么样改变这个元素的特征

这整个三元组(选择器/属性/值)就构成所谓的 CSS规则(rule)

简单的例子

比如你想改变块引用(blockquotes)的颜色

<blockquote>Something quoted</blockquote>

CSS的选择器可以按标签名称(标签中去除尖括号的部分)来选择,比如上例中的“blockquote”

blockquote{ background: lightgreen;}

这将改变块引用中文本的颜色,接着我们再改变下块引用的背景色来和文本颜色搭配:

blockquote{
  background: lightgreen;
  color: darkgreen;
}

从上面的代码中,你可以看到:

  • 一个选择器中可以添加多个属性/值对。
  • 一般我们把每个属性/值对放在单独的一行,而多个空格和HTML文档中一样是会被忽略的。

<blockquote>元素,它有一个相应的内联版本:<q>。 如果我们想把这两个元素设置成相同的风格,我们可以分别编写上述的代码,但实际上有一个简洁的方法,即多个选择器可以共享样式,具体写法就是使用逗号把选择器分开,如下所示:

q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}

在一条CSS规则中,我们可以有多个选择器,多个属性,甚至可以有多个值(尽管比较少见)。

注释(Comments)

HTML的注释语法不同,CSS的注释风格类似C语言的多行注释:

/* 这是一个CSS注释 */
q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}
/*
注释是给开发人员理解代码用的,
会被计算机忽略。
*/

上面我们讲到了CSS三元组,第一个就是选择器,我们接下来就详细介绍选择器。