Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Свойства для списков
Итак, для списков существует три свойства: 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.net
спасибо Вам огромное, все изложенно понятно, доступно, последовательно. =)
И Вам спасибо 🙂
Здравствуйте, Олег. Подскажите, пожалуйста, где мне найти такой же «arrow.png» как у вас?
Здравствуйте, Константин. Скачайте, пожалуйста исходники к данному уроку. Они располагаются в самом начале статьи в блоке «скачать материалы».
Олег, спасибо. Спасибо!!!