Thuộc tính list-style
Thuộc tính list-style : tổng hợp một trong các thuộc tính list-style-image, list-style-position, list-style-type.
<html>
<head>
<style type="text/css">
ul {
list-style: square inside;
}
</style>
</head>
<body>
<ul>
<li>list style 01<li>
<li>list style 02<li>
</ul>
</body>
</html>
- list style 01
- list style 02
Thuộc tính list-style-image
Thuộc tính list-style-image : Thay thế các mục của danh sách bằng hình ảnh.
<html>
<head>
<style type="text/css">
ul {
list-style-image: url(ico_arrow.gif);
}
</style>
</head>
<body>
<ul>
<li>list style image 01</li>
<li>list style image 02</li>
</ul>
</body>
</html>
- list style image 01
- list style image 02
Thuộc tính list-style-position
Thuộc tính list-style-position : Xác định các mục nằm bên trong nội dung.
<html>
<head>
<style type="text/css">
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
ul.inside li,
ul.outside li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<ul class="inside">
<li>list style inside</li>
<li>list style inside</li>
</ul>
<ul class="outside">
<li>list style outside</li>
<li>list style outside</li>
</ul>
</body>
</html>
- list style inside
- list style inside
- list style outside
- list style outside
Thuộc tính list-style-type
Thuộc tính list-style-type : Xác định loại cho danh sách.
<html>
<head>
<style type="text/css">
ul {
list-style-type: circle;
}
</style>
</head>
<body>
<ul>
<li>list style type 01</li>
<li>list style type 02</li>
</ul>
</body>
</html>
- list style image 01
- list style image 02
Các loại hình dạnh cho list-style:
| Ví dụ | Hiển thị |
|---|---|
| list-style-type: armenian; |
|
| list-style-type: circle; |
|
| list-style-type: cjk-ideographic; |
|
| list-style-type: decimal; |
|
| list-style-type: decimal-leading-zero; |
|
| list-style-type: disc; |
|
| list-style-type: georgian; |
|
| list-style-type: hebrew; |
|
| list-style-type: hiragana; |
|
| list-style-type: hiragana-iroha; |
|
| list-style-type: katakana; |
|
| list-style-type: katakana-iroha; |
|
| list-style-type: lower-alpha; |
|
| list-style-type: lower-greek; |
|
| list-style-type: lower-latin; |
|
| list-style-type: lower-roman; |
|
| list-style-type: none; |
|
| list-style-type: square; |
|
| list-style-type: upper-alpha; |
|
| list-style-type: upper-latin; |
|
| list-style-type: upper-roman; |
|
| list-style-type: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |