Home >Web Front-end >CSS Tutorial >CSS: Detailed explanation of the difference between list-style-type and list-style-image
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'阿拉伯数字-----'lower-roman'小写罗马--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('/i/eg_arrow.gif') } </style> </head> <body> <ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html>
Running effect:
list-style-position
attribute. 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!