HTML与CSS 23 import url(blueworld. css); @import url(zany. css); 警告:只有 Internet Explorer4x/5x和opea3x支持 import; Navigator4x忽略了这种将 样式应用于文档的方法,实际上这可以为这些浏览器“隐藏”样式带来方便。吏多绀节 可参看第上一章“CSS应用”。 实际的样式 H{c。1or: maroon;} BoDy (background: yellow; b 在例子中除mort语句外,我们还发现了一些普通的样式。它们的具体含义不 属于本书讨论的范围,尽管读者可以猜到它们是将丑元素设成了赤褐色,将BDY 元素的背景设置成了黄色 这些样式构成∫嵌入样式表的大部分——简单的、复杂的,长的、短的样式规 则。而且一个文档的 STYLE元素中不包含任何规则是很少见的。 如果想让老一点儿的浏览器也能访问当前的文档,那么这儿有个重要的警告。读 者或许明白,浏览器会忽略它们不能识别的标记;例如,如果一个网页包含个 BLOOPER标签,浏览器会完全忽略这个标签,因为这不是它能识别的标签。 样式表同样如此。如果浏览器不能识别< STYLE>和</ STYLE>,它就会一起忽路它 们。然而在它们之间的声明却不会被忽略 因为它们对浏览器来说是普通文本,因此这个样式声明会出现在网页的顶端! (当然浏览器会名略这些文本,因为它们并不属于BODY元素的一部分,而这也不 是我们想要得到的网页效果。)这-问题如图1-5所示。 为了解决这一问题,推荐读者在注释标签里封装样式声明。在我们下面的这个例 子里,注释标签的开始符出现在STYE开始标签的后面,结尾符出现在SYE结 果标签的前面: STYLe type="text/css">< import url(sheet2. css):
第一章 @import urksheee. c3s); Hl icolor. maroon BODY ( background yellow 3 Waffles The most wonderful of all breakfast foods is the waffe--a ridged and cratered slab of home-cooked, fluffy goodnes which makes asimple waffle-maker and some bater, and you're readylara ust every child's heart soar with joy. and they're so easy to make! moming of aromatic ecstasy 图15老式的浏览器会逐字逐句地显示样式表 eoL。r Ao。 BoDy (background: yellow: I ></STYLE> 这样就会使老式的浏览器完全忽略STYE标签及其声明,因为HTML的注释是不 会显示的。同时那些能识别CSs的浏览器仍然能够读取样式表。 膏告:这种策略也有个缺点。有些老一点儿的浏览器,像非常早版本的 Netscape Navigator和 NCSA Mosaic,在注释方面还仔在一些问题。这些问题可能导致花屏甚至使浏览器崩 溃。但这只会发生在很少的浏览器版本中,而且这样的浏览器现在儿乎没有人使用了 但还是有·些人还在使用这样的版本,如果使用注释标签则会对他们查看网贝带来很大 的问题。 CSS注释 / These are my styles! Yay! CSS可以使用注释,但语法完全不同。CSS注释非常类似于CC++注释,都是用 /*和*/括起来 This is a CSSl comnent * 同C++-一样,注释可以跨越多行 / This is a css1 comment, and it can be several lines long without any problem whatsoever
HTML与CSS 记住,CSS注释不可以嵌套使用。因此下面的这个实例就是不正确的: / This is a comment, in which we find another conment, which is wRONG / Another comment * and back to the first comment 然而,几乎没有必要使用嵌套的注释,所以这个限制不是个大问题。 如果要将注释放在标记的同一行上,则要注意它的放置。例如,下面的方式就是 正确的 HI (color: gray / This css comment is several lines * H2 [color: silver;)/* long, but since it is alongside * (color: white; / actual styles, each line needs to*. PRE Icolor: gray: )/ be wrapped in comment markers 对上例来说,如果不是每行都加注释标签,则大多数的样式表都会成为注释的 部分,这样就不能达到预期的日的 Hl color: gray;)/* This css comment is several lines H2 icolor: silver: 3 long, but since it is not wrapped P icolor: white; in comment markers the last thre PRe [color: gray:] styles are part of the comment. * 在这个例子中,只有第一个规则(H1{ color:gray;})会应用于文档。剩下的 规则都被当作注释的一部分,从而被浏览器所忽略了。继续研习我们」的例子,在 HTML标签里我们还会发现更多的CSS信息。 内联样式 TYLE=color: gray: >The most wonderful of all breakfast food waffle--a ridged and cratered slab of hame-cookea, fluf fy goodness 在某些情况下,可能以需要简单地将一些样式应用于某个独立的元素,而不需要 嵌入或使用外部样式,可以使用HTML的 STYLE属性来设置内联样式( inline style)。SYTE属性对HTML来说是新的,但它可以同其他任何HTML标答一起 用,除那些位于BODY之外的标签外(例如,HEAD或者TTLE)
26 第一章 STYLE属性的语法也很普通。事实上,它看起来很像 STYLE:容器( container)内 的声明,只是将花括号变成了双引号。因此< P STYLE="coor: maroon background: yellow;”>会将文本颜色置为赤褐色,背景颜色置为黄色。但这 声明只对这个特定的段落有效,对文档的其他部分没有影响。 小结 为了提高结构化的HTML的显示效果,允许制作者指定文档的显示样式是必要 的。CSS就满足了这一需求,而且远比HTML本身的一些表示元素做得还好。多 年来头一次使得网贞的结构史加清晰,而且外观更加风格化。 为了保证尽量平稳地过渡,HTML引入了一系列方式将HTML和CSS链接在 起,同时还保持∫它们各自的特点。这样,网页制作者就能简化文档的外观布局, 并充分发挥其效果,当然也使工作变得更容易了。为了下一步进入XML的世界, CSS对可访向性和位置文档方面所做的改进使其成为令入注目的一项技术 关于对用户代理支持,IN元素已经受到广泛的攴持,而且SY元素和属性也 同样被广泛采用。但 lmport却没有那么顺利,它被 Navigator4排除在外了。虽 然这或许会让人感到苦恼,但它并不是CSS的主要策略,况且LI元素也能够 引人外部样式表。 为了完全理解CSS怎样做到这些,制作者需要牢牢掌握CSS是怎样处理文档结构 的,某条规则是怎样按预期工作的,以及名字中的“层叠”到底是什么含义等等
第二章 选择符与结构 网页设计者的生活有时是很艰苦的。为了一个新的设计,他们要埋头苦干,甚至 要去参阅17个委员会制定的相关规范和4个主要修订版本的相关标准和信息。最 后总算得到了一个令人满意的效果,而此时,一个副总裁却突然说:“我正在考虑 我们标题中所使用的绿色调,能否让我们看到一些较亮色调或者更暗色调的网站 版本呢?” 好了,现在有必要召开另一个会议了。设计者又得重新回到电脑前设计一个新版 本,需要将所有的< FONT COLOR=" green">标签替换为另一种不同色调的标签。 同时,其他管理员也要开始考虑他们白己的方式,以适应新的设计样式。或许标 题应该是暗蓝色而不是绿色,或许边框的背景颜色不对,或许应该用公可的标志 作为列表项前的项目符号,而不是像其他的那样使用小黑点。 因此,在下一次设计会议上,在取得大家的一致同意后,所有这些新版的修订思 想就开始涌现了,所有的管理员都在点头称道。为什么要这样做呢?或许我们应 该看到使用红色而非绿色的新版设计。于是一场螺旋式的战斗又打响了。 即使是工作在一个非常幸运的环境下,不需要忍受这样的无理取闹,但有时,自 己也会提出类似的问题。蓝色的边框背景与黄色的链接对比度够吗?不同段落中 的标题使用不同的字体会怎样呢?红色的标题是不是看起来更好呢?唯一的方法 就是将PN标签和 BGCOLOR属性乱摆弄一通。如果文档很多或者设计很复杂,这