HTML/CSS/List Style/list style
Содержание
- 1 list-style all values
- 2 list-style: circle
- 3 list-style: inside
- 4 list-style: square inside
- 5 list-style: square url("arrow.png")
- 6 list-style: url("arrow.png")
- 7 list-style: url("arrow.png") inside
- 8 The image and the position can be specified
- 9 The marker and the image can be specified
- 10 The marker and the position can be specified
- 11 You can specify only a marker
- 12 You can specify only a marker image
- 13 You can specify only the position.
list-style all values
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
background-color: #ffffff;
} li.a {
list-style: none;
} li.b {
list-style: disc;
} li.c {
list-style: circle;
} li.d {
list-style: square;
} li.e {
list-style: decimal;
} li.f {
list-style: lower-alpha;
} li.g {
list-style: upper-alpha;
} li.h {
list-style: lower-roman;
} li.i {
list-style: upper-roman;
} </style> </head> <body>
- Point one
- Point two
- Point three
- Point four
- Point five
- Point six
- Point seven
- Point eight
- Point nine
</body> </html>
</source>
list-style: 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: pink;
} li#marker {
list-style: circle;
}
</style> </head> <body>
- Just the marker.
</body>
</html>
</source>
list-style: inside
<source lang="html4strict">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: pink;
} li#position {
list-style: inside;
}
</style> </head> <body>
- Just the position.
</body>
</html>
</source>
list-style: square inside
<source lang="html4strict">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: pink;
} li#marker-inside {
list-style: square inside;
}
</style> </head> <body>
- The marker and the position.
</body>
</html>
</source>
list-style: square url("arrow.png")
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: pink;
} li#marker-image {
list-style: square url("arrow.png");
}
</style> </head> <body>
- The marker and the image.
</body>
</html>
</source>
list-style: url("arrow.png")
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: pink;
} li#arrow-only {
list-style: url("arrow.png");
}
</style> </head> <body>
- Just the image.
</body>
</html>
</source>
list-style: url("arrow.png") inside
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: pink;
} li#arrow-inside {
list-style: url("arrow.png") inside;
}
</style> </head> <body>
- The image and the position.
</body>
</html>
</source>
The image and the position can be specified
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: lightyellow;
border: 1px solid gold;
padding: 5px;
margin: 2px;
}
li#image-position {
list-style: url("arrow.png") inside;
}
</style>
</head>
<body>
- The image and the position can be specified.
</body>
</html>
</source>
The marker and the image can be specified
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: lightyellow;
border: 1px solid gold;
padding: 5px;
margin: 2px;
}
li#marker-image {
list-style: square url("http://www.wbex.ru/style/logo.png");
}
</style>
</head>
<body>
- The marker and the image can be specified.
</body>
</html>
</source>
The marker and the position can be specified
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: lightyellow;
border: 1px solid gold;
padding: 5px;
margin: 2px;
}
li#marker-position {
list-style: square inside;
}
</style>
</head>
<body>
- The marker and the position can be specified.
</body>
</html>
</source>
You can specify only a marker
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: lightyellow;
border: 1px solid gold;
padding: 5px;
margin: 2px;
}
li#marker {
list-style: square;
}
</style>
</head>
<body>
- You can specify only a marker.
</body>
</html>
</source>
You can specify only a marker image
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: lightyellow;
border: 1px solid gold;
padding: 5px;
margin: 2px;
}
li#image {
list-style: url("arrow.png");
}
</style>
</head>
<body>
- You can specify only a marker image.
</body>
</html>
</source>
You can specify only the position.
<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">
<head>
<title>list-style</title>
<style rel="stylesheet" type="text/css">
li {
background: lightyellow;
border: 1px solid gold;
padding: 5px;
margin: 2px;
}
li#position {
list-style: inside;
}
</style>
</head>
<body>
- You can specify only the position.
</body>
</html>
</source>
