Интернет-журнал "Домашняя лаборатория", 2007 №3

Запись о параметрах оформления стандартного тэга, содержащаяся в таблице стилей, при отображении страницы полностью эквивалентна указанию этих параметров именно в этом тэге. Поэтому если на странице, содержащей приведенную выше таблицу стилей, поставить тэг "

" перед тэгом "<р>", то текст, оформленный тэгом "<р>", останется выровненным по ширине (так как такое сочетание будет эквивалентно записи "

"), а если после — "

" — то он будет выровнен по центру.

Тэг "<а>" (то есть гиперссылка) допускает четыре состояния: просто расположенная на странице — link, активная (то есть нажимаемая в данный момент) — active, посещенная — visited и "готовящаяся стать активной" (состояние при наведении курсора на ссылку) — hover. Все эти состояния можно описать по-отдельности в таблице стилей, как это и показано выше — например, обычная ссылка зеленого цвета, а при подведении к ней курсора становится желтой.

В вышеприведенной таблице описано еще три класса объектов — text1, text2 и risun. Для того, чтобы использовать эти описания для объектов на web-странице, необходимо указать принадлежность того или иного объекта к определенному классу с помощью включения параметра class в тэг этого объекта. Например, указание "" приведет к оформлению текста, содержащегося в данной ячейке таблицы, в соответствии с условиями, указанными в таблице стилей — в данном случае он будет иметь высоту в 12 пикселов, оформлен жирным шрифтом и т. д..

Для оформления как класса произвольных фрагментов страницы необходимо использовать тэг "

": "

", окружая им эти фрагменты. У тэга "

" нет каких-либо свойств, имеющихся по умолчанию, вроде отступов спереди и сзади у тэга "<р>", поэтому его использование никак не повлияет на остальные параметры вида страницы, кроме тех, что определяются заданным в этом тэге классом.

Допустимо задание свойств не только тексту, но и изображениям — например, если в странице с приведенной выше таблицей стилей присвоить класс risun изображению: "", то оно будет иметь размеры, указанные в таблице (то есть здесь — высота в 10 пикселов и ширина в 20 пикселов).

Если необходимо задать определенные свойства всего лишь одному элементу страницы, то необязательно выделять его в отдельный класс или создавать ради него таблицу стилей. Можно просто указать нужное свойство в тэге этого элемента с помощью параметра style, например, <р style="margin-top: 140рх"> задает отступ сверху в 140 пикселей только для абзаца, в тэге которого указано это свойство.

Параметр style, указанный непосредственно в тэге, имеет приоритет перед параметрами в таблице стилей. Так, текст, содержащийся в тэге "<р style="text-align: center">", будет выровнен по центру независимо от того, какое выравнивание было задано в таблице стилей для тэга "<р>".

Способ задания размера шрифта в таблице стилей несколько отличается от употребляемого в тэге "". Если в качестве значения параметра "size" тэга "" может указываться число от 1 до 7, соответствующее размеру шрифта от самого маленького до самого большого, то в таблице стилей, в параметре "font-size" какого-либо элемента, допускающего его задание для себя, может быть указан либо фиксированный размер шрифта в пикселах (например, "font-size: 12 рх"), который при отображении в браузере увеличить или уменьшить будет нельзя (в Microsoft Internet Explorer 5.0 это можно сделать в меню "Вид-Размер Шрифта"), либо процентное значение ("font-size: 120 %"), которое задаст размер шрифта относительно установленного в браузере (с помощью вышеуказанного меню) по умолчанию. Первый способ стоит использовать при необходимости строго задать размер букв надписи (скажем, при их размещении в ограниченной по ширине ячейке таблицы), а второй — во всех остальных случаях. Злоупотреблять первым способом указания размера шрифта — в пикселах — не стоит, так как многие пользователи предпочитают настраивать просмотр web-страниц, в том числе и размеры шрифтов, исходя из своих предпочтений, а указание размера шрифта в пикселах не даст им этого сделать.

Синтаксис таблицы стилей можно посмотреть в приведенном выше примере. Все задаваемые параметры заключаются в фигурные скобки. Разделитель между параметрами — точка с запятой, разделитель между параметром и его значением — двоеточие. Перед именем определяемого класса в таблице стилей ставится точка, а перед определяемым стандартным тэгом HTML — нет. Каждый новый тэг или класс описывается с новой строки.

Параметры, могущие быть заданными для каждого типа объектов, весьма многообразны. Полный их перечень приводится в специальной литературе по таблицам стилей. Кроме того, с ним можно ознакомиться с помощью программы Microsoft Script Editor, описанной в следующей главе.

Таблицу стилей можно использовать одну на несколько web-страниц. Можно даже брать ее с другого сайта. Для этого надо сохранить таблицу стилей (от тэга "" без самих этих тэгов) в текстовом файле с расширением. css и поместить этот файл на сервер, желательно в ту же самую директорию, где будут находиться сами web-страницы. В раздел "" каждой страницы надо поместить тэг "", где вместо Url поставить имя файла с таблицей стилей или путь к нему, если он находится не в той же самой директории, что и web-страницы. В этом случае при загрузке web-страницы таблица тоже будет загружена. При изменении описаний тэгов и классов в такой таблице стилей изменится внешний вид всех страниц, на которых она используется.

Следует помнить, что при таком использовании таблицы стилей при сохранении пользователем web-страницы на жестком диске локального компьютера без использования функций сохранения страниц со всеми компонентами, имеющихся в последних версиях браузеров Microsoft Internet Explorer или Netscape Navigator, сохраненная web-страница полностью потеряет заданное в таблице форматирование. Это и понятно — сама же таблица тогда не будет сохранена.

С помощью таблиц стилей можно задать объектам страницы огромное количество свойств — гораздо большее, чем позволяют стандартные тэги HTML. Например, можно указать для фрагмента текста отступы от остального текста, причем эти отступы могут быть и отрицательными, что позволяет добиваться весьма оригинального вида web-страницы — с наложением фрагментов текста друг на друга.

Можно сделать страницу с "водяными знаками" на заднем плане, причем без использования сложной графики в качестве фона.

Пример подобной web-страницы — на рис. 17.1. Ее HTML-текст имеет следующий

Первая строка

Вторая строка

Третья строка