CSS | html list css
CSS:項目符號及清單編號顏色請見索引[1]查看更多提示.在這一頁:彩色項目符號有想過像以下例子一樣,在你做一個列表的時候把符號改成與文字不同的顏色嗎?總有一天::marker選擇器[2]可以從提案到標準,你可以簡單地說"::marker{color:red}"。但目前您可以通過組合幾個屬性來類比效果。您可以製作圖像然後用list-style:url(mybullet.png).這樣您可以完全控制項目符號的顏色和形狀。當如果您想要更大或更小的字體大小,您將需要製作一張新的圖像。,同上,如果您想要別的顏色。所以我們寧願使用能夠在項目符號改變特定風格,例如::或◦或▪...
CSS: 項目符號及清單編號顏色請見 索引[1] 查看更多提示.
在這一頁:
彩色項目符號有想過像以下例子一樣,在你做一個列表的時候把符號改成與文字不同的顏色嗎?
總有一天 ::marker 選擇器[2]可以從提案到標準,你可以簡單地說":: 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"
彩色清單編號編號列表怎麼辦? 它的概念是一樣的:因為我們不能...