Списки в css. Пошаговые уроки с примерами по работе с списками на html сайте.


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

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

  • none - маркер списка отсутсвует

  • upper-roman - большие римские цифры: I, II, III
  • lower-roman - маленькие римские цифры: i, ii, iii
  • decimal - обычные числа: 1,2,3
  • upper-alpha - большие буквы: A, B, C
  • ower-alpha - малые буквы: a,b,c

  • square - закрашенный квадрат
  • disk - закрашенный круг
  • circle - не закрашенный круг

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


<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 которая показана выше мы указали, что упорядоченный список будет обозначаться обычными числами, а неупорядоченный маркируется в виде не закрашенных кружочков. Теперь смотрите ниже, где показано как это будет выглядеть в браузере. Для тех, кто не знает, как применять стиль css к сайту или как подключать файл style.css прошу посетить этот урок.


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

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

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


<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.


Списки CSS


3) Свойство list-style-image оно выводит изображение в списке вместо маркера. Обратите внимание, размер картинки имеет значение, оно влияет на вид списка. И ещё не забудьте указывать правильный путь к изображению, если вы не умеете указывать правильный путь, то можете перейти на этот урок и научиться правильно указывать путь к изображению. Ниже смотрите пример списка на веб странице и пример содержания файла style.css.

Пример списка на веб странице.


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


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


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


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


  Маркер как изображение CSS
 

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

Вернуться к предыдущему уроку. ССЫЛКИ В CSS.



Рейтинг@Mail.ru   Яндекс.Метрика