語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員: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

語言

關於翻譯