CSS：list-style-type的顏色和大小控制介紹

今天做的頁面中有個和列表符很相似的小圖標，就想撒個懶用ul自己的style來替換上網查了下果然有此方法，所以記錄下來以備後用。

根據個人經驗總結了一下，如果顏色相同則可以使用此方法但是如果字體顏色和列表項顏色不一樣的情況下還得使用圖表來實現，而且在li中加上 line-height:Npx;在IE中列表和字體才能居中顯示；

引用：

去年我還是CSS菜鳥時，我曾問過高手，list -style-type可以改變顏色或大小嗎？高手曰：不能!
於是，我當時就在高手的指點下用圖片來實現。

 因為是自學的，所以寫CSS不能像別人那麼規範化，所以我有機會出錯，也有機會發現。今天，我來說下如可改變list-style-type前樣式的顏色及大小。

    再來看原始碼

<ul class="artul">
    <li><a href="#">这里是SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是很长的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是近期SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是SEO常看的网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    </ul>

對應的CSS

第一張圖CSS

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:12px;color:#FFFF00;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

第二張圖CSS

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:15px;color:#FF00FF;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

相信大家都知道了，就改一下ul的color就可以改​​顏色，font-size就可以改大小(大小在IE6下不支持，firefox可以)

以上是CSS：list-style-type的顏色和大小控制介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！