第13章页面样式与布局

第13章　页面样式与布局">第13章　页面样式与布局
- 13.1　在HTML中使用CSS的三种形式">13.1　在HTML中使用CSS的三种形式

第13章　页面样式与布局

提到CSS(Cascading Style Sheets，层叠样式表）这个词语，相信大部分读者都有所了解。它是指Web页面的层叠样式表，该样式表定义了如何显示HTML元素（即HTML元素的页面显示样式），如HTML元素的显示位置、字体和颜色等。同时，它也可以和JavaScript等浏览器端脚本语言合作设计出许多动态的页面显示效果。

在页面的设计中，只需要修改页面的相关样式表里的样式，就能够改变页面的布局和外观。当然，还可以为每个HTML元素定义样式，并将之应用于希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。因此，CSS更好地解决了Web页面内容与表现分离的问题。

13.1　在HTML中使用CSS的三种形式

在Web页面设计中，要想使用CSS去控制页面的HTML元素的显示效果，就需要将它们关联起来。通常，可以通过在HTML文档中使用外部样式表(（Eternal Style Sheet)、内部样式表(（Iternal Style Sheet)和内联样式表(（Iline Style Sheet)这三种方式来建立这种关联关系，如图13-1所示。

图　13-1　CSS在HTML文件中的三种表现形式

其中，外部样式表是一个独立的后缀名为.css的文件，它存在于HTML文件的外部。可以在HTML文件中通过使用＜link＞标签来引用它，如＜link href="Css/CommonStyle.css"rel="Stylesheet"type="text/css"/＞。内部样式表一般存在于HTML文件的＜head＞标签范围内，并定义在＜style＞标签里面。内联样式表与内部样式表一样，也存在于HTML文件的内部，但存在于＜body＞标签管辖范围内，以属性的形式设置某一个标签的样式，如使用＜tdstyle="font-family：华文宋体；font-size：12px"＞来定义一个＜td＞标签。

在对样式表的编写中，可以选择Visual Studio、

Dreamweaver与记事本(（ntepad.exe)等工具。后文还将详细阐述在Visual Studio中编写样式表的方法。

13.1.1　内联样式表

用心的读者可能会发现在前面的章节中就已经多次用到过内联样式表。顾名思义，在内联样式表中，HTML元素和元素所定义的样式在同一代码行内，其样式也只对本行代码的HTML标签范围内的内容起作用。在ASP.NET中，内联样式表必须包含在HTML标签的style=""属性内，样式之间用“；”分隔。如代码清单13-1所示。

代码清单13-1内联样式表的使用例子

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head runat="server"＞

＜title＞测试页面＜/title＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜table＞

＜tr＞

＜td style="font-family：华文宋体；

font-size：20px；height：60px；

background-color：#cccccc"＞

你好，ASP.NET4.0！

＜/td＞

＜/tr＞

＜/table＞

＜/form＞

＜/body＞

＜/html＞

在代码清单13-1中，使用语句＜td style="font-family：华文宋体；font-size：20px；height：60px；background-color：#cccccc"＞创建了一个＜td＞标签的内联样式表。其中，“font-family：华文宋体”定义了＜td＞标签中文本的字体类型，“font-size：20px”定义了＜td＞标签中文本字体的大小，“height：60px”定义了＜td＞标签的高度，“background-color：#cccccc"”定义了＜td＞标签的背景色。运行上面的代码，其结果如图13-2所示。

图　13-2　内联样式表的运行结果

由于内联样式表只能够作用于本行代码的HTML标签范围内的内容，因此，该样式也只对该行代码的＜td＞标签范围内的内容起作用，即“你好，ASP.NET4.0！”文本。假如在代码清单13-1中再定义一个＜td＞标签，则将无法继承或者引用该样式，此时必须为新定义的＜td＞标签重新定义一个相同的样式。

13.1.2　内部样式表

内部样式表是指样式表的定义处于HTML文件一个单独的区域，与HTML的具体标签分离开来，从而可以实现对整个页面范围的内容显示进行统一的控制与管理。

与内联样式表只能对所在标签进行样式设置不同，内部样式表一般处于页面的＜head＞标签范围内。它定义在＜style＞标签里面，同时必须将style标签的type属性设置为“text/css”。在＜style＞标签里面设置好HTML元素的样式之后，就可以通过将样式名称赋给在页面的HTML标签中的class属性来引用相关样式，如＜td class="td"＞，如代码清单13-2所示。

代码清单13-2内部样式表的使用例子

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head runat="server"＞

＜title＞测试页面＜/title＞

＜style type="text/css"＞

{

font-family：华文宋体；

font-size：20px；

height：60px；

background-color：#cccccc；

}

＜/style＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜table＞

＜tr＞

＜td class="td"＞

你好，ASP.NET4.0！

＜/td＞

＜/tr＞

＜/table＞

＜/form＞

＜/body＞

＜/html＞

从代码清单13-2中可以看出，将代码清单13-1中的＜td＞标签的内联样式提到了＜style type="text/css"＞标签内，从而形成了页面的内部样式表，并在＜td＞标签里通过设置它的class属性(（cass="td"＞）来引用该样式，因此，运行结果与图13-2一样。

由于内部样式表作用于整个页面，因此，如果在代码清单13-2中再定义一个＜td＞标签，只需要通过对新定义的＜td＞标签加一个class属性(（cass="td"）就可以引用内部样式表来达到统一的显示效果。

同一般代码一样，样式表文档中也可以添加注释文档，以此来对样式表中相关样式或者属性设置进行提示，方便日后的维护和修改。添加方法很简单，只需要将相关注释放在“/”和“/”之间就可以了，注释可以是单行或者多行。如下面的示例所示：

＜style type="text/css"＞

/——定义＜td＞标签样式——/

{

/——定义字体——/

font-family：华文宋体；

font-size：20px；

height：60px；/——定义背景色——/

background-color：#cccccc；

}

＜/style＞

最后还需要补充的是，内部样式表不一定写在HTML文件的＜head＞和＜/head＞之间。它可以在页面的任何位置，只要样式表本身的语法正确，同时＜style＞和＜/style＞能够一一对应，对整个页面的样式设置就可以生效。如可以把代码清单13-2中的内部样式表写成下面的样式，其运行结果一样。

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head id="Head1"runat="server"＞

＜title＞测试页面＜/title＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜table＞

＜tr＞

＜td class="td"＞

你好，ASP.NET4.0！

＜/td＞

＜/tr＞

＜/table＞

＜/form＞

＜/body＞

＜style type="text/css"＞

{

font-family：华文宋体；

font-size：20px；

height：60px；

background-color：#cccccc；

}

＜/style＞

＜/html＞

不过，为了统一，还是遵守不成文的规矩，即把内部样式表都放置于＜head＞和＜/head＞之间。这样做也符合设计内部样式表的初衷：它包含了关于页面各元素的样式信息，放在页面的前部能够使自己和别人在阅读代码的开始阶段就对整个页面有一个清晰的把握，一目了然。因此，应该养成这种好的习惯，遵守这样的业内规则。

13.1.3　外部样式表

外部样式表是相对于内部样式表而言的，其样式表文件的内容和内部样式表类似，都是样式的定义。不同的是，它将相关页面的样式定义统一保存在一个后缀名为.css的文件中（习惯上称它为样式文件），该文件独立于HTML页面，放置于网站文件夹内某个位置。

外部样式表通过在某个HTML页面中添加链接的方式生效，即在HTML页面中通过使用＜link＞标签来引用相关的外部样式表，如＜link href="Css/CommonStyle.css"rel="Stylesheet"type="text/css"/＞。同一个外部样式表可以被多个网页甚至整个Web项目的所有网页所采用。同样，也可以通过复用的方式将它用在其他任何Web项目中，这就是它最大的优点。外部样式表使你有能力同时改变站点中所有页面的布局和外观，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。如果说前面介绍的内部样式表在总体上定义了一个网页的显示方式，那么可以说，外部样式表在总体上定义了一个Web项目的显示方式。

仍然以代码清单13-1为例，首先需要将＜td＞标签的样式提取出来，并保存在CSS文件夹的CommonStyle.css样式文件里。如下面的代码所示：

{

font-family：华文宋体；

font-size：20px；

height：60px；

background-color：#cccccc；

}

建立好样式表之后，就可以直接在页面中使用语句＜link href="Css/CommonStyle.css"rel="Stylesheet"type="text/css"/＞来链接CSS文件夹的CommonStyle.css样式文件，同时在HTML标签里面通过class属性来使用相关样式。如代码清单13-3所示。

代码清单13-3外部样式表的使用例子

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head runat="server"＞

＜link href="Css/CommonStyle.css"

rel="Stylesheet"type="text/css"/＞

＜title＞测试页面＜/title＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜table＞

＜tr＞

＜td class="td"＞

你好，ASP.NET4.0！

＜/td＞

＜/tr＞

＜/table＞

＜/form＞

＜/body＞

＜/html＞

运行代码清单13-3，其运行结果与代码清单13-1、代码清单13-2相同，因为它们使用的是相同的样式，只是引用的方法不一样而已。

13.1.4　各种样式表的优先级

假设一个网页拥有多个样式表，那么浏览器该如何决定最终用什么效果来显示呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，从最重要到最不重要的顺序依次如下：

1）内联样式表。

2）内部样式表。

3）外部样式表。

4）浏览器默认显示样式，如链接的蓝色字体和下划线等。

其实，可以这样来理解它们，即格式离内容越近，自然是该段内容需要这样的格式，因此浏览器要优先按照这样的样式规则来显示。因此，内联样式表拥有最高的优先权。

既然向站点中添加样式表有这么多种选择方法，那么该如何选择自己的样式添加方法呢？从上面的概述中，相信你已经明白。一般而言，外部样式表优于内部样式表，内部样式表优于内联样式表。外部样式表允许你通过修改单个样式文件就可以改变整个站点的外观，并且可复用性较高，即只要对外部样式表文件进行一次修改，使用这个样式的所有页面就会相应自动修改，而不需要打开站点中的各个页面，再手工对内部样式表或内联样式表进行修改。

然而，在某些情况下使用内部样式表和内联样式表也是完全可以接受的。如果要修改单个页面的外观，而不想影响到站点中的其他页面，那么内部样式表就是最佳选择。内联样式表也是如此，如果只想修改单个页面中单个元素的行为，而且确定其他HTML元素不需要同样的声明，就可以使用内联样式表。

第13章 页面样式与布局