Списки в CSS. Основы и тонкости работы со списками

В этом видеоуроке мы разберем:

  • Основы и тонкости работы со списками в CSS
  • Свойства list-style: type, position, image

Скачать материалы:
Скачать 8-ой видеоурок по CSS Размер: 12.14 MB, скачали: 461 раз. Скачать исходники к 8 видеоуроку по CSS Размер: 29.44 kB, скачали: 509 раз. 
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Коробочную модель, рамки и отступы вы можете изучить в предыдущем уроке из видеокурса CSS. В этом видеоуроке мы рассмотрим применение стилей к спискам. Это довольно таки частое явление, так как списки применяют в меню сайта. Да и даже списки в статьях можно оформить по-особому, чтобы было красиво.

Свойства для списков

Итак, для списков существует три свойства: list-style-type, list-style-position и list-style-image. Все они образуют четвертое — list-style. Записываются они в таком же порядке. То есть list-style: {значения_трех_свойств}.

Работаем со списками

Давайте посмотрим на практике. Я добавил в наш сайт в папку img изображение arrow.png. Я его прикладываю. Занесите его также в папку img. Переходим в код документа index.html. Убираем тип square, класс text-2, у маркированного списка тоже убираем класс и тип.

</pre>
<ul>
	<li>Вы со мной согласны.</li>
	<li>Вы со мной не согласны.</li>
	<li>Вы в замешательстве.</li>
</ul>

<hr />
<ol>
	<li>Вы со мной согласны.</li>
	<li>Вы со мной не согласны.</li>
	<li>Вы в замешательстве.</li>
</ol>
<pre> 

Сохраняем. Переходим в документ style.css и удаляем класс text-2. Сохраним и посмотрим, что у нас сейчас получилось. Обновляю страницу. Как мы видим, ни в нумерованном, ни в маркированном списках нет ни цифр, ни маркеров. Почему это произошло? Давайте откроем документ style.css и посмотрим. Произошло это, потому что мы прописали padding и margin нулю для всех свойств. Почему у нас исчезли цифры и маркеры? На самом деле они не исчезли. Что случилось, вы поймете чуть позже, когда мы начнем разбираться со свойством list-style-position. Итак, чтобы решить эту проблему, нам просто нужно убрать класс «*» и нулевые padding и margin присвоить тегу <body>.

 body { background: #33CCFF url(img/bg.jpg) repeat fixed; padding: 0; margin: 0;}
 

Я вообще не советую вам применять padding и margin для всех свойств (для «*»), потому что очень много свойств могут некорректно работать. Поэтому мы будем применять их к тегу <body> или еще где-нибудь, где это нужно. Сохраним документ и проверим. Как мы видим, маркеры и цифры добавились. Сначала разберемся с маркерами. Переходим в документ index.html и присвоим тегу <ul> стиль. Мы это сделаем не в документе style.css, а прямо в теге. Как это делается? Пишется style="свойства". Поставим свойство list-style-type. Список у нас маркированный, а свойство list-style-type может принимать очень много значений. Из маркированных: disk, circle, square; а нумерованных еще больше. Пропишем значение decimal.

</pre>
<ul style="list-style-type: decimal;">

Сейчас просто посмотрим, что у нас получилось. Маркированный список стал нумерованным. Теперь давайте приступим к тегу <ol>. Сейчас пропишем ему идентификатор. Пусть это будет list1.

</pre>
<ol id="list1">

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

 #list1 {
 list-style-type: none;
 }
 

Сохраняем. Проверяем. Вся нумерация исчезла. Теперь давайте пропишем то изображение, которое я прикладываю к этому видеоуроку. Мы его сделаем маркером. Делается это так: list-style-image: url (путь).

 #list1 {
 list-style-type: none
 list-style-image: url(img/arrow.png);
 }
 

Сохраняем, смотрим, что получилось. Вместо маркера появилась стрелочка — наше изображение. Давайте перейдем в нашу таблицу стилей и пропишем новую для нас запись — запись наследования. Сначала прописываем идентификатор list1, в котором указываем тег <li>.

 #list1 li {
 }
 

Что эта запись означает? Если мы перейдем в индексный документ, то мы увидим, что тег <li> располагается в теге <ol> с идентификатором list1. Смотрим снова на нашу запись и вот мы указываем, что тег <li>, который находится в идентификаторе list1, принимает следующие свойства, которые мы сейчас пропишем. Давайте зададим однопиксельную сплошную красную рамку.

 #list1 li {
 border: 1px solid red;
 }
 

Сохраняем и проверяем в браузере. Обновляем и видим, что область текста выделена рамкой. У нас было три тега <li>, и в каждом был свой текст. Каждый этот текст выделился рамкой. Если мы проверим это в браузере Google Chrome, то мы увидим то же самое также и в других браузерах. Почему я начал проверять в новом браузере наш сайт? Потому что браузер Opera не отображает той сути, которую я хотел бы показать в этом видеоуроке. Посмотрим это на новом свойстве list-style-position. Оно может принимать лишь два значения: outside, которое стоит по умолчанию, и inside, которое мы сейчас применим, чтобы увидеть изменения на сайте.

 #list1 {
 list-style-type: none
 list-style-image: url(img/arrow.png);
 list-style-position: inside;
 }
 

Давайте сохраним и откроем сначала браузер Opera. Прежде чем обновить, советую вам обратить внимание на стрелочки. В браузере Opera они просто сдвинутся чуть-чуть правее. Обновляем. Как видим, так и произошло. В браузере Google Chrome эти стрелочки должны попасть в область текста. Обновим. Итак, они попали в область текста и стали окружены рамкой. Таким образом, отличие значения inside от outside заключается в том, что оно располагается в области с текстом, а не за ней. Поэтому к ней не применяется свойство margin. Давайте удалим рамку и объединим наши свойства в сокращенную запись. Мы видим, что у всех трех свойств есть одно общее начало — list-style. Объединяются они в такой последовательности: list-style-type | list-style-position | list-style-image.

 #list1 {
 list-style: none inside url(img/arrow.png);
 }
 

Сохраняем. Проверяем в браузере Google Chrome и в браузере Opera (скачать браузеры вы можете из первого видеоурока по CSS). Все нормально отображается. На этом все. До встречи в следующем видеоуроке, из которого вы узнаете, что такое блочные и встроенные элементы.

Подпишись на info-line:

Получать новые уроки на e-mail:

5 комментариев на “Списки в CSS. Основы и тонкости работы со списками”

  1. Марина 17 января 2012 в 14:40 #

    спасибо Вам огромное, все изложенно понятно, доступно, последовательно. =)

  2. Константин 20 декабря 2012 в 16:57 #

    Здравствуйте, Олег. Подскажите, пожалуйста, где мне найти такой же «arrow.png» как у вас?

  3. Любовь Константиновна 11 апреля 2013 в 10:57 #

    Олег, спасибо. Спасибо!!!

Оставить ответ