Web编程入门经典 第8章 更多层叠样式表(6)

设置@charset规则，以指示样式表所使用的字符集。

@charset规则必须出现在样式表的起始位置，在它的前面甚至不能出现空格。它的值位于双引号中，并且必须是本书后面附录C中指定的一种语言编码。

@charset \

8.9.3 !important规则

CSS以及样式与内容分离的部分目标是使文档对视力受损的人员具有更好的可访问性。因此，在花费宝贵的时间学习CSS以及如何编写样式表以使站点更具有吸引力之后，必须说明的是用户也能够创建自己的样式表！

事实上，很少有用户在浏览页面时创建自己的CSS样式表，以便以他们想要的方式查看页面，但是该功能确实存在，主要为浏览页面不便的人员设计。默认情况下，您的样式表不一定是用户希望看到的：但是，用户的样式表能够包含!important规则，它表明“重写站点中关于该特性的样式表。”例如，用户可以使用如下规则：

p { font-size:18pt !important;

font-weight:bold !important; }

您无法强迫用户使用您的样式表，并且事实上只有很少（如果有的话）的访问者将创建自己的样式表，因此不需要担心这个规则——这里之所以介绍它，是为了帮助理解该规则是什么以及可能使用它的原因。

注意：

在CSS1中，!important规则允许作者否决用户的样式表，但是在第二版CSS中取消了该功能。

8.10 CSS的定位功能

到目前为止，您已经学习在CSS中如何利用框表示每个元素的内容，并且了解到可以使用很多特性影响框和它的内容的外观。现在该了解如何控制元素的内容出现在页面中的位置，方式是指定将框定位在页面中的哪个位置。

在CSS出现之前，通常使用表精确控制页面中内容的位置，并且内容以它们在XHTML文档中的出现顺序显示。但是，通过使用CSS进行定位，可以不使用表布局页面，并且显示信息的顺序可以与它们在XHTML文档中的出现顺序不同。

在CSS2中，存在3种类型的定位方式，可利用它们控制页面的布局：普通定位、浮动定位和绝对定位。在下面的章节中，将介绍如何使用每一种定位方案指示元素内容在页面中出现的位置。

注意：

遗憾的是，您仍然将频繁地看到使用表定位元素在页面中的位置——第9章中将更深入地介绍页面布局方面的内容。但是，当前存在使用CSS进行定位的强烈趋势，它能够使页面的内容具有更好的可重用性。一旦页面的布局依赖于使用表，则通常页面将仅限于显示在最初为其设计的媒体上。随着更多具有不同功能的设备访问Internet，您很可能会更多地看到使用CSS进行定位，它允许布局随着屏幕进行缩放，并允许不同的样式表用于同一个文档。

8.10.1 普通流

默认情况下，通过使用称为普通流的技术在页面中布局元素。在普通流中，页面中的块级元素从上到下排列（记住，每一个块级元素将出现在一个新行中），而内联元素将从左到右排列（因为它们不需要从新行开始）。

例如，每一个题头和段落应该出现在一个不同的行中，而、和等元素的内容将位于一个段落或者其他块级元素中；它们不从新行开始。

图8-26中的3个段落演示了这一点，每一个段落是一个块级元素，从上到下依次排列。在每一个段落内部是内联元素的示例，在该示例中是元素(ch08_eg25.html)。

图8-26

如果希望让元素内容的位置与在普通流中出现的位置不同，可以使用其他两个特性：position和 float。

8.10.2 position特性

position特性可用于为框指定一个位置，它可以采用表8-19中列举的4个值。 值

static relative absolute

表8-19

意 义

该值的功能与普通流相同，并且是默认值，因此您将很少看到指定该值 框的位置可以与它在普通流中的位置有所偏移

框被精确地定位在包含它的元素的位置中，方式是使用从包含元素的左上角开始的X和y

坐标

fixed

位置从一个固定点开始计算：对于浏览器，这个点是浏览器窗口的左上角，如果用户滚动窗口，不会改变该位置

在后续的章节中将依次介绍这些值的用法。

8.10.3 框偏移特性

本章后面将会介绍，当框具有一个position特性并且该特性的值是relative、absolute或fixed时，则将同时使用框偏移特性来指示这些框的位置。表8-20中列举了一些框偏移特性。

表8-20

特 性

top right bottom left

意 义

偏移位置从鱼含它的元素的顶部开始 偏移位置从包含它的元素的右边开始 偏移位置从包含它的元素的底部开始 偏移位置从包含它的元素的左边开始

每一个特性都可以采用长度、百分比或者auto值。相对单位（包括百分比）通常以相对于包含它的框的面积或者特性进行计算。

8.10.4 相对定位

相对定位将元素相对于它在普通流中的位置进行定位。元素与它在普通流中的位置的偏移量由框偏移特性指定。

下面回顾前面关于普通定位的章节中遇到的示例，但是这一次使用相对定位重新定位第二个段落，如图8-27所示。

图8-27

在这个示例中，第二个段落与它在普通流中的位置（即在上一个示例中的位置）有所偏移，左边偏移40个像素并且顶部偏移40个像素——注意下面代码中的负号，它将段落在普通流中的位置向上提升(ch08_eg26.css)。

p {border-style:solid;

border-color:#000000; border-width:2px; padding:5px; width:200px;

background-color:#FFFFFF;} p.two {position:relative;

left:40px; top: -40px;}

框偏移特性(在这个示例中是top和left)的值可以是长度、百分比或者auto。如果值是绝对长度，则可以是负值。

注意：

在左偏移和右偏移之间只能选择一种偏移，在顶部偏移和底部偏移之间也只能选择一种偏移。如果同时指定了左偏移和右偏移，或者同时指定了顶部偏移和底部偏移，则其中一个值必须是另外一个值的负值（例如，top:3px; bottom:-3px;）。如果同时具有顶部偏移和底部偏移，或者同时具有左偏移和右偏移，并且其中一个值不是另外一个值的负值，则右偏移或者底部偏移将被忽略。

当使用相对定位时，某些框最终可能会相互重叠，如同前面的示例所示。因为将框相对于普通流中的位置偏移，所以如果偏移量足够大，则其中一个框最终将位于另外一个框之上。这可能会创建期望的效果；但是，应当注意其中的一些缺陷：

? 除非为框设置背景（背景颜色或者图像），否则默认情况下它将是透明的，这将使重叠文本不容易被识别。在前面的示例中使用background-color特性将段落的背景色设置为白色，从而防止发生这种情况。

? 相对定位的元素互相重叠时，CSS规范没有表明哪个元素应当出现在上方，因此不同浏览器中的处理方式不同（但是可以使用z-index特性控制这种情况，本章后面将介绍该特性）。

8.10.5 绝对定位

绝对定位将元素的内容从普通流中完全移除，并且可以固定该元素的位置。

可以指定一个元素内容的定位方式为绝对定位，方式是赋予它一个position特性，并且该特性的值为absolute;然后使用框偏移特性将其定位到所需的位置。

框偏移特性将元素的位置固定在相对于包含块的位置一一包含块是一个元素，其position特性被设置为relative或者fixed。

查看下面的样式表。这个样式表再次用于3个段落，但是这一次这些段落包含在一个元素中，该元素也使用了绝对定位(ch20_eg27.css):

div.page {

position:absolute;

left:50px;

top: 100px; padding:20px;

border-style:solid; border-width:2px; border-color:#000000;} p {

background-color:#FFFFFF; width:200px;

padding:5px;

border-style:solid; border-color:#000000; border-width:2px;} p.two {

position:absolute; left:50px; top: -25px;}

图8-28给出该示例在浏览器中的外观；从该图中可以清晰地看到，第二段不再位于页面的中间。第二段的元素已经被排除在普通流之外，因为第三段现在放置在第二段原来在普通流中的位置（如果第二段参与普通流的话）。此外，第二段甚至出现在第一段之前，并且偏向于页面的右边！

图8-28

这里使用元素表明该段落相对于包含块进行定位——包含块为绝对定位元素。

绝对定位元素总是出现在相对定位元素之上，如图8-28所示，除非使用了z-index特性（本章后面将介绍z-index特性）。

需要注意的是，因为绝对定位框被排除在普通流之外，即使两个垂直页边空白相遇，它们也不会产生折叠。