Как сделать сайтУроки CSS → Урок 14. Списки

CSS - Урок 14. Списки

Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML. Собственно свойств для списков существует всего три:
  • list-style-type - определяет внешний вид маркера или нумератора.


  • list-style-image - определяет пользовательское изображение маркера.


  • list-style-position - определяет положение маркеров относительно блока.
Рассмотрим их на примерах.

list-style-type

Для маркерованных списков ничего нового, все теже значения, что и в HTML:
  • disk - закрашенный кружок.

  • circle - незакрашенный кружок.

  • square - закрашенный квадрат.

Давайте посмотрим, как они выглядят в браузере. Для этого создадим три одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код html-страницы:
<html> <head> <title>CSS списки</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul id="spisok1"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul id="spisok2"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul id="spisok3"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> </body> </html>
Код страницы style.css:
#spisok1{ list-style-type:disk; } #spisok2{ list-style-type:circle; } #spisok3{ list-style-type:square; }
Результат:
  • Первый пункт
  • Второй пункт
  • Третий пункт
  • Первый пункт
  • Второй пункт
  • Третий пункт
  • Первый пункт
  • Второй пункт
  • Третий пункт


Для нумерованных списков перечень более широк, чем в HTML, но не все значения поддерживаются всеми браузерами. Поэтому пока рекомендуется использовать только следующие:
  • decimal - десятичные числа.

  • lower-roman - строчные римские цифры.

  • upper-roman - прописные римские цифры.

  • lower-alpha - строчные латинские буквы.

Давайте посмотрим, как они выглядят в браузере. Для этого создадим четыре одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код html-страницы:
<html> <head> <title>CSS списки</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ol id="spisok1"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> <ol id="spisok2"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> <ol id="spisok3"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> <ol id="spisok4"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> </body> </html>
Код страницы style.css:
#spisok1{ list-style-type:decimal; } #spisok2{ list-style-type:lower-roman; } #spisok3{ list-style-type:upper-roman; } #spisok4{ list-style-type:lower-alpha; }
Результат:
  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  1. Первый пункт
  2. Второй пункт
  3. Третий пункт


list-style-image

Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером. Предположим у нас есть вот такая картинка: и мы хотим, чтобы она была маркером. Создадим список:
<html> <head> <title>CSS списки</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul id="spisok"> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> </body> </html>
На странице style.css зададим стиль:
#spisok{ list-style-image:url(marker.gif); }
Обратите внимание, для данного примера картинка лежит в той же папке, что и наши страницы. Если же поместить картинку, например, в папку images, то и путь к ней надо указать, как list-style-image:url(images/marker.gif);. В общем, где бы не лежала картинка, вы должны правильно указать путь к ней.
Результат:
  • Первый пункт
  • Второй пункт
  • Третий пункт


Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.

list-style-position

Это свойство определяет положение маркера: внутри блока - inside или снаружи - outside. Понятнее будет на примере. Создадим два списка, расположенных в div-е:
<html> <head> <title>CSS списки</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="sp"> <ul id="spisok1"> <li>Первый пункт первого списка</li><br> <li>Второй пункт первого списка</li><br> <li>Третий пункт первого списка</li><br> </ul> <ul id="spisok2"> <li>Первый пункт второго списка</li><br> <li>Второй пункт второго списка</li><br> <li>Третий пункт второго списка</li><br> </ul> </div> </body> </html>
Зададим стили для списков с разными значениями:
#sp{ width:150px; } #spisok1{ list-style-position:inside; } #spisok2{ list-style-position:outside; }
И посмотрим на результат в браузере:
CSS списки


Думаю теперь разница очевидна.

Сокращенная запись свойства list-style

Как всегда, можно задать все значения свойств списка через пробел:
#spisok1{ list-style:circle url(marker.gif) inside; }
Вот собственно и все, наши уроки подошли к концу. Мы рассмотрели все свойства CSS. Теперь ваша задача научиться их применять для решения конкретных задач. В этом вам поможет раздел css - полезные навыки.

Удачи Вам и творческих успехов!



Предыдущий урок Вернуться в раздел 
Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.

Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP

Код кнопки:



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