- -. . , . CSS list-style.
. , , , .
.
. .
HTML, .
CSS
display: list-item. li, ul ol, .
HTML-. CSS list-style.
p {
display: list-item;
list-style-type: decimal;
}
, display: list-item, .
- list-style-position. , .
:
.
.list1 {
list-style-position: outside;
}
.list2 {
list-style-position: inside;
}
outside, .
- list-style-type - .
, - . list-style CSS .
:
- disc - , ;
- circle - ;
- square - .
:
| list-style-type | |
| decimal | , : 1, 2, ..., 10, ... |
| decimal-leading-zero | , : 01, 02, ... , 10, ... |
lower-alpha lower-latin | : a, b, ... , e, ... |
upper-alpha upper-latin | : A, B, ... , E, ... |
| lower-greek | , |
| lower-roman | , : i, ii, ... , vi, ... |
| upper-roman | , : I, II, ... , VI, ... |
| armenian | |
| georgian | |
| hebrew | |
hiragana hiragana-iroha | , |
katakana katakana-iroha | , |
| cjk-ideographic | |
, lower-alpha lower-latin, .
ul .
none, . , , . .
.list {
list-style-type: none;
}
CSS . list-style-image.
gif - . , CSS list-style .
.list {
list-style-image: url(image.jpg);
line-height: 25px;
}
:
, CSS- :
.list {
list-style-image: radial-gradient(lightblue, aqua, blue);
}
.
, , - CSS list-style.
list-style: list-style-type list-style-position list-style-image
, , :
.list1 {
list-style: none;
}
.list2 {
list-style: upper-roman inside;
}
.list3 {
list-style: inside url(/images/img1.png);
}
To reset styles to the initial parameters, there is an initial value that can be passed to any of the four listed properties.
Using the list-style CSS group of properties in combination with hover effects, you can create beautiful, unique lists that attract the user's attention.