Основы работы с XHTML и CSS
Каскадные таблицы стилей
Теги XHTML являются идентификаторами и контейнерами текстовой и графической информации, выводимой на странице Web. Их основное применение состоит в описании структуры этого содержимого, в упаковке его для размещения на этой странице. Однако большинство страниц Web содержат больше, чем обычный текст и размещенные в нем с помощью тегов XHTML встроенные изображения. Информация на странице имеет дополнительное оформление, делающее ее более привлекательной и легко читаемой. Различные виды шрифта, размер текста, цвет и другие характеристики форматирования делают страницу более удобной для чтения и, при благоразумном использовании, могут сделать информацию более понятной.
В предыдущих версиях HTML большая часть оформления контента страницы происходила с помощью атрибутов, задаваемых как часть ее тегов. Атрибуты определяли дополнительные спецификации форматирования помимо тех, которые подразумевает само имя тега. Например, начертание шрифта можно задавать для текстовой информации, окружая ее тегом <font>, содержащим атрибуты для задания вида шрифта, размера и цвета: <font face="arial", size="4", color="red">. Различные теги содержали различные атрибуты для форматирования своего содержимого различным образом.
В текущих версиях XHTML атрибуты тегов почти исчезли, будучи исключены (исключены в использовании) в пользу каскадных таблиц стилей (CSS - Cascading Style Sheets), или просто кратко "таблиц стилей". Таблица стилей является набором характеристик оформления, связанных с тегами XHTML. Эти характеристики оформления состоят из свойств оформления и значений, записанных с помощью специального синтаксиса таблиц стилей и присвоенных тегам, которые будут наследовать эти стили оформления. Например, одним из способов присвоить таблицу стилей тегу является включение ее в тег в качестве атрибута style.
<p style="font-family:arial; font-size:14pt; color:red; font-weight:bold"> Это текстовый параграф. </p>
Листинг 1.8. Присвоение таблицы стилей параграфу (html, txt)
В этом примере параграфу текста, окруженному тегом <p> (paragraph), задается тип шрифта Arial размером 14pt (14 пунктов), красного цвета (red), с жирной насыщенностью (bold). Четыре спецификации свойство:значение (например, font-family:arial) задают эти стили оформления.
Любому тегу XHTML можно присвоить одну или несколько характеристик оформления, и существуют сотни различных свойств оформления и значений, которые могут использоваться. Большая часть изучения XHTML состоит из изучения этого множества возможностей оформления. Категории стилей оформления включают:
стили шрифта - для задания типа шрифта, размера и насыщенности.;
стили текста - для задания интервала между буквами и словами, высоты строк, горизонтального и вертикального интервала и абзацных отступов;
стили цвета - для задания цвета фона и переднего плана;
стили рамок - для вывода различных рамок, окружающих текстовые и графические элементы;
стили отступов - для задания ширины различных отступов, окружающих текстовые и графические элементы;
стили фильтрации - для применения специальных эффектов к текстовым и графическим элементам;
стили задания размера - для задания высоты и ширины текстовых и графических контейнеров;
стили позиционирования - для позиционирования элементов страницы в фиксированных пиксельных координатах на странице.
Консорциум WWW поддерживает стандарты языка каскадных таблиц стилей, так же, как это делается для языка разметки XHTML. Текущей версией стандартов, рассматриваемой в данном учебнике, является CSS Level 2 (CSS2).
Основная задача при освоении XHTML - изучение тегов и особенностей их стилей оформления, которые применяют форматирование браузера к содержимому страницы, которое они охватывают. Обычно в этом учебнике представлены только те теги и параметры таблицы стилей, которые являются существенными для рассматриваемого вопроса. Дополнительные теги и возможности оформления вводятся по мере изучения материала учебника.
Не имеет значения, что показанные в этом учебнике примеры являются достаточно простыми иллюстрациями тегов и стилей. Цель состоит в том, чтобы продемонстрировать код XHTML и основные подходы к оформлению, а не создать тщательно разработанные демонстрации. В этом случае читатель будет сосредоточен на коде и не будет перегружен большим объемом информационного содержимого. Помните, однако, что можно создавать страницы достаточно сложной структуры, объединяя представленные здесь основные понятия XHTML и элементы таблиц стилей.
