语言

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

网页样式表 CSS的提示与窍门

请见 索引 查看更多提示.

在这一页:

彩色项目符号

有想过像以下例子一样,在你做一个列表 的时候把符号改成与文字不同的颜色吗?

总有一天 '::marker' 选择器可以从提案到标准,你可以简单 地说":: marker {color:red}"。但目前您 可以通过组合几个属性来模拟效果。

您可以制作图像然后用'list-style: url(mybullet.png)'. 这样您可以完全控制项目符号的颜色和形状。 当如果您想要更大或更小的字体大小,您将需要制作一张新的图像。, 同上,如果您想要别的颜色。

所以我们宁愿使用能够在项目符号改变特定风格,例如:: 或 ◦ 或 ▪.的文本。 我们需要替换列表项的标记,因为我们不能通过我们生成和调整的标记去选择。 为此,我们禁止列表样式并使用':: before' 来添加我们自己的项目符号。首先压制列表样式:

ul {list-style: none}

然后生成我们自己的项目符号:

li::before {content: "::"; color: red}

这样插入了一个红色项目符号,但它的位置 与原先的项目符号不同。我们需要把它移到左边 而不会移动其后的列表项的文本。 其中一种方法是把我们的项目符号给制成一个既定大小的 'inline-block', 说1em,然后将其向左移动自己的大小:

li::before {content: "::"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}

就是这样

顺便一提,如果您无法在样式表输入项目符号, 您可以使用这些Unicode号码: :: = "\2022", ◦ = \25E6" and ▪ = "\25AA"

彩色列表编号

编号列表怎么办? 它的概念是一样的:因为我们不能用我们 自己生成的自动计数器,我们必须更换自动计数器。 除了上面的属性,我们还需要创建一个计数器。 假设我们使用一个叫做"li"的计数器。我们先把它在 OL元素设置为0:

ol {list-style: none; counter-reset: li}

然后把它当成上面的项目符号一样使用

li::before {content: counter(li); color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}

还有一件事是缺少: 由于它是我们自己的 计数器,我们也负责增加它:

li {counter-increment: li}

效果如下所示:

  1. 第一项
  2. 第二项

这样可能足够,但如果您有多于九个项目, 它看起来会这样:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项
  5. 第五项
  6. 第六项
  7. 第七项
  8. 第八项
  9. 第九项
  10. 第十项

而您可能更喜欢这个:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项
  5. 第五项
  6. 第六项
  7. 第七项
  8. 第八项
  9. 第九项
  10. 第十项

这样需要四个变化: 将数字进一步向左移动,并将该额外 数量作为边距添加到右边,向右对齐列表编号,和设置文本的 方向到'rtl'。为什么是'rtl'?我将在下面解释

  .example ol li::before {content: counter(li); color: red;
    display: inline-block; width: 1em; margin-left: -1.5em;
    margin-right: 0.5em; text-align: right; direction: rtl}

我们把数字放进一个1em宽的框然后把它们向右边对齐。 但如果数字比框宽的话,它们就不会向右对齐而是向左对齐。 文本在CSS是不允许溢出左侧的框;除非文本是一种由右向 左的语言,比如说希伯来语或阿拉伯语。由于数字不是希伯来语 或阿拉伯语的文字,所以它们实际上不是从右到左。 但通过说我们的框遵循从右到左文本的规则,我们允许数字在 左边溢出,因此在右边能够保持正确对齐。

(假如您不想加 `direction: rtl', 你可以省略它,并使用 更大的宽度和左边距,比如说,`width: 2em; margin-left: -2.5em'。 这应该提供足够的空间让正确对齐数字达999)

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

创建于 17 January 2001;
最后更新 2018年05月23日 星期三 13时57分59秒

语言

关于翻译