语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

网页样式表 CSS 提示与窍门

请见 索引 查看所有提示

多种颜色的菜单

你看到的下面的五颜六色的菜单中, 只不过是一个 有一些一些P元素在内的DIV元素。 这样的视觉效果源于 每个P元素都单独定位,并有自己的字体和颜色。它应用于短 的文本为最佳,因为视觉效果是基于重叠的,如果文本过长, 重叠过多,就会变得难以阅读。

样式表允许菜单最多有10个元素,上面的例子中使用了8个元素。 这里是上面的例子中的HTML源代码:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

注意DIV元素被定义为class "map",它使得该元素成为菜单的容器,和P元素的ID属性。每个P元素都必须有一个(不同的)ID,称为P1,P2,...P10。 ID不必按照顺序使用(如例子所示)。你可以将样式表复制到你自己的样式表,或用@import 或用LINK元素去直接从W3C网页导入map.css

@import "http://www.w3.org/Style/map.css";

or

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

样式表的解释

下面介绍样式表的使用。首先,样式表将DIV元素界 定class "map"。它创建了一个190px高的空间,P元素将被放置其中。 每一个具有ID的P元素,从P1到P10便被给于颜色和字体, 每个元素都依据"边距"属性被置于由DIV创造的空间中: 一 个负的顶端边距将元素移到的DIV元素空间,一个正的 底端边距确定了下一个元素从DIV的底部重新开始。

(本样式表的缺点是,它是以px为单位的。如果你的 浏览器可以很好地执行CSS,你可以把它改成用百分比。)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

当然,你可以自由地更改样式表来尝试不同的字体、 颜色和位置,或额外建立可以超过10个元素的样式规则。 再来看 看DIV的左、右边距:他们都被给于负值,因而菜单比周围的 文本宽,但在你的页面上,边距未必足够宽,所以你可能需要删除这些规则。

如果你尝试这种风格,你可能会注意到它无法在Netscape 4良好地运行。 当然,这是Netscape 4的错。然而, map-ns.css 一个类似的样式表, 似乎可以在该浏览器上运行。下面有个窍门,置于你的HTML文档的顶端, 可以允许适用于Netscape 4版本和以上更利于CSS执行的版本实现共存:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

正确地执行CSS将读取两种样式表,但第二个规则会覆盖 第一个规则。因此,除了一点不必要的工作,并没有什么改变。 但是,Netscape 4不会加载第二个它不识别的样式表,因为其"media"属性。

此外,你可能会问,为什么元素是给与负值来定位,而似乎用 绝对定位属性更为合适。事实上,用"position"和"left"和"right"可 以达到同样目的。这个样式表之所以使用边距定位,是因为这样做 它可以在只执行CSS1的浏览器中运行。

Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

创建于2001年5月5日;
最后更新 2017年11月09日 星期四 04时40分59秒

语言

关于翻译