207 lines
10 KiB
Markdown
207 lines
10 KiB
Markdown
|
---
|
|||
|
|
title: Styling Lists
|
|||
|
|
localeTitle: Списки стилей
|
|||
|
|
---
|
|||
|
|
## Списки стилей
|
|||
|
|
|
|||
|
|
### Списки HTML-списков
|
|||
|
|
|
|||
|
|
В HTML есть два основных типа списков: **упорядоченный** и **неупорядоченный** .
|
|||
|
|
|
|||
|
|
В **упорядоченных** списках ( `<ol></ol>` ) порядок элементов списка важен. Элементы могут отображаться по порядку по номеру, римской цифре, альфа-цифре или марку другого типа. Маркер по умолчанию для упорядоченных списков - это число (или `decimal` ):
|
|||
|
|
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
В **неупорядоченных** списках ( `<ul></ul>` ) порядок элементов списка не имеет значения. Элементы отображаются в формате пули. Маркер по умолчанию для неупорядоченных списков - это круглый маркер или `disc` .
|
|||
|
|
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
Каждый элемент списка в упорядоченном или неупорядоченном списке создается `<li></li>` .
|
|||
|
|
|
|||
|
|
### Стили списка
|
|||
|
|
|
|||
|
|
Существует три общих свойства, характерных для списков стилей: `list-style-type` , `list-style-position` и `list-style-image` . Существует также стенографическое свойство, которое включает в себя все три.
|
|||
|
|
|
|||
|
|
#### `list-style-type`
|
|||
|
|
|
|||
|
|
Маркеры (или маркеры), которые отображаются в упорядоченных и неупорядоченных списках, могут быть разными способами. Свойство CSS для стилизации типа маркера является типом типа `list-style-type` . Значение по умолчанию для типа `list-style-type` для упорядоченного списка является `decimal` , а по умолчанию для неупорядоченного списка - `disc` .
|
|||
|
|
|
|||
|
|
Пример списка заказа:
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ol {
|
|||
|
|
> list-style-type: upper-roman;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
Пример неупорядоченного списка:
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style-type: square;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
Нет примера с маркером:
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style-type: none;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
Принятые значения для свойства `list-style-type` :
|
|||
|
|
|
|||
|
|
_Неупорядоченный:_
|
|||
|
|
|
|||
|
|
* диск (по _умолчанию_ )
|
|||
|
|
* круг
|
|||
|
|
* квадрат
|
|||
|
|
|
|||
|
|
_Приказал:_
|
|||
|
|
|
|||
|
|
* decimal (по _умолчанию_ )
|
|||
|
|
* десятичное ведущий нуля
|
|||
|
|
* низший романский
|
|||
|
|
* Верхняя-римской
|
|||
|
|
* низший греческий
|
|||
|
|
* ниже латынь
|
|||
|
|
* Верхняя латынь
|
|||
|
|
* армянин
|
|||
|
|
* грузинский
|
|||
|
|
* низший-альфа
|
|||
|
|
* Верхняя-альфа
|
|||
|
|
|
|||
|
|
_Другой:_
|
|||
|
|
|
|||
|
|
* никто
|
|||
|
|
|
|||
|
|
Примечание. Все перечисленные выше значения свойств могут использоваться для стилирования как упорядоченных, так и неупорядоченных списков (например: упорядоченный список с `square` маркерами).
|
|||
|
|
|
|||
|
|
#### `list-style-position`
|
|||
|
|
|
|||
|
|
`list-style-position` определяет, отображается ли маркер списка внутри или вне элемента элемента списка ( `<li></li>` ). Свойство принимает два значения: `outside` (по умолчанию) или `inside` .
|
|||
|
|
|
|||
|
|
Поместите маркер `outside` элемента элемента списка, и все текстовые строки и подстроки каждого элемента списка будут выравниваться по вертикали:
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style-position: outside; /* default */
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
Поместите маркер `inside` , и первая текстовая строка каждого элемента списка будет отступом, чтобы освободить место для маркера. Любые подстроки одного и того же элемента списка будут выравниваться с маркером, а не с первой текстовой строкой:
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style-position: inside;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
#### `list-style-image`
|
|||
|
|
|
|||
|
|
Свойство `list-style-image` принимает URL-адрес изображения вместо маркера списка. Значение по умолчанию для этого свойства равно `none` .
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style-image: url(https://url-to-image);
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
|
|||
|
|
#### Сокращенный `list-style`
|
|||
|
|
|
|||
|
|
`list-style` - это сокращенное свойство для трех свойств стиля, перечисленных выше. Принятый порядок значений `list-style` принимает `list-style` `list-style-type` , `list-style-position` и `list-style-image` . Если какое-либо значение опущено, будет использоваться значение по умолчанию для этого свойства.
|
|||
|
|
|
|||
|
|
> Пример:
|
|||
|
|
>
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style: circle inside none;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
#### Больше стилей для списка
|
|||
|
|
|
|||
|
|
Теги упорядоченного списка также принимают атрибуты, которые управляют потоками, подсчетами или конкретными значениями маркера его элементов списка. К ним относятся атрибуты `start` , `reversed` и `value` . Дополнительную информацию см. В ресурсах MDN, перечисленных ниже.
|
|||
|
|
|
|||
|
|
### Общий стиль
|
|||
|
|
|
|||
|
|
Список содержимого можно стилизовать так же, как и другие элементы `p` или `div` . `color` , `font-family` , `margin` , `padding` или `border` - всего лишь несколько примеров свойств, которые могут быть добавлены к элементам `ul` , `ol` или `li` .
|
|||
|
|
|
|||
|
|
Обратите внимание, что любые стили, добавленные в элемент `ul` или `ol` будут влиять на весь список. Стили, добавленные непосредственно к элементам `li` будут влиять на отдельные элементы списка. В приведенном ниже примере свойства границы и цвета фона различаются между элементами списка и элементов списка:
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style-type: circle;
|
|||
|
|
> border: 2px solid blue;
|
|||
|
|
> background-color: lightblue;
|
|||
|
|
> }
|
|||
|
|
> li {
|
|||
|
|
> margin: 5px;
|
|||
|
|
> background-color: lightyellow;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
#### Интервал между списками
|
|||
|
|
|
|||
|
|
Вы можете заметить дополнительное расстояние перед элементами списка, если для типа `list-style-type` установлено значение `none` . Настройка `padding` на `0` (или любой другой интервал предпочтительнее) в элементе списка будет переопределять это заполнение по умолчанию.
|
|||
|
|
|
|||
|
|
> ```css
|
|||
|
|
> /* css */
|
|||
|
|
> ul {
|
|||
|
|
> list-style: none;
|
|||
|
|
> padding: 0;
|
|||
|
|
> }
|
|||
|
|
> li {
|
|||
|
|
> padding: 5px 10px;
|
|||
|
|
> background-color: #EEEEEE;
|
|||
|
|
> border: 1px solid #DDDDDD;
|
|||
|
|
> }
|
|||
|
|
>
|
|||
|
|
> ```
|
|||
|
|
>
|
|||
|
|
> 
|
|||
|
|
|
|||
|
|
* * *
|
|||
|
|
|
|||
|
|
#### Источники:
|
|||
|
|
|
|||
|
|
Ссылки, приведенные ниже, были указаны при компиляции информации, найденной в этой статье. Пожалуйста, посетите их для получения дополнительной информации по этой теме.
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
[MDN - Списки стилей](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
|
|||
|
|
|
|||
|
|
[W3Schools - Списки CSS](https://www.w3schools.com/css/css_list.asp)
|
|||
|
|
|
|||
|
|
[CSS-трюки - стиль списка](https://css-tricks.com/almanac/properties/l/list-style/)
|