This article will mainly introduce the CSS style writing of lists. Before learning, we recall the ordered lists and unordered lists in HTML.
Example:
<span>Unordered list - My hobbies: </span><ul><li>Coffee </li><li>Milk </li><li>Juice </li></ul><span>Yes Sequence List - Score Ranking: </span><ol><li>Zhang San</li><li>Li Si</li><li>Zhao Wu</li></ol>
The running results are as follows:
The role of css list attributes:
(1) Set different list items to be marked as ordered lists
(2) Set different list items to be marked as unordered lists
(3) Set the list item to be marked as an image
In html, there are two types of html lists:
(1) Unordered list: List items are marked using special graphics (such as small black dots, small boxes, etc.)
(2) Ordered list: List items are marked with numbers or letters
(3) Using css, further styles can be listed, and images can be used as list item markers.
List-shorthand attribute
All list attributes can be specified in a single attribute. This is the so-called abbreviation attribute. The order of using abbreviation attribute values is:
1. list-style-type
2. list-style-position
3. list-style-image
When abbreviating attributes, if one of the above values is missing and the others are still in the specified order, there is no impact.
1. list-style-type unordered list style
Example:
<!DOCTYPEhtml><html><head><metacharset=utf-8><style>.ul-none{list-style-type:none;}.ul-circle{list-style-type:circle;}.ul -square{list-style-type:square;}</style></head><body><ul><li>Basketball</li><li>Football</li>< li>Table tennis </li></ul><ulclass=ul-none><li>Basketball </li><li>Football </li><li>Table tennis </li></ul><ulclass =ul-circle><li>Basketball</li ><li>Football</li><li>Table Tennis</li></ul><ulclass=ul-square><li>Basketball</li><li>Football</li><li>Table Tennis </li></ul></body></html>Running results:
Example:
<!DOCTYPEhtml><html><head><style>ul{list-style-type:circle;}ol{float:left;}.ol_one{list-style-type:lower-roman;}.ol_two{list- style-type:lower-greek;}.ol_three{list-style-type:georgian;}</style></head><body><ul><li >Name</li><li>Gender</li><li>Place of Birth</li></ul><olclass=ol_one><li>Name</li><li>Gender</li><li> Place of Birth</li></ol><olclass=ol_two>< li>Name</li><li>Gender</li><li>Place of Birth</li></ol><olclass=ol_three><li>Name</li><li>Gender</li><li >Birthplace</li></ol></body></html>Running results:
2.list-style-position ordered list style
Example:
<!DOCTYPEhtml><html><head><style>ol{list-style-type:lower-roman;}li{background:#ccc;margin-bottom:2px;}.ol_one{list-style-position:inside ;}.ol_two{list-style-p osition:outside;}</style></head><body><olclass=ol_one><li>Name</li><li>Gender</li><li>Telephone number</li></ol>< olclass=ol_two><li>Address</li><li>Postcode</li><li>Mail</li></ol></body></html>Running results:
3. list-style-image modifies the list mark image
4. list-style
The ist-style attribute is the abbreviation of the above three attributes (list-style-type, list-style-position, list-style-image). You can use list-style to set the above three attributes at the same time. The syntax format is as follows:
list-style:list-style-type||list-style-position||list-style-image;