freeCodeCamp

10 KiB

Raw Blame History

title	localeTitle
Styling Lists	Списки стилей

Списки стилей

Списки 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 */ 
 ol { 
  list-style-type: upper-roman; 
 }

Пример неупорядоченного списка:

/* css */ 
 ul { 
  list-style-type: square; 
 }

Нет примера с маркером:

/* css */ 
 ul { 
  list-style-type: none; 
 }

Принятые значения для свойства list-style-type :

Неупорядоченный:

диск (по умолчанию )
круг
квадрат

Приказал:

decimal (по умолчанию )
десятичное ведущий нуля
низший романский
Верхняя-римской
низший греческий
ниже латынь
Верхняя латынь
армянин
грузинский
низший-альфа
Верхняя-альфа

Другой:

никто

Примечание. Все перечисленные выше значения свойств могут использоваться для стилирования как упорядоченных, так и неупорядоченных списков (например: упорядоченный список с square маркерами).

`list-style-position`

list-style-position определяет, отображается ли маркер списка внутри или вне элемента элемента списка ( <li></li> ). Свойство принимает два значения: outside (по умолчанию) или inside .

Поместите маркер outside элемента элемента списка, и все текстовые строки и подстроки каждого элемента списка будут выравниваться по вертикали:

/* css */ 
 ul { 
  list-style-position: outside; /* default */ 
 }

Поместите маркер inside , и первая текстовая строка каждого элемента списка будет отступом, чтобы освободить место для маркера. Любые подстроки одного и того же элемента списка будут выравниваться с маркером, а не с первой текстовой строкой:

/* css */ 
 ul { 
  list-style-position: inside; 
 }

`list-style-image`

Свойство list-style-image принимает URL-адрес изображения вместо маркера списка. Значение по умолчанию для этого свойства равно none .

/* 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 */ 
 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 */ 
 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 */ 
 ul { 
  list-style: none; 
  padding: 0; 
 } 
 li { 
  padding: 5px 10px; 
  background-color: #EEEEEE; 
  border: 1px solid #DDDDDD; 
 }

Источники:

Ссылки, приведенные ниже, были указаны при компиляции информации, найденной в этой статье. Пожалуйста, посетите их для получения дополнительной информации по этой теме.

Дополнительная информация:

MDN - Списки стилей

W3Schools - Списки CSS

CSS-трюки - стиль списка

10 KiB Raw Blame History Unescape Escape