Home > Article > Web Front-end > CSS: Detailed explanation of the difference between list-style-type and list-style-image

CSS: Detailed explanation of the difference between list-style-type and list-style-image

黄舟Original: 2017-06-29 13:40:252673browse

CSS List

In an unordered listff6d136ddc5fdfeffaf53ff6ee95f185, the mark of the list item is the dot that appears next to each list item.

In a sequence listc34106e0b4e09414b63b2ea253ff83d6, the symbol may be a letter, a number, or a symbol in some other counting system.

list-style-type：Listf30fb4225e1c651137832273f813a0ff style attribute

ul.circle {list-style-type:circle}           /*无序原点marker*/
ul.square {list-style-type:square}           /*无序方点marker*/
ol.upper-roman {list-style-type:upper-roman} /*大写罗马排序*/
ol.lower-alpha {list-style-type:lower-alpha} /*小写字母排序*/

/*其他属性值：*/

/*‘disc’是实心圆------‘decimal&#39;阿拉伯数字-----&#39;lower-roman&#39;小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/
<pre name="code" class="html">

<style type="text/css">
ul.circle {list-style-type:<span style="background-color: rgb(255, 255, 102);">circle</span>}
ul.square {list-style-type:<span style="background-color: rgb(255, 255, 51);">square</span>}
ol.upper-roman {list-style-type:<span style="background-color: rgb(102, 255, 153);">upper-roman</span>}
ol.lower-alpha {list-style-type:<span style="background-color: rgb(102, 255, 153);">lower-alpha</span>}
</style>
</head>

<body>
<p>Type circle:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="circle"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Type square:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="square"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>

</ul>

<p>Type upper-roman:</p>
<span style="background-color: rgb(255, 204, 204);"><ol class="upper-roman"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<p>Type lower-alpha:</p>
<span style="background-color: rgb(255, 204, 204);"><ol class="lower-alpha"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

list-style-imageUsage:

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(&#39;/i/eg_arrow.gif&#39;)
}
</style>
</head>


<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>


</html>

Running effect:

This attribute specifies an image as a symbol for an ordered or unordered list item. The position of the image relative to the content of the list item is usually controlled using the

list-style-position

attribute.

Note: Please always specify a "list-style-type" attribute in case the image is not available and can still be displayed as a list with a

marker.

This attribute specifies an image as a symbol for an ordered or unordered list item. The placement of the image relative to the list item's content is typically controlled using the list-style-position property.

Note: Always specify a "list-style-type" attribute in case the image is not available.

In actual use, for convenience, the above three attribute values can be combined into list-style, for example:

li {list-style : url(example.gif) square inside}

The values of list-style can be listed in any order, and as long as one value is specified, other values will be listed with default values. The default value of list-style-type is "disc" list-style- The default value of position is "outside"

The above is the detailed content of CSS: Detailed explanation of the difference between list-style-type and list-style-image. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why does list-style-type always fail in css?Next article：Why does list-style-type always fail in css?

See more

CSS: Detailed explanation of the difference between list-style-type and list-style-image

Related articles