CSS | СПИСКИ
В CSS существует два типа списков: неупорядоченные списки и упорядоченные списки.
- НЕЗАКАЗАННЫЕ СПИСКИ
В неупорядоченных списках элементы списка отмечены маркерами. - ЗАКАЗАННЫЕ СПИСКИ
В упорядоченных списках элементы списка отмечены цифрами и алфавитом.
Маркер элемента списка: это свойство определяет тип маркера элемента, т. Е. Неупорядоченный список или упорядоченный.
Синтаксис:
список-стиль-тип: значение;
Теперь значение может быть следующим:
- круг
- десятичный, например: 1,2,3 и т. д.
- десятичные ведущие нули, например: 01,02,03,04 и т. д.
- нижний римский
- верхний римский
- нижняя альфа, например: a, b, c и т. д.
- верхняя альфа, например: A, B, C и т. д.
- квадрат
Example:
<!DOCTYPE><html> <head> <style> ul.a { list-style-type:square; } ol.c { list-style-type:lower-alpha; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> Unordered lists </p> <ul class="a"> <li>one</li> <li>two</li> <li>three</li> </ul> <ul class="b"> <li>one</li> <li>two</li> <li>three</li> </ul> <p> Ordered Lists </p> <ol class="c"> <li>one</li> <li>two</li> <li>three</li> </ol> <ol class="d"> <li>one</li> <li>two</li> <li>three</li> </ol> </body></html> |
OUTPUT:
Image as List Marker: This property specifies for the image as list item marker.
Example:
<!DOCTYPE><html> <head> <style> ul.a { list-style-image:url(d.jpg); } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> Unordered lists </p> <ul class="a"> <li>one</li> <li>two</li> <li>three</li> </ul> </body></html> |
ВЫХОД:
Положение маркера списка: это свойство определяет положение маркера элемента списка. Есть 2 типа маркера позиции:
1. позиция в стиле списка: снаружи
В этом случае маркеры будут за пределами элемента списка. Начало каждой строки списка будет выровнено по вертикали.
Example:
<!DOCTYPE><html> <head> <style> ul.a { list-style-position:outside; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> Unordered lists </p> <ul class="a"> <li>one <br>In this the bullet points will be outside the list item.</li> <li>two<br> The start of each line of the list will be aligned vertically. </li> <li>three</li> </ul> </body></html>COPY TO |
ВЫХОД:
2. list-style-position:inside
In this the bullet points will be inside the list. The line along with the bullet points will be aligned vertically.
Example:
<!DOCTYPE><html> <head> <style> ul.a { list-style-position:inside; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> Unordered lists </p> <ul class="a"> <li>one <br>In this the bullet points will be inside the list item.</li> <li>two<br> The line along with the bullet points will be aligned vertically.. </li> <li>three</li> </ul> </body></html> |
ВЫХОД:
Shorthand Property:
This property allows us to set all the list properties in one command. The order of property is a type, position, and image.
If any of the property is missing, the default value is inserted.
Example:
<!DOCTYPE><html> <head> <style> ul.a { list-style:square inside; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> Unordered lists </p> <ul class="a"> <li>one</li> <li>two</li> <li>three</li> </ul> </body></html> |
ВЫХОД:
Styling Lists:
The list can be formatted in CSS. Different colors, borders, background, and paddings can be set for the lists.
Example:
<!DOCTYPE><html> <head> <style> ul.a { list-style:square; background:hotpink; padding:20px; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> Unordered lists </p> <ul class="a"> <li>one</li> <li>two</li> <li>three</li> </ul> </body></html> |
ВЫХОД:
NESTED LISTS:
Lists can also be nested. We have sub-sections for sections, so we need nesting of lists.
Example:
<!DOCTYPE><html> <head></head> <body> <h2> GEEKSFORGEEKS </h2> <ul> <li> one <ul> <li>sub one</li> <li>sub two</li> </ul> </li> <li> two <ul> <li>sub one</li> <li>sub two</li> </ul> </li> <li> three <ul> <li>sub one</li> <li>sub two</li> </ul> </li> </ul> </body></html> |
ВЫХОД: