Web编程入门经典 第7章 层叠样式表

第7章层叠样式表本书前面已经介绍了如何使用XHTML的各种元素和属性来构造文档的内容，接下来将学习如何使页面看上去更生动。本章将介绍如何使用层叠样式表(简写为CSS)控制页面的样式，包括字体的颜色和大小、线的宽度和颜色、页面中各项之间的空白量。层叠样式表规范的工作原理在于允许用户指定一些规则，这些规则描述了文档中元素内容的表现形式。事实上，可以通过设置不同的规则来控制页面中每一个元素的外观，以便页面看上去更令人感兴趣。本书前面已经提到，早期版本的HTML使用Web页面标记中的元素和属性来控制文档的外观（本书前面已经使用过这样的方式）。但是，W3C(负责Web技术开发的组织)做了一个相当令人震惊的决定，即HTML和XHTML语言不再包含指示文档外观的指令——而是使用CSS来控制Web页面的外观。W3C已经实际地发布了两个版本的CSS。本章中介绍的特性和功能来源于CSS1和CSS2(CSS2根据CSS1扩展)。目前W3C正致力于再一次更新CSS，更新后的结果将称为CSS3;CSS3方面的开发工作将很快完成；但是，本书后面的一些地方将会提醒您，浏览器已经准备开始实现CSS3某些方面的内容。您也将看到，当前的浏览器仍然无法支持某些特性。CSS非常有意义的一个方面是，即使浏览器没有实现某些CSS特性，用户仍然能够阅读文档——只是页面的外观看上去与用户计划的差距很大。本章将介绍以下内容：CSS规则的组成如何在文档中放置CSS规则，以及如何链接到外部CSS文档如何使用特性和值控制文档中不同元素的外观如何使用CSS控制文本的外观Css如何基于框模型，如何为这些框设置不同的特性（例如边框的宽度芝和样式）学习完本章后，您应当能够熟练编写CSS样式表，应当掌握很多特性，通过在样式表中使用这些特性来影响文档的外观。在第8章中将介绍CSS1和CSS2中的一些更高级的特性，以及如何使用CSS定位页面中元素的内容。注意：自从引入Web之后，人们期望能够像打印设计人员控制打印页面那样来控制Web页面。但是，作为媒介的Internet与打印媒介有一些固有的区别。例如，一本书中的打印页面在该书的每一个副本中都具有相同的大小；读者不需要拥有一种字体以查看打印页面（对于Web页面，则需要有相应的字体），也不需要亲自选择打印页面。这些都是第9章和第10章中将要解决的问题，这两章主要介绍关于页面布局和设计方面的问题。7.1CSS简介CSS的工作原理是允许设计人员将规则与文档中出现的元素相关联。这些规则管理元素的内容的显示方式。图7-1给出了关于CSS规则的一个示例，它由两部分组成：选择器，它指定声明应用于哪个或哪些元素（如果应用于多个元素，则不同元素之间使用逗号隔开）声明，它用于设置元素的样式图7-1图7-1中的规则将应用于所有h1元素，并且指示这些元素的字型是Arial。声明也由以冒号隔开的两部分组成：特性，它是希望影响的所选元素的特性，这个例子中的特性是font-family。值，它是特性的声明，这个例子中的值是Arial字型。这与HTML中元素附带属性的方式非常相似，其中属性能够控制元素的特性，属性值将是该特性的设置。但是，通过利用CSS，不需要对h1元素的每一个实例都指定属性，选择器将指示该规则应用于文档中的所有h1元素。下面是一条CSS规则应用于多个不同元素的示例（这个示例中包括3个元素：h1、h2和h3）。应用该规则的每一个元素的名称之间以逗号隔开。该规则还为这些元素指定了多个特性，其中每个特性-值对之间以分号隔开。注意，所有的特性都位于大括号中：h1,h2,h3{font-weight:bold;font-family:arial,verdana,sans-sererif;color:#000000;background-color:#FFFFFF;}即使您以前没有看到过CSS规则，现在也应当已经了解它们的作用。在上面的例子中，选择器（h1、h2和h3）中指定的每一个题头元素的内容将以Arial粗体字显示（除非计算机上没有安装Arial字体。如果没有安装该字体，则将查找是否安装Verdana字体。如果找不到Verdana字体，则使用默认的sans-serif字体），并且以白色背景黑色字的形式显h1{font-family:arial;}选择器声明特性值示。注意：如果声明中只有一个特性-值对，则它的末尾不需要分号。但是，由于一个声明可以由多个特性-值对组成，并且同一个规则中的每一个特性-值对必须由分号隔开，所以最好在编写每一个规则之后都添加一个分号，以便后面添加另外一条规则；如果忘记添加分号，则后面添加的特性-值对将被忽略。7.1.1一个基本的示例下面的示例使用了大量的CSS规则，其中大多数规则的作用都可以通过它们的名称清晰地了解。根据这个示例，您将了解CSS的其他不同方面，例如如何控制文本、表、空白和背景等。在开始创建该示例之前，首先查看没有添加CSS规则的XHTML文档，下面将逐步处理这个文档。图7-2给出了该文档不具有样式时在浏览器中的外观。图7-2下面是图7-2中所示文档的代码(ch07_egOl.html)，它包含了一个题头、一个段落和一个表。注意head元素内link元素的使用，它告诉浏览器这个文档应当被link元素附带的href属性值中指定的样式表赋予样式。另外注意td元素附带的class属性，它的值是code;使用该属性值区分包含代码的td元素与文档中的其他文本。?xmlversion=1.0?!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==enxml:lang=enheadtitleCSSExample/titlelinkrel=stylesheettype=text/csshref=ch07_eg01.css//headbodyh1BasicCSSFontProperties/h1pThefollowingtableshowsyouthebasicCSSfontpropertiesthatallowyoutochangetheappearanceoftextinyourdocuments./ptabletrthProperty/ththPurpose/th/trtrtdclass=codefont-family/tdtdSpecifiesthefontused./td/trtrtdclass=codefont-size/tdtdSpecifiesthesizeofthefontused./td/trtrtdclass=codefont-style/tdtdSpecifieswhetherthefontshouldbenormal,italicoroblique./td/trtrtdclass=codefont-weight/tdtdSpecifieswhetherthefontshouldbenormal,bold,bolder,orlighter/td/tr/table/body/html图7-3给出了添加样式表之后的文档外观。图7-3注意，查看这个文档中使用的样式表。所有的CSS样式表都存储为以.css为扩展名的文件，这个示例的样式表文件为ch07_eg01.css。可以在与用于创建XHTML页面的相同编辑器中创建CSS样式表，因为CSS文件只是简单的文本文件（类似于XHTML文件），也可以在Windows的Notepad软件或者Mac的TextEdit软件中创建它们。下面依次查看样式表中的规则，以便了解每一条规则的作用。该文档由多条独立的规则组成，除了第一行之外——该行不是规则，而是一条注释。起始符号“/*”和结束符号“*/”之间的内容将被浏览器忽略，因此不会显示它们：/*Stylesheetforch07_eg01.html*/第一条规则应用于body元素。它指定页面中文本和线的默认颜色是黑色，页面的背景是白色，并且整个文档中使用的字体将是Arial。如果系统中没有安装Arial字体，则将使用Verdana字体；如果没有找到Verdana字体，则将使用任何一种sans-serif字体。body{color:#000000;background-color:#ffffff;font-family:arial,verdana,sans-serif;}注意：一般为文档主体指定background-color特性，因为某些人可能会改变他们计算机的默认背景色（使得默认背景色不是亮白色）；如果不设置这个特性，则用户浏览器的背景色将是他们已经选择的颜色。接下来的两条规则分别指定h1元素和p元素内的内容的大小：h1{font-size:18Pt;}p{font-size:12pt;}然后，添加一些设置来控制表的外观——首先赋予它亮灰色背景，然后在表的周围绘制一个像素宽的黑灰色边框：table{background-color:#efefef;border-style:solid;border-width:1px;border-color:#999999;}在表内部，题头应当具有一种中灰背景色（稍微比表主体的颜色黑一点），文本应当以粗体显示，在单元格边缘和文本之间应当有5个像素的内边距（内边距是方框边缘和其内部内容之间的距离，在本章后面您将看到关于内边距的更详细解释）。th{background-color:#cccccc;font-weight:bold;padding:5px;}每一个表数据单元格具有5个像素的内边距。这样能够使文本具有更好的可读性，否则某一列中的文本可能会与相邻列中的文本紧密相连。td{padding:5px;}最后，在图7-3中您可能已经注意到，CSS特性涉及的表单元格中的字体为Courier。这是因为在该XHTML文档中对应的表单元格附带了class属性，并且该属性的值为code。class属性无法单独改变文档的外观（如图7-2所示）。但是，class属性能够将CSS规则与class属性具有某个指定值的元素相关联。因此，下面的规则仅应用于附带的class属性值为code的td元素，而不是所有的td元素：td.code{font-family:courier,courier-new,serif;font-weight:bold;}到此为止就完成了第一个示例，可以在本书的下载代码中找到这个示例。如果希望从一个Web站点处查看类似于这样的样式表，可以在浏览器中输入该样式表的URL，然后将在浏览器中看到它的文本，或者它将下载到本地计算机上。可以使用下载的代码试验该样式表，以查看样式表在计算机上的显示；为了完成该试验，当在浏览器中查看上面的示例时，将文件名ch07_egOl.html替换为ch07_eg01.css，则将看到CSS规则在浏览器中的效果。7.1.2继承CSS的一项强大功能是，应用于某个元素的许多特性将会被它的子元素（即包含在对其声明规则的元素之内的元素）所继承。例如在上面的示例中，一旦为body元素声明了font-family特性，它将应用于body元素内的所有元素(body元素的所有子元素)。如果后面指定了更加特定的规则，则更加特定的规则将重写与body元素（或者其他任何包含元素）相关联的任何可特性。在上面的示例中，大多数文本的字体是Arial，由与body元素相关联的规则指定。有些表单元格使用Courier字体，这些不同的表单元格具有一个class属性，并且该属性的值为cod