| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Параметры шрифта и фона
|
|
Контейнеры. Встроенные контейнеры
В самом начале данной главы мы узнали, что все рассмотренные нами атрибуты стилей можно указывать для любых элементов Web-страниц: и блочных, и встроенных. Значит, мы можем задать размер шрифта и для абзаца (блочного тега <p>), и для важного текста (встроенных тегов <strong> и <em>). Это очень полезная возможность.
Но что делать, если нам понадобилось применить какой-либо стиль к произвольно-му фрагменту текста, не помечая его никаким тегом? Например, нам нужно выделить полужирным шрифтом фрагмент абзаца, но мы не хотим заключать его в тег <strong>. Может ли CSS нам в этом помочь?
CSS не может. Зато может HTML. Он специально для таких случаев предоставляет особые элементы Web-страницы — контейнеры — и, конечно, соответствующие теги. О контейнерах сейчас и пойдет разговор.
Контейнер — элемент Web-страницы, предназначенный только для выделения какого-либо ее фрагмента. Таким фрагментом может быть часть блочного элемента (абзаца, заголовка, цитаты, текста фиксированного форматирования и др.), блочный элемент или сразу несколько блочных элементов. Web-обозреватель никак не выделяет контейнер на Web-странице.
Контейнер служит двум целям. Во-первых, с его помощью мы можем привязать к определенному элементу или элементам Web-страницы нужный стиль; для этого достаточно заключить данный элемент или элементы в контейнер и привязать стиль к нему. Во-вторых, он может обеспечивать привязку поведения к элементу или элементам Web-страницы; выполняется это таким же образом, что и в случае стиля. (О поведении Web-страницы разговор пойдет позже.)
Контейнеры бывают блочные и встроенные. Разговор о блочных контейнерах мы отложим на потом, когда будем рассматривать контейнерный Web-дизайн. Поговорим о встроенных контейнерах.Уже по определению ясно, что встроенный контейнер является частью блочного элемента Web-страницы. Так, блочным контейнером может стать фрагмент абзаца или цитаты, графическое изображение, помещенное в абзац, и др.
Встроенный контейнер создается с помощью парного тега <span>. Фрагмент блочного элемента, который нужно превратить в содержимое встроенного контейнера, помещают в этот тег:
<p><span>Представление </span> создается с помощью стилей CSS.</p>
Здесь мы поместили во встроенный контейнер фрагмент абзаца.
Толку от нашего первого встроенного контейнера никакого. Поэтому давайте привяжем к нему какой-нибудь стиль (листинг 8.1).
Листинг 8.1
.bolded { font-wieght: bold }
. . . .
<p> <span class="bolded">Представление </span>
Cоздается с помощью CSS </p>
Cлово "Представление" будет набрано полужирным шрифтом!
Представление для нашего Web-сайта
Все стили, которые мы применим к Web-страницам, поместим во внешнюю таблицу стилей main.css. Создадим ее и поместим в корневой папке Web-сайта. После чего привяжем ее ко всем Web-страницам, входящим в него. Как мы помним, это выполняется с помощью тега <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, о которой говорилось ранее, определяет специфические требования к шрифту и фону 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-wieght: normal;
font-family: Arial, sans-serif }
h1 {font-size: 20 pt }
h2 {font-size: 18 pt }
h6 {font-size: 12 pt }
table {font-size: 10 pt }
blockquote p,
address {font-size: 10 pt;
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 и обновим 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-cpacing: 1mm;
text-shadow: #CDD9DB 1px 1px }
Для тени мы задали цвет #CDD9DB (светло-синий) и совсем небольшие отступы, равные 1 мм. Такая тень будет ненавязчивой, но симпатичной. Снова сохраним таблицу стилей и обновим Web-страницу. Посмотрим на результат. Красота... Мы можем еще поэкспериментировать со стилями — в качестве домашнего задания. Но недолго — нас ждет еще много интересного.
 
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
