本章重点讨论常见的CSS构造块。由于这些构造块的术语与现实世界联系紧密，大部分构造块的使用方法都非常明显。外边距、内边距、边框、宽度、高度等这些你熟悉的术语的功能和你所想象的大致吻合。

CSS设计的一个重要的方面是运用部分，为设计工作提供较大的灵活性并标记出页面的区域。由于许多构造块的方法都是通过部分来实现他们期望的设计目的，因此，我们应该赶紧去研究一下。

3.1 div

部分（division）——<div>元素，经常以div形式引用——是(X)HTML 的元素，用于定义(X)HTML文件中的区域。只要你愿意，你可以让部分包含任何在页面<body>部分的一些额外元素，如文本、图形等——实际上，这些元素可以是任何元素，甚至是一些不同区域中用到的特殊元素，如页眉、页脚、导航栏，等等。

在大多数情况下，模板中的(X)HTML经常无法提供足够的连接点来使用你的样式。例如，你已经知道如何将基本的样式应用到段落或页眉，但是如果将段落和页眉放在一个框里的话，你会发现要将其他的(X)HTML元素放在框内，而不改变代码也不提高它的复杂度是不可能的。

这就是部分（从现在起将用div表示）最有用处的地方，实际上，甚至可以说是无价的。使用div就如同创造自己的(X)HTML标签。只要需要，你就可以使用。

3.1.1 添加div

将以下代码放入主体部分中，就在HTML中构造了一个div元素。

结果产生一个可以应用CSS的连接点。第2章已经学习了如何运用ID和类在标准的(X)HTML元素中添加标识符的方法。在div中我们采用相同的规则，通过在起始标签中使用id="name"或class="name"引用选择器。下面的例子定义了一个ID为container的部分：

将如下的简单CSS应用到container ID：

通过将CSS应用于标记，容器具有了灰底黑边。此外，它包括的所有元素都将加上从边框开始的20像素的内边距，如图3-1所示。

图3-1 在浏览器中看到的容器部分

注意关于内边距和边框，后续的章节会进行更详细的介绍。

3.1.2 添加子div

容器div可以作为子div的父元素。在此，该ID中包含一个可重用类box：

除了背景颜色是默认的外，针对box类的CSS规则基本上与针对父辈容器的规则一致。值得注意的是，由于没有设置box的固定宽度，它将被拉伸以适合包含它的元素，如其他的div或浏览器窗口：

可以看出，父div中包含了两个框及它们的内容，如图3-2所示。

图3-2 包含了两个相同框的容器div

现在我们创建的三个div可以在图中很清晰地看到了。记住，每个div都可以包含任何元素，标题、段落、图片，甚至是div。总之，元素种类有无数种可能性。

注意和段落、标题等很多元素一样，div是块元素。除非你特别说明，否则它们都将另起一行。块和内联元素将在第6章中再详细讨论。

3.1.3 div和上下文选择器

第2章已经讨论过上下文选择器。它包括两个以上以空格隔开的选择器。当采用这些选择器来控制你所构造的部分时，它们才真正发挥作用。

1. 示例

在前面的例子中，每个div都包含在一个段落中。现在假定，你希望把box类中的所有段落都变成红色，而其他段落仍为默认的黑色。

有两个方法可以实现这个目标，一种方法我们在第2章里已经熟悉了，现在我们介绍了div的作用以后，这种方法就不再是最好的方法了。

(1) 不好的方法

正如你所知道的，以下代码试图创建一个新的类来将段落变成红色，如下所示：

然后，在(X)HTML中用如下代码添加highlight类的标识符：

这些段落当然会被标注成红色，但是为了实现这个效果需要为每个段落起始标签提供额外的标记。div中的每个段落都需要有这种额外的标记，这样会使标记变得臃肿。

(1) 好的方法

现在，我们不再需要标识符。事实上，根本不需要修改(X)HTML。所有的控制都可以在样式表中实现。以如下的形式将段落置于相应的情景中：

用这种方法，不需要额外的标记，并且所有的控制都实现了。上下文选择器说明只有当最后一个选择器(p)是第一个选择器（.box）的直接后代时，规则才会起效。这个例子有力地说明通过简单地运用已经学习的技巧可以对整个div进行大的改动。

另外，可以通过使用另外的上下文选择器来控制父元素（容器div）中的段落。

现在除了包含在box中的段落被标注成红色外，容器中的其他段落被标注成深灰色。

2. 进一步探讨情景

假设你在整个网站上使用box类。这样box类可以是container div的子代，也可以有不同的父元素。如果你只是希望包含在container中的具有box的类属性的段落文本显示粗体，该怎么办呢？这同样可以通过不添加额外的标记而实现。注意，在container div之外，已经添加了新的box div，这个div不是任何元素的父辈。

在神奇的CSS中，上下文选择器包括3个选择器，它们将段落置于更为特殊的情景中。

上下文选择器的功能强大。首先标记非常简洁。诚然，div元素用于把内容分隔开，但是基本的div元素不需要任何标识符。上下文选择器的作用包括以下3个方面：

q 只影响同时是box类和container ID的子代中的段落（p）。

q 不影响包含在container中、而不包含于box类中的段落。

q 也不影响包含于box、而在container之外的段落。

在浏览器上的显示结果如图3-3所示。

图3-3 只有同时包含在box类和container中的段落显示为粗体

图3-3在浏览器窗口给出了此例的结果。例子还说明了基于最小标记可以达到什么样的效果。你的目标就是让基本的(X)HTML元素一直为你干尽量多的活，而尽量少地混合大量的附加标记。上下文选择器和div给设计提供了更大的灵活性，因此，在任何需要的地方都可以使用。抓住一切机会使用它吧，因为它们一直都整装待发。

【查看所有评论(0)条】