HTML/CSS/List Style/list style type
Содержание
- 1 Changing unordered list markers to square
- 2 Character marker for list
- 3 Normal Lists
- 4 Entity marker
- 5 Normal Lists
- 6 list-style-type: circle
- 7 Normal Lists
- 8 list-style-type: decimal
- 9 Normal Lists
- 10 list-style-type: georgian
- 11 list-style-type: lower-greek
- 12 list-style-type: lower-latin
- 13 list-style-type: lower-latin/upper-latin
- 14 list-style-type: lower-roman
- 15 list-style-type: lower-roman/upper-roman
- 16 list-style-type: none
- 17 Normal Lists
- 18 list-style-type: square/disc/circle
- 19 list-style-type: upper-greek
- 20 UL list-style-type: disc;
Changing unordered list markers to square
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Changing unordered list markers</title> <style type="text/css">
body {
line-height: 1.5em;
} ul {
list-style-type: square;
}
</style>
</head> <body>
- Combine.
- Gradually.
- Place.
- Transfer.
- divide.
</body> </html>
</source>
Character marker for list
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> ul {
margin-left: 0; padding-left: 0;
} ul li {
margin-left: 60px;
}
- .none {
list-style-type: none;
}
- .marker {
float: left; margin-left: -60px; width: 60px; text-align: center;
} </style> </head> <body>
Normal Lists
- *faux marker
</body> </html>
</source>
Entity marker
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> ul {
margin-left: 0; padding-left: 0;
} ul li {
margin-left: 60px;
}
- .none {
list-style-type: none;
}
- .marker {
float: left; margin-left: -60px; width: 60px; text-align: center;
} </style> </head> <body>
Normal Lists
- ––
</body> </html>
</source>
list-style-type: circle
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> ul {
margin-left: 0; padding-left: 0;
} ul li {
margin-left: 60px;
}
- .circle {
list-style-type: circle;
} </style> </head> <body>
Normal Lists
- List item with circle bullet
</body> </html>
</source>
list-style-type: decimal
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> ul {
margin-left: 0; padding-left: 0;
} ul li {
margin-left: 60px;
}
- .decimal {
list-style-type: decimal;
} </style> </head> <body>
Normal Lists
- List item with numbered bullet
</body> </html>
</source>
list-style-type: georgian
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ol { list-style-type: georgian; } </style> </head> <body>
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the fourth list item.
- This is the fifth list item.
</body>
</html>
</source>
list-style-type: lower-greek
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ol { list-style-type: lower-greek; } </style> </head> <body>
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the fourth list item.
- This is the fifth list item.
</body>
</html>
</source>
list-style-type: lower-latin
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ol { list-style-type: lower-latin; } </style> </head> <body>
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the fourth list item.
- This is the fifth list item.
</body>
</html>
</source>
list-style-type: lower-latin/upper-latin
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ol#lower-latin li { list-style-type: lower-latin; } ol#upper-latin li { list-style-type: upper-latin; } </style> </head> <body>
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the first list item.
- This is the second list item.
- This is the third list item.
</body>
</html>
</source>
list-style-type: lower-roman
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li {
list-style-type: lower-roman;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
list-style-type: lower-roman/upper-roman
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ol#lower-roman li { list-style-type: lower-roman; } ol#upper-roman li { list-style-type: upper-roman; } </style> </head> <body>
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the first list item.
- This is the second list item.
- This is the third list item.
</body>
</html>
</source>
list-style-type: none
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> ul {
margin-left: 0; padding-left: 0;
} ul li {
margin-left: 60px;
}
- .none {
list-style-type: none;
} </style> </head> <body>
Normal Lists
- -faux marker
</body> </html>
</source>
list-style-type: square/disc/circle
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> li.square { list-style-type: square; } li.disc { list-style-type: disc; } li.circle { list-style-type: circle; } </style> </head> <body>
- This list item has a square marker.
- This list item has a square marker.
- This list item has a disc marker.
- This list item has a disc marker.
- This list item has a circle marker.
- This list item has a circle marker.
</body>
</html>
</source>
list-style-type: upper-greek
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ol { list-style-type: upper-greek; } </style> </head> <body>
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the fourth list item.
- This is the fifth list item.
</body>
</html>
</source>
UL list-style-type: disc;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {
list-style-type: disc;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>