Интернет-журнал "Домашняя лаборатория", 2007 №3
Шрифт:
Свойства, то есть указания об оформлении, при использовании CSS можно задавать любым объектам страницы — абзацам, ссылкам, ячейкам таблицы, а также произвольным фрагментам страницы. Для этого в тэги всех таких объектов помещается специальный параметр — class. Все объекты web-страницы, имеющие одинаковое значение параметра class, считаются принадлежащими к одному и тому же классу оформления.
Под "классом" в программировании вообще и в CSS в частности понимается определенный тип данных или объектов. Классы могут создаваться программистом самостоятельно. Например, можно выделить на web-странице различные фрагменты текста и объявить с помощью указания параметра class, что все они должны
Оформление каждого класса и типа стандартных объектов описывается в начале страницы в тэге "<style>". Содержимое этого тэга и называется "таблицей стилей", и именно в нем располагается информация об оформлении различных элементов web-страницы. Желательно, чтобы таблица стилей помещалась в разделе "<head>" web-страницы, хотя она может находиться и после тэга "<body>" в любом месте web-страницы.
Вот пример таблицы стилей:
<STYLE type="text/css">
Р{text-align: justify; color: "#000000"}
A: link {font-family: Arial; color: "#2f4f4f"}
A: visited {font-family: Arial; color: "#717171"}
A: active {font-family: Arial; color: "#d4aa00"}
A: hover {font-family: Arial; color: "#c39100"}
.text1 {color: #113311; font-size: 12 px; font-weight: bold}
.text2 {font-size: 12 px; font-weight: bold}
.risun {height: 10; width: 20}
</STYLE>
В ней задано оформление двум стандартным тэгам HTML — "<а>" и "<р>" и трем классам объектов — с именами text1, text2 и risun.
Если такую таблицу поместить на web-страницу, то весь текст, содержащийся в тэгах "<р>", будет выровнен по ширине и окрашен в черный цвет (которому и соответствует указанный в таблице стилей номер #000000).
Для того, чтобы обеспечить такое же оформление страницы без использования таблицы стилей, пришлось бы в каждом тэге "<р>" указывать параметр align=justify, а после тэга перед текстом ставить указание на цвет шрифта: "<font color=#000000>". Помимо увеличения размера страницы и затруднения написания ее кода это привело бы еще и к невозможности быстро поменять цвет или выравнивание всех абзацев — пришлось бы править каждый тэг.
Запись о параметрах оформления стандартного тэга, содержащаяся в таблице стилей, при отображении страницы полностью эквивалентна указанию этих параметров именно в этом тэге. Поэтому если на странице, содержащей приведенную выше таблицу стилей, поставить тэг "<center>" перед тэгом "<р>", то текст, оформленный тэгом "<р>", останется выровненным по ширине (так как такое сочетание будет эквивалентно записи "<center><p align=justify>"), а если после — "<center>" — то он будет выровнен по центру.
Тэг "<а>" (то есть гиперссылка) допускает четыре состояния: просто расположенная на странице — link, активная (то есть нажимаемая в данный момент) — active, посещенная — visited и "готовящаяся стать активной" (состояние при наведении курсора на ссылку) — hover. Все эти состояния можно описать по-отдельности в таблице стилей, как это и показано выше — например, обычная ссылка зеленого цвета, а при подведении к ней курсора становится желтой.
В вышеприведенной таблице описано еще три класса объектов — text1, text2 и risun. Для того, чтобы использовать эти описания для объектов на web-странице, необходимо указать принадлежность того или иного объекта к определенному классу с помощью включения параметра class в тэг этого объекта. Например, указание "<td class=text1>" приведет к оформлению текста, содержащегося в данной ячейке таблицы, в соответствии с условиями, указанными в таблице стилей — в данном случае он будет иметь высоту в 12 пикселов, оформлен жирным шрифтом и т. д..
Для оформления как класса произвольных фрагментов страницы необходимо использовать тэг "<div>": "<div class=text1>", окружая им эти фрагменты. У тэга "<div>" нет каких-либо свойств, имеющихся по умолчанию, вроде отступов спереди и сзади у тэга "<р>", поэтому его использование никак не повлияет на остальные параметры вида страницы, кроме тех, что определяются заданным в этом тэге классом.
Допустимо задание свойств не только тексту, но и изображениям — например, если в странице с приведенной выше таблицей стилей присвоить класс risun изображению: "<img src="d.gif" class=risun>", то оно будет иметь размеры, указанные в таблице (то есть здесь — высота в 10 пикселов и ширина в 20 пикселов).
Если необходимо задать определенные свойства всего лишь одному элементу страницы, то необязательно выделять его в отдельный класс или создавать ради него таблицу стилей. Можно просто указать нужное свойство в тэге этого элемента с помощью параметра style, например, <р style="margin-top: 140рх"> задает отступ сверху в 140 пикселей только для абзаца, в тэге которого указано это свойство.
Параметр style, указанный непосредственно в тэге, имеет приоритет перед параметрами в таблице стилей. Так, текст, содержащийся в тэге "<р style="text-align: center">", будет выровнен по центру независимо от того, какое выравнивание было задано в таблице стилей для тэга "<р>".
Способ задания размера шрифта в таблице стилей несколько отличается от употребляемого в тэге "<font…>". Если в качестве значения параметра "size" тэга "<font…>" может указываться число от 1 до 7, соответствующее размеру шрифта от самого маленького до самого большого, то в таблице стилей, в параметре "font-size" какого-либо элемента, допускающего его задание для себя, может быть указан либо фиксированный размер шрифта в пикселах (например, "font-size: 12 рх"), который при отображении в браузере увеличить или уменьшить будет нельзя (в Microsoft Internet Explorer 5.0 это можно сделать в меню "Вид-Размер Шрифта"), либо процентное значение ("font-size: 120 %"), которое задаст размер шрифта относительно установленного в браузере (с помощью вышеуказанного меню) по умолчанию. Первый способ стоит использовать при необходимости строго задать размер букв надписи (скажем, при их размещении в ограниченной по ширине ячейке таблицы), а второй — во всех остальных случаях. Злоупотреблять первым способом указания размера шрифта — в пикселах — не стоит, так как многие пользователи предпочитают настраивать просмотр web-страниц, в том числе и размеры шрифтов, исходя из своих предпочтений, а указание размера шрифта в пикселах не даст им этого сделать.
Синтаксис таблицы стилей можно посмотреть в приведенном выше примере. Все задаваемые параметры заключаются в фигурные скобки. Разделитель между параметрами — точка с запятой, разделитель между параметром и его значением — двоеточие. Перед именем определяемого класса в таблице стилей ставится точка, а перед определяемым стандартным тэгом HTML — нет. Каждый новый тэг или класс описывается с новой строки.
Параметры, могущие быть заданными для каждого типа объектов, весьма многообразны. Полный их перечень приводится в специальной литературе по таблицам стилей. Кроме того, с ним можно ознакомиться с помощью программы Microsoft Script Editor, описанной в следующей главе.