HTML5 权威指南（六）

原文：The Definitive Guide to HTML5

协议：CC BY-NC-SA 4.0

十二、使用盒子模型

在这一章中，我将讲述你可以用来配置一个元素的盒子模型的 CSS 属性。正如我在第十六章中解释的，盒子模型是 CSS 中的基本概念之一，你用它来配置元素的外观和文档的整体布局。表 20-1 对本章进行了总结。

对元素应用填充

填充在元素的内容和它的边框之间增加空间。您可以为内容框的各个边缘设置填充，或者使用简写的padding属性在单个声明中应用值。padding属性列于表 20-2 中。

当使用百分比值指定填充时，百分比总是从包含块的宽度得出；高度没有考虑在内。清单 20-1 展示了如何将填充应用到一个元素中。

清单 20-1。对元素应用填充

`

                                                                

        There are lots of different kinds of fruit - there are over 500 varieties         of banana alone. By the time we add the countless types of apples, oranges,         and other well-known fruit, we are faced with thousands of choices.     

     `

在清单 20-1 中，我在盒子的两边应用了不同数量的填充。你可以在图 20-1 的中看到它的效果。我已经设置了background-clip属性(在第十九章中有描述)这样背景色就不会覆盖填充区域，这样会强调填充的效果。

图 20-1。对元素应用填充

您可以使用padding速记属性在一个声明中设置所有四个边缘的填充。您可以为此属性指定一到四个值。当您提供四个值时，它们分别用于设置上、右、下和左边缘的空白。当您省略值时，将使用最匹配的指定值:如果您省略左边的值，则它与右边的值相同；如果省略下限值，它与上限值相同。如果除了一个值之外都忽略，那么所有四条边都采用相同的填充值。

清单 20-2 展示了如何使用padding速记属性。我在这个示例中添加了一个弯曲的边框，以展示如何使用填充来确保边框不会被绘制到元素内容上。

清单 20-2。使用填充速记属性

`

                                                                

        There are lots of different kinds of fruit - there are over 500 varieties         of banana alone. By the time we add the countless types of apples, oranges,         and other well-known fruit, we are faced with thousands of choices.` `    

     `

你可以在图 20-2 中看到浏览器如何显示边框和填充。

图 20-2。使用速记填充属性

如果没有填充，边框会被画在文本上，就像在第十九章中一样。通过填充，您可以确保内容和边框之间有足够的空间来防止这种情况发生。

对元素应用边距

边距是元素边框和页面上围绕它的任何东西之间的空间。这包括其他元素和父元素。表 20-3 总结了控制余量的属性。

与 padding 属性一样，百分比值总是从包含块的宽度派生而来，即使用于填充上边缘和下边缘也是如此。清单 20-3 显示了增加边距的效果。

清单 20-3。向元素添加边距

`

                                                                                   `

在清单 20-3 中，有两个img元素。我为上下边缘指定了 4 个像素的边距，为左右边缘指定了 20 个像素的边距。你可以在图 20-3 中看到边距如何在元素周围创建空间，图中显示了有边距和无边距的img元素。

图 20-3。对元素应用边距的效果

即使使用 Margin 属性之一应用边距，也不会总是绘制边距。例如，如果将边距应用于具有display值inline的元素，则边距不会显示在顶部和底部边缘。我将在本章后面的“设置元素框类型”一节中解释display属性。

控制元素的大小

浏览器将根据页面上的内容流来设置元素的大小。关于如何分配大小，浏览器必须遵循一些极其详细的规则。您可以通过使用尺寸相关的属性来覆盖这种行为，这些属性在表 20-4 中有所描述。

所有这些属性的默认值都是auto，这意味着浏览器会计算出元素的宽度和高度。您可以使用长度或百分比明确指定大小。百分比值是根据包含块的宽度计算的(即使在处理高度时)。清单 20-4 展示了如何设置一个元素的大小。

清单 20-4。设置元素的大小

`

                                                                                                             `

在这个例子中有三个关键元素。一个div元素包含两个img元素。你可以在图 20-4 中看到浏览器如何显示这些元素。

图 20-4。设置元素的大小

div元素是body元素的子元素。当我将div元素的width表示为75%时，我告诉浏览器我希望div元素是包含块(在本例中是body内容框)宽度的 75 %,无论它是什么。如果用户调整浏览器窗口的大小，body元素也将被调整大小，这将导致我的div元素被调整大小以保留75%关系。你可以在图 20-5 中看到调整浏览器窗口大小的效果。我在div元素中添加了一个border，以便于查看它的大小。

图 20-5。调整浏览器窗口大小以展示相对大小关系

您可以看到,div始终是body元素宽度的 75 %,填充了浏览器窗口。我将div元素的高度指定为100px，这是一个绝对值，不会随着包含块的大小而改变。你可以看到当我将浏览器窗口调整为长或短时，div元素的一部分是如何隐藏的。

我对img元素做了同样的事情。其中一个有一个表示为包含块的50%的width值，这意味着调整图像的大小以保持这种关系，即使这意味着图像的长宽比没有被保留。我还没有为第二个img元素设置宽度值，这需要浏览器自己解决。默认情况下，宽度将从高度中获得，设置宽度是为了保持纵横比。

提示注意图像如何溢出div元素的边缘图 20-5 。这就是所谓的溢出。在本章的后面，我会告诉你如何控制溢出。

设置尺寸框

我的例子中的两个img元素具有相同的height值(50%，但是它们在屏幕上看起来不同。这是因为我已经使用了box-sizing属性来更改元素框的一部分，其中一个元素应用了 size 属性。

默认情况下，计算高度和宽度并应用于元素的内容框。这意味着，例如，如果您将元素的height属性设置为100px，那么屏幕上的实际高度将是 100 像素，加上顶部和底部的padding、border和margin值。box-sizing属性允许您指定元素的哪个框区域将被调整大小以应用样式，这意味着您不必自己考虑变化。表 20-4 显示了允许值。

提示大小属性的一个常见用途是尝试创建一个网格布局。这是可行的，但是更好的方法是使用表格布局特性。你可以在第二十一章中了解到这是如何运作的细节。

设定最小和最大尺寸

您可以使用min-和max-属性来设置浏览器自由调整元素大小的限制。这允许浏览器在如何应用大小方面有一定的自由度。清单 20-5 给出了一个演示。

清单 20-5。设定尺寸的最小和最大范围

`

                                                                              `

在清单 20-5 的中，我将min-width和max-width属性应用到一个单独的img元素中，并将初始宽度设置为包含块的 50%。这给了浏览器一些余地来调整图像的大小，以在我定义的上限和下限内保持 50%的关系。浏览器将使用这个余地来保持图像的纵横比，如图 20-6 所示。

图 20-6。使用最小宽度属性设置元素大小的界限

图 20-6 显示了当我调整浏览器窗口使其变小时会发生什么。随着窗口变小，浏览器会调整图像的大小，以保持img元素和body元素之间的百分比关系。当达到最小宽度时，浏览器不能再调整图像的大小。您可以在图中的最后一帧看到这一点，在这里，图像被浏览器窗口的底部裁剪掉了。

注意浏览器对box-sizing属性的支持是可变的。

处理溢出的内容

当您开始更改元素的大小时，您很快就会发现内容太大，无法在元素的内容框中显示。默认行为是内容溢出并被绘制。清单 20-6 创建了一个固定大小的元素，它太小以至于无法显示它的内容。

清单 20-6。创建一个太小而不能完全显示其内容的元素

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

     `

我已经为width和height属性指定了绝对值，这产生了你可以在图 20-7 中看到的效果。

图 20-7。内容太大而无法显示的元素的默认外观

我们可以通过使用overflow属性来改变这种行为，这些属性在表 20-5 中有描述。

overflow-x和overflow-y属性设置水平和垂直溢出的样式，overflow速记属性允许您在一个声明中定义两个方向的样式。表 20-6 显示了这些属性的允许值。

清单 20-7 显示了正在使用的溢出属性。

清单 20-7。控制内容溢出

`

                                                 

#first {overflow: hidden;}
            #second { overflow: scroll;}         
    
    
        

            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices.
        

            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices.
        

     `

在清单 20-7 的中，first段有overflow属性的hidden值，second段有scroll值。你可以在图 20-8 中看到这些值的效果。

图 20-8。使用溢出属性的隐藏和滚动值

提示这是 CSS 模块尚未解决的一个领域。有人提议扩展与溢出相关的属性集，以便支持选框行为(这是元素的内容跨越显示器的地方，以便随着时间的推移所有内容都是可见的)。以下属性由 CSS3 定义，但尚未被任何主流浏览器实现:overflow-style、marquee-direction、marquee-loop、marquee-play-count、marquee-speed和marquee-style。

控制元素可见性

您可以使用visibility属性来控制元素的可见性，这在表 20-7 中有描述。这似乎是一件奇怪的事情，但是您可以通过使用 JavaScript 的这个属性来创建一些复杂的效果。

表 20-8 描述了visibility属性的允许值。

清单 20-8 演示了使用 JavaScript 和一些button元素改变一个元素的可见性(在第十二章的中有描述)。

清单 20-8。使用可见性属性

`

                                        ` `                                                                                                                                                                     

Rank	Name	Color	Size
Favorite:	Apples	Green	Medium
2nd Favorite:	Oranges	Orange	Large

        

            Visible             Collapse             Hidden         

        ****      `

本例中的脚本定位到具有值为firstchoice的id的元素，并根据哪个按钮元素被按下来设置visibility属性的值。这样，您可以在visible、hidden和collapse值之间切换。你可以在图 20-9 中看到每个值的效果。

图 20-9。可见性属性值的效果

collapse值只适用于与表格相关的元素，如tr和td。你可以在第十一章中了解更多这些元素。有些浏览器，比如 Chrome，根本不实现collapse值(这也是我一直用 Firefox 做图 20-9 的原因)。

提示您可以使用display属性的none值来获得与非表格元素上的collapse值相同的效果，或者在没有实现该特性的浏览器中获得相同的效果。接下来我介绍一下display属性。

设置元素框类型

属性为你提供了一种方法来改变一个元素的框的类型，这改变了一个元素在页面上的布局。在本书的第二部分中，您会注意到一些元素有一个样式约定，包括一个display属性值。许多元素使用默认值inline，但是一些元素指定了其他值。display属性的一组允许值在表 20-9 中描述。

这些值会造成很多混乱，并且对文档的布局有深远的影响。我将在接下来的章节中解释每一种盒子类型。

了解块级元素

当您使用block值时，您创建了一个块级元素。这是一个在垂直方向上与其周围的元素截然不同的元素。您通常可以通过在元素前后放置一个换行符来实现这种效果，在元素及其周围环境之间创建一种分离感，就像书中出现的段落一样。表示段落的p元素在其默认样式约定中包含了display属性的block值，但是您可以将该值应用于任何元素，如清单 20-9 所示。

清单 20-9。使用显示属性的块值

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

        

            One of the most interesting aspects of fruit is the variety available in             each country. **I live near London,** in an area which is known for             its apples. When travelling in Asia, I was struck by how many different             kinds of banana were available - many of which had unique flavours and             which were only avaiable within a small region.         

     `

您可以通过两种不同的元素类型看到块级元素对布局的影响。第一个是p元素，正如我提到的，它使用默认样式约定中的display属性的block值(你可以在第九章的中了解更多关于p元素的信息)。我还想演示您可以将这个属性值应用于任何元素，所以我包含了一个span元素，并在style元素中为这个元素类型显式设置了display属性。你可以在图 20-10 中看到这种盒型的视觉效果。

图 20-10。使用显示属性的块值

你已经看到了p元素是如何显示的。我在这个例子中给元素添加了一个边框，使垂直间距更加明显。请注意，我应用了block值的span元素在包含p元素的框中也是明显的。

了解内联级元素

当您使用inline值时，您创建了内联级元素，这些元素在视觉上与周围的内容没有区别，比如一行文本中的一个单词。清单 20-10 展示了如何应用这个值，甚至是像p这样的元素，默认情况下是块级元素。

清单 20-10。使用显示属性的内联值

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

        

            One of the most interesting aspects of fruit is the variety available in             each country. I live near London, in an area which is known for             its apples. When travelling in Asia, I was struck by how many different             kinds of banana were available - many of which had unique flavours and             which were only avaiable within a small region.         

     `

我已经将inline属性应用于p和span元素，你可以在图 20-11 中看到效果。您可以看到在p元素之间没有分隔，并且span元素与文本的其余部分内联显示。

图 20-11。使用显示属性的内联值

使用inline值时，浏览器会忽略某些属性，如width、height和margin。我已经为清单中的span元素定义了所有三个属性的值，但是您可以看到它们还没有应用到布局中。

了解内嵌块元素

inline-block值创建了一个元素，它的盒子是block和inline特征的混合。盒子的外部被视为一个inline元素。这意味着没有纵向显著性，内容出现在周围内容的旁边。但是，盒子的内部被视为一个block元素，并应用了width、height和margin等属性。你可以在清单 20-11 中看到它的效果。

清单 20-11。使用内嵌块值

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

        

            One of the most interesting aspects of fruit is the variety available in             each country. I live near London, in an area which is known for             its apples. When travelling in Asia, I was struck by how many different             kinds of banana were available - many of which had unique flavours and             which were only avaiable within a small region.         

     `

这个清单中唯一的变化是span元素的新的display属性值，但是视觉效果是显著的，因为以前被忽略的属性(当display值为inline时)现在被应用了。你可以在图 20-12 中看到效果。

图 20-12。使用显示属性的内嵌块值

了解磨合要素

run-in值创建一个盒子，其类型取决于周围的元素。浏览器必须评估三种情况来确定磨合框的性质。

1. 如果一个run-in元素包含一个display值为block的元素，那么run-in元素就成为一个块级元素。
2. 否则，如果run-in元素的下一个同级元素是块元素，那么 run-in 元素成为同级元素中的第一个内联级元素。我在清单 20-12 中演示了这个条件。
3. 否则，磨合元素将被视为块级元素。

在这三个条件中，第二个条件具有示范性。清单 20-12 显示了一个磨合元素，它的兄弟元素是一个块级元素。

清单 20-12。具有块级同级的磨合元素

`

                                                                                 There are lots of different kinds of fruit - there are over 500 varieties             of banana alone.                  

            By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

     `

在图 20-13 的中，你可以看到run-in元素是如何被视为块的一部分的(尽管我应该注意到并非所有的浏览器都正确支持这个属性)。

图 20-13。具有块级同级的磨合元素

如果同级元素不是块级元素，则插入部分被视为块。这种关系的一个例子显示在清单 20-13 中。

清单 20-13。具有内嵌同级的插入元素

`

                                                                                 There are lots of different kinds of fruit - there are over 500 varieties             of banana alone.                  

            By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

     `

在本例中，run-in元素显示为一个块，如图 20-14 中的所示。

图 20-14。显示为块级元素的磨合元素

隐藏元素

none值告诉浏览器不要为一个元素或任何派生元素创建任何类型的框。当display属性设置为none时，元素在页面布局中不占据任何空间。清单 20-14 显示了一个 HTML 文档，其中有一个简单的脚本，用于在block和none之间切换p元素的display属性。

清单 20-14。使用显示属性的 none 值

`

                                                           

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

        

            One of the most interesting aspects of fruit is the variety available in             each country. I live near London, in an area which is known for             its apples. When travelling in Asia, I was struck by how many different             kinds of banana were available - many of which had unique flavours and             which were only avaiable within a small region.         

        

            Block             None         

    

`

在图 20-15 的中，你可以看到none值是如何使元素从布局中移除的。

图 20-15。显示属性的 none 值的效果

创建浮动框

您可以使用float属性来创建浮动框，这些浮动框被移动到一边，直到左边缘或右边缘接触到包含块或另一个浮动框的边缘。表 20-10 总结了该属性。

表 20-11 描述了float属性的允许值。

清单 20-15 显示了正在使用的float属性。

清单 20-15。使用浮动属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

        

            One of the most interesting aspects of fruit is the variety available in             each country. I live near London, in an area which is known for             its apples.         

        

            When travelling in Asia, I was struck by how many different             kinds of banana were available - many of which had unique flavours and             which were only avaiable within a small region.         

        

` `            Left             Right             None         

        ****      `

在这个例子中，有许多p元素，其中两个的浮点值为left。这意味着它们将被向左移动，直到碰到包含它的盒子或另一个浮动元素的边缘。因为有两个元素被移动，第一个将被移动到包含块的边缘，第二个将邻接第一个。你可以在图 20-16 中看到这种效果。

提示注意，当我在 JavaScript 中引用float属性时，我必须使用cssFloat。在第二十九章的中，你会学到用 JavaScript 设计元素的样式

图 20-16。使用浮动属性的左值

注意其余的内容是如何围绕浮动元素流动的。在这个例子中，我还添加了一些button元素和一个简单的脚本，该脚本根据哪个按钮被按下来改变两个p元素的float值。如果按下Right按钮，可以看到元素是如何向右移动的，如图图 20-17 所示。注意元素出现的顺序:文档中定义的第一个元素在最右边。

图 20-17。使用浮动属性的正确值

最后一个按钮None，通过将float值设置为none来禁用浮动效果。这将恢复元素的默认框行为。p元素默认为块级元素，你可以在图 20-18 中看到效果。

图 20-18。使用浮动属性的 none 值

防止浮动元件堆积

默认情况下，浮动元素会一个挨着一个堆叠起来。您可以通过使用clear属性来防止这种情况发生，该属性指定一个浮动元素的一个或两个边缘不能与另一个浮动元素的边缘相邻。表 20-12 总结了clear属性。

表 20-13 描述了clear元素的允许值。

清单 20-16 显示了正在使用的clear属性。

清单 20-16。使用清除属性

`

                                                 

p.cleared {
                clear:left;
            }

    
    
        

            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices.
        

        

            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples.
        

        

            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.
        

            Left
            Right
            None
        

    

`

这是上一个例子的简单扩展，增加了一个新的样式来清除第二个p元素的左边缘。你可以在图 20-19 的中看到这是如何改变页面布局的(图中元素向左浮动)。

图 20-19。清除浮动元素的左边缘

p元素的左边缘不允许靠近另一个浮动元素，因此浏览器将该元素在页面上下移。右边缘仍未清除，这意味着当你向右浮动元素时，它们会彼此接触，如图图 20-20 所示。

图 20-20。右浮动元素的未清除右边缘

总结

在这一章中，我展示了如何执行元素的盒子模型的基本配置，改变它在页面布局中的显示方式。您从基本属性开始，比如padding和margin，并继续深入到更复杂的概念，比如宽度和高度的范围以及溢出内容。

本章中最重要的概念是你可以为一个元素创建的不同类型的盒子的效果。理解块级元素和内联级元素之间的关系对于掌握 HTML5 布局至关重要，浮动元素和清除边缘是非常广泛使用的技术，可以在页面中创建灵活性。

在下一章，我将向你展示一些 CSS 支持的创建元素布局的更复杂的模型。

二十一、创建布局

在这一章中，我将向你展示用于控制页面元素布局的不同选项。随着人们越来越重视 HTML 元素的语义意义和它们的表现效果，CSS 在 HTML5 中布局元素的作用变得越来越重要。CSS3 中有一些非常有用的布局特性，当然，您可以使用 CSS 早期版本中的现有功能。

对于 CSS3，有两个推荐的布局模型还没有成熟到足以让我在本章中介绍。第一个是模板布局，它允许您灵活地包含元素。没有一个浏览器实现这个模块，但是您可以通过在[a.deveria.com/?p=236](http://a.deveria.com/?p=236)提供的 jQuery 插件来体验这个功能。另一个新模块为布局创建灵活的网格。不幸的是，在我写这篇文章的时候，规范还没有完成，也没有可用的实现。

CSS3 中的整个布局区域仍然不稳定。我在本章中介绍的一种布局风格——灵活的盒子模型——提供了很好的特性，但是标准一直在变化，我不得不使用浏览器特有的属性来演示这种布局方法，这些属性是根据标准的早期草案实现的。

鉴于这些新特性的早期性质，我建议考虑使用 CSS 框架来创建复杂的页面布局。我推荐 Blueprint，你可以从[www.blueprintcss.org](http://www.blueprintcss.org)下载。在 CSS3 布局特性成熟之前，CSS 框架可能会提供您需要的功能。表 21-1 对本章进行了总结。

定位内容

引导内容的最简单的方式是通过定位，这允许你改变元素在浏览器中的布局方式。表 21-2 描述了定位属性。

设置职位类型

属性设置元素的定位方法。允许值在表 21-3 中描述。

position属性的不同值指定了元素定位的不同元素。您使用top、bottom、left和right属性来从由position属性指定的元素偏移元素。清单 21-1 展示了不同值的效果。

***清单 21-1。*使用位置属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.         

        

            One of the most interesting aspects of fruit is the variety available in             each country. I live near London, in an area which is known for             its apples.

        
        

            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.
        

        

            Static
            Relative
            Absolute
            Fixed
        

        
     `

在这个例子中，我在页面中添加了一个小脚本，它根据按钮的按下情况来改变img元素的 position 属性的值。注意，我已经将left属性设置为150px，将top属性设置为5px。这意味着当应用除static之外的任何position值时，img元素将沿水平轴偏移 150 个像素，沿垂直轴偏移 5 个像素。图 21-1 显示了从static(默认值)到relative的过渡。

***图 21-1。*位置属性的静态和相对值

relative值应用top、bottom、left和right属性来相对于静态值下的位置定位元素。如图所示，150px的left和top值导致img元素向右下方移动。

absolute值使得元素相对于具有除了static之外的position值的最近祖先被定位。本例中没有这个元素，这意味着该元素是相对于body元素定位的，如图图 21-2 所示。

***图 21-2。*仓位属性的绝对值

请注意，当我滚动浏览器页面时，img元素会随着其余内容一起移动。这与fixed值的工作原理相反，如图图 21-3 所示。

***图 21-3。*位置属性的定值

当使用fixed值时，元素相对于浏览器窗口放置。这意味着该元素占据相同的位置，即使其余内容向上或向下滚动。

设置 Z 顺序

z-index属性允许您指定绘制元素的前后顺序。该属性在表 21-4 中进行了总结。

z-index值是一个数字，允许负值。值越小，元素将被绘制得越靠后。这个属性只有在元素重叠时才有用，如清单 21-2 中的所示。

***清单 21-2。*使用 z-index 属性

`

                                                 

#banana {
                z-index: 1;
                top: 15px;
                left:150px;
            }

#apple {
                z-index: 2;
                top: 25px;
                left:120px;
            }
        
    
    
        

            There are lots of different kinds of fruit - there are over 500 varieties
            of banana alone. By the time we add the countless types of apples, oranges,
            and other well-known fruit, we are faced with thousands of choices.
        

        

            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples.

        
        
        

            When travelling in Asia, I was struck by how many different
            kinds of banana were available - many of which had unique flavours and
            which were only avaiable within a small region.
        

     `

在这个例子中，我已经创建了两个fixed位置img元素，并设置了top和left的值，以使元素重叠。具有apple的id值的img元素的z-index值是两个值中较大的一个，因此，将被绘制在香蕉图像上，如图 21-4 中的所示。

***图 21-4。*使用 z-index 属性

属性的默认值是零，这也是浏览器在元素上绘制图像的原因。

创建多栏布局

多栏功能允许您将内容排列在多个垂直栏中，就像您在报纸上看到的一样。表 21-5 描述了多列属性。

清单 21-3 显示了应用于 HTML 文档的多栏布局。

***清单 21-3。*使用多栏布局

`

                                                                    

            There are lots of different kinds of fruit - there are over 500 varieties             of banana alone. By the time we add the countless types of apples, oranges,             and other well-known fruit, we are faced with thousands of choices.                          One of the most interesting aspects of fruit is the variety available in             each country. I live near London, in an area which is known for             its apples.                          When travelling in Asia, I was struck by how many different             kinds of banana were available - many of which had unique flavours and             which were only avaiable within a small region.

And, of course, there are fruits which are truely unique - I am put in mind
            of the durian, which is widely consumed in SE Asia and is known as the
            “king of fruits”. The durian is largely unknown in Europe and the USA - if
            it is known at all, it is for the overwhelming smell, which is compared
            to a combination of almonds, rotten onions and gym socks.
        

     `

在这个例子中，我将一些多列属性应用于一个p元素。这个元素混合了文本和img元素，你可以在图 21-5 中看到列的效果。

***图 21-5。*多栏布局

注图中显示的是 Opera，这是本文撰写时唯一支持多栏布局的浏览器。并非所有属性都已实现，但基本功能仍然存在。

如图 21-5 所示，p元素的内容从一列流向下一列，很像报纸页面的样式。在这个例子中，我将float属性应用于img元素，这样p元素的文本内容将很好地围绕图像流动。关于float财产的细节可以在第二十章中找到。

我使用了column-count属性来指定这个布局中的三列。调整窗口大小时，浏览器将调整列的宽度，以保留列数。另一种方法是指定所需的列宽，如清单 21-4 所示。

***清单 21-4。*设置列宽

`…

…`

当你应用这个属性时，浏览器通过添加和删除元素的列来保持指定的列宽，如图 21-6 所示。

***图 21-6。*通过宽度定义列，而不是计数

创建灵活的方框布局

柔性框布局(也称为柔性框)是 CSS3 的一个增强，它为display属性(flexbox)添加了一个新值，并定义了一些附加属性。灵活的布局使您可以创建在调整浏览器窗口大小时响应良好的流畅界面。这是通过在包含的元素之间分配容器块中未使用的空间来实现的。flexbox 的规范定义了以下新属性:

• flex-align
• flex-direction
• flex-order
• flex-pack

在我写这篇文章的时候，灵活盒子布局的标准仍然不稳定。属性的名称及其值最近已经更改。主流浏览器基于以前的属性名称，使用浏览器特定的属性和值实现了该特性的核心功能。

flexbox 是对 CSS 的一个有用且重要的补充，因此我将向您展示基于早期标准草案并使用–webkit前缀属性的功能。这并不理想，但它会让您对 flexbox 的功能有一个大致的了解，并有望在它可用并被广泛实现时，让您能够轻松地过渡到最终的标准。考虑到规范和实现之间的差异，让我们从定义 flexbox 要解决的问题开始。清单 21-5 显示了一个有问题的简单布局。

***清单 21-5。*一个有布局问题的 HTML 文档

`

                                                                                 

                There are lots of different kinds of fruit - there are over 500 varieties                 of banana alone. By the time we add the countless types of apples,                 oranges, and other well-known fruit, we are faced with thousands                 of choices.             

            

                One of the most interesting aspects of fruit is the variety available in                 each country. I live near London, in an area which is known for                 its apples.             

            

                When travelling in Asia, I was struck by how many different kinds of` `                banana were available - many of which had unique flavours and which                 were only avaiable within a small region.             

              `

一个div中包含三个p元素。我想在水平行中显示p元素，使用float属性很容易做到(在第二十章中有描述)。你可以在图 21-7 中看到浏览器是如何显示这个 HTML 的。

***图 21-7。*未分配空白空间的元素

您可以使用 flexbox 解决的问题是如何处理出现在p元素右边的空白空间块。有几种方法可以解决这个问题。例如，您可以使用百分比宽度，但是 flexbox 为您提供了一个更加流畅和优雅的选择。表 21-6 显示了实现 flexbox 核心功能的三个-webkit属性(为了简洁，我省略了–webkit前缀)。

创建简单的 Flexbox

使用display属性创建一个 flexbox。标准值将是flexbox，但是您必须使用–webkit-box，直到标准完成并实现。您使用box-flex属性告诉浏览器如何在元素之间分配未使用的空间。您可以在清单 21-6 的中看到新的display值和box-flex属性。

***清单 21-6。*创建一个简单的 Flexbox

`

                                                                                 

                There are lots of different kinds of fruit - there are over 500 varieties                 of banana alone. By the time we add the countless types of apples,                 oranges, and other well-known fruit, we are faced with thousands                 of choices.             

            

                One of the most interesting aspects of fruit is the variety available in` `                each country. I live near London, in an area which is known for                 its apples.             

            

                When travelling in Asia, I was struck by how many different kinds of                 banana were available - many of which had unique flavours and which                 were only avaiable within a small region.             

              `

display属性应用于 flexbox 容器。这是将具有额外空间的元素，并且您希望对其内容进行灵活布局。box-flex属性应用于 flexbox 容器内的元素，并告诉浏览器哪些元素的大小应该随着容器大小的变化而伸缩。在本例中，我选择了p元素，它的id值为second。

提示注意，我已经从p元素的样式声明中移除了float属性。Flexbox 元素不能包含浮动元素。

你可以在图 21-8 中看到浏览器是如何伸缩所选元素的大小的。

***图 21-8。*伸缩元件

我已经扩展了图 21-8 中的浏览器窗口，这导致了div容器的扩展和second段落的伸缩以占据额外的空间。弯曲不仅仅是增加空间；当我缩小浏览器窗口时，伸缩元素被调整大小以适应空间损失，如图图 21-9 所示。请注意，应用了box-flex属性的元素在大小上没有变化。

***图 21-9。*调整大小以适应更小空间的伸缩元件

弯曲多个元件

您可以通过应用box-flex属性来告诉浏览器调整多个元素的大小。您设置的值决定了浏览器将用于分配空间的比率。清单 21-7 展示了对前一个例子中的样式元素的修改。

***清单 21-7。*创建多个灵活元素

`…

…`

我已经用first的id对p元素应用了box-flex属性。这个属性的值是3，这意味着浏览器将分配三倍的额外空间给first元素，就像分配给second元素一样。当您创建这样的比率时，您指的只是元素的灵活性。您使用该比率来分配额外的空间或减小元素的大小，而不是更改其首选大小。你可以在图 21-10 中看到该比率是如何应用的。

***图 21-10。*创建弹性比率

处理垂直空间

属性让你告诉浏览器如何处理任何额外的垂直空间。该元素在表 21-7 中进行了总结。

默认设置是垂直拉伸元素，使它们填满空间。你可以在图 21-10 中看到这一点，其中前两个p元素的大小被调整为在它们的内容下面有一个空白空间。表 21-8 显示了box-align属性的允许值。

清单 21-8 显示了应用box-align属性的样式元素变化。请注意，该属性应用于 flex 容器，而不是内容元素。

***清单 21-8。*应用框对齐属性

`…

…`

在本例中，我选择了end值，这意味着内容元素被放置在容器元素的底部边缘，任何垂直空间都将显示在它们的上方。你可以在图 21-11 的中看到该值的效果。

***图 21-11。*应用框对齐属性

处理最大尺寸

flexbox 模型将考虑内容元素的最大大小值。浏览器将调整元素的大小以填充额外的空间，直到达到最大大小。属性告诉浏览器，如果在所有额外的空间被分配之前，所有的灵活元素都已经达到了它们的最大尺寸，该做什么。该属性在表 21-9 中进行了总结。

表 21-10 描述了该属性的允许值。

清单 21-9 显示了正在使用的box-pack属性。注意，我已经为p元素定义了max-width值(你可以在第二十章的中了解更多关于max-width的内容)。

***清单 21-9。*使用装箱属性

`

                                                                        

                There are lots of different kinds of fruit - there are over 500 varieties                 of banana alone. By the time we add the countless types of apples,                 oranges, and other well-known fruit, we are faced with thousands                 of choices.             

            

` `                One of the most interesting aspects of fruit is the variety available in                 each country. I live near London, in an area which is known for                 its apples.             

            

                When travelling in Asia, I was struck by how many different kinds of                 banana were available - many of which had unique flavours and which                 were only avaiable within a small region.             

              `

你可以在图 21-12 的中看到该属性的效果。在灵活的p元素达到其最大宽度后，浏览器开始在元素之间分配额外的空间。请注意，内容元素的之间只有的空间；第一个元素之前和最后一个元素之后都没有空格。

***图 21-12。*使用装箱属性

创建表格布局

多年来，HTML table元素已经被广泛用于布局网页，但是对 HTML 元素语义重要性的日益强调使得这一点变得不可取，在 HTML5 中你必须小心只使用table元素来呈现表格数据(详见第十一章)。

当然，使用table元素如此流行的原因是因为它解决了一个非常常见的布局问题:创建简单的网格来保存内容。幸运的是，您可以使用 CSS 表格布局特性来布局页面，就像使用table元素一样，但是不会滥用它的语义意义。使用display属性创建 CSS 表格布局。与该特性相关的值在表 21-11 中描述。表中显示的每个值对应一个 HTML 元素。

应用这些值的过程在清单 21-10 中演示。

***清单 21-10。*创建 CSS 表格布局

`

                                                 

#table {
                display: table;
            }
            div.row {
                display: table-row;
                background-color: lightgray;
            }

p {
                display: table-cell;                 border: thin solid black;
                padding: 15px;
                margin: 15px;
            }

img {
                float:left;
            }

    
    
        

            
                

                    There are lots of different kinds of fruit - there are over 500
                    varieties of banana alone. By the time we add the countless types of
                    apples, oranges, and other well-known fruit, we are faced with
                    thousands of choices.
                

                

                    One of the most interesting aspects of fruit is the variety available
                    in each country. I live near London, in an area which is known for
                    its apples.
                

                

                    When travelling in Asia, I was struck by how many different kinds of
                    banana were available - many of which had unique flavours and which
                    were only avaiable within a small region.
                

            
            
                

                    This is an apple.
                

                

                    This is a banana.
                

                

                    No picture here
                

            
        
    

`

你可以在图 21-13 中看到这些值的效果。

***图 21-13。*一个简单的 CSS 表格布局

表格布局最受推崇的行为是自动调整单元格的大小，以便最宽或最高的内容设置整列或整行的大小。你可以在图 21-13 中看到这个效果。

总结

在这一章中，我向你展示了创建布局的 CSS 特性，从简单的元素定位到灵活的盒子布局的流畅性。我还向您展示了如何在不滥用table HTML 元素的情况下创建表格布局。

布局是各种 CSS3 模块中备受关注的一个领域，但它仍处于早期阶段，并不是所有的功能集都被浏览器正确定义或实现。在此期间还有很多工作要做(特别是如果您采用 CSS 布局框架)，我建议您密切关注 CSS 新布局模块的接受度。

二十二、设置文本样式

在这一章中，我将向你展示可以用来设置文本样式的 CSS 属性。对于 CSS3 来说，这是一个不稳定的领域。有一些非常有用的新特性已经被广泛采用(我将在接下来的章节中解释)。还有一些非常投机的建议，其未来是不确定的。这些倾向于处理非常技术性的印刷细节，并且不确定是否有足够的需求来推动这些提议成为标准。也就是说，主流浏览器所拥有的特性使得处理文本变得更加灵活和愉快。表 22-1 提供了本章的总结。

提示color属性可以用来设置文本的颜色。这个属性在第二十四章中有描述。

应用基本文本样式

在下面几节中，我将向您展示如何使用应用基本文本样式的属性。

对齐文本

有一些属性可用于管理文本内容的对齐和调整，如表 22-2 所述。

text-align属性非常简单，尽管需要注意的是，您可以将文本与显式命名的边缘对齐(使用left和right值)，或者与所用语言固有的边缘对齐(使用start和end值)。在处理从右向左的语言时，这是一个重要的区别。清单 22-1 显示了应用于文本块的text-align属性。

清单 22-1。对齐文本

`

                                        ` `                           

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the countless types of             apples, oranges, and other well-known fruit, we are faced with             thousands of choices.             One of the most interesting aspects of fruit is the             variety available in each country. I live near London, in an area which is             known for its apples.         

        

            Start             End             Left             Right             Justify             Center         

              `

在这个例子中，我添加了一个简单的脚本，它根据按钮的按下情况来改变p元素的text-align属性的值。图 22-1 显示了一些属性值对文本对齐的影响。

图 22-1。文本对齐属性的居中值和右值的效果

当使用justify值时，可以使用text-justify属性来指定如何给文本添加间距。该属性的允许值在表 22-3 中描述。

处理空白

空白在 HTML 中通常被折叠或忽略。这允许您将 HTML 文档的布局与页面上的外观分开。清单 22-2 显示了一个包含空白的文本块的 HTML 文档。

清单 22-2。一个带有空白的 HTML 文档

`

                                                                    **

            There are lots of different kinds of fruit - there are over 500             varieties

of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.

One     of the      most interesting aspects of fruit is the
            variety available   in each country. I live near London,

in an area which is
            known for its apples.

**
     `

我在文本中引入了一些空格、制表符和换行符。当浏览器遇到多个空格字符(如多个空格)时，它们被折叠，意味着它们被替换为单个空格字符。其他类型的空白，比如换行符，会被忽略，浏览器会对文本进行换行，这样各个行就能符合元素的边界。你可以在图 22-2 的例子中看到浏览器显示文本的方式。

图 22-2。HTML 文档中空白的默认处理

这并不总是方便的——有时您希望保留文本在源 HTML 文档中的格式。您可以使用whitespace属性控制空白字符的处理，该属性在表 22-4 中进行了总结。

whitespace属性的允许值在表 22-5 中描述。

清单 22-3 展示了whitespace属性的应用。

清单 22-3。使用空白属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties

of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with
            thousands of choices.

One     of the      most interesting aspects of fruit is the
            variety available   in each country. I live near London,

in an area which is
            known for its apples.

     `

你可以在图 22-3 中看到pre-line值的效果。文本换行，以便内容适合元素，但保留换行符。

图 22-3。使用空白属性的行前值

提示文本的 CSS3 模块将whitespace属性定义为另外两个属性的简写:bikeshedding和text-wrap。这两个属性都还没有实现，bikeshedding属性的定义也不完整。(一个突出的问题是挑选一个更有意义的名字。)

指定文本方向

direction属性让你告诉浏览器一个文本块的方向，如表 22-6 所述。

您可以在清单 22-4 的中看到direction属性的一个简单应用。

清单 22-4。使用方向属性

`

                                                 

#second {
                direction: rtl;
            }
        
    
    
        

            This is left-to-right text
        

        

            This is right-to-lefttext
        

    

`

你可以在图 22-4 中看到这个属性的效果。

图 22-4。使用方向属性

注意direction属性已经从相关 CSS 模块的最新草案中删除，尽管没有给出原因，并且可能在模块最终确定之前恢复。

指定单词、字母和行之间的间距

您可以告诉浏览器在单词、字母和行之间放置多少空间。相关属性在表 22-7 中描述。

清单 22-5 显示了应用于一个文本块的所有三个属性。

清单 22-5。使用字母间距和单词间距属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the countless types of             apples, oranges, and other well-known fruit, we are faced with             thousands of choices.         

` `     `

你可以在图 22-5 中看到这些属性的效果。

图 22-5。应用单词间距和字母间距属性

控制断词

属性告诉浏览器当一个单词的长度超过它包含的块的宽度时该怎么做。该属性的允许值在表 22-8 中描述。

清单 22-6 展示了word-wrap属性的应用。

清单 22-6。使用自动换行属性

`

                                        ` `        

#first {
                word-wrap: break-word;
            }

#second {
                word-wrap: normal;
            }
        
    
    
        

            There are lots of different kinds of fruit - there are over 500
            varieties of madeupfruitwithaverylongname alone.
        

        

            There are lots of different kinds of fruit - there are over 500
            varieties of madeupfruitwithaverylongname alone.
        

    

`

在这个例子中有两个p元素，我已经对它们应用了word-wrap属性的值。你可以在图 22-6 中看到属性的效果。

图 22-6。使用自动换行属性

图中最左边的p元素使用的是break-word值，所以文本中很长的单词会被打断并换行以适合它。另一个p元素使用默认值normal，这意味着浏览器不会打断这个单词，即使它溢出了p元素的边缘。

提示你可以使用overflow属性(在第二十章中描述)来阻止浏览器显示溢出的文本，尽管这样做的效果只是不显示单词中不合适的部分。

缩进首行

属性允许你为一个文本块的第一行指定一个缩进，用长度或者包含元素的宽度的百分比来表示。表 22-9 总结了这一特性。

清单 22-7 显示了这个属性的用法。

清单 22-7。使用文本缩进属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the countless types of` `            apples, oranges, and other well-known fruit, we are faced with             thousands of choices.             One of the most interesting aspects of fruit is the             variety available in each country. I live near London, in an area which is             known for its apples.         

     `

你可以在图 22-7 中看到该属性的效果。

图 22-7。缩进文本块的第一行

修饰和转换文本

有两个属性，text-decoration和text-transform，允许您修饰和转换文本。这些在表 22-10 中描述。

属性对文本块应用一种效果，比如给它加下划线。默认值为none(表示不应用任何装饰)。text-transform属性改变了文本块的大小写，同样，默认值是none。在清单 22-8 中，您可以看到这两个属性都被应用，以及在它们之间切换的脚本。

清单 22-8。使用文本装饰和文本转换属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the countless types of             apples, oranges, and other well-known fruit, we are faced with             thousands of choices.             One of the most interesting aspects of fruit is the             variety available in each country. I live near London, in an area which is             known for its apples.         

     `

图 22-8 显示了text-transform property的uppercase值和text-decoration属性的line-through值一起应用的效果。

图 22-8。装饰和改造正文

提示text-decoration属性的blick值应该尽量少用。它会产生一种非常烦人的效果，尤其是当用户长时间使用这个页面的时候。我建议找一种不那么令人恼火的方式来吸引用户的注意力。

创建文本阴影

在第十九章中，我向你展示了如何为元素创建阴影。你可以使用text-shadow属性对文本做同样的事情，在表 22-11 中有总结。

h-shadow和v-shadow值指定阴影的偏移量。值以长度表示，并且允许负值。blur值是另一个长度值，指定应用于阴影的模糊程度。该值是可选的。color值指定阴影的颜色。清单 22-9 显示了正在使用的text-shadow属性。

清单 22-9。使用文本阴影属性

`

    ` `                                                               

Thoughts about Fruit

        

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the countless types of             apples, oranges, and other well-known fruit, we are faced with             thousands of choices.         

     `

在这个例子中，我对文本应用了两种不同的阴影。你可以在图 22-9 中看到效果。请注意，阴影遵循文本字符的形状，而不是包含元素的形状。

***图 22-9。*对文本应用阴影

使用字体

您可以对文本进行的最基本的更改之一是用于显示字符的字体。表 22-12 描述了字体相关的属性。排版的平衡很难实现——一方面，有些高级用户想要控制他们排版的每一个方面(有很多)。另一方面，有一些普通的设计人员和程序员希望能够方便地使用关键的排版功能，但又不想陷入细节中。可悲的是，CSS 字体支持不能满足任何一方。很少暴露出字体的深层技术方面，但是那些暴露出来的对主流设计师或程序员来说用处不大。有一些提议的 CSS3 模块将增强字体支持，但它们仍处于早期阶段，尚未吸引任何主流实现。

font属性值的格式如下:

font: <font-style> <font-variant> <font-weight> <font-size> <font-family>

选择字体

属性指定了将要使用的字体，按照偏好的顺序。浏览器从列表中的第一种字体开始，向下搜索，直到找到可以使用的字体。这种方法是必需的，因为您可以使用安装在用户计算机上的字体，当然，不同的用户会根据操作系统和偏好安装不同的字体。

作为最后一道防线，CSS 定义了一些随处可用的通用字体。这些是字体的大类，被称为通用字体族，浏览器呈现它们所使用的确切字体可能会有变化。通用字体系列的总结可在表 22-13 中找到。

清单 22-10 展示了应用于文本块的font-family属性。

清单 22-10。使用字体系列属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the countless types of             apples, oranges, and other well-known fruit, we are faced with             thousands of choices.         

     `

在这个例子中，我为font-family属性指定了HelveticaNeue Condensed。这是一种由 press 使用的字体，并不是在每个系统上都可用。我指定通用的monospace作为在HelveticaNeue Condensed不可用时使用的后备。你可以在图 22-10 中看到这种效果。

图 22-10。使用字体系列属性

图右边的浏览器运行在我用来写这本书的机器上。它安装了 Apress 字体，因此浏览器能够找到并使用HelveticaNeue Condensed。左边的浏览器来自我的一台测试机，没有安装HelveticaNeue Condensed。你可以看到它已经退回到使用通用的monospace。

提示使用备用字体时可能出现的一个问题是屏幕上的字体大小不同。您可以在图中看到这一点，其中备用字体比首选字体大。font-size-adjust属性可以用来表示缩放比例，但目前只有 Firefox 支持。

设置字体大小

font-size属性允许您指定字体的大小。该属性的允许值在表 22-14 中描述。

清单 22-11 显示了使用中的字体大小属性。

清单 22-11。使用字体大小属性

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties of **banana** alone. By the time we add the             countless types of ****apples, oranges, and other             well-known fruit, we are faced with thousands of choices.         

     `

在这个例子中，我应用了三个font-size声明。你可以在图 22-11 中看到它们的效果。

图 22-11。使用字体大小属性

设置字体样式和粗细

您可以使用font-weight属性设置字体的粗细——增加粗细会使文本变得更粗。font-style属性允许您在正常、斜体和倾斜字体之间进行选择。斜体字和斜体字是有区别的，但是这是一个繁琐的技术问题，而且在很大程度上对文本的外观没有什么影响。清单 22-12 展示了这些特性。

清单 22-12。使用字体粗细和字体样式属性

`

                                                                    

` `            There are lots of different kinds of fruit - there are over 500             varieties of **banana** alone. By the time we add the             countless types of ****apples, oranges, and other             well-known fruit, we are faced with thousands of choices.         

     `

你可以在图 22-12 中看到这些属性的效果。

图 22-12。使用字体粗细和字体样式属性

使用网络字体

我已经提到了 CSS 字体最大的问题之一。你不能依赖你想要安装在用户机器上的字体的事实。这个问题的解决方案是使用网络字体，你可以下载一种字体并在你的页面上使用，而不需要用户的任何操作。你使用@font-face指定网页字体，如清单 22-13 所示。

清单 22-13。使用网络字体

`

                                                                    

            There are lots of different kinds of fruit - there are over 500             varieties of banana alone. By the time we add the             countless types of apples, oranges, and other             well-known fruit, we are faced with thousands of choices.         

     `

当您使用@font-face时，您使用标准字体属性来描述您正在使用的字体。font-family属性定义了您可以用来引用下载字体的名称，font-style和font-weight属性告诉浏览器字体的样式和粗细设置，这意味着您可以创建斜体和粗体字符。src属性用于指定字体文件的位置。Web 字体有许多不同的格式，但 WOFF 格式似乎是最受支持和可用的。

提示有些网络服务器默认不会向浏览器发送字体文件。您可能需要将文件类型或 MIME 类型添加到服务器的配置中。

你可以在图 22-13 中看到网页字体的效果。

图 22-13。使用网络字体

有很多网络字体资源可用。我最喜欢的是谷歌提供的。您可以在[www.google.com/webfonts](http://www.google.com/webfonts)看到他们提供的字体，并获得如何将它们包含在您的 HTML 中的说明。(这是我在示例中使用的字体的来源。)

总结

在这一章中，你看到了允许你设置文本样式的 CSS 属性。您可以应用的效果从简单的(如基本对齐)到复杂的(使用自定字体和创建文本阴影)。这是 CSS 的另一个易变领域。有一些有趣的关于属性的提议，允许对文本的外观进行更大的控制，但是还不清楚是否有足够的兴趣来推动采用，并且这些提议完全有可能不会成为标准。