Site icon Vavik96

Списки в css

В этом уроке мы рассмотрим, как применять списки CSS к внешнему виду сайту и поработаем с тремя основными свойствами.
Свойство list-style-type вид маркера
Свойство list-style-position положение маркера
Свойство list-style-image изображение вместо маркера

1) Свойство list-style-type нужно чтоб указать вид маркера которыми можно обозначать список например это могут быть цифры, буквы, кружочки, квадратики. И ещё мы вспомним работу с элементами <ol>></ol> – обозначающий упорядоченный список и <ul> </ul> – обозначающий неупорядоченный список. Смотрите ниже список основных обозначений списка в CSS.

Пример HTML упорядоченного и неупорядоченного списка на веб странице.

<ol>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ol>
<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>

 

Пример содержание файла style.css для свойства list-style-type.

ol {list-style-type:decimal;}
ul {list-style-type:circle;}

Обратите внимание в файле style.css которая показана выше мы указали, что упорядоченный список будет обозначаться обычными числами, а неупорядоченный маркируется в виде не закрашенных кружочков. Теперь смотрите ниже, где показано как это будет выглядеть в браузере.

  1. Первый
  2. Второй
  3. Третий

2) Свойство list-style-position указывает положение маркера в списке работает с двумя элементами, такими как inside – определяющее что маркер будет расположен внутри основного блока и outside – маркер расположен за пределами основного блока списка.
Пример HTML упорядоченного и неупорядоченного списка на веб странице.

<ol>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ol>
<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>

 

Пример содержание файла style.css.

ol {
list-style-type:decimal;
list-style-position:inside;
}

ul {
list-style-type:disk;
list-style-position:outside;
}

 

Посмотрите ниже на скриншоте мы обвели красным границы основного блока для того чтоб нам легче было понять суть работы свойства list-style-position. Мы видим, что нумерация упорядоченного списка отображается обычными числами и находится внутри основного блока, а непорядочная отображается в виде закрашенного круга и находится за пределами границы блока как мы и указали в файле style.css.

3) Свойство list-style-image оно выводит изображение в списке вместо маркера. Обратите внимание, размер картинки имеет значение, оно влияет на вид списка. Ниже смотрите пример списка на веб странице и пример содержания файла style.css.
Пример HTML списка на веб странице.

<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>

 

Пример содержание файла style.css.

ul {list-style-image:url(image/marker.gif);}

 

Смотрите ниже на результат в браузере вместо маркера у нас выводится изображение.

 

Теперь вы умеете работать над списками в CSS на сайте, конечно всё это сразу может быть и не понятно, но со временем немного попрактикуетесь и всё станет на свои места.
Источник

Exit mobile version