'<center>' перед тэгом '<p>', то текст, оформленный тэгом '<p>', останется выровненным по ширине (так как такое сочетание будет эквивалентно записи '<center><p align=justify>'), а если после — '<p><center>' — то он будет выровнен по центру.
Тэг '<a>' (то есть гиперссылка) допускает четыре состояния: просто расположенная на странице — link, активная (то есть нажимаемая в данный момент) — active, посещенная — visited и 'готовящаяся стать активной' (состояние при наведении курсора на ссылку) — hover. Все эти состояния можно описать по-отдельности в таблице стилей, как это и показано выше — например, обычная ссылка зеленого цвета, а при подведении к ней курсора становится желтой.
В вышеприведенной таблице описано еще три класса обьектов — text1, text2 и risun. Для того, чтобы использовать эти описания для обьектов на web-странице, необходимо указать принадлежность того или иного обьекта к определенному классу с помощью включения параметра class в тэг этого обьекта. Например, указание '<td class=text1>'приведет к оформлению текста, содержащегося в данной ячейке таблицы, в соответствии с условиями, указанными в таблице стилей — в данном случае он будет иметь высоту в 12 пикселов, оформлен жирным шрифтом и т. д…
Для оформления как класса произвольных фрагментов страницы необходимо использовать тэг '<div>': '<div class=text1>', окружая им эти фрагменты. У тэга '<div>' нет каких-либо свойств, имеющихся по умолчанию, вроде отступов спереди и сзади у тэга '<p>', поэтому его использование никак не повлияет на остальные параметры вида страницы, кроме тех, что определяются заданным в этом тэге классом.
Допустимо задание свойств не только тексту, но и изображениям — например, если в странице с приведенной выше таблицей стилей присвоить класс risun изображению: '<img src='d.gif' class=risun>', то оно будет иметь размеры, указанные в таблице (то есть здесь — высота в 10 пикселов и ширина в 20 пикселов).
Если необходимо задать определенные свойства всего лишь одному элементу страницы, то необязательно выделять его в отдельный класс или создавать ради него таблицу стилей. Можно просто указать нужное свойство в тэге этого элемента с помощью параметра style, например, <p style='margin- top: 140px'> задает отступ сверху в 140 пикселей только для абзаца, в тэге которого указано это свойство.
Параметр style, указанный непосредственно в тэге, имеет приоритет перед параметрами в таблице стилей. Так, текст, содержащийся в тэге '<p style='text-align: center'>', будет выровнен по центру независимо от того, какое выравнивание было задано в таблице стилей для тэга '<p>'.
Способ задания размера шрифта в таблице стилей несколько отличается от употребляемого в тэге '<font…>'. Если в качестве значения параметра 'size' тэга '<font…>' может указываться число от 1 до 7, соответствующее размеру шрифта от самого маленького до самого большого, то в таблице стилей, в параметре 'font-size' какого-либо элемента, допускающего его задание для себя, может быть указан либо фиксированный размер шрифта в пикселах (например, 'font-size: 12 px'), который при отображении в браузере увеличить или уменьшить будет нельзя (в Microsoft Internet Explorer 5.0 это можно сделать в меню 'Вид-Размер Шрифта'), либо процентное значение ('font-size: 120 %'), которое задаст размер шрифта относительно установленного в браузере (с помощью вышеуказанного меню) по умолчанию. Первый способ стоит использовать при необходимости строго задать размер букв надписи (скажем, при их размещении в ограниченной по ширине ячейке таблицы), а второй — во всех остальных случаях. Злоупотреблять первым способом указания размера шрифта — в пикселах — не стоит, так как многие пользователи предпочитают настраивать просмотр web-страниц, в том числе и размеры шрифтов, исходя из своих предпочтений, а указание размера шрифта в пикселах не даст им этого сделать.
Синтаксис таблицы стилей можно посмотреть в приведенном выше примере. Все задаваемые параметры заключаются в фигурные скобки. Разделитель между параметрами — точка с запятой, разделитель между параметром и его значением — двоеточие. Перед именем определяемого класса в таблице стилей ставится точка, а перед определяемым стандартным тэгом HTML — нет. Каждый новый тэг или класс описывается с новой строки.
Параметры, могущие быть заданными для каждого типа обьектов, весьма многообразны. Полный их перечень приводится в специальной литературе по таблицам стилей. Кроме того, с ним можно ознакомиться с помощью программы Microsoft Script Editor, описанной в следующей главе.
Таблицу стилей можно использовать одну на несколько web-страниц. Можно даже брать ее с другого сайта. Для этого надо сохранить таблицу стилей (от тэга '<style>' до тэга '</style>' без самих этих тэгов) в текстовом файле с расширением. css и поместить этот файл на сервер, желательно в ту же самую директорию, где будут находиться сами web- страницы. В раздел '<head>' каждой страницы надо поместить тэг '<link rel=stylesheet type='text/css' href='url'>', где вместо Url поставить имя файла с таблицей стилей или путь к нему, если он находится не в той же самой директории, что и web- страницы. В этом случае при загрузке web-страницы таблица тоже будет загружена. При изменении описаний тэгов и классов в такой таблице стилей изменится внешний вид всех страниц, на которых она используется.
Следует помнить, что при таком использовании таблицы стилей при сохранении пользователем web-страницы на жестком диске локального компьютера без использования функций сохранения страниц со всеми компонентами, имеющихся в последних версиях браузеров Microsoft Internet Explorer или Netscape Navigator, сохраненная web-страница полностью потеряет заданное в таблице форматирование. Это и понятно — сама же таблица тогда не будет сохранена.
С помощью таблиц стилей можно задать обьектам страницы огромное количество свойств — гораздо большее, чем позволяют стандартные тэги HTML. Например, можно указать для фрагмента текста отступы от остального текста, причем эти отступы могут быть и отрицательными, что позволяет добиваться весьма оригинального вида web-страницы — c наложением фрагментов текста друг на друга. Можно сделать страницу с 'водяными знаками' на заднем плане, причем без использования сложной графики в качестве фона.
Пример подобной web-страницы — на рис. 17.1. Ее HTML-текст имеет следующий вид:
Рис. 17.1. Пример Web-страницы, сделанной с использованием таблицы стилей.
<HTML><HEAD>
<STYLE type='text/css'>
x1 {color: green; font-size: 40pt}
x2 {color: navy; font-size: 50pt; margin-top: -10px;}
x3 {color: silver; font-size: 80pt; margin-top: -140px}
</STYLE>
</HEAD><BODY><CENTER>
<DIV class='x1'>Первая строка</DIV>
<DIV class='x2'>Вторая строка</DIV>
<DIV class='x3'>Третья строка</DIV>
</CENTER></BODY></HTML>
