CSS list style
CSS list
CSS list properties function as follows:
Set different list items to be marked as ordered lists
Set different list items marked as unordered list
Set list items marked as images
List
In HTML, there are Two types of lists:
Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)
Ordered list - list items are marked with numbers or The letters
Using CSS, the list can be further styled and images can be used as list item markers.
1. List symbols
List symbols refer to the symbols displayed in front of each list item.
The basic format is as follows:
list-style-type: parameter
Parameter value range:
·disc: round
·circle: hollow circle
·square: square
·decimal: decimal number
·lower-roman: lowercase Roman numeral
·upper- roman: uppercase Roman numerals
·lower-alpha: lowercase Greek letters
·upper-alpha: uppercase Greek letters
·none: no symbol display
disc in the parameter is the default option.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
<ul class="b">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
<ol class="d">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
</body>
</html>2. Graphic symbols
Graphic symbols mean that the bullets in the original list can be replaced by graphics.
The basic format is as follows:
list-style-image: URL
URL is the address of the graphic file used to replace the bullet, and you can use a relative address or an absolute address.
3． List position
List position describes where the list is displayed.
The basic format is as follows:
list-style-position: parameter
Parameter value range:
·inside: displayed inside the BOX model
·outside: Display outside the BOX model
A new concept appears here: the BOX model. BOX refers to a container that contains objects to which style rules are applied. The detailed introduction will be given later.
Images as list item markers
To specify an image as a list item marker, use the list style image attribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</body>
</html>The above example works at all Display in browsers is not the same, IE and Opera display image tags a little higher than Firefox, Chrome and Safari.
If you want to place the same image logo in all browsers, you should use a browser compatibility solution. The process is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(../style/images/sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</body>
</html>Example explanation:
ul:
Set the list style type to no delete list item mark
Set padding and margin 0px (browser compatibility)
All li in ul:
Set images URL, and set it to be displayed only once (no duplication)
Position the image you need (0px left and 5px top and bottom)
Use the padding-left attribute to place the text in the list
List - abbreviated attribute
All list attributes can be specified in a single attribute. This is called an abbreviation attribute.
If using abbreviations the order of property values is:
list-style-type
list-style-position (see CSS property table below for instructions)
list-style-image
If one of the above values is missing and the rest are still in the specified order, it doesn't matter.
All CSS list properties
Properties Description
list-style Set all the attributes used for lists in a statement
This list-style-image set the image as a list item logo.
list-style-position Set the position of the list item mark in the list.
Series-Syle-Type Set the type of list item logo.
Next Section