Home >Web Front-end >CSS Tutorial >What are the css list styles? How to set list style with css
What are the css list styles? How to set list style with css
- 不言Original
- 2018-08-18 14:05:344305browse
What are the css styles for lists and how to set css list styles? The next article will introduce you to the css list style.
1, css ordered list (ol) and css unordered list (ul)
list.html
<!doctype html><html><head>
<meta charset="utf-8">
<title>列表样式</title>
<link href="box.css" type="text/css" rel="stylesheet"></head><body>
<p>
<ul>
<li>水果 <ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
</ol>
</li>
</ul>
</p></body></html>2, css list label style list-style-type
Attribute value:
circle; hollow circle
disc; solid circle
decimal; number
list.css
ul>li{
list-style-type:circle;
}
ul>li>ol>li{
list-style-type:disc;
}3. Display mode of css label style list-style-position
Attribute value: outside (outside the text, default)
inside (with text)
list.css
ul{
text-align: center;
list-style-position:outside;
}
ul>li{
list-style-type:circle;
}
ul>li>ol>li{
list-style-type:disc;
}Related recommendations:
CSS All list style types_html/css_WEB-ITnose
CSS: List style (setting the logo pattern/position of the list item)_html/css_WEB-ITnose
The difference between imported style sheet CSS and linked style sheet CSSThe above is the detailed content of What are the css list styles? How to set list style with css. For more information, please follow other related articles on the PHP Chinese website!