Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Контейнеры бывают блочные и встроенные. Разговор о блочных контейнерах мы отложим до главы 10, в которой будем рассматривать контейнерный Web-дизайн. Поговорим о встроенных контейнерах.

Уже по определению ясно, что встроенный контейнер является частью блочного элемента Web-страницы. Так, блочным контейнером может стать фрагмент абзаца или цитаты, графическое изображение, помещенное в абзац, и др.

Встроенный контейнер создается с помощью парного тега <SPAN>. Фрагмент блочного элемента, который нужно превратить в содержимое встроенного контейнера, помещают в этот тег:

<P><SPAN>Представление</SPAN> создается с помощью стилей CSS.</P>

Здесь мы поместили во встроенный контейнер фрагмент абзаца.

Толку от нашего первого встроенного контейнера никакого. Поэтому давайте привяжем к нему какой-нибудь стиль (листинг 8.1).

Представление для нашего Web-сайта, часть 1

Изучив гору теории, приступим к практике. Начнем создавать представление для нашего первого Web-сайта.

Все стили, которые мы применим к Web-страницам, поместим во внешнюю таблицу стилей main.css. Создадим ее и поместим в корневой папке Web-сайта. После чего привяжем ее ко всем Web-страницам, входящим в него. Как мы помним из главы 7, это выполняется с помощью тега <LINK>.

Для главной Web-страницы index.htm этот тег будет выглядеть так:

<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">

Для всех Web-страниц, хранящихся в папке tags, он будет таким:

<LINK REL="stylesheet" HREF="../main.css" TYPE="text/css">

Внесем в HTML-код всех Web-страниц этот тег и сохраним их.

В тегах <LINK>, привязывающих таблицу стилей к Web-страницам, мы указали относительные интернет-адреса. Это позволит нам просматривать Web-страницы, открывая их в Web-обозревателе без использования Web-сервера. Так проще.

Теперь наполним нашу первую таблицу стилей нужными стилями. Но сначала определимся, что мы хотим создать. Опишем параметры шрифта и фона наших Web- страниц обычным, "человеческим" языком.

Концепция Web 2.0, о которой говорилось в главе 1, определяет специфические требования к шрифту и фону Web-страниц. Это тонкие и достаточно крупные шрифты без засечек, приглушенные цвета, обычный (неграфический) или однотонный графический фон. Остальные характеристики, как говорится, по вкусу.

Исходя из этого, для Web-страницы мы зададим такие параметры.

— Шрифт абзацев — Verdana. Если таковой отсутствует на клиентском компьютере, применим шрифт Arial.

— Шрифт заголовков — Arial. Это позволит нам дополнительно выделить заголовки, сделать их отличными от обычных абзацев.

— Размер шрифта абзацев — 12 пунктов.

— Размер шрифта заголовков первого уровня — 20 пунктов. Размер шрифта заголовков второго уровня — 18 пунктов. Размер шрифта заголовков шестого уровня — 12 пунктов. Шрифт заголовков всех уровней — обычной насыщенности.

— Размер шрифта в таблицах — 10 пунктов. Пусть таблицы также будут отличаться от обычного текста.

— Размер шрифта больших цитат — 10 пунктов. Пусть и цитаты выглядят по-другому.

— Шрифт больших цитат — курсивный.

— Размер шрифта тега адреса — 10 пунктов. Сведения об авторских правах тоже должны отличаться. К тому же их традиционно пишут мелким шрифтом.

— Шрифт тега адреса — курсивный.

— Цвет текста — #3B4043 (очень-очень темный, почти черный).

— Цвет фона — #F8F8F8 (очень-очень светлый, почти белый).

НА ЗАМЕТКУ

Для подбора цветов можно порекомендовать замечательные библиотеки цветовых тем Web-сайтов, доступных по интернет адресам http://www.tarusa.ru/~golovan и http://avy.ru. Так, автор выбрал тему "Капли дождя" из рубрики "Сине-голубые"; цвета из этой темы он и будет применять в дальнейшем.

Осталось написать CSS-код в соответствии с изложенным (листинг 8.2).

Листинг 8.2

BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif }

P { font-size: 12pt }

H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }

H1 { font-size: 20pt }

H2 { font-size: 18pt }

H6 { font-size: 12pt }

TABLE { font-size: 10pt }

BLOCKQUOTE P, ADDRESS { font-size: 10pt; font-style: italic }

Таблица стилей готова. Рассмотрим все созданные в ней стили один за другим.

Первым идет стиль переопределения тега <BODY>. Он задает параметры, общие для всей Web-страницы: шрифт для обычного текста (абзацев, цитат и содержимого таблиц), цвет текста и цвет фона. Все элементы Web-страницы будут использовать данные параметры, если, конечно, мы не переопределим их далее, в более конкретных тегах:

BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif }

Следующим идет стиль переопределения тега <P>. Он задает размер шрифта для текста абзацев. Фактически он дополняет стиль переопределения тега <BODY>, созданный ранее:

P { font-size: 12pt }

А теперь — внимание! Мы создали три одинаковых стиля, переопределяющих теги заголовков <H1>, <H2> и <H6>:

H1, H2, H6 { font-weight: normal; font-family: Arial, sans-serif }

Они задают параметры, общие для всех заголовков: шрифт и его "жирность" (точнее, отсутствие "жирности"). Поскольку эти стили более конкретные, чем созданный ранее стиль переопределения тега <BODY>, заданные в них параметры будут иметь больший приоритет. Следовательно, заголовки будут набраны шрифтом, который мы указали в этих стилях, а не тем, что упомянут в стиле переопределения тега <BODY>.

Далее мы создали три стиля переопределения тегов <H1>, <H2> и <H6>, задающие разные размеры шрифта для заголовков разного уровня. Эти стили дополнят те, что мы создали чуть раньше. В результате заголовки разного уровня будут набраны шрифтом разного размера:

H1 { font-size: 20pt }

H2 { font-size: 18pt }

H6 { font-size: 12pt }

Следующим идет стиль переопределения тега <TABLE>, задающий размер шрифта и дополняющий созданный ранее стиль переопределения тега <BODY>. Шрифтом данного размера будет набран текст, присутствующий во всех элементах таблицы (обычных ячейках, ячейках заголовка и заголовке таблицы):

TABLE { font-size: 10pt }

Последними мы определили два одинаковых стиля: комбинированный стиль

BLOCKQUOTE P и стиль переопределения тега <ADDRESS>:

BLOCKQUOTE P, ADDRESS { font-size: 10pt; font-style: italic }

Они задают одинаковые параметры для шрифта большой цитаты и тега адреса. Поскольку для создания большой цитаты мы использовали тег <P>, вложенный в тег <BLOCKQUOTE>, то параметры текста цитаты мы определили посредством комбинированного стиля BLOCKQUOTE P. Оба этих стиля дополняют созданный в самом начале стиль переопределения тега <BODY>.

Как видим, все довольно просто и наглядно. Стили объединяются друг с другом, переопределяя заданные в них параметры, согласно приоритету. А приоритет зависит от конкретности данного стиля, от "близости" его к тегу.

Сохраним таблицу стилей и откроем в 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-страничек.