HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Как видим, все довольно просто и наглядно. Стили объединяются друг с другом, переопределяя заданные в них параметры, согласно приоритету. А приоритет зависит от конкретности данного стиля, от "близости" его к тегу.
Сохраним таблицу стилей и откроем в Web-обозревателе Web-страницу index.htm. Совсем другой вид! Вот что можно сделать с Web-страницей с помощью стилей CSS! И ведь нам совсем не пришлось править ее HTML-код (если не считать внесение тега <LINK>, выполняющего привязку таблицы стилей). Разделение содержимо- го и представления, предписываемое концепцией Web 2.0,
Что бы нам еще такое сделать?.. Давайте немного разредим текст заголовков, чтобы сделать их более заметными. Для этого достаточно добавить к изначальному пространству между его символами дополнительное, равное 1 мм.
Но куда поместить соответствующий атрибут стиля? В CSS-код, создающий три одинаковых стиля переопределения тегов <H1>, <H2> и <H6>. Вот он:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }
А так он будет выглядеть после соответствующей правки:
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif; letter-spacing: 1mm }
Вот и все, что нам понадобилось сделать! Сохраним таблицу стилей, выбрав кодировку UTF-8 (см. главу 1), и обновим Web-страницу index.htm, открытую в Web-обозревателе, нажав клавишу <F5>. А что, получилось стильно!
А чтобы совсем уж ошарашить будущих посетителей, давайте задействуем возможности CSS 3 и создадим для текста заголовков тень. Добавим соответствующий атрибут стиля, опять же, в CSS-код, создающий три одинаковых стиля переопределения тегов <H1>, <H2> и <H6> (листинг 8.3).
Листинг 8.3
H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif; letter-spacing: 1mm; text-shadow: #CDD9DB 1px 1px }
Для тени мы задали цвет #CDD9DB (светло-синий) и совсем небольшие отступы, равные 1 мм. Такая тень будет ненавязчивой, но симпатичной.
Снова сохраним таблицу стилей и обновим Web-страницу. Посмотрим на результат. Красота…
Мы можем еще поэкспериментировать со стилями — в качестве домашнего задания. Но недолго — нас ждет еще много интересного.
Что дальше?
В этой главе мы научились оформлять текст и фон, используя особые атрибуты стиля. И начали создавать представление для своих Web-страничек.
В следующей главе нас поджидают другие атрибуты стиля — предназначенные для задания параметров абзацев и списков.
ГЛАВА 9. Параметры абзацев, списков и отображения
В предыдущей главе мы рассмотрели атрибуты стиля, предназначенные для задания параметров текста (шрифта, его размера, начертания, тени и пр.) и фона элементов Web-страниц. Изучили новый элемент Web-страницы — встроенный контейнер — и выяснили, зачем он нужен. А также начали создавать представление для Web-страниц нашего первого Web-сайта и неплохо в этом преуспели.
В этой главе мы изучим атрибуты стиля, с помощью которых задают параметры абзацев. Абзацев в широком смысле этого слова — к которым относятся и заголовки, и списки,
Далее мы рассмотрим атрибуты стиля, задающие специфические параметры списков и их пунктов (параметры маркеров и нумерации).
Напоследок мы познакомимся с двумя очень специфичными атрибутами стиля, которые позволят нам задать отображение элемента 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 с начальным нулем.