Для тени мы задали цвет #CDD9DB (светло-синий) и совсем небольшие отступы, равные 1 мм. Такая тень будет ненавязчивой, но симпатичной.
Снова сохраним таблицу стилей и обновим Web-страницу. Посмотрим на результат. Красота…
Мы можем еще поэкспериментировать со стилями — в качестве домашнего задания. Но недолго — нас ждет еще много интересного.
Что дальше?
В этой главе мы научились оформлять текст и фон, используя особые атрибуты стиля. И начали создавать представление для своих Web-страничек.
В следующей главе нас поджидают другие атрибуты стиля — предназначенные для задания параметров абзацев и списков.
ГЛАВА 9. Параметры абзацев, списков и отображения
В предыдущей главе мы рассмотрели атрибуты стиля, предназначенные для задания параметров текста (шрифта, его размера, начертания, тени и пр.) и фона элементов Web-страниц. Изучили новый элемент Web-страницы — встроенный контейнер — и выяснили, зачем он нужен. А также начали создавать представление для Web-страниц нашего первого Web-сайта и неплохо в этом преуспели.
В этой главе мы изучим атрибуты стиля, с помощью которых задают параметры абзацев. Абзацев в широком смысле этого слова — к которым относятся и заголовки, и списки, и теги адреса, и большие цитаты. В общем, блочных элементов, рассмотренных в главе 2 и предназначенных для структурирования текста.
Далее мы рассмотрим атрибуты стиля, задающие специфические параметры списков и их пунктов (параметры маркеров и нумерации).
Напоследок мы познакомимся с двумя очень специфичными атрибутами стиля, которые позволят нам задать отображение элемента Web-страницы (т. е. будет он блочным или встроенным) и сделать элемент невидимым. Эти атрибуты стиля применяются нечасто и только в совокупности с определенным поведением (см. часть III).
Параметры вывода текста
Начнем мы с атрибутов стиля, управляющих выводом текста в структурирующих текст блочных элементах. Их совсем мало. И все они применимы только к блочным элементам.
Атрибут стиля text-align задает горизонтальное выравнивание текста:
text-align: left|right|center|justify|inherit
Здесь доступны значения left (выравнивание по левому краю; обычное поведение Web-обозревателя), right (по правому краю), center (по центру) и justify (полное выравнивание).
Примеры:
P { text-align: justify } H1 { text-align: center }
Атрибут стиля text-indent задает отступ для "красной строки":
text-indent: <отступ "красной строки">
Здесь допускаются абсолютные и относительные (относительно ширины абзаца) величины отступа. По умолчанию отступ "красной строки" равен нулю. Отметим, что атрибут стиля text-indent не поддерживает значение inherit.
Пример:
P { text-indent: 5mm }
Вот теперь абзацы будут иметь "красную строку".
Параметры списков
Списки среди блочных элементов стоят особняком. В основном, из-за того, что, во-первых, содержат в себе другие блочные элементы (отдельные пункты), а во-вторых, включают маркеры и нумерацию, которые расставляет сам Web-обозреватель. Вот о маркерах и нумерации, а точнее, об атрибутах стиля, предназначенных для задания их параметров, мы сейчас и поговорим.
Атрибут стиля list-style-type задает вид маркеров или нумерации у пунктов списка:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit
Как видим, доступных значений у этого атрибута стиля очень много. Они обозначают как различные виды маркеров, так и разные способы нумерации.
— disc — маркер в виде черного кружка (обычное поведение для маркированных списков).
— circle — маркер в виде светлого кружка.
— square — маркер в виде квадратика. Он может быть светлым или темным, в зависимости от Web-обозревателя.
— decimal — нумерация арабскими цифрами (обычное поведение для нумерованных списков).
— decimal-leading-zero — нумерация арабскими цифрами от 01 до 99 с начальным нулем.
— lower-roman — нумерация маленькими римскими цифрами. upper-roman — нумерация большими римскими цифрами.
— lower-greek — нумерация маленькими греческими буквами.
— lower-alpha и lower-latin — нумерация маленькими латинскими буквами.
— upper-alpha и upper-latin — нумерация большими латинскими буквами.
— armenian — нумерация традиционными армянскими цифрами.
— georgian — нумерация традиционными грузинскими цифрами.
— none — маркер и нумерация отсутствуют (обычное поведение для не-списков).
НА ЗАМЕТКУ
Мы рассмотрели только значения атрибута стиля list-style-type, предлагаемые стандартом CSS 3. Однако стандарт CSS 2 предусматривал еще несколько значений, которые до сих пор поддерживаются Web-обозревателями. Вы можете найти их на Web-странице https://developer.mozilla.org/en/CSS/list-style-type.
Атрибут стиля list-style-type можно задавать как для самих списков, так и для отдельных пунктов списков. В последнем случае создается список, в котором пункты имеют разные маркеры или нумерацию. Иногда это может пригодиться.
Вот определение маркированного списка с маркером в виде квадратика:
UL { list-style-type: square }
А в листинге 9.1 мы задали такой же маркер для одного из пунктов маркированного списка.
Листинг 9.1
squared { list-style-type: square }
.
<UL>
<LI>Первый пункт</LI>
<LI CLASS="squared">Второй пункт (с другим маркером)</LI>
<LI>Третий пункт</LI>
</UL>
Атрибут стиля list-style-image позволяет задать в качестве маркера пунктов списка какое-либо графическое изображение (создать графический маркер).
В этом случае значение атрибута стиля list-style-type, если таковой задан, игнорируется:
list-style-image: none|<интернет-адрес файла изображения>|inherit
Интернет-адрес файла с графическим маркером задается в таком же формате, что и интернет-адрес файла фонового изображения (см. главу 8):
UL { list-style-image: url(/markers/dot.gif) }
Значение none убирает графический маркер и возвращает простой, неграфический. Это обычное поведение.
Атрибут стиля list-style-image также можно задавать как для самих списков, так и для отдельных их пунктов.
Атрибут стиля list-style-position позволяет указать местоположение маркера или нумерации в пункте списка:
list-style-position: inside|outside|inherit
Доступных значений здесь два:
— inside — маркер или нумерация находятся как бы внутри пункта списка, являются его частью;
— outside — маркер или нумерация вынесены за пределы пункта списка (это обычное поведение).
Непонятно, зачем нужен данный атрибут стиля, ведь списки, в которых маркер или нумерация вынесены за пределы пунктов, лучше читаются. Ну, раз он присутствует в стандарте CSS, значит, так тому и быть…
Пример:
OL { list-style-position: inside }
Параметры отображения
Еще одна группа атрибутов стиля управляет тем, как элемент будет отображаться на Web-странице, т. е. будет он блочным или встроенным, и будет ли он отображаться вообще. Эти атрибуты стиля применимы к любым элементам Web-страниц.
Атрибут стиля visibility позволяет указать, будет ли элемент отображаться на Web-странице:
visibility: visible|hidden|collapse|inherit
Он может принимать три значения:
— visible — элемент отображается на Web-странице (это обычное поведение);
— hidden — элемент не отображается на Web-странице, однако под него все еще выделено на ней место. Другими словами, вместо элемента на Web-странице видна пустая "прореха";
— collapse — применим только к строкам, секциям, столбцам и группам столбцов таблицы (о столбцах и группах столбцов пойдет речь в главе 13). Элемент не отображается на Web-странице, и под него не выделяется место на ней (т. е. никаких "прорех"). Однако Web-обозреватель считает, что данный элемент Web- страницы все еще на ней присутствует. Данное значение поддерживают не все Web-обозреватели.
Атрибут стиля visibility применяется довольно редко и только для создания специальных эффектов, наподобие исчезающего или появляющегося элемента Web-страницы. Используется он всегда совместно с соответствующим поведением (о поведении Web-страниц пойдет речь в части III).
Атрибут стиля display весьма примечателен. Он позволяет задать вид элемента Web-страницы: будет он блочным, встроенным или вообще пунктом списка.
Пример:
display: none|inline|block|inline-block|list-item|run-in|table|inline-table|table-caption|table-column|table-column-group|table-header-group|table-row-group|table-footer-group|table-row|table-cell|inherit
Доступных значений у этого атрибута стиля очень много.
— none — элемент вообще не будет отображаться на Web-странице, словно он и не задан в ее HTML-коде.
— inline — встроенный элемент.
— block — блочный элемент.
— inline-block — блочный элемент, который будет "обтекаться" содержимым соседних блочных элементов.
