《设计文档：使用网页视图-样式表》由会员分享，可在线阅读，更多相关《设计文档：使用网页视图-样式表（17页珍藏版）》请在金锄头文库上搜索。
1、下载第12章 使用带有单网页和完全站点的样式表12.1 什么是样式表样式表就是你自己创建的网页样式模板，它在 H T M L格式标记中嵌入了特殊的命令，以便 指定We b页的外观。样式表提供： 更为复杂的格式化功能，尤其是能够对外部的外观和位置进行更有效地控制；这些格式 效果能够不使用复杂和笨拙的H T M L工作环境就可以实现。 更灵活和更简单地控制跨多个网页的格式；你没有必要逐个打开和关闭各标记去改变单 个网页的那些元素，而标记数目的减少能够使得H T M L的代码更容易阅读和跟踪。 快速地改变网页的格式，这只要在一个链接样式表中改变几个参数就可以实现了；这能 够让你对整个站点的外观进行主
2、要的改变，而不用非常辛苦地修改站点包含的每个网页。 为复杂的网页设计提供了更大的潜力，这是基于所有浏览器都将能够识别的样式表标准。 FrontPage 2000中样式表的实现是基于World Wide Web Consortium的C S S 1规则的样式表 的，你可以在下面这个站点访问到这些内容：h t t p : / w w w. w 3 . o rg / T R / R E C - C S S 1。 如果需要关于C S S 2的信息，请参见W 3 C的站点：h t t p : / / w w w. w 3 . o rg / T R / R E C - C S S 2。 “层叠样式表”整个
3、术语指的是你能够使用多种样式去决定自己网页的外观。支持样式表 的浏览器遵循一系列层次结构来决定显示哪些格式元素，不显示哪些格式元素。 有了IE 3和4和后续版本，以及Netscape Navigator 4和后续版本，你就能够有几个不同的方 式来使用样式表：链接样式、导入样式、内嵌样式和内联样式。所有的这四种样式都适用于上 面的这些浏览器，它们各自的行为规则如下： 内嵌样式表实际可以插入一个样式表规范到一个特定网页中，修改一个参数就修改了 整个网页的外观。 内联样式表这些样式修改单个网页上的单个标记、一组标记或者一个信息块的行为。 链接样式表常规的那些We b页链接到能够决定它们外观的一个网页
4、 (这个网页实际上只 是一个带有C S S扩展名的文本文件)，拥有了链接，只要通过改变这个样式表文件就能够 改变许多网页的外观。 导入样式表这些样式表也有C S S扩展名，它们是由浏览器导入的，而不是简单地链接 到We b页。链接和导入之间的区别是导入的样式表中指定的那些样式可以和We b页上 块中的其他样式声明相合并。 实际上，导入的样式表必须在块中引用， 而不是使用标记。这让你把外部样式和 块中的本地样式合并，以便在 设置网页外观中实现灵活性。链接样式表指定的那些样式不能够按照这种方式使用。 你也可以在单个网页上混合使用这些方法，使用一种方法并不排除使用其他方法。你将了 解到这一点，但是，
5、如果考查样式表H T M L的潜在的语法的话，那么F r o n t P a g e处理样式表的方 式将显得更有意义。接下来很快将介绍这些，然后你就能够继续使用 F r o n t P a g e了。12.2 浏览器兼容性问题如果你已经使用了样式表，将注意到在对样式网页进行重现时， Internet Explorer 4.0和第12章计使用带有单网页和完全站点的样式表173下载Netscape 4.0浏览器并不完全兼容；这两种浏览器即将推出的版本 5 . 0可能减少这种情况，但是 你还要等一等。在这之前，或者到 M i c r o s o f t和N e t s c a p e浏览器具备合理的
6、、处理C S S的兼容性 之前，最安全的方法就是在每个浏览器中测试每个样式的方方面面。 但是，为了避免彻底进行重新改造和进行所有的测试，可以使用 We b去找到哪些样式元素 跟主要的浏览器兼容或者不兼容。其中一个这样的资源站点是： h t t p : / / w e b r e v i e w. c o m / w r / p u b / g u i d e s / s t y l e / m a s t e rg r i d . h t m l。 有关样式表的更多的资源可以在以下站点找到： h t t p : / / w e b r e v i e w. c o m / w r / p u
7、b / g u i d e s / s t y l e /， 它是前一个站点的父站点。 这个网页有一个到达样式元素的“危险列表”的链接，还有到“安全列表”的链接，还提 供样式表使用的教程。12.2.1 理解样式表的语法有了链接和内嵌的样式表后，至少可以在网页的 H E A D部分中定义一个样式，样式定义的 格式如下：property1 name: property1 value; property2 name: property2 value 注意到花括号是用来隔开定义本身的 (花括号和包含在其中的代码之间的额外空格是出于 可读性考虑的，你可以根据意愿来省略它们 )。在这些括号中可以有任意多的
8、属性，样式的定 义由标记 围绕，它们在H T M L文件中的具体位置由用户正在使用的样式表 类型来决定。12.2.2 使用内嵌样式内嵌一个样式表很直接，只要在标记之间插入一个 标记对到 文档中即可，这个样式块控制了它所嵌入的整个 We b页的外观。IE 3.0及后续版本自动为样式 表注册M I M E媒体类型，因此可以在样式标记中包括参数 T Y P E = “ t e x t / c s s “来指示不支持样式表 的浏览器忽略样式表。 另外，为了确保不支持的浏览器不显示由样式定义的文本，可以使用 来注释掉 样式块。 下面是一个示例：Some StylesA HEADING Some Text
9、174第二部分 设计文档：使用网页视图下载如果直接将这些编辑到一个网页中，然后使用“预览”或者“浏览器”命令中的“预览” ， 可以看到以Courier New字体显示的一个2 4磅大小的、蓝色的标题，而单词“Some Te x t”是1 0 点的A r i a l字体、红色。注意到标记指定了文本是茶色，除非有其他样式指定改变它， 标记的样式定义了“C o l o r” ： “r e d”确实改变了指定，这就是为什么“Some Te x t”显示时 是红色而不是茶色的原因。提示你可以分配样式给标记来设置网页的整体外观，与上面的例子一样；这些效果全 局有效；然后为某些特定的元素设置单个的样式，可以
10、在 块中的其余部分中定义这些 样式，这与和标记中的做法一样。H 1旁边的花括号中的值定义了网页中所有一级标题的样式； p旁边的花括号中的值定义网 页中所有段落文本的样式，可以通过改变花括号中的值来改变网页的全局外观。12.2.3 使用内联样式可以使用内联样式来设置单个标记及其中内容的属性，要实现这一点，应该把样式的属性 放置在标记本身之中；为了设置一个普通段落文本的颜色和属性，可以使用下面的语法：This text is green and in italics.可以看出，上面的结果是绿色、斜体文本；注意到这里使用的是引号而不是花括号来定义 属性列表。 还请注意，如果网页的内联样式和内嵌样式块
11、不同，或者和链接的、导入的样式不同的话， 那么内联样式具有最高的优先级。在上面的例子中，不管网页的 块中的标记是怎 样定义的，内联样式都将让该段文本显示为绿色斜体。 有时若想要改变网页中一个大块的外观，而为这个块中的每个标记都插入相同的内联属性 将非常单调而且容易出错；对于这种情况，可以使用标记，例如：. block of HTML code .这对包括在标记中的所有文本的颜色和字体大小做了一个全局改变，换句话说，如 果具有一些部分或者一两个部分的话，不必为每个标记设置内联样式。但是，如果 你确实往一个大块中的某个标记添加了一个内联样式，那么这个内联样式将覆盖 中定义 的样式，从而只对该标记中
12、的内容应用该内联样式。 另外一个可以使用的内联样式标记是 ，它是用来影响一个块元素中的文本的，例 如元素中的文本，可以把它作为一个内联属性来使用，如下例：This is black text. This is RED TEXT and now this is black text. 该H T M L的结果是短语RED TEXT将在一行黑色文本中以红色出现。 S PA N还可以在 S T Y L E块中使用，在块中，编写 “ S PAN color: lime” ，然后使用标记对来包含一些文本，那么这些包含的文本就是浅绿色的。这些规则网页 也适用于标记。注意和标记在功能上非常相似以致容易产生混淆
13、。简单地说，D I V提供了一种 方式来把众多元素通常未必都具有的样式属性组合起来，使得这些属性能够以一个组合的形式 而不是单个地应用到这些元素上，这样就减少了你必须编写的代码的数量。而 S PA N的功能就有第12章计使用带有单网页和完全站点的样式表175下载限多了，它是作为一个文本级别的标记来环绕要内联重现的少量文本的。12.2.4 组合标记有时可能想要以同样的样式使用几个不同的标记，这可以在内嵌样式部分中为某个标记单 独定义样式，但是有一个更好的方法来实现。如果你想要格式化让普通文本具有相同的外观的 话，例如，可以编写：H1, H2, H3 font-style: italic; col
14、or: blue这将影响这三个标题的样式，必须使用逗号来隔开标记，否则组合就会无效。12.2.5 使用链接样式表为了建立链接样式表，可创建一个具有所希望的样式定义的文件，与内嵌样式使用的技术 完全一样；保存该文件为C S S扩展名，然后从希望具有这种样式的网页链接到该文件。实际上， 如果你想要We b中的所有网页都具有相同的样式的话，可以把每个网页都链接到这个样式表， 语法如下：Title of Page 前向链接类型 REL = STYLESHEET表明L I N K指定了一个到样式表的链接，而这个样式表 将适用于这个前向链接驻留所在的网页(例如，在L I N K语句出现的网页)。12.2.
15、6 指定样式类或者ID创建类能够让你在一个基本标记(如 )上编排一些变量，然后，或者在一个网页上 (如果 类定义是在内嵌样式中的话 )全局使用这些变量，或者在整个 We b上全局使用它们(如果该样式 定义是在链接或导入样式表中的话)。 假定你需要文本的三种类型：一个粗体、一个斜体、一个粗体绿色；代码如下：在此，P. b o l d是样式类的名称，对于内嵌样式，可以在网页开头的 S T Y L E块中替换上面的 代码，对于链接样式，则可以在链接样式表中替换它们；然后，当想要对网页使用标记类时， 可以编写下面的代码：Bold is easy using the class attribute. I
16、talic is easy using the class attribute. Bold and green are easy using the class attribute.This text is unaffected by any styles.b o l d、i t a l i c和b o l d g r e e n是为这三个类任意选定的名称，可以按照需要为类样式命名，如 P. a a r d v a r k之类的。当然，这些是一些用来说明该方法的小例子；取决于需要，你可能偏好使176第二部分 设计文档：使用网页视图下载用标记来斜体化文本，而不用辛苦地去创建一个样式类。注意如果在类的声明中使用了一个数字的话，那么Netscape 4.0就不使用在网页头样式声明中定 义的类，这样的一个例子如：p.3 font-weight: bold.如果类是字母的话，Netscape 4.0就能够使 用它，例如p.b font-weight: bold。I D s是分配给单个基本元素
