Уроки CSS для начинающих. Базовый курс.


Урок 9. Стили списков

На этом уроке разберёмся со стилями для списков.

Список у нас на странице о породах (poroda.htm):

Уроки css для начинающих
Рис. 12

Напомню из уроков по html: списки бывают нумерованные и ненумерованные (маркированные); списки нумерованные задают тегом <ol> … </ol>, а маркированные – тегом <ul> … </ul>, пункты списка задаются тегом <li>.

На нашей странице список ненумерованный.

Задание стилей списков сводится, главным образом, к заданию вида «пулек» (маркеров), отмечающих пункты списка. Тип «пулек» задают свойством list-style-type со следующими значениями:

disc - маркер в виде заполненного круга;

circle - маркер в виде окружности;

square - маркер в виде квадрата;

decimal - десятичная нумерация, начинающаяся с 1;

decimal-leading-zero - десятичная нумерация с предшествующим нулем: 01, 02, 03, … 98, 99 и т.д.;

lower-roman - римские цифры в нижнем регистре: i, ii, iii, iv, v и т.д.;

upper-roman - римские цифры в верхнем регистре: I, II, III, IV, V, и т.д.;

lower-latin или lower-alpha - буквы из набора символов ASCII в нижнем регистре: a, b, c, ... z;

upper-latin или upper-alpha - буквы из набора символов ASCII в верхнем регистре: A, B, C, ... Z.

Создадим стиль для списка на нашей странице.

Откройте файл стилей и добавьте следующую запись:

Листинг 9.1

ul {
    list-style-type : decimal;
}

Сохраните файл, откройте страницу poroda.htm  в браузере:

Уроки css для начинающих
Рис. 13.

Обратите внимание: не смотря на то, что список задан тегом <ul> … </ul>, вместо маркеров стоят номера. То есть, в таблицах стилей теги можно переопределять, задавать им значения, отличные от изначальных.

Предлагаю Вам самостоятельно поэкспериментировать с разными видами маркеров.

Следующее свойство для списков - list-style-position. Это свойство имеет два значения:

outside - маркеры, помечающие список, находятся вне пространства, отведенного под сам список (по умолчанию);

inside - маркеры, помечающие список, находятся внутри пространства, отведенного под сам список.

Перейдите в файл стилей и добавьте следующую запись:

Листинг 9.2

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

Сохраните результат, перейдите в браузер, обновите страницу:

Уроки css для начинающих
Рис. 14

Вообще-то, получилось не очень наглядно из-за того, что строчки в пунктах очень короткие. Предлагаю в какую-нибудь строку добавить текста. Откройте код страницы в текстовом редакторе и напишите, например, так:

Листинг 9.3

……
<ul>
<li> немецкая овчарка: распространена почти повсеместно, в работе универсальна и успешно используется для различной службы в армии, пограничных войсках, войсках и органах МВД, народном хозяйстве и спорте.
……

Сохраните результат, перейдите в браузер, обновите страницу.

Как видим, маркер помещается внутри текстового блока:

Уроки css для начинающих
Рис. 15

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

Уроки css для начинающих

из архива к урокам по html и css.

Поместите выбранное изображение в папку img. Перейдите в файл стилей и измените код следующим образом:

Листинг 9.4

ul  {
list-style-image : url(img/p.png);
list-style-position: inside;
}

Сохраните результат, перейдите в браузер, обновите страницу. Со списком получилось так:

Уроки css для начинающих
Рис. 16

Конечно, «на выставку» это не пошлёшь, в смысле, такую страницу в Сети размещать не стоит: изображения надо бы сперва оптимизировать, да и не подходят они ни к теме, ни к оформлению сайта… но я хотел лишь продемонстрировать принцип задания маркеров с помощью изображений. Так что, надеюсь, Вы меня поймёте и простите.

Ну, о стилях списков всё.

Успехов и до встречи на следующих уроках.

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта