正文

样式表组成(2)

CSS入门经典(第3版) 作者:(美)Ian Pouncey


2.2  选择器

在CSS中,选择器是选择应用一条CSS规则的一个或多个HTML元素。简单地说,选择器告诉浏览器样式化哪些内容。前一节中介绍的简单的选择器称为类型选择器,它仅仅引用一种HTML元素,并样式化所有匹配这个选择器的元素。例如,一个p类型选择器会对所有的p元素应用样式。

从示例规则中可以看到,样式表中的body并没有使用左右尖括号(<>),样式化任何元素的时候都是如此,只要把body替换为想要样式化的元素即可。该规则可以将width、margin、background、color及font等CSS属性应用于<body>元素。后面的章节将详细介绍这些属性,不过通过它们的名称您可能已经猜出了相应的用途。

分组选择器

当多个选择器出现在同一条规则中时,它们就被分组到一起。通过在每个选择器之后使用逗号,可以将多个选择器组合到一条规则中,这样一条规则就可以同时应用于多个选择器,如下面的代码所示:

th,

td {

padding: 0 10px 0 0;

text-align: left;

}

分组选择器的目的是避免为每个选择器重复编写同样的声明。如果两个或更多选择器的全部或大部分声明相同,那么可以考虑进行分组。

为可读性起见,建议将每个选择器放到单独的行中。

2.3  声明

声明部分包含在花括号中,从而与选择器分离。在前面显示的规则中,body下面花括号({和})中的每一行都是一个单独的声明。声明中包含属性名称和一个冒号,而且取决于具体的属性,可能还包含一个或多个值。

冒号用于将属性和属性值分离,冒号之前显示的是属性。在示例选择器(参见2.1节)中,width是一个属性,650px是它的值。声明总是以分号结束。

2.4  属性值

虽然某些属性的值非常简单,例如后面将看到的z-index属性的值只是一个数字,但是就允许属性值采用的类型而言,CSS可能会变得相当复杂。前面只看到了CSS中的属性值可以采用的一小部分类型。本节将详细地介绍CSS中可用的各种不同的属性值类型,首先介绍关键字值。

2.4.1  关键字

关键字值是一个命名的值。例如,red、green和blue都是CSS关键字。颜色关键字可以用于任何接受颜色值的属性。

下面代码中的关键字是bold和left。bold和font-weight属性一起使用时可以告诉浏览器如何呈现caption元素的文本,left和text-align属性一起使用时可以告诉浏览器如何对齐文本。

caption {

margin-bottom: 10px;

font-size: 14px;

font-weight: bold;

text-align: left;

}

CSS中使用了多种关键字类型,而且根据对哪个属性或元素应用关键字,有时候单个关键字可以应用不同的样式。例如,CSS使用auto关键字应用一些默认样式和行为,虽然在下面的两个示例中它的含义是相同的,但是产生的效果却不同。在下面的“试一试”中练习使用auto关键字。


上一章目录下一章

Copyright © 读书网 www.dushu.com 2005-2020, All Rights Reserved.
鄂ICP备15019699号 鄂公网安备 42010302001612号