<<

стр. 8
(всего 11)

СОДЕРЖАНИЕ

>>





Глава 13
214
>•..;,.. в i mm •. т 1
<BODV «ergiriHidthHOe leftmargin=30 rightnarginsZBp»
текст текст текст текст текст текст текст текст текст текс




текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст
текст
текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст


Рис. 13.1. Горизонтальные отступы в Internet Explorer
задаются параметрами rightmargin и leftmargin, в
Mozilla — marginwidth




В
Изменяя размер окна броузера, вы вскоре убедитесь, что если вся страница
в окне не помещается и требуется прокрутка, то отступы "отсчитываются"
от краев всего текста, а не того фрагмента, что виден в окне.

А не многовато ли параметров — целых четыре?
Действительно, отступы с противоположных сторон часто бывают одинаковые.
В этом случае можно обойтись без bottomargin и rightmargin, а отступы снизу и
справа будут такими же, как сверху и слева, задаваемые соответственно парамет-
рами topmargin и leftmargin (рис. 13.2).
Иногда это может быть красиво, например, если на начальной странице нет
ничего, кроме эмблемы и пары кнопок. Но только если по по вашему недосмотру
эмблема не получится больше, чем экран...




Структура HTML-документа 215
HTML>
BODY »arginheight=56 marginnidth=19
topnargin^SO leftmargin=1G>
екст текст текст текст текст текст
/BOOY>




текст текст текст текст текст текст текст ;
текст
текст
текст
текст


текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст

Рис. 13.2. У этой страницы одинаковые отступы с обеих
сторон — и в IE, и в Mozilla — и никаких лишних параметров


<HTML>
BODY _____
HI >Здесь прокрутки нет и не будет</Н1 > '•.-,
</BODY>
</HTHL>




D.\Mydoc,\DIALEC-rVHlmrTutoATES Ш Й И
ЕНН



Здесь прокрутки
нет и не будет


Здесь прокрутки
141 LJ А
L-^'-v,-,...,


Рис. 13.3. В этом окне прокрутка не появится никогда-
даже если содержимое не будет в нем помещаться

216 Глава 13
Цвет фона
Иногда хочется "подложить" под текст какой-нибудь веселенький орнамент,
текстуру или хотя бы просто цвет. И здесь нам на помощь приходят уже знако-
мые параметры. Только здесь, на новом месте, они "работают" уже для всей
страницы. Цвет фона определяется параметром bgcolor. Значением этого пара-
метра, как всегда, является код цвета в формате IRRGGBB (см. главу 10).
Если же мы хотим, чтобы фоном служила не однотонная подложка, а узор или
текстура, используем другой знакомый нам параметр — background. Его значени-
ем, как мы помним, является URL графического файла. Используется этот пара-




а
метр так же, как и для таблиц (см. главу 10).
Что получится, если задать в дескрипторе <BODY> сразу два параметра —
и bgcolor, и background? На первый взгляд, ничего особенного: просто
узор ложится "поверх" фонового цвета и полностью его закрывает. Од-
нако иногда совместное использование этих параметров дает интересные
и полезные результаты.
Поскольку предполагается, что фоновое изображение несет мало смысловой
нагрузки, то оно загружается последним. Вероятно, вам случалось открыть
страницу, просмотреть ее (или даже прочесть), совсем уже собраться ухо-
дить, как вдруг выяснялось, что у нее, оказывается, есть еще и фон! Просто
он все это время "грузился". Однако фоновый цвет, в отличие от изображе-
ния, появляется в окне броузера практически сразу. Этот факт часто ис-
пользуют, чтобы, пока загружается фоновое изображение, страница пред-
ставала перед посетителями хотя бы в "родных" тонах. Достаточно только
подобрать цвет, максимально близкий к тонам фонового рисунка. Кроме
того, если в качестве фонового изображения используется узор с прозрач-
ным фоном (см. главу 8), то он "накладывается" на цвет, заданный пара-
метром bgcolor, что позволяет добиться различных интересных эффектов.

Наконец, еще одно любопытное свойство фонового изображения определяется
параметром bgproperties: если присвоить ему значение fixed, то фоновое изображе-
ние не "прокручивается" вместе с текстом, а стоот на месте. К сожалению, это
свойство поддерживается только Internet Explorer, поэтому вряд ли стоит не его ос-
новании создавать какие-то важные для страницы эффекты: будет жаль, если они
останутся незамеченными посетителями, пользующимися другими броузерами.
Предположим, мы имеем дело с фреймовой структурой. Можно ли сде-
лать так, чтобы все фреймы были одного цвета, причем этот цвет зада-
вался в одной точке кода? Например, так:
<BODY bgcolor=pink>
<FRAMESET параметр^
<FRAME src="head.htm">
<FRAMESET cols=*,2*>
<FRAME src="references.htm">
<FRAME src="news.htm">

Структура HTML-документа 217
</FRAMESET>
</FRAMESET>
<BODY>
Нет, нельзя. Дескриптор <FRAMESET> нельзя располагать внутри <BODY>.


Цвет текста
По умолчанию текст на странице выводится черным цветом, гиперссылки —
синим, использованные ссылки — фиолетовым. Но эти цвета не всегда "вписы-
ваются" в дизайн страницы. Конечно, можно воспользоваться уже знакомым нам
дескриптором <FONT> (см. главу 4). Однако делать это каждый раз слишком скуч-
но и неэффективно: страница быстро превращается в трудно читаемое нагромож-
дение дескрипторов.
Вместо этого можно задать используемые по умолчанию цвета текста и ссылок
в дескрипторе <BODY>. Цвет текста определяется параметром text. Что является
значением этого параметра? Разумеется, константа или код цвета в формате
IRRGGBB (рис. 13.4).


<НТМ1_>
<BODV bocolor=black t e x t = w h i t e >

<Н1>Смотрит«-ка

На этой странице Фон черный,
а весь твкстапЬбр;Sudaeh;белый!

</BODV>
</HTML>




Смотрите-ка!
На этой странице фон черный, а весь
текст —белый!




Рис. 13.4. Параметры дескриптора <BODY> позволя-
ют задать цвет фона и текста страницы

Аналогичным образом определяются цвета ссылок. Но здесь используется не
один, а три параметра: link для цвета непосещенных ссылок, vlink (от visited link)
для посещенных и alink — для активной ссылки, т.е. для той, на которой посети-
тель щелкает в данный момент.

218 Глава 13
На некоторых страницах цвет ссылки меняется еще до щелчка — как
только посетитель наведет указатель мыши на ссылку. Это делается не с
помощью HTML-кода, а другими средствами, например, путем исполь-
зования сценариев JavaScript.


Резюме
Код Web-страницы делится на две зоны: заголовок и тело. Содержимое заголовка
будет подробно описано в главе 14. Тело Web-страницы содержит код, "отвечающий"
за то, что, собственно, выводится в окне броузера и заключено между дескрипторами
<BODY> и </BODY>. Параметры дескриптора <BODY> описывают свойства страницы в це-
лом — вертикальные и горизонтальные отступы, цвет фона и фоновый рисунок, ре-
жим прокрутки, используемые по умолчанию цвета текста и ссылок.


Тест
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <BODY margin=10>
б) <BODY marginwidth=10>
в) <BODY leftmargin=10>
r) <BODY leftmargin=10%>
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <BODY text=4>
б) <BODY text=Times>
в) <BODY text=black>
г) <BODY text=0>
д) <BODY text=#1234>
е) <BODY text=1234>
3. Как должен выглядеть код, чтобы гиперссылки в тексте были зеленого цвета?
а) <BODY link=green>
б) <BODY alink=green>
в) <BODY blink=green>
г) <BODY xlink=green>
д) <BODY ylink=green>
е) <BODY vlink=green>
4. Как должен выглядеть код, чтобы фон страницы был желтого цвета?
а) <BODY color=yellow>
б) <BODY bgcolor=yellow>
в) <BODY background=yellow>

Структура HTML-документа 219
Глава 14

Внешние параметры
Web-страницы
В этой главе...

Ф Кто ваши посетители?
Ф Как страницу назовете...
4 Назначение дескриптора <МЕТА>



Кто ваши посетители
Если бы речь шла о простом текстовом или даже гипертекстовом документе, было
бы вполне достаточно описать его форматирование. Но Web-страницы живут в Inter-
net самостоятельной жизнью, о которой их владельцы часто только догадываются по
счетчику посещаемости и другим косвенным признакам. Для того чтобы страница
жила полноценной жизнью, а не просто занимала место на сервере, ей, в первую оче-
редь, нужен хорошо продуманный заголовок. Информация, размещенная в заголовке,
служит одним из признаков, по которым поисковые системы определяют тематику
страницы и то, насколько она соответствует критерию поиска.
Впрочем, так ли уж нужен заголовок?
Для того чтобы ответить на этот вопрос, необходимо прежде всего определить,
для кого предназначена страница и как она будет попадать к своим читателям.
Планируете ли вы разместить ее в Internet или только в локальной сети, или это
вообще электронный документ, распространяемый на компакт-дисках? Кто будут
ваши посетители? Сколько их? Каким образом они узнают о вашей странице?
Например, страница, рассчитанная на строго ограниченный круг людей (члены
некоторого клуба, студенты определенного курса конкретного вуза, члены вашей
семьи), вообще говоря, мало нуждается в заголовочной части. Вы сами сообщите
всем этим людям, где им следует искать страницу, которую вы для них создали.
Но если страница рассчитана на широкий круг неизвестных вам людей, заго-
ловочная информация необходима: по ней эти люди найдут вашу страницу в In-
ternet, воспользовавшись поисковым сервером.

Те, кто пользовался поисковыми серверами Internet, знают, что эти
мощные системы часто выдают по запросу ссылки на тысячи и десятки
тысяч страниц. Подобрать критерий, по которому вам выдадут 3—5 ссы-
лок, среди которых есть хоть одна полезная, удается довольно редко.
Поэтому большинство интернетчиков (к которому отношусь и я, и, ве-
роятнее всего, вы тоже) поступает просто: ограничивается просмотром
тех ссылок, которые попали на первую страницу, в крайнем случае на
первую пару-тройку страниц.
А теперь поставим себя на место владельца страницы. Устроит ли его,
если его сайт будет значиться в списке ссылок, скажем сто девяносто
восьмым? Вряд ли. С тем же успехом он мог бы вообще туда не попасть.
Напротив, чем чаще его сайт будет в первой десятке, тем лучше.
Что нужно делать, чтобы достичь этой цели? Для этого нужно знать ос-
новные принципы работы поисковых серверов Internet. Вкратце они та-
ковы. В основе поискового сервера лежит специальная программа, име-
нуемая слайдером (от англ, spider — паук). Этот паук "ползает" по
"Всемирной Паутине" и ищет там новые страницы. Каждую такую
страницу он заносит в свой каталог. При этом он старается как можно
лучше определить тематику страницы, чтобы потом можно было быстро
и точно определить, насколько она подходит к критерию поиска, задан-
ному посетителем сервера. Страницы в списке выдаваемых ссылок
обычно располагаются так: самые подходящие (по мнению сервера) вна-
чале, менее подходящие в конце.
Как спайдер, компьютерная программа, определяет, чему посвящена стра-
ница? Оказывается, мы, люди, создаем информацию по определенным пра-
вилам, понятным программе. Так, самые важные слова мы выносим в заго-
ловки и в подрисуночные подписи, выделяем более крупным шрифтом,
цветом, курсивом. Наконец, просто помещаем их ближе к началу предло-
жения. Зная эти правила, опытные специалисты по "раскрутке" (повыше-
нию посещаемости) сайтов умеют, лишь слегка подредактировав текст, уве-
личить число ежедневных посетителей страницы.
Какое отношение ко всему этому имеет заголовок страницы? Самое прямое.
Он содержит информацию, которую слайдеры анализируют самым тща-
тельнейшим образом, справедливо считая, что уже по одним данным заго-
ловка можно достаточно полно определить тематику страницы.


Как страницу назовете...
Какого рода вспомогательную информацию можно разместить между дескрип-
торами <HEAD> и </HEAD>? Во-первых, — название. Нет, это не имя файла и не то,
что пишут вверху страницы большими и красивыми буквами. Название Web-
страницы пишется в заголовке окна броузера. В коде оно выделяется дескриптора-
ми <TITLE> (рис. 14.1).
Можно ли сделать заголовком страницы имя файла? Ведь Windows допускает
длинные имена с кириллицей? Да, можно. Но лучше не надо. Дело в том, что многие
серверы Internet работают под управлением ОС семейства UNIX. А там правила име-
нования файлов жестче, чем в Windows. Поэтому, если не хотите столкнуться с са-
мыми неожиданными проблемами, лучше придерживайтесь старого доброго форма-

Глава 14
222
та 8.3: восьмисимвольное имя, трехсимвольное расширение, все буквы строчные, ни-
каких пробелов и никакой кириллицы. Не огорчайтесь: все равно эти имена будут чи-
тать главным образом броузеры и Web-серверы, а им не до красот русского языка.


<НТМ1_>
<НЕЙО>


</HEflD>

<BODV>
<Н2 align=cent»r>
Это заголовок текста на страниц»
</Н2>
Я это сан твкстйпЬвр!Sudash; ради чего,
собственно, все и создавалось.
/BODV>
</HTML>




Это заголовок текста
на странице
А это сам текст — ради чего,
собственно, все и создавалось.

.^
^ш^и
дд цид^^
в^^ш^^^д]
^^^^о




Рис. 14.1. Заголовок страницы и заголовок
текста — разные вещи
Другое дело — заголовок страницы. Его читают не только машины, но и лю-
ди, поэтому приходится угождать и тем, и другим. И себя не забыть. В связи с
этим рекомендуется помнить следующие правила.
* Заголовок — это первое, что видит и успевает прочесть несколько раз (а еще
лучше запомнить) посетитель страницы, пока она загружается. Скучный за-
головок может стать последним, что узнает посетитель о вашей странице.
Вдобавок этот текст выводится на соответствующей кнопке панели задач
Windows, в списке "закладок" броузера (если ваш сайт так понравится посе-
тителю, что он его туда занесет), а также в списках, выдаваемых поисковыми
серверами. Учитывая последнее обстоятельство, рекомендуется поместить в
заголовок ключевые слова, характеризующие вашу страницу. Увы, знание
HTML здесь не поможет — только ваша фантазия и смекалка.
» Как заметили психологи и как вы можете заметить сейчас сами,
ПРОПИСНЫЕ БУКВЫ и восклицательные знаки производят на посети-
теля скорее отталкивающее, чем притягивающее действие!

Внешние параметры Web-страницы 223
* К сожалению, внутри дескриптора <TITLE> нельзя использовать другие
дескрипторы. А значит, никакого курсива, цветного текста и крупного
шрифта. Только сила слова убедит посетителя заглянуть на ваш сайт.
* Рекомендуемая максимальная длина заголовка — 60 символов, считая пробе-
лы. А вообще, чем лаконичнее, тем лучше. Ведь заголовок должен полно-
стью поместиться в строке броузера. Иначе броузер просто оборвет фразу на
середине и поставит многоточие. Вряд ли вам хотелось бы, чтобы пользова-
тели увидели в окне что-то вроде "Рассказ о том, как однажды случилось...".


Назначение дескриптора <МЕТА>
Второй важный дескриптор заголовочного раздела — <МЕТА>. В отличие от
<TITLE>, он содержит главным образом "машинную" информацию — для броузе-
ров и поисковых серверов.
Дескриптор <МЕТА> "самодостаточен". У него нет текста, формат которого он
определяет, а следовательно, нет и закрывающего дескриптора. Зато есть много
параметров, именуемых здесь мета-записями.
Основной формат дескриптора <МЕТА> таков:
<МЕТА пате="имя мета-записи" content="значение">
Иногда вместо параметра name в дескрипторе <МЕТА> используют параметр http-equiv:
<МЕТА http-equiv="rm значения" соп1еп1="зяатеше">
Такие мета-дескрипторы эквивалентны заголовкам HTTP и позволяют пере-
дать броузеру дополнительную информацию о странице.
В отличие от других дескрипторов с параметрами, в каждом дескрипторе <МЕТА>
допускается использование только одной мета-записи. Поэтому, когда нужно исполь-
зовать несколько мета-записей, создают целый список из дескрипторов <МЕТА>:
<МЕТА пате="мета-заяясь 1" content="значение 1">
<МЕТА http-equiv="мета-запись 2" content="значение 2">

<МЕТА name="мета-запись л" content="значение л">
Рассмотрим назначение некоторых наиболее распространенных мета-записей.


Keywords
Эта мета-запись используется для перечисления (через запятую) слов и выра-
жений, максимально соответствующих теме страницы. Поисковые серверы анали-
зируют эти слова (а также другие параметры страницы) и "принимают решение",
соответствует ли данная страница запросу. Значением параметра keywords обычно
служит длинный перечень, чем-то похожий на заклинание, например:
<МЕТА name="keywords" соп!еп1="моя первая страничка, Web-дезайнер, Веб-дизайнер,
Web designer, разработать Web-страницу, чайник">


224 Глава 14
К выбору ключевых слов (как, впрочем, и ко всему в Web-дизайне) следует
отнестись творчески, учитывая особенности поведения людей и машин.
* Обычно поисковые серверы неплохо разбираются в правилах грамматики.
Поэтому, если в списке ключевых слов есть, например "Web-дизайнер", то
страница найдется и по запросу "Web-дизайн". Следовательно, список
можно сократить, оставив самое длинное из подобных слов.
* Далеко не каждый посетитель поисковой системы знает русский язык так
же хорошо, как вы или как программа проверки орфографии. Поэтому
иногда имеет смысл поставить рядом с "дизайнером" — "дезайнера".
* В Internet встречаются "универсальные" списки ключевых слов, якобы
гарантирующие попадание вашей страницы в первую десятку чуть ли не
по любому запросу. Действительно, таким образом можно ненадолго по-
высить посещаемость. Но нужны ли вам посетители, которые приходят
незаинтересованными, а уходят недовольными? И нужна ли вашей стра-
нице и вам дурная слава, которую, как известно, легче найти, чем поте-
рять? А некоторые поисковые системы могут за подобные "трюки" ис-
ключить страницу из своего индексного списка.
* "Выбросить" из списка могут и за слишком длинный перечень ключевых
слов, а также за явно преднамеренное частое повторение одного и того
же. Рекомендуемый предел — 200 символов и не более 5-6 повторений.
* Наконец, если фантазии маловато, можно пойти на хитрость: найти с
помощью нескольких самых популярных поисковых серверов страницы,
максимально близкие к вашей по теме, и позаимствовать ключевые слова
у тех, что попали в начало списка. Но имейте в виду: эти страницы могут
возглавить список вовсе не из-за ключевых слов, а по каким-то другим
причинам, которых вы не знаете.

Description
У электронных публикаций, как у журнальных статей, есть аннотации. Эти
аннотации и заносятся в мета-запись description.
Вы, вероятно, замечали, что обычно поисковые системы выдают по запросу ад-
реса с описаниями. Иногда эти описания — бессмысленные обрывки каких-то на-
званий, перечни кодировок и прочая галиматья. Из-за этого, бывает, создается впе-
чатление, будто роешься в мусорной куче... Если вам встретится такое, с позволе-
ния сказать, "описание" страницы, знайте: ее создатель не стал возиться с мета-
записью description, а вверху страницы стояли те самые переключатели кодировок.
Если же не полениться, то с помощью мета-записи description можно убить
сразу двух зайцев: и сделать хорошую, привлекательную аннотацию, и лишний
раз упомянуть ключевые слова:
<МЕТА name=" description" content="3TO моя первая Web-страничка. Я уже полчаса
как Web-дизайнер!">

Внешние параметры Web-страницы 225
Что-то вроде этого... Хотя если постараться, можно придумать и поумнее.
Как и в случае со списком ключевых слов, аннотация не должна быть слиш-
ком длинной. Если она превысит 100—200 символов, поисковик просто оборвет
текст на полуслове.


Robots
Назначение этой мета-записи — проинструктировать слайдера: как быть с об-
наруженной страницей? Из ее значений наиболее часто употребляются index, noi-
dex, folow и nofollow, определяющие, соответственна, нужно ли индексировать
эту страницу, а также нужно ли переходить на те страницы, на которые она ссы-
лается. Если нужно указать несколько значений мета-записи robots, они перечис-
ляются через запятую. Например, для того чтобы страница не попала в индекс-
ный список поисковых систем (то ли потому, что не предназначена для посто-
ронних, то ли потому что просто недоделана), а другие страницы сайта, на
которые она ссылается, туда попали, пишут следующее:
<МЕТА name="robots" content="noindex, follow">



В
К сожалению, не все поисковики это понимают. Надежнее создать в
корневом каталоге сервера файл robots.txt и занести туда список стра-
ниц, не подлежащих индексированию. Впрочем, все, что касается серве-
ра, лучше делать вместе с администратором этого сервера.



Generator
Люди редко используют эту мета-запись. Зато ее очень любят визуальные
HTML-редакторы, заявляющие таким образом о своем "авторстве":
<МЕТА name="GENERATOR" content="Microsoft FrontPage Express 2.0">
или
<META name=Generator content="Microso?t Word 9">

Что еще за Word 9? Оказывается, это просто "внутреннее" название
программы, известной нам как Word 2000...



Author и copyright
А вот эти дескрипторы предназначены для защиты прав настоящих авторов
страницы:
<МЕТА name="autor" content="H.n. Сидоров, u_popa_byla@on-ee.lub.il">
<МЕТА name="copyright" content="описание ваших авторских прав и того, что вы сде-
лаете их нарушителю">




Глава 14
226
Content-type
Для задания мета-записи content-type используется параметр http-equiv. С ее
помощью можно (и нужно!) "намекнуть" броузеру о типе и кодировке Web-
страницы, например:
<МЕТА http-equiv=content-type content="text/html; charset=windows-1251">


Expires
Для задания мета-записи expires используется параметр http-equiv. Она опре-
деляет дату, по наступлении которой страница устареет, и броузеру придется сно-
ва обратиться за ней на сайт, а не пытаться загрузить старую версию из кэша.
Например, дескриптор
<МЕТА http-equiv="expires" content="Wed, 20 Jun 2001 00:00:01 GMT">
означает, что страница устареет 20 июня 2003 года.

Refresh
Для задания мета-записи refresh используется параметр http-equiv. Эта запись
используется в тех случаях, когда через определенный промежуток времени на
месте данной страницы должна загрузиться другая, например, если это страница
ожидания загрузки, или заставка, или виртуальный тест, ответ на который дол-
жен прийти не позже заданного времени.
Значением мета-записи refresh является пара "время; URL". Например, запись
<МЕТА http-equiv=refresh content="20; url=http://server/next.html">
означает, что по истечении 20 с сервер должен загрузить страницу http: //server/
next.html.


Резюме
Информация, расположенная в заголовочной части Web-страницы, предназначена
главным образом для поисковых систем. Ее назначение — максимально точное сжа-
тое описание страницы, которое позволило бы правильно позиционировать страницу
в каталоге поискового сервера и в списке ссылок, выданных пользователю в ответ на
запрос. Среди главных элементов заголовочной части следует отметить название стра-
ницы, помещаемое между дескрипторами <TITLE> и </TITLE>, а также аннотацию и
список ключевых слов, вводимые с помощью мета-записей keywords и description.


Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <НЕАВ>Заголовок страницы</НЕАВ>
б) <TITLE text="Заголовок страницы">

Внешние параметры Web-страницы 227
в) <Т1ТЬЕ>Заголовок страницы</Т1ТЬЕ>
г) <Т1ТЬЕ><и>Заголовок страницы</и></Т1ТЬЕ>
д) <TITLE align=center>3aronoBOK страницы</Т1ТЬЕ>
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <МЕТА name=keywords>crmcoK ключевых слов</МЕТА>
б) <МЕТА name=keywords contents="cnHCOK ключевых слов">
в) <МЕТА name=keyword content="список ключевых слов">
г) <МЕТА name=keywords content="список ключевых слов">
д) <МЕТА http-equiv=keywords content="список ключевых слов">
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <МЕТА name=description content="аннотация к странице" name=copyright'con-
tent="A.B. Иванов">
б) <МЕТА namel=description content="аннотация к странице" name2=copyright
content="A.B. Иванов">
в) <МЕТА name=description соп1еп!="аннотация к странице" http-
equiv=copyright content="A.B. Иванов">
г) <МЕТА name=description content="аннотация к странице">
<МЕТА name=copyright content="A.B. Иванов">
Д) <МЕТА>
name=description content="аннотация к странице"
name=copyright content="A.B. Иванов"
</МЕТА>




Глава 14
228
Глава 15

Основные принципы
каскадных таблиц стилей
В этой главе...

4 Зачем нужны таблицы стилей?
4 Простейшее описание стиля
4 Таблицы стилей
4 Стиль дескриптора
4 Подклассы дескрипторов
* Описание цветов
4 Задание фона
4 Атрибуты шрифта
4 Атрибуты абзаца
4 Гиперссылки
• Отступы и рамки



Зачем нужны таблицы стилей
В сущности, мы уже знакомы со всем, чем богат "классический" HTML. Дей-
ствительно, этот инструмент предоставляет все необходимые возможности для
создания Web-страниц. Однако все это довольно грубые инструменты. Например,
с помощью параметра size мы можем выбрать только один из семи размеров
шрифта, и эти размеры все равно будут зависеть от настройки броузера. О между-
строчном интервале и говорить нечего: он просто никак не определяется. И во-
обще, те, кто знакомы со стилями Word, уже давно должны были соскучиться по
этому мощнейшему средству форматирования.
Действительно, в "классическом" HTML — таком, который мы знали до сих
пор, — нельзя задать какое-нибудь сложное форматирование (например, сочета-
ние цвета, размера и начертания) одним дескриптором. Вместо того чтобы один
раз описать такое форматирование, а потом только задавать его с помощью ка-
кого-нибудь короткого ключевого слова, приходится каждый раз писать длинный
код наподобие такого:
<FONT size=5 color=red><I>Kpacffi«i курсив размера 5</!></FONT> обычный текст
<FONT size=5 со1ог=гес1><1>опять красный курсив</1></РОНТ> опять обычный текст
Однако на самом деле в HTML такое средство есть и называется оно CSS
(Cascading Style Sheets — каскадные таблицы стилей). По принципу работы они
очень похожи на стили форматирования, используемые в текстовых процессорах
и, в частности в MS Word: стилем называется описание какого-нибудь сложного
форматирования. Такому стилю присваивается имя, по которому и происходит
обращение к стилю в нужный момент. Таким образом мы избегаем скучного пе-
речисления каждый раз одних и тех же параметров, а в случае HTML еще и су-
щественно сокращаем код страницы.


Простейшее описание стиля
Стиль всегда создается на базе какого-либо дескриптора. Проще всего сделать
это с помощью параметра style, значением которого служит описание стиля.
Предположим, мы хотим создать стиль с такими параметрами: курсив,
18 пунктов, белый на черном фоне. Для этого можно использовать такой код:
<I style="font-size: 18; color: white; background-color: black">
Это текст, к которому применен стиль.</!>
Как видим, принцип очень прост. Стиль состоит из атрибутов, которые в некото-
ром смысле подобны параметрам дескриптора. Каждый атрибут имеет предопреде-
ленное имя и область возможных значений. Для присвоения атрибуту значения ука-
зывается имя этого атрибута, затем двоеточие и само значение. Атрибуты перечисля-
ются через точку с запятой. Расстановка пробелов, как и в случае с параметрами
дескрипторов, может быть произвольной. Именно такой список, который в данном
случае служит значением параметра style, и образует стиль. В данном случае были
использованы три атрибута: font-size — для определения размера шрифта, color -
для определения цвета шрифта и background-color — для определения цвета фона.
Какой дескриптор сделать базовым для описания стиля? В сущности, это
может быть любой парный дескриптор, применяемый для форматирова-
ния текста. Если же ни одно из свойств стиля не совпадает с каким-
нибудь дескриптором, можно воспользоваться дескриптором <DIV>. Это
парный дескриптор, название которого происходит от английского слова
division — раздел. Дескриптор <DIV> предназначен для описания формати-
рования произвольной области текста. Его единственным атрибутом явля-
ется align, который в данном случае принимает те же значения, что и в
дескрипторе абзаца <Р> (см. главу 2). Этот дескриптор широко использует-
ся для описания стилей.
Итак, технология описания стиля вроде бы понятна. Но как его использовать
повторно? Нетрудно убедиться, что стиль, описанный таким образом, распро-
страняется только до ближайшего закрывающего дескриптора </!> (рис. 15.1).



Глава 15
230
Bfont-sizg : 18; color:white
d-color: black
Это текст, к которому применен стипь.</1>
Это обычный текст,
<1>в это текст курсивом, но без стиля.</Х>




т
Это текст, к которому применен стиль.
обычный текст, а это текст
|
:
курсивом, но без стиля.


Рис. 15.1. Описание стиля внутри дескриптора: атрибуты разделяются
точками с запятой; пробелы расставляются произвольно; форматирова-
ние распространяется до соответствующего закрывающего дескриптора


Таблицы стилей
Как создать стиль "многоразового использования"?
Вспомним: в названии главы упоминаются не просто стили, а "таблицы сти-
лей". Это неспроста. Стиль, помещенный внутрь такой таблицы, в отличие от
стиля, описанного прямо в коде, можно использовать многократно.
Таблица стилей представляет собой парный дескриптор <STYLE>, внутри кото-
рого последовательно описаны используемые стили;
<STYLE>
идентификатор^ {атрибут_1: значение; атрибут_2: значение; ...}
идентификатор_2 {атрибут_1: значение; атрибут_2: значение; ...}

идентификатор^) {атрибут_1: значение; атрибут_2: значение; ...}
</STYLE>
Как видим, описание стиля представляет собой некий идентификатор, по которо-
му броузер впоследствии распознает данный стиль, и список атрибутов, составленный
по уже знакомому нам принципу (между значением и атрибутом — двоеточие, эле-
менты списка разделены точками с запятой). Список заключается в фигурные скобки.
Что может служить идентификатором стиля? В отличие от стилей, используемых
для форматирования текста в текстовых процессорах, применяемые в HTML стили
CSS не имеют имен. А те заменители имен, которые они имеют, используются не-
сколько иначе. Давайте рассмотрим применение идентификаторов стиля на примере.
Часто для всего сайта создаются общие таблицы стилей. Такие таблицы вы-
носятся в отдельные файлы. Для связи с ними используется дескриптор
<LINK>. Это одинарный дескриптор, одним из параметров которого служит
URL таблицы. Например, для подключения таблицы стилей, которая нахо-
дится в файле styles.ess, можно воспользоваться следующим дескриптором:
<LINK rel="stylesheet" href="styles.css" type="text/css">

231
Основные принципы каскадных таблиц стилей
Стиль дескриптора
Что получится, если взять описание стиля, которое мы уже создали (см.
рис. 15.1), и поместить его в таблицу стилей согласно уже известным нам прави-
лам? Результат показан на рис. 15.2. Как видим, теперь все фрагменты текста,
выделенные курсивом, приобретают заданные атрибуты. Для того чтобы их снять,
приходится корректировать стиль "на месте", каждый раз отдельно. Причем, как
видно на рисунке, атрибуты стиля можно переопределить как с помощью другого
стиля, так и с помощью обычных дескрипторов, таких как <FONT>.


т
<STVLE>
I (font-size:18; color:white; background-color:black)
</STVLE>
Теперь весь <1>курсив</1> на странице
>удет выглядеть <1>так</1>,
кроне
style="color=black; background-color:uhite">
(FONT size=3>cneu.HanbHO отформатированных мест</ТОНТ></1>.

sgOff
I m >-••
:
.*- * 1 .5
Рствйм . pOHOBHTB If н
J \MyduCb\PIAltC-l\HmilTulortTESTHT!


Теперь весь нтав на странице будет
выглядеть и , кроме специально
;
отформатированных мест.

ЙГотово '


Рис. 15.2. Свойства дескриптора, переопределенные в таблице стилей,
действуют в пределах всей страницы. Но их можно переопределить "на
месте" с помощью другого стиля или обычного дескриптора HTML
Обратите внимание: при описании стиля внутри конструкции <STYLE>
имя дескриптора не заключается в угловые скобки.


В каскадных таблицах стилей можно задать стиль не только для отдель-
ного дескриптора, но и для их комбинации. Например, если нужно,
чтобы некий стиль применялся не к любому курсиву, а только к полу-
жирному, используется код, показанный на рис. 15.3. Таким образом,
стиль применяется только для комбинации вложенных дескрипторов.




232 Глава 15
<STVLE>
I В (font-size:18; color:white; background-color:black) ;
</STVLE> |
I
Это <1>обычный курсив, a 3To?nbsp;Sndash;
<В>попужирный курсив с новыми свойствани</В></1>. ц

и


Это обычный курсив, а это —




Рис. 15.3. Стиль может применяться не только для
одного дескриптора, а и для нескольких вложенных


Подклассы дескрипторов
Устраивает ли нас стиль, переопределяющий свойства дескриптора?
Если на всей странице вместо, например, простого курсива мы хотим исполь-
зовать такой, как показан на рис. 15.2, то, безусловно, да. Но если наряду с но-
вым стилем нам нужен и обычный курсив, то такой метод не совсем подходит.
Вместо того чтобы каждый раз переопределять готовый стиль, было бы гораз-
до проще сразу, уже в таблице стилей, создать несколько вариантов курсива и
использовать их по мере необходимости. Для этого в таблице стилей создается
объект, именуемый подклассом дескриптора. Имя подкласса дескриптора форми-
руется из имени дескриптора и имени подкласса, разделенными точкой, а описа-
ние этого объекта выглядит так же, как описание любого другого стиля:
имя_дескриптора.класс {атрибут_1: значение; атрибут_2: значение; ...}
Например, подкласс дескриптора <1> с уже описанными выше свойствами
должен выглядеть так:
I.inverse {font-size:18; color:white; background-color:black}
Как вы уже, вероятно, догадались, inverse — имя нового подкласса. Для того
чтобы воспользоваться им в HTML-коде, применяется специальный параметр —
class, — которому и присваивается имя подкласса (рис. 15.4).

В объектно-ориентированном программировании, если вам знаком такой
термин, также существует понятие классов. Эти классы и классы CSS в
чем-то аналогичны: те и другие описывают свойства неких объектов. В
данном случае под объектами понимаются элементы Web-страницы.



233
Основные принципы каскадных таблиц стилей
Действительно, таким образом можно "уточнить" форматирование, обеспечи-
ваемое дескриптором, и даже создать несколько вариантов форматирования на
базе одного дескриптора. Однако использовать созданный нами подкласс inverse
для другого дескриптора, например <Р>, нельзя (рис. 15.5).


<STVLE>
[.inverse {font-size: 18; color:white; background-color:black]
</STVLE>
Это <1>обычный курсив</1>, а этоЗпЬвр;Smdash:
СI class: inuerse>KypCHB,
< которому применен стипь <BXU>inuerse</UX/BX/I>.




Это обычный курсив, а это —
к которому применен стиль nwers


' ˜ !lD°
._; "'" '

Рис. 15.4. Подкласс дескриптора— это
стиль, в котором к свойствам данного деск-
риптора добавлены новые
Я TESTHTML - Блокнот
Поиск
<STVLE>
I.inverse (font-size:18; color:uhite; background-color:black)
</STVLE>
Это <I class?1пиег&е>курсив, к
которому применен стипь inverse,</IX/DIU>
a SToSnbsp;?mdash;
<P class=inuerse>a6oau, к которому безуспешно
попытались применить этот стипь.
3 D\My docs\DIALECT\HtmlTulut\TESTHTML him! - MIC




г ва !:1„;>а , ci,,4
Слтенов 014..!;!, 11.S,:»,,,
ЩВДМУ docs\D!ALECT\HtmlTulor\TESTHTML html


Это курсив, к которому применен стиль inverse
а это —

абзац, к которому безуспешно попытались
применить этот стиль.


Рис. 15.5. Попытка применить стиль, описанный в
виде подкласса одного дескриптора, к другому де-
скриптору, ни к чему не приводит


234 Глава 15
Как создать стиль, применимый сразу к нескольким дескрипторам? Например,
стиль, который применял бы те же свойства, — размер 18 пунктов, белый текст
на черном фоне — не только к курсиву, но и к полужирному шрифту, и вообще к
любому другому дескриптору?
Иногда в таких случаях можно воспользоваться описанным выше дескриптором
<DIV>: создать в таблице стилей его подкласс и пользоваться им по мере необходи-
мости. Однако при этом следует иметь в виду, что содержимое дескриптора <DIV>,
как и дескрипторов абзацев и заголовков, выводится в отдельном абзаце (рис. 15.6).


<STVLE>
DIU.inverse (font-size:18; color:uhite; background-color:black)
</STVLE>

Это <DIU class=inuerseXI>Ku.pcMB, к
которому попытались применить стипь inverse,</IX/DIU>
a sjoSnbsp;andash; обычный курсив.
О \Му dncs\DIAI F_CT\HtmlTutnr\TFKTHTMl hlml - Minrnsntt tnlR




Это
курсив, к которому попытались применить стиль inverse.
а это — обычный курсив.


Рис. 15.6. Помните, что, применяя к фрагменту
текста стиль с помощью дескриптора <DIV>, вы
выделяете этот фрагмент в отдельный абзац


СSTYLE>
inverse (font-size: 18; color:uhite; background-color:black) '"-fA
</STVLE>
Это <I class:inverseжурсив, к
которому применен стипь inverse,</IX/DIU>
STOinbsp;Smdash;
(P class=inverse>a63ai4, к которому применен этот же стипь. ,;




Рис. 15.7. Класс, созданный без указания имени
дескриптора, применим к любому дескриптору

235
Основные принципы каскадных таблиц стилей
Есть более универсальное и изящное решение поставленной задачи. Оно за-
ключается в создании в таблице стилей класса без указания дескриптора. Такой
класс будет применим к любому дескриптору (рис. 15.7).


Описание цветов
Мы уже знаем несколько способов работы с цветом в HTML, как для шрифта,
так и для фона, "подкладываемого" под всю страницу или ячейки таблиц. Как
правило, все они сводятся к заданию некоего параметра, значением которого яв-
ляется код в формате IRRGGBB.
На первый взгляд, этот способ довольно удобен. Однако стоит поработать с ним
подольше, как становится ясно, что он далеко не так универсален, как кажется. С
его помощью нельзя, например, изменить фон отдельного слова или буквы. А для
того чтобы изменить фон абзаца, приходится выделять этот абзац в отдельную таб-
лицу, превращая понятный фрагмент текста в путаницу кодов. С помощью каскад-
ных таблиц стилей можно задать цвет для более мелких элементов страницы.
Как мы уже имели случай убедиться, цвет текста определяется атрибутом
color. Значением этого атрибута может быть один из стандартных цветов, имею-
щих предопределенное имя (см. также главу 4), или уже знакомый нам код в
формате IRRGGBB. Однако здесь есть и еще один способ определения цвета — по
отдельным компонентам.
Вам еще не надоело, подбирая нужный цвет в графическом редакторе, каждый раз
преобразовывать все три составляющие в шестнадцатеричный формат? Скорее всего,
вы, поэкспериментировав пару раз и познав на практике всю "прелесть" этой рутин-
ной работы, решили пожертвовать несколькими миллионами цветов в пользу скоро-
сти и удобства и с тех пор пользуетесь стандартной палитрой. Пожалуй, в большинст-
ве случаев это разумно. Но позвольте предложить вашему вниманию еще один способ
покомпонентного описания цвета: однажды, когда вам понадобится выйти за пределы
стандартной палитры, он еще сослужит вам добрую службу.
Этот способ применяется при описании цветов в атрибутах стиля CSS. Он за-
ключается в задании интенсивности красной, зеленой и синей составляющих
цвета в абсолютных или относительных значениях. Основное преимущество этого
подхода заключается в том, что значения эти задаются не в шестнадцатеричных,
а в десятичных (ура!) числах. Самому большому значению интенсивности соот-
ветствует 255, самому низкому — 0. Например, для того, чтобы текст выводился
красным курсивом, нужно создать такой стиль:
I.red {color: rgb(255,0,0)}
Этот код аналогичен двум другим, уже знакомым нам вариантам:
I.red {color: IFFOOOO}
и
I.red {color: red}




236 Глава 15
Почему максимальным значением служит именно 255? Об этом нетрудно
догадаться, если вспомнить, что, независимо от способа определения цве-
та, для описания каждой его составляющей отводится одинаковое количе-
ство памяти. В данном случае, это 8 двоичных разрядов. Максимальное
число, которое можно в них записать, это 255 в десятичной и FF в шест-
надцатеричной системе счисления. Вот так все просто объясняется...
Если же мы не желаем помнить, каким числом описывается максимальная ин-
тенсивность цвета, можно воспользоваться относительными значениями:
I.red {color: rgb(100%,0,0)}
Наконец, возможно комбинированное задание фона; одни составляющие
можно описать в относительных, а другие в абсолютных единицах:
I.yellow {color: rgb(100%,100%,0)} "<!— желтый цвет -->
I.orange {color: rgb(100%,100,0)} <!— оранжевый цвет —>


Задание фона
Таким образом можно задать цвет не только текста, но и фона, на котором он
выводится. Для этого используется уже встречавшийся нам атрибут background-
color. С его помощью можно изменить фон не только ячеек таблиц и всей
HTML-страницы, но и отдельных абзацев, слов и даже букв.
Фоном всех этих объектов может служить и узор, составленный из изображе-
ний, форматы которых поддерживает броузер (см. также главу 8). Файл, в кото-
ром хранится фоновое изображение, указывается с помощью атрибута background-
image (рис. 15.8). Значение, указываемое в скобках, должно соответствовать пра-
вилу составления URL-адресов.
До сих пор мы довольствовались тем, что, если фоновое изображение оказыва-
лось меньше той области, на которую распространяется, оно "размножалось" на
манер обоев Windows. Изменить этот порядок стандартными средствами HTML
нельзя. Но с помощью стилей CSS можно управлять размещением фонового изо-
бражения. За это "отвечает" атрибут background-repeat. По умолчанию он имеет
значение repeat, в соответствии с которым изображение размножается по всей от-
веденной ему области. Если мы хотим размножить фоновое изображение только по
горизонтали, в пределах одной строки, то используем значение repeat-x, а если
только по вертикали — значение repeat-y. Наконец, если фоновое изображение не
подлежит размножению, то используется значение no-repeat (рис. 15.9).
Давайте вспомним: какое еще привлекательное свойство фоновых изображе-
ний оказалось малодоступно нам из-за скудости средств HTML? Прокрутка. Воз-
можность прокрутки текста, в то время как фоновое изображение остается не-
подвижным. В определенной степени это можно реализовать с помощью пара-
метров дескриптора <BODY>. Но даже он поддерживается не всеми броузерами.




Основные принципы каскадных таблиц стилей 237
<STVLE>
.bg (background-image:url(back.gif)}
</STVLE>
<H1 class=bg>3TO заголовок на Фоне уэора</Н1>
Это обычный абзац.
СР class=bg> fl это абзац на Фоне узора.

ацшш




Рис. 15.8. С помощью атрибута background-image можно задать
фоновое изображение для различных элементов страницы




STVLE>
bg (background-image:url(back.gif))
</STVLE>
clase=bg style= background-repeat=repeat-x>
Это заголовок на фоне узора</Н1>
Это обычный абзац.
<Р claes=bg etyle="background-repeat=no-repeat">
Я это абзац на Фоне узора.




ОДМу docs\DIALECT\Htmrruloi\TESTHTMLhtml




узора
Это обычный абзац.

^-'э?Ьз1 абзац на фоне узора



Рис. 15.9. С помощью атрибута background-repeat можно
управлять "размножением" фонового изображения


238 Глава 15
Атрибут CSS background-attachment позволяет задать режим прокрутки для лю-
бого фона, в любом месте. Он принимает одно из двух значений: fixed или
scroll. Например, если мы хотим, чтобы фоновое изображение оставалось непод-
вижным, в то время как остальное содержимое страницы прокручивается, мы
можем использовать следующий код:
<BODY style=" background-image:url(back.gif); background-attachment=fixed">
<!--содержимое страницы —>
</BODY>
Вспомним еще одно свойство фоновых изображений, недоступное нам преж-
де: задание отступов. С помощью атрибута background-position можно задать от-
ступы фонового изображения от границ его области, а также выровнять его отно-
сительно границ и центра.
Отступы задаются относительно верхнего левого угла области, покрываемой фо-
новым изображением в виде двух значений, записываемых через пробел, и измеря-
ются в сантиметрах или в процентах. Первое значение соответствует отступу по го-
ризонтали, второе— по вертикали. Например, запись background-position: 1cm 2cm
означает, что фоновое изображение будет сдвинуто на 1 см вправо относительно
левой и на 2 см вниз относительно верхней границ своей области.
Лучше задавать отступы в процентах: тогда вы не будете привязаны к
размерам фоновых изображений и заполняемых ими областей. В случае
если эти размеры уменьшатся (в том числе без вашего ведома, напри-
мер, если пользователь изменит размер шрифта в броузере), величина
отступов изменится автоматически.
Как это выглядит на практике? На первый взгляд, ничего не меняется. Соз-
данный нами в предыдущем примере стиль .bg по-прежнему заполняет фоновым
изображением всю назначенную ему область (рис. 15.10). Однако это только пер-
вое впечатление. Внимательнее присмотревшись, мы обнаружим, что фоновая
картинка действительно сдвинулась на указанное расстояние, однако это рас-
стояние было тут же заполнено в соответствии с правилом повторения узора. Ес-
ли же мы запретим повторение фонового узора, то увидим, что изображение и в
самом деле сместилось (рис. 15.11).
Для выравнивания фонового изображения по горизонтали используются значения
left, center и right, а по вертикали — top, center и bottom. Порядок их перечисления
неважен: и background-position: top right, и background-position: top right соответст-
вуют тому же положению, что и background-position: 0 100%.




Основные принципы каскадных таблиц стилей 239
STYLE>
bg (background-image:url(back.gif);
background-position:10X 20%)
/STYLE>
H1 class=bg>3TO заголовок на Фоне уэора</Н1>
то обычный абзац.




D:\Mydocs\DIALECT\HtmlTulai\




Это обычный абзац.


Рис. 15.10. Похоже, что фоновое изо-
бражение не сместилось. Но это толь-
ко кажется из-за повторения узора



STVLE>
bg (background-image: url (back. gif) ;
background-repoat=no-r*peat;
background-posit ion: 1ЭХ 207.)
</STVLE>
(HI class=bg>3ro заголовок на Фоне уэора</Н1>
Это обычный абзац.



i- : •;•.*".., -..'".. 1 ,.Ji?, ™j?.™щ/Я^^^
mm

заголовок
на%оне узора
Это обычный абзац.


Рис. 15.11. Если запретить повторе-
ние узора, фоновое изображение
сдвинется вниз и вправо



240
Атрибутов, описывающих свойства фона, так много и их названия так длин-
ны, что описывать их по одному становится довольно утомительно. Вместо этого
допускается описание всех свойств фона с помощью одного параметра background,
причем порядок перечисления не имеет значения. Как и в случае с отступами,
значения указываются через пробел. Например, стиль .bg, показанный на
рис. 15.11, можно описать единственным атрибутом background:
.bg {background: url(back.gif) no-repeat 10% 20%}


Атрибуты шрифта
Как вы уже знаете, пользователь броузера может менять шрифт страницы, на-
страивая его так, чтобы было удобно читать. Однако в Internet довольно часто
встречаются страницы, шрифты которых остаются постоянными, независимо от
настройки броузера. Стремясь сохранить дизайн страниц, их создатели прибегают
к помощи каскадных таблиц стилей.
Размер шрифта определяется атрибутом font-size, который мы использовали в
начале этой главы. Его значением является размер шрифта в пунктах. Есть у этого
атрибута и предопределенные значения: xx-small, x-small, small, medium, large, x-
large, xx-large. Они соответствуют стандартным размерам шрифта, определяемых
параметром size дескриптора <FONT> (см. главу 4). Относительным размерам шрифта
size=+l и size=-l соответствуют значения smaller и larger, соответственно.

Многие атрибуты CSS дублируют параметры дескриптора <FONT>. Одна-
ко, в отличие от них, стили, созданные с помощью этих атрибутов,
применимы к любому парному дескриптору HTML, внутри которого за-
ключен текст, что очень удобно.
Впрочем, точное соответствие атрибутов CSS и параметров HTML наблю-
дается не всегда. Например, при разных размерах шрифта, установленных
в броузере, один и тот же код приводит к разным результатам (рис. 15.12).
В CSS есть и гораздо более тонкие средства задания относительного размера
шрифта. Прежде всего, это задание процентного соотношения по отношению к
текущему шрифту (рис. 15.13)
Есть и другой способ — с помощью суффикса em, который ставят после циф-
ры, обозначающей кратность увеличения или уменьшения размера шрифта. На-
пример, в примере, показанном на рис. 15.13, вместо font-size: 50% можно было
бы написать font-size: O.Sem. Другой суффикс, используемый для задания разме-
ра шрифта, ех, определяет масштаб шрифта относительно "опорной точки", со-
ответствующей значению size=l.
Следующим свойством, довольно грубо определяемым средствами HTML, яв-
ляется "жирность" шрифта. Для ее описания существует единственное средство,
дескриптор <В>, так что текст может находиться лишь в одном из двух состоя-
ний — "нормальный" и "полужирный".


Основные принципы каскадных таблиц стилей 241
Это обычный текст.
<BRXFONT size=-1>3TO текст понепьч».
<DIU etyle="font-size=»ediu«">M это обычный текст.
<DIU etyle="font-siz»=s«aller">H это текст помельче




D^Mydocs\DIALEC



Это обычный текст.
Это текст помельче.
Это обычный текст.
И это обычный текст. Это текст помельче.
И это текст помельче И это обычный текст.
И это текст помельче.




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



STYLE)
font-size: 507.: )
Ю
</STVLE>

<H1>3то заголовок
<DIU class=half>c полэагопоокоЖ/DIUX/HI >
Это обычный текст
<Р class=half>fl это абзац мелким «рифтом.

mat 3 D \My doc=\DIALECT\HlmlTuIor\TESTHTML h. . HHE



ркя ia"""i :,
.;?•!<:•"- CH-oi-. !, . BS«OI » г.

3 DWydoc«\plALECT\Html _;




Это заголовок
с подзаголовком
Это обычный текст
;>,
А это абзац мелким шрифтом.




Рис. 15.13. Простейший способ точно задать изменение
размера шрифта — использовать процентное соотношение




Глава 15
242
Атрибут font-weight определяет 9 степеней "жирности" шрифта, задаваемых чис-
лами от 100 до 900. Считается, что обычному шрифту соответствует значение 400, а
полужирному — 700 (вместо этой цифры можно указывать ключевое слово bold). Те-
перь понятно, почему это начертание называется "полужирным": есть еще вдвое
жирнее! Для задания относительной "жирности" используются значения bolder и
lighter. Первое обеспечивает более жирный шрифт, второе — более тонкий.
Что касается курсива, то здесь в роли "дублера" дескриптора <1> выступает ат-
рибут font-style. Он имеет всего два значения: normal (отсутствие курсива) и italic,
или oblique (курсив). Аналогично работает атрибут font-variant: в режиме normal он
соответствует обычному шрифту, в режиме small-caps текст выводится "малыми
прописными" буквами (рис. 15.14).


<STVLE>
.ее ( font-uariant: small-caps )
</STVLE>
Это обычный текст
<Р>)ЭТОТ ТЕКСТ НЯПИСЯН ПРОПИСНЫМИ БУКВЙМИ
<Р class=sc>fl зтот т«кст
написан напыни прописными буквами

:''• ••-•• Щ Щ • ! Ч"-'' . | g
* - .. >з :n И
0:..-ь' ev^i
& D:\My docs\DIALECT\HlmlTu1oAT ?

Это обычный текст

ЭТОТ ТЕКСТ НАПИСАН ПРОПИСНЫМИ
БУКВАМИ
А ЭТОТ ТЕКСТ НАПИСАН МАЛЫМИ ПРОПИСНЫМИ
БУКВАМИ




Рис. 15.14. Атрибут font-variant по-
зволяет вывести текст "малыми про-
писными" буквами
Атрибуты CSS позволяют обойти "камень преткновения", за который многие
так сильно — и не без оснований — "осуждают" дескриптор <FONT>. Я имею в ви-
ду параметр face. Как мы уже знаем, он, с одной стороны, полезен тем, что по-
зволяет задать гарнитуру шрифта, лучше всего подходящую к дизайну страницы.
Однако, с другой стороны, если такой гарнитуры не оказывается на компьютере
посетителя этой страницы, параметр face оказывается бесполезен.
Атрибут font-family компенсирует этот недостаток, позволяя не только задать
точный шрифт, но и семейство, к которому он принадлежит. Таких семейств пре-
дусмотрено пять: serif (с засечками), sans-serif (без засечек), cursive (курсив),
monospace (моноширинный) и fantasy (произвольный). Если нам неважно, каким
именно шрифтом будет отображаться текст, лишь бы это был шрифт без засечек,
мы можем создать такой стиль:


Основные принципы каскадных таблиц стилей 243
.sserif { font-family: sans-serif }
Если же нам хотелось бы, чтобы текст отображался шрифтом Verdana, но, на
худой конец, сойдет любой шрифт без засечек, то пишем так:
.sserif { font-family: Verdana, sans-serif }
Как видим, варианты перечисляются через запятую, в порядке убывания при-
оритетности.
Напоминаем: название шрифта, состоящее из нескольких слов, как, на-
пример, Times New Roman, заключается в кавычки:
.sserif { font-family: "Times New Roman", serif }

Все атрибуты CSS, начинающиеся со слова font, как и атрибуты фоно-
вого изображения, можно описать с помощью общего атрибута font, пе-
речислив их через пробел. Например, описание курсива с засечками
размером 12 пунктов выглядит так:
.curs { font: serif 12 italic}

Атрибут text-transform (рис. 15.15) позволяет создать стиль, в котором бы все
слова начинались с большой буквы (значение capitalize), выводились бы полно-
стью прописными (uppercase) или строчными (lowercase) буквами. По умолчанию
этот атрибут имеет значение попе, т.е. прописные и строчные буквы в тексте со-
храняются такими же, как и в коде.
IЯ TESTHTML - Блокнот
фгч-'II

СР style="text-transformcapitalize")
Здесь все слова начинаются с большой буквы
<Р style=" text-transfor«=upp«rcase">
Здесь все слова написаны прописными буквами
<Р style="text-transformlouercaee">
Здесь все слова написаны маленькими буквами
<Р style="text-transforn=none">3To обычный текст
lALECTVHImlTlltaiYlL:

_
а
Щ р*Ш|
,\
5 D:\My docspWlEClVHtmlTutoiVrESTHTMLhtml


Здесь Все Слова Начинаются С Большой Буквы
ЗДЕСЬ ВСЕ СЛОВА НАПИСАНЫ ПРОПИСНЫМИ
БУКВАМИ
здесь все слова написаны маленькими буквами
Это обычный текст


Рис. 15.15. Атрибут text-transform позволяет управлять вы-
водом прописных и строчных букв


Глава 15
244
Режимы подчеркивания определяются атрибутом text-decoration (рис. 15.16):
для обычного подчеркивания используется значение underline, для надчеркива-
ния — overline и для зачеркнутого текста — line-through. Кроме того, атрибут
text-decoration имеет также значение blink, позволяющее создавать мигающий
текст. Впрочем, последним не рекомендуется злоупотреблять, так как от подоб-
ных эффектов у посетителей страницы быстро устают глаза.
1*1 TESTHTML - Пликио I

style="text-decoration=underline">
Здесь все слова подчеркнуты
style="text-decoration;line-through")
Здесь все слова зачеркнуты
<Р style="text-decoration=ouerline">
Здесь все слова надчеркнуты

<<

стр. 8
(всего 11)

СОДЕРЖАНИЕ

>>