CSS: Introduction to color and size control with list-style-type

The page I made today has a small icon that is very similar to the list symbol. I just wanted to be lazy and replace it with ul's own style. I checked online and found out that there is such a method, so I recorded it for future use.

Based on personal experience, you can use this method if the colors are the same. However, if the font color and the list item color are different, you have to use a chart to implement it, and add to li. line-height:Npx;Only in IE can lists and fonts be displayed in the center;

Quote:

When I was a CSS novice last year, I asked the experts, list -style-typeCan the color or size be changed? The master said: No!
So, I used pictures to realize it under the guidance of the master.

Because I am self-taught, writing CSS cannot be as standardized as others, so I have the opportunity to make mistakes and discover them. Today, I will talk about how to change the color and size of the style in front of list-style-type.

Let’s take a look at the source code

<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>

corresponding CSS

First picture 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;}

Second picture 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;}

I believe everyone knows that, just change the color of ul to change the color, and font-size to change the size (size is not supported in IE6, but firefox can)

The above is the detailed content of CSS: Introduction to color and size control with list-style-type. For more information, please follow other related articles on the PHP Chinese website!