Оформление каждого класса и типа стандартных обьектов описывается в начале страницы в тэге "
". Содержимое этого тэга и называется "таблицей стилей", и именно в нем располагается информация об оформлении различных элементов web-страницы. Желательно, чтобы таблица стилей помещалась в разделе " " web-страницы, хотя она может находиться и после тэга " " в любом месте web-страницы.
Вот пример таблицы стилей:
P{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}
В ней задано оформление двум стандартным тэгам HTML — " " и "
" и трем классам обьектов — с именами text1, text2 и risun .
Если такую таблицу поместить на web-страницу, то весь текст, содержащийся в тэгах "
", будет выровнен по ширинеи окрашен в черный цвет (которому и соответствует указанный в таблице стилей номер #000000).
Для того, чтобы обеспечить такое же оформление страницы без использования таблицы стилей, пришлось бы в каждом тэге "
" указывать параметр align=justify , а после тэга перед текстом ставить указание на цвет шрифта: " ". Помимо увеличения размера страницы и затруднения написания ее кода это привело бы еще и к невозможности быстро поменять цвет или выравнивание всех абзацев — пришлось бы править каждый тэг.
Запись о параметрах оформления стандартного тэга, содержащаяся в таблице стилей, при отображении страницы полностью эквивалентна указанию этих параметров именно в этом тэге. Поэтому если на странице, содержащей приведенную выше таблицу стилей, поставить тэг "
" перед тэгом "
", то текст, оформленный тэгом "
", останется выровненным по ширине (так как такое сочетание будет эквивалентно записи "
"), а если после — "
" — то он будет выровнен по центру.
Тэг " " (то есть гиперссылка) допускает четыре состояния: просто расположенная на странице — link , активная (то есть нажимаемая в данный момент) — active , посещенная — visited и "готовящаяся стать активной" (состояние при наведении курсора на ссылку) — hover . Все эти состояния можно описать по-отдельности в таблице стилей, как это и показано выше — например, обычная ссылка зеленого цвета, а при подведении к ней курсора становится желтой.
В вышеприведенной таблице описано еще три класса обьектов — text1, text2 и risun . Для того, чтобы использовать эти описания для обьектов на web-странице, необходимо указать принадлежность того или иного обьекта к определенному классу с помощью включения параметра class в тэг этого обьекта. Например, указание "
"приведет к оформлению текста, содержащегося в данной ячейке таблицы, в соответствии с условиями, указанными в таблице стилей — в данном случае он будет иметь высоту в 12 пикселов, оформлен жирным шрифтом и т. д…
Для оформления как класса произвольных фрагментов страницы необходимо использовать тэг "
": "
", окружая им эти фрагменты. У тэга "
" нет каких-либо свойств, имеющихся по умолчанию, вроде отступов спереди и сзади у тэга "
", поэтому его использование никак не повлияет на остальные параметры вида страницы, кроме тех, что определяются заданным в этом тэге классом.
Допустимо задание свойств не только тексту, но и изображениям — например, если в странице с приведенной выше таблицей стилей присвоить класс risun изображению: " ", то оно будет иметь размеры, указанные в таблице (то есть здесь — высота в 10 пикселов и ширина в 20 пикселов).
Если необходимо задать определенные свойства всего лишь одному элементу страницы, то необязательно выделять его в отдельный класс или создавать ради него таблицу стилей. Можно просто указать нужное свойство в тэге этого элемента с помощью параметра style, например,
задает отступ сверху в 140 пикселей только для абзаца, в тэге которого указано это свойство.
Параметр style, указанный непосредственно в тэге, имеет приоритет перед параметрами в таблице стилей. Так, текст, содержащийся в тэге "
", будет выровнен по центру независимо от того, какое выравнивание было задано в таблице стилей для тэга "
".
Способ задания размера шрифта в таблице стилей несколько отличается от употребляемого в тэге " ". Если в качестве значения параметра " size" тэга " " может указываться число от 1 до 7, соответствующее размеру шрифта от самого маленького до самого большого, то в таблице стилей, в параметре " font-size " какого-либо элемента, допускающего его задание для себя, может быть указан либо фиксированный размер шрифта в пикселах (например, " font-size: 12 px "), который при отображении в браузере увеличить или уменьшить будет нельзя (в Microsoft Internet Explorer 5.0 это можно сделать в меню "Вид-Размер Шрифта"), либо процентное значение (" font-size: 120 % "), которое задаст размер шрифта относительно установленного в браузере (с помощью вышеуказанного меню) по умолчанию. Первый способ стоит использовать при необходимости строго задать размер букв надписи (скажем, при их размещении в ограниченной по ширине ячейке таблицы), а второй — во всех остальных случаях. Злоупотреблять первым способом указания размера шрифта — в пикселах — не стоит, так как многие пользователи предпочитают настраивать просмотр web-страниц, в том числе и размеры шрифтов, исходя из своих предпочтений, а указание размера шрифта в пикселах не даст им этого сделать.
|
Читать дальше