1 8 第一章 HTML> <TITLE>Erics world of Waffles</TITlE> <LINK REL= stylesheet"TYPE="text/css" HREF=sheet 1. css"TITLE="Default"> <sTYLE TYPE=text/css"> H1【 color: maroon; BODY [background: yellow: I my styles! Yay * </STYLE> <BODY> <Hi>waffles! </H1> <P STYLE=color: gray ">The most wonderful of all breakfast foods is the waffle-- a ridged and cratered slab of home-cooked, fluffy </BODY> </HMML> Waffles The most wonderfui of all breakfast foods s the waffle- a ridged and cratered slab of home-cooked, fuffy goodness whuch makes every chld s heant guar with joy and they re s0 easy to make! Just a simple waffle- maker and some hatter, and you re neady a mom逭 of aromatic ecstasy! 图1·1 个简单的文档 现在,让我们检查一下文档的每个组成部分。 L|NK标签 LINK RE=stylesheet"TYPE="text/css"HREF= sheet1. css TITLE="Default"> 首先来看一下LIK标签的使用。LIN标签很少引人注意,但它却是个非常有用 的标签,而且它出现在HTML规范中已有多年了,有望发挥更好的作用。它最基 本的用途是允许HTML制作者在一个文档中链接其他的文档。cSS1用它来为 HTML文档链接样式表;在图I-2中,名叫 sheet/.css的样式表被链接到文档中。 虽然这些样式表并不是HTML文档的一部分,但仍然被当作外部样式表使用。它 们门对于HTML文档来说是外部的(如图)
HTML与CSS 19 comal tgE h:wrm/m140104 上-shhr k3帕[ cle+I</H:x 图12外部样式表怎样应用于文档 为了成功地载入一个外部样式表,LIN标签必须放在HEAD元素里,而不能放在 任何其他元素里,即使是E或SYE这样的元素也不行。这样,网络浏览器 就能定位和载入样式表,而且用它所包含的所有样式规则作用于HTML文档,就 像图1-2显示的那样。 那么外部样式表的格式是怎样的呢?它只是一个简单的规则列表,就像在前面看 到的那样,但在这种情形下,所有规则都存放在它们自己的文件里。请记住, HTML或任何其他标记语言都不能包含在样式表里一样式表里只能有样式规 则。下面就是一个外部样式表的标记 Icolor: red: I H2 icolor: maroon; background: white: H3(color: white background: black; font: medium Helvetica: 1 这就是所有的东西—没有STE标签,也没有任何HTML标签,只有平淡而 简单的样式声明。这些规则存放在一个简易的文本文件里,而且通常给其一个扩 展名,CS,如 sheet.cs 文件的扩展名并不是必需的,但某些浏览器只能识别以css为扩展名的样式表, 即使网页的LIK元素里包含了正确的text/css类型。因此,一定要给样式表取 个合适的名字
20 第一章 L|NK属性 对LINK标签而言,剩下的就是其属性和值了,而它们都很简单。REL是“关联” 的意思,在这里就是指关联“样式表”。YPE总是设置成text/css,这个值描述 了使用L工N标签载入的数据类型。这样,浏览器就知道这是一个层叠样式表。实 际上这也就决定了浏览器怎样处理所载入的数据。毕竟,将来或许还会有其他的 样式语言。因此选用哪种语言就显得很重要了。 接下来是HRE属性。它的值表示样式表的URL。这个URL既可以是绝对的,也 可以是相对的。当然,在我们的例子里URL是相对的。它也可以是htp:/w style.org/ sheet1.css这样的URL。 最后是江I属性。这个属性不常用,但将来可能变得很重要。为什么呢?当不 只有一个LTNK标答时它就显得重要了—而且很可能会有更多的标签。然而在 这样的情况下,也只有那些RL为 stylesheet的INK标签会在文档的初始显示 时被使用。这样,如果想用名为 basic css和 splash.css来链接两个样式表,就应 该这样去标记 <LINK REL=stylesheet"TYPE="text/css"HREF="basiccss"> =stylesheet" TYPE="text/Css HREF="splash.css"> 这会使浏览器载入两个样式表,然后组合它们的规则再将其结果作用于文档(见 图1-3)。在下一章中,我们可以清楚地看到样式表的组合,但现在暂且接受这样 的组合。例如: <LINK REL="stylesheet" TYPE="text/css :"sheet-a. css <LINK REL="stylesheet" TYPE="text/css =sheet -b css"> <P CLASS=a1">This paragraph will be gray only if styles from the stylesheet 'sheet-a, css' are applied. </P <P CLASS=bl">This paragraph will be gray only if styles from the stylesheet sheet-b, css are applied.</p> Tuis parag raph wl be gray orly If styles im the style-sheet zheat-a css'are appe Tus paragraph will he grey onlyif styles tro. the rylesheet shee1-bc33'an'e appled 图13组合链接的样式表
HTML与CSS 21 也可以定义可选择的样式表。它们是用一个 alternate stylesheet的R来标 记的,而且只有当它们被读者选用后才能应用于文档。 可选择样式表 不幸的是,到写本书时,对许多浏览器来说,使用可选择的( alternate)样式表 并不是一件容易的事。如果一个浏览器能够使用可选择的样式表,它会用尘TE 属性的值来产生一系列的样式选项。因此可以像下面这样书写 <LINK REL="stylesheet"TYPE="text/css HREF=" sheet1.cs· TITLE= Default”> HREF="bigtext css"TITLE="Big Text>ext/cs <LINK REL=alternate stylesheet"TYPE=*text/Css" <LINK REL= alternate stylesheet TYPE="text/css" HREF="spoken. CSS. TITLE= Spoken word> 用户可以选择他们想要使用的样式,然后浏览器就从第一个样式(在本例中标号 为“ Default”)切换到读者所选用的样式上。图1-4显示了这种选择机制的一种方 式 Eric's World of waffles w attles The most wonderful of all break fast foods is the waffe- a ndged and cratered slab of h回Q0es曰 re so ea to mak for a moming of aromatic ecstasy Loremipsum, dolor sit amet, consectetuer adipiscmg elit, sed diam non//Default Big Text euismod tincidunt ut laoreet dolore megna aliquam erat volutpat. Ut wisi minim veniam, quis nostrud exerci tation nllamcorper suscipit lobortis n ex ea commodo consequat. Duis autem vel eum iriure dolor in hendren relit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis a accumsan et iust odio dignissim qu blandit praesent luptatum zzril deed DOne dolore te feugait nulla facilisi 图14浏览器提供可供选择的样式表 警告:在写本时,仅有一个浏览器支持可选择的样式表— Internet Explorer for M 而且只能配合 Javascript使用,而它井不是随浏览器一起载入的。三个常用的浏览 器中没有一个支持可选择样式表(如图14所示)
22 第一章 在写本书时,唯一能识别可选择样式表的浏览器( Internet Explorer for Macintosh)不会从任何REL的取值为 alternate stylesheet的LN元素中应 用样式,除非用户选择了样式表 STYLE元素 STYLE元素相对来说属于HTML中较新的元素,它也是定义一个样式表最常用的 方式,所不同的是,样式本身也出现在文档中。 STYLE总是使用TYPE属性;在 个CSS文档里,正确的值为text/css,就像在INK标签中的那样。因此,STYE 属性总是以< STYLE TYPE="text/css">开始,紧跟后面的是一个或多个样式, 最后以一个结尾标答</sYE>为结尾。 在开始和结尾 STYLE,标签中的样式将作为文档样式表或嵌入样式表被引用,因为 这种样式表是嵌入到文档里的。它包含应用于文档的样式,但也包含有使用 import指示引入的对多个外部样式表的链接。 @ import指示 现在来看…看SYL标签里都有些什么。首先是一种类似于LNK的标签: @import 指示( directive)。如同LINK标院一样, Import能够用于小导浏览器载入一个 外部样式表,而且将样式表用于HTML文档。唯一的区别是它们的实际语法格式 和位置不同。正如所看到的那样, import是处于STYE标签内的,它必须放在 这个地方,位于其他CS规则之前,否则就不能正常工作 <STYLE TYPE=*text/css"> import url (styles. css);/* Import comes first * H1 color: gray </STYLE> 像LIK标签一样,在一个文档里可以有不只一条 mport语句。然而与工IN不 同的是,每一个@ lmport指示的样式表都会被载入并使用。因此,像下而的这三 条语句,所有的个外部样式表都会被载入,而且所有样式规则都将用于此文档 的显示: @import url(sheet2. css)