Каскадные таблицы стилей

Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования. Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты.

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

Самый простой способ — это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута stype можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега .

Пример

Этот параграф переопределен стилем

Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам, т. е. воспользоваться способом описания стилей в секции заголовка. Именно этим способом мы пользовались в примерах, рассматривающих форматирование абзаца и оформление интервью. Действие таблицы стилей, подключенной таким образом, распространяется на весь HTML-документ.

И наконец, третий способ, — вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css . В раздел head документа включить строку, аналогичную следующей, где атрибут href содержит имя файла со стилями.

Диапазон воздействия таблицы в этом случае простирается на все файлы, в которые включено такое описание. Если потребуется изменить внешний вид группы документов, то будет достаточно откорректировать лишь один стилевой файл. Сравните этот способ с предыдущими: в одном из них придется менять описание стилей в каждом документе, а в другом — даже в каждом теге.

На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает «каскадность» стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.

Например, пусть во внешнем стилевом файле определено, что текст в теге

должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе head документа переопределить тег

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

В целом, браузер расставляет приоритеты таблиц стилей следующим образом:

1. inline-стили (встроенные с помощью атрибута style непосредственно в теги документа) — наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
2. внедренные стили (перечисленные в теге-контейнере в разделе документа) — чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
3. связанные стили (стили, присоединенные к HTML-файлу посредством тега < link>) — наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.

Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово «каскадные» в названии CSS (cascading style sheets) — несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким «каскадом» в порядке их приоритетности.

Общие сведения о языке CSS

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Возможности языка CSS

• Раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая, монитор принтер, проектор и даже портативные устройства.
• Раздельное хранение представления и документа означает уменьшение размера документа, что, в свою очередь, ускоряет загрузку и отображение страницы, доставляя удовольствие посетителям.
• Язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно.
• CSS-документы кэшируются. Это означает, что они загружаются в память браузера только один раз. При перемещении по сайту браузеру никогда не приходится заново интерпретировать стили. В результате мы получаем плавные переходы от страницы к странице и быструю загрузку страниц, что всегда является конечной целью.
• Отделив представление от структуры и содержимого, легко добиться доступности документа. Документы, в которых не используются сложные таблицы и большое количество элементов языка HTML, отвечающих за представление, являются более доступными, чем те документы, у которых перечисленные свойства присутствуют.

Правила языка CSS

Правила языка CSS состоят из селектора и блока объявлений. Селектор — это код элемента языка HTML, к которому будет применено правило стиля. Блок объявлений помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком точка с запятой. Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком двоеточие. Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

Рассмотрим на примере:

Селектор h1 отвечает за заголовки h1 языка HTML, а объявление состоит из свойства color и значения red. Это правило изменяет цвет текста элементов h1 на красный.

Типы таблиц стилей

• Стиль браузера — это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили.
• Стиль пользователя — пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили.
• Стиль автора — стиль, который добавляет к документу его разработчик.

Способы добавления стилей

• Встроенный стиль — стиль, который определяется непосредственно в теге и применяется с использованием атрибута style . Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.

14 Таблицы стилей

Таблицы стилей являются грандиозным прорывом в области Web-дизайна. В научных кругах, там, где был придуман Web, больше интересуются содержимым документов, чем их внешним видом. Поскольку всё больше людей открывают для себя Web, ограничения HTML становятся постоянным источником разочарований, и авторы должны постоянно придумывать, как преодолеть эти стилистические ограничения. Хотя намерения были самыми благими — улучшить внешний вид Web-страниц — техника исполнения этого имела, к сожалению, побочные эффекты. Эта техника иногда работает, но не всегда и не везде. Она включает:

• использование подходящих расширений HTML;
• конвертирование текста в изображение;
• использование изображений для управления пробелами;
• использование таблиц для форматирования текста;
• написание программ вместо использования HTML.

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

Таблицы стилей решают эти задачи, одновременно выходя за узкие рамки механизмов представления в HTML. Таблицы стилей облегчают установку межстрочных интервалов, отступов, цвета текста и фона, размера и стиля шрифта и других деталей.

Например, эта небольшая CSS (таблица стилей), находящаяся в файле «special.css», устанавливает цвет текста параграфа в зелёный и окружает его сплошной красной рамкой:

P.special

Авторы могу подключить эту таблицу стилей к основному документу HTML с помощью элемента LINK :

HTML 4 поддерживает следующие возможности таблиц стилей:

Гибкость размещения информации о стиле Размещение таблиц стилей в отдельных файлах облегчает их повторное использование. Иногда необходимо включить инструкции представления в документ, к которому они применяются, путём группировки их в начале документа или установкой в атрибутах по всему телу документа. Чтобы облегчить работу со стилями на базе сайта, эта спецификация описывает, как использовать заголовки-«шапки»/headers HTTP для установки применения таблиц стилей в документах. Независимость от конкретного языка таблицы стилей Эта спецификация не привязывает HTML к какому-то определённому языку таблиц стилей. Это позволяет использовать разные языки, например, простой для большинства пользователей и более сложный — для пользователей с узко специализированными потребностями. Примеры, данные ниже, используют язык CSS (Cascading Style Sheets) [CSS1], но возможны и другие языки таблиц стилей. Каскадирование Это возможность, предоставляемая некоторыми языками таблиц стилей, такими как CSS, соединять информацию стилей из различных источников. Это могут быть, например, корпоративные руководства по стилям, стили для групп документов и стили, специфические для отдельного документа. Сохраняя эту информацию раздельно, таблицы стилей могут быть повторно использованы, облегчая творчество и более эффективное использование сетей. Каскад определяет упорядоченную последовательность таблиц стилей, где правила более поздних таблиц имеют преимущество перед правилами более ранних таблиц. Не все языки таблиц стилей поддерживают каскадирование. Зависимость от типа носителя HTML позволяет авторам определять media-независимые документы. Это даёт пользователям возможность использовать Web-страницы на разных устройствах и носителях информации, например, графические дисплеи компьютеров, использующих Windows, Macintosh OS и X11, телевизионные устройства, специально адаптированные телефоны и портативные устройства на базе PDA, речевые браузеры и тактильные брайль-устройства.

Таблицы стилей, наоборот, применяются к конкретным носителям или группам носителей. Таблица, предполагаемая для использования с экраном, может функционировать при печати на принтере, но мало подходит для речевых браузеров.
Эта спецификация позволяет Вам определить устройства из широкого набора, в которых данная таблица стилей может быть применена. Это позволяет пользовательским агентам (ПА) исключить употребление неподходящих таблиц стилей. Языки таблиц стилей могут включать возможности описания в той же самой таблице зависимости от типа носителя.

Альтернативные стили У авторов может появиться желание предоставить пользователям различные способы просмотра документа. Например, создав таблицу стилей для компактного просмотра документов со шрифтом небольшого размера, или таблицу, определяющую более крупный шрифт для удобства чтения. Эта спецификация даёт авторам возможность определять основную таблицу стилей, а также альтернативы в зависимости от условий конечного пользователя и типа носителя. ПА должны давать пользователям возможность выбора их нескольких таблиц стилей или объединения этих таблиц. Возражения в связи с ухудшением параметров работы Некоторыми высказывается озабоченность в связи с ухудшением параметров работы, связанным с использованием таблиц стилей. Например, загрузка внешней таблицы стилей может задержать вывод документа. Такие ситуации возникают чаще, если «шапки» документов содержат большое количество информации о стиле.

В настоящее время предлагается для решения этой проблемы включать соответствующие инструкции непосредственно в каждый элемент HTML. Информация о представлении в этом случае всегда доступна для ПА при отображении конкретного элемента.

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

14.2 Добавление стиля в HTML

Примечание. Образец таблицы стилей HTML 4, включённый в [CSS2], показывает обычно приемлемую информацию по умолчанию для каждого элемента. Авторы и разработчики могут найти его вполне пригодным.

Документы HTML могут содержать правила таблиц стилей непосредственно в себе или импортировать таблицы стилей.

Любой язык таблиц стилей может быть использован в HTML. Простой язык может удовлетворить потребности большинства пользователей, а другие языки больше подходят для решения узкоспециализированных задач. В этой спецификации использован язык стилей «Cascading Style Sheets» ([CSS1]), сокращённо — CSS.

Синтаксис данных стиля зависит от языка таблицы стилей.

14.2.1 Установка языка по умолчанию для таблиц стилей

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

Авторы должны использовать элемент META для установки в данного документе языка по умолчанию для таблиц стилей. Для этого, например, автор должен поместить следующее объявление в HEAD своих документов:

Язык по умолчанию для таблиц стилей может быть также установлен в заголовках HTTP. Предыдущее объявление META эквивалентно объявлению в заголовке HTTP:

Content-Style-Type: text/css

ПА должны определять язык по умолчанию для таблиц стилей документа в такой последовательности (приоритет по убыванию):

1. Если какое-либо объявление META устанавливает «Content-Style-Type», это выражение определяет язык по умолчанию для таблиц стилей.
2. Иначе, если какое-либо объявление заголовка HTTP устанавливает «Content-Style-Type», тогда данное выражение определяет язык по умолчанию для таблиц стилей.
3. Иначе языком по умолчанию является «text/css».

Документы, содержащие элементы с установленным атрибутом style , но не определившие язык по умолчанию для таблиц стилей, являются некорректными. Авторские утилиты должны генерировать информацию о языке по умолчанию для таблиц стилей (обычно в объявлении META ) так, чтобы ПА не должны были обращаться к языку по умолчанию — «text/css».

14.2.2 Инлайн-стиль (внедрённый)

style = style [CN] Этот атрибут определяет стилевую информацию для данного элемента.

Синтаксис значений атрибута style определяется языком по умолчанию для таблиц стилей. Например, для инлайн-стиля [[CSS2]] используйте синтаксис блока объявлений, описанный в разделе 4.1.8 (без фигурных скобок-ограничителей).

Этот пример CSS устанавливает цвет и шрифт текста параграфа:

Aren't style sheets wonderful?

В CSS правильное объявление имеет форму «имя : значение» (с разделяющим двоеточием).

Для установки стилевой информации в нескольких элементах авторы могут использовать элемент STYLE .
Для достижения максимальной гибкости авторы должны определять стили во внешних таблицах стилей.

14.2.3 Информация о стиле в заголовках: элемент STYLE

%StyleSheet -- информация о стиле --> %i18n; -- lang, dir, для использования с названием элемента -- %ContentType; #НЕОБХОДИМ -- тип содержимого языка стилей -- %MediaDesc; #ПРЕДПОЛАГАЕТСЯ -- создан для использования с этим носителем -- %Text; #ПРЕДПОЛАГАЕТСЯ -- информативное название -- >

Начальный тег: необходим, Конечный тег: необходим

type = content-type [CI] Определяет язык стиля содержимого элемента и переопределяет язык по умолчанию для таблиц стилей. Язык таблиц стилей определён как тип содержимого (напр., «text/css»). Авторы обязаны указывать значение этого атрибута. Значение по умолчанию отсутствует. media = media-дескрипторы [CI] Определяет предполагаемый носитель для стилевой информации. Это может быть один media-дескриптор или список разделённых запятыми значений. Значение по умолчанию для этого атрибута — «screen».

Атрибуты, определённые в другом месте

Элемент STYLE позволяет разместить информацию стиля в «шапке» документа. HTML допускает любое количество элементов STYLE в разделе HEAD документа.

Синтаксис данных стиля зависит от языка таблиц стиля.

Некоторые реализации таблиц стиля могут допускать больший набор правил в элементе STYLE , нежели в атрибуте style . Например, при наличии CSS, правила могут быть объявлены в элементе STYLE для:

• всех объектов определённого элемента HTML (напр., все элементы P , все элементы H1 и т.д.);
• всех объектов элемента HTML, принадлежащих к определённому классу (т.е. тех, чей атрибут class установлен в некоторое значение);
• одиночных объектов элементов HTML (т.е. тех, чей атрибут id установлен в некоторое значение).

Правила иерархии и наследования стиля зависят от языка таблиц стилей.

Следующее объявление CSS STYLE помещает рамку вокруг каждого элемента H1 в документе и выравнивает их по центру страницы.

Чтобы эта информация стиля воздействовала только на элементы H1 определённого класса, мы изменим её так:

  H1.myclass  
 
Здесь наш стиль не действует
 

Наконец, чтобы ограничить область видимости стилевой информации до одного объекта H1 , установим атрибут id :

  #myid  
 
 
На этот H1 не действует
 

Хотя информация стиля может быть установлена почти для любого элемента HTML, два из них, DIV и SPAN , используются обычно так, чтобы не иметь семантики представления (кроме уровня блока и инлайн). В комбинации с таблицами стиля эти элементы позволяют пользователю расширять HTML, особенно при использовании атрибутов class и id .

В этом примере мы используем элемент SPAN для установки стиля шрифта нескольких слов в начале параграфа в малые прописные.

  SPAN.sc-ex  few words of this paragraph are in small-caps. 

  DIV.Abstract 
  

14.2.4 Типы носителя

HTML позволяет создавать документы, использующие преимущества тех носителей, где документы должны просматриваться (напр., графические дисплеи, телеэкраны, портативные устройства, речевые браузеры, тактильные брайль-устройства и т.д.). Устанавливая атрибут media , авторы дают ПА возможность выборочно загружать и использовать таблицы стилей. См. список распознаваемы media-дескрипторов.

Данное объявление относится к элементам H1 . При отображении на бизнес-совещании, все объекты будут голубого цвета. При печати — будут центрироваться.

  H1 H1

Здесь добавлены звуковой эффекты к якорю для использования в голосовом выводе:

Media-элемент представляет особый интерес при применении к таблице стилей, поскольку ПА может сэкономить время, запрашивая по сети только те таблицы, которые применяются непосредственно к текущему устройству. К примеру, речевые браузеры могут исключить загрузку таблиц стилей, созданных для визуального представления. См. также раздел media-зависимые каскады.

14.3 Внешние таблицы стилей

Авторы могут отделить таблицы стилей от основных документов HTML. Это даёт следующие преимущества:

• авторы и менеджеры Web-сайтов могут разделять использование таблиц стилей среди нескольких документов (и сайтов);
• авторы могут изменять таблицы стилей без изменения самих документов;
• ПА могут выборочно загружать таблицы стилей (в зависимости от media-дескриптора).

14.3.1 Основные и альтернативные таблицы стилей

HTML позволяет ассоциировать любое число внешних таблиц стилей с документом. Язык таблицы стилей определяет, сколько внешних таблиц стилей взаимодействует с документом (например, «каскадные» правила CSS).

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

Авторы могут определить одну из альтернативных таблиц стилей как . ПА должны использовать такую таблицу, если только пользователь не выбрал другую.

Авторы могут группировать несколько альтернативных таблиц стилей (включая основную авторскую) под одним . Если пользователь выбирает именованный стиль, ПА должен применить все таблицы стилей с этим именем. ПА не должны применять альтернативные таблицы стилей с другим именем стиля. В разделе спецификация внешней таблицы стилей объясняется, как именовать группу таблиц стилей.

Авторы также могут определить таблицы стилей, которые обязаны применяться ПА в дополнение к любой альтернативной таблице стилей.

ПА обязаны учитывать media-декскрипторы при использовании любой таблицы стилей.

ПА должны также давать пользователю возможность полностью отключить авторские таблицы стилей. В этом случае, ПА обязан не применять любую, постоянную или альтернативную, таблицу стилей.

14.3.2 Спецификация внешней таблицы стилей

Авторы определяют внешнюю таблицу стилей со следующими атрибутами элемента LINK :

• href указывает на расположение файла таблицы стилей. Значением href является URI;
• значение атрибута type указывает язык связанного ресурса (таблицы стилей). Это позволяет ПА избегать загрузки таблиц стилей для не поддерживаемого языка таблиц стилей;
• определить, является таблица стилей постоянной, основной или альтернативной:
  • чтобы сделать таблицу постоянной, установите атрибут rel в «stylesheet» и не устанавливайте атрибут title ;
  • чтобы сделать таблицу основной, установите атрибут rel в «stylesheet» и именуйте таблицу с помощью атрибута title ;
  • чтобы сделать таблицу альтернативной, установите атрибут rel в «alternate stylesheet» и именуйте таблицу с помощью атрибута title .

  ПА должен предоставлять пользователю возможность видеть список альтернативных стилей и выбрать из него. Значение атрибута title рекомендуется как название каждого пункта выбора.

  В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css:

  Установка атрибута title делает её авторской основной:

  Добавление ключевого слова «alternate» к атрибуту rel делает её альтернативной таблицей стилей:

  Дополнительную информацию о таблицах стилей см. раздел гиперссылки и внешние таблицы стилей.

  Авторы могут использовать элемент META для установки основной таблицы стилей документа. Например, чтобы установить основную таблицу стилей в «compact» (см. предыдущий пример), авторы могут включить следующую строчку в HEAD :

  Основная таблица стилей может быть специфицирована заголовками HTTP. Предыдущее объявление META эквивалентно заголовку HTTP:

  Default-Style: "compact"

  Если два или более объявления META или заголовка HTTP определяют основную таблицу стилей, самая последняя имеет приоритет. Заголовки HTTP появляются раньше, чем HEAD документа.

  Если два или более элемента LINK определяют основную таблицу стилей, первая таблица имеет преимущество.

  Основная таблица стилей, определённая в META или в заголовке HTTP, имеет преимущество перед таблицами, определёнными в элементе LINK .

  14.4 Каскадные таблицы стилей

  таблиц стилей, такие как CSS, разрешают объединять стилевую информацию из различных источников. Однако, не все языки таблиц стилей поддерживают каскадирование. Чтобы создать каскад, авторы определяют последовательность элементов LINK и/или STYLE . Стилевая информация каскадируется в том порядке, в котором элементы появляются в HEAD .

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

  В следующем примере мы определяем две альтернативные таблицы стилей с названием «compact». Если пользователь выберет стиль «compact», ПА обязан применить обе внешние таблицы стилей, также как и постоянную таблицу стилей «common.css». Если пользователь выберет стиль «big print», только альтернативная таблица «bigprint.css» и постоянная «common.css» будут применены.

  Пример каскада, который использует элементы LINK и STYLE .

     p.special

  14.4.1 Media-зависимые каскады

  Каскад может включать таблицы стилей, применяемые для разных типов носителя. И LINK , и STYLE могут использоваться с атрибутом media . ПА в этом случае отвечает за фильтрацию тех таблиц, которые не применяются для текущего носителя.

  В следующем примере мы определяем каскад, где таблица «corporate» даётся в нескольких версиях: одна для печати, другая для экрана и третья для речевых браузеров (используемая, как говорят, при чтении email в автомобиле). Таблица «techreport» применима ко всем носителям. Правило цвета, определённое элементом STYLE , используется для печати и экрана, но не для речевого представления.

       p.special

  14.4.2 Наследование и каскадирование

  Если ПА хочет отобразить документ, ему нужно найти значения для свойств стиля, например, семейство шрифтов, стиль шрифта, размер, высота строки, цвет текста и так далее. Точный механизм зависит от языка таблиц стилей, но следующее описание в целом применимо:

  Механизм каскадирования применяется, если несколько правил стиля применяются непосредственно к элементу. Этот механизм позволяет ПА сортировать правила по специфике, чтобы определить, какое правило применить. Если не найдено ни одного правила, следующий шаг зависит от того, может или нет наследоваться это свойство стиля. Не все свойства могут наследоваться. Для этих свойств язык таблиц стиля предоставляет значения по умолчанию для того, чтобы использовать их при отсутствии явных правил для конкретного элемента.

  14.5 Скрытие данных стиля от пользовательских агентов (ПА)

  Некоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам прятать содержимое элементов STYLE от несоответствующих ПА.

  Этот пример иллюстрирует, как в CSS закомментировать содержимое элементов STYLE так, чтобы быть уверенным наверняка, что несоответствующие ПА не будут рассматривать его как текст.

  14.6 Ссылки на таблицы стилей в заголовках HTTP

  Этот раздел относится только к тем ПА, которые соответствуют версиям HTTP, определяющим поле заголовка Link. Обратите внимание, что HTTP 1.1, как определено в [RFC2616] ,не содержит поле заголовка Link (см. раздел 19.6.3).

  Менеджеры Web-сервера могут найти удобным сконфигурировать сервер так, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link имеет то же действие, что и элемент LINK с теми же атрибутами и значениями. Множественные заголовки Link соответствуют множественным элемента LINK , появляющимся в том же порядке. Например:

  Link: ; REL=stylesheet

  Можно определить несколько альтернативных стилей, используя множественные заголовки Link, и использовать затем атрибут rel для определения стиля по умолчанию.

  В этом примере «compact» применяется по умолчанию, поскольку опущено ключевое слово «alternate» для атрибута rel .

  Link: ; rel="stylesheet"; title="compact" Link: ; rel="alternate stylesheet"; title="big print"

  Это должно также работать, если документы HTML пересылаются по email. Некоторые агенты email могут изменять порядок заголовков [RFC822]. Чтобы защитить каскадный порядок таблиц стилей, определённый заголовками Link, авторы могут использовать конкатенацию заголовков для сращивания нескольких объектов одного поля заголовка. Знак кавычек нужен только тогда, когда значения атрибутов содержат пробелы. Используйте мнемоники SGML для ссылки на символы, которые недопустимы в заголовках HTTP или email или могут быть изменены при прохождении через шлюзы.

  Элементы LINK и META , ожидаемые заголовками HTTP, определены как появляющиеся явно перед каким-либо элементом LINK или META в HEAD документа.

  Каскадные таблицы стилей

  Каскадные (многоуровневые) таблицы стилей — cascading style sheets (CSS) — это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.
  Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.

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

  CSS предполагает 3 типа таблиц стилей — встроенные, внедренные (внутренние) и связанные (внешние).

  Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками и по сей день.

  Что значит слово «каскадный»?
  Термин «каскадный» означает, что в одной странице HTML могут использоваться разные стили. Броузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей.
  Это означает, что вы можете использовать все три типа стилей, и броузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц — с помощью встроенных стилей.
  Другой аспект каскадирования — наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге , то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.

  Методы и синтаксис

  Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.

  Методы

  Существует три метода для применения таблицы стилей к документу HTML:

  • Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
  • Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега , помещенного внутри раздела страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.
  • Связанный (Linked или External). Связанная таблица стилей — мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение .css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.

  Синтаксис таблицы стилей

  • Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.
  • Свойство (Property). Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель.
  • Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.
  • Описание (Declaration). Свойства и значения объединяются, образуя описание.
  • Строка (Rule). Указатель и описание образуют строку

  selector + declaration = rule
  Р		helvetica;>
  |	|	|
  selector	property	value
  |	|
  ——————————
  declaration

  Определение правил CSS

  Итак, какскадная таблица стилей — это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:

  body

  Будьте внимательны! По умолчанию цвет шрифта — черный! Не следует претендовать на лавры Малевича! Ваш «Черный квадрат» Эрмитаж не купит!

  В данном случае объявлено правило форматирования тега body, а именно — свойству стиля background присвоено значение black (черный). В результате применения этого правилацвет фона всего документа изменится на черный.

  Обратите внимание: в таблице стилей теги HTML не заключаются в круглые скобки.

  Свойства CSS должны находиться в фигурных скобках.
  Для каждого тега HTML можно указать не одно, а несколько свойств стиля.

  Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).

  body

  Формат самого правила не имеет значения, главное — правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:

  body

  Одно и то же правило сстиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:

  body,td,h1

  Встроенный стиль

  Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

   
  The text in this line will display as 12 point text using the Courier New font.
   

   
  The text in this line will display as 18 point text using the Arial font.
   

  Посмотрим на результат:

  The text in this line will display as 12 point text using the Courier New font.

  The text in this line will display as 18 point text using the Arial font.

  Mожно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили.
  Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги (division — раздел) и (промежуток).
  Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между и состоит в том, что создает принудительный разрыв строки, a — нет.
  Следовательно, нужно использовать для изменения стиля любой части текста, меньшей абзаца.

  Вот пример работы тега :

  AII of the text within this section is 18 point Garamond.

   This text appears in the color red, with no line break after the closing span tag and the rest of the text.

  This text appears in the color red, with no line break after the closing span tag and the rest of the text.

  Хотя встроенные стили довольно полезны — гораздо лучше разрабатывать стандартные стили для всего Web-узла и затем применять их, используя внедренные или связанные таблицы стилей.
  Возврат в начало страницы Возврат на главную страницу сайта

  Внедренный стиль

  Внедренные стили используют тег

  Рассмотрим пример внедренного стиля:

      BODY < background: #FFFFFF; color: #000000; >H1 < font: 14pt verdana; color: #CCCCCC;>P A

  Как видно из примера, приведенного выше, таблица стилей теперь отличается от кода стандартной страницы HTML, но все же логику проследить нетрудно. В нашем случае для основной части страницы (body) указаны цвет фона, цвет текста и верхнее, левое и правое поля в дюймах.
  Для заголовка первого уровня (HI) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей — вы можете задавать размеры не только в пунктах, но и пикселях (рх), процентах (75%) и сантиметрах (cm).

  Существует и несколько новых единиц измерения, самой примечательной из которых является m.
  В отличие от пунктов или пикселов, представляющих абсолютные размеры различных объектов, 1m — ширина строчной буквы m в том шрифте о котором идет речь. Правда, большинство броузеров об этом не догадываются и поэтому определяют 1m просто как размер, заданный по умолчанию. Например, в Internet Explorer 4.0 и выше для гарнитуры Verdana размер 1m соответствует 12 пунктам. Точнее сказать «соответсвует значению, которое пользователь установил в качестве размера шрифта по умолчанию. Таким образом, если установить в броузере размер шрифта по умолчанию 16 пунктам, то и 1m тоже станет равна 16 пунктам, и все остальные размеры будут соответственно увеличены.

  Но! Не все броузеры способны понимать эти новые единицы измерения. Я попробовала применить новую единицу измерения m во внедренной таблице стиля страницы «Дизайн на основе правил» (webrules.htm). Броузер Internet Explorer 5.0 показал эту страницу таким образом, как она задумывалась. Когда же просмотр страницы осуществлялся броузером Internet Explorer 3.0, результат был плачевным — несколько черных штрихов и никакого текста.

  Однако, вернемся к нашему примеру.
  Другой интересный момент этой таблицы стилей — различие стилей шрифтов заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой.
  В теге якоря (А) можно увидеть еще один очень удобный элемент синтаксиса. Строка text-decoration: none удаляет подчеркивание ссылок, так что результат выглядит чисто и привлекательно.

  А теперь посмотрим как этот пример внедренного стиля будет выглядеть на экране. Щелкните здесь!

  Связанные таблицы стилей

  Связанные (linked), или внешние (external), таблицы стилей являются расширением понятия внедренных стилей.Используется тот же самый код, что и для внедренной таблицы стилей, но он помещается в отдельный документ (файл с расширением .css). После этого с этим документом (файлом) связываются все страницы, к которым необходимо применить данный стиль.

  Вот как выглядит пример связанной таблицы стилей:

   BODY < background: #ffffcc; color: #000000; >P < font-family : sans-serif; font-style : italic; font-size : 16pt; color: #006633; >H1

  Теперь сохраним этот документ как отдельный файл. Назовем его style-l.css и поместим в папку таблиц стилей с именем style.
  С этим документом любое количество страниц HTML. Для этого нужно использовать между тегами и следующую конструкцию:

  Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле style_1.css. Результаты применения стилей показаны здесь.

  Код этой страницы выглядит следующим образом:

      
  Старинная студенческая песня
   Поднявши меч на наш союз 
  достоин будет худшей кары, 
  и я за жизнь его тогда 
  не дам и ломанной гитары. 
  Как вожделенно жаждет век 
  нащупать брешь у нас в цепочке. 
  Возьмемся за руки друзья, 
  чтоб не пропасть поодиночке. 
  Среди совсем чужих пиров 
  и слишком ненадежных истин, 
  не дожидаясь похвалы, 
  мы перья белые почистим. 
  Пока безумный наш султан 
  сулит дорогу нам к острогу, 
  возьмемся за руки друзья, 
  возьмемся за руки, ей-богу. 
  Когда ж придет дележки час, 
  не нас калач ржаной поманит, 
  и рай настанет не для нас, 
  зато Офелия помянет. 
  Пока ж не грянула пора 
  нам отправляться понемногу, 
  возьмемся за руки друзья, 
  возьмемся за руки, ей-богу. Это стихотворение Булата Окуджавы, ставшее уже классикой. 
  Вернемся?   

  Здесь важно помнить о смысле концепции каскадирования. Если вам нужны 10 страниц HTML, на которые глобально воздействует эта таблица стилей, вы можете ее применить. Затем, если нужно внести небольшие корректировки в отдельные страницы, можно либо внедрить в эти страницы дополнительные стили, либо использовать встроенный стиль.

  Далее к коду был добавлен внедренный стиль, и вот что получилось. — встроенный стиль применяется поверх связанного стиля

  Обязательно просматривайте страницы с таблицами стилей в соответствующем броузере — Internet Explorer 3.0 и выше и Netscape 4.0 и выше. В противном случае все ваши стили могут исчезнуть! Следует всегда тестировать такие страницы без таблицы стиля (используйте более старый броузер или просто временно измените название таблицы стилей, чтобы броузер не мог ее найти) и проверять, чтобы они выглядели приемлемо.
  Возврат в начало страницы Возврат на главную страницу сайта

  Поддержка шрифтов в таблицах стилей

  Один из наиболее привлекательных аспектов таблиц стиля — это возможность применения различных шрифтов к определенной странице без необходимости использовать многочисленные теги . Таблицы стилей позволяют выбирать ряд шрифтов и применять их к конкретным разделам страницы типа номера заголовка, абзаца или другого фрагмента. Однако вместо стандартного тега HTML используется атрибут таблицы стилей font-family. Вы можете добавлять в этот тег многие атрибуты либо использовать классы и группировку, чтобы реализовать всю мощь средств работы со шрифтами с помощью таблиц стилей.
  Практическая реализация поддержки шрифтов в таблицах стилей аналогична проблемам, с которыми пользователи сталкиваются при использовании тегов и соответствующих атрибутов. Конкретный шрифт д олжен быть установлен на том компьютере, где происходит просмотр страницы. Как и тег , таблицы стилей позволяют указывать любое число шрифтов, чтобы увеличить вероятность того, что броузер клиента подберет нужный шрифт из списка. Например, если у них не будет шрифта Century Schoolbook, то, возможно, найдется Garamond и т. д. Хотя сами эти шрифты различаются довольно значительно, их семейства достаточно похожи, чтобы считать, что они выполняют сходные дизайнерские задачи.
  Таблицы стилей распознают пять семейств шрифтов:Serif (С засечками) , Sans Serif (Рубленые),Script (Рукописные), Monospace (Моноширинные), Decorative (Декоративные).
  Более подробно о шрифтах вы можете прочесть здесь.
  Вы можете указывать несколько названий шрифтов в любом теге HTML, используя встроенные, внедренные и связанные таблицы стилей.
  Напрмер, на этой странице используется внедренная таблица стилей, и для заголовка первого уровня задан:

  Если броузер не сможет найти на компьютере клиента первые три шрифта, он поставит вместо них первый из доступных рубленных шрифтов семейства sans-serif и будет его использовать.

  Увы! На практике, когда в качестве первого шрифта был указан шрифт Verdana, а отображение на экран осуществлялось броузером Internet Explorer 3.0 вместо заголовка «Каскадные таблицы стилей» я получила абракадабру.

  Задание свойств и значений шрифта

  У шрифтов есть очень много свойств, которые можно изменять, и очень много значений, которые могут принимать эти свойства.
  Как и для стандартных шрифтов HTML, можно задавать свойства для управления размером и цветом. Однако для шрифтов HTML нельзя изменять насыщенность и тип шрифта, а также высоту строки или интерлиньяж (расстояние между отдельными строками текста). Кроме того, доступные в таблицах стилей методы управления размером шрифта намного превосходят уровень, предлагаемый стандартами HTML.
  Цвет
  Таблицы стилей используют стандартные методы работы с цветами броузера. Другими словами, для получения оптимальных результатов используйте шестнадцатиричный (и лучше всего, поддерживаемый броузерами) цвет. Вы можете добавлять цвет, как и другие свойства стиля, в любой подходящий тег HTML для встроенных, внедренных и связанных стилей.
  Например, при описании цвета заголовка первого уровня указоно значения color:#333399;, в результате мы видим заголовок «Каскадные таблицы стилей» темно-синего цвета.
  Насыщенность
  Насыщенность (weight) показывает толщину шрифта. Например, для гарнитуры Arial существуют такие разновидности: жирный (black), полужирный (bold), светлый (light) и т. д.

  Для шрифтов существуют различные начертания. Если вы не уверены на сто процентов, что на компьютере клиента установлен определенный шрифт, разумнее будет применять начертание, доступное для всех шрифтов. Существует только одна (не считая нормальной) стандартная насыщенность, которая доступна для большинства шрифтов. Это — полужирное начертание!

  Вот пример применения встроенного начертания:

   We are an intelligent species and the use of our intelligence quite properly gives us pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.
   

  Полужирное начертание применяется к абзацу.

  We are an intelligent species and the use of our intelligence quite properly gives us pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.

  Курсивное и полужирное начертания должны использоваться экономно. Их функция — выделение. Обычно не следует использовать полужирный или курсив для длинных фрагментов основного текста.

  Размер
  Размер шрифта в таблицах стилей можно определять, используя пункты ( points), пиксели (pixels), дюймы (inches), сантиметры (centimeters), миллиметры (millimeters) и пики (picas), а также используя новые единицы измерения. Для Web-дизайнеров естественно выбирать пункты или пиксели, хотя все будет зависеть от ваших вкусов.

  Использование единиц, отличных от пунктов, может вызывать серьезные проблемы. Если вместо пунктов используются пиксели, то хотя текст, размер которого задан в пикселях, будет виден в броузерах с поддержкой таблиц стилей (типа Internet Explorer 3.0 и выше или Netscape 4.0 и выше), он может не выводиться на печать!

  • Text-decoration. Этот параметр полезен для отключения подчеркивания ссылок. Для этого нужно просто задать для параметра text-decoration значение none (отсутствует). Другие возможные значения — underline (подчеркивание), italic (курсив) и strikethrough (перечеркивание).
  • Line-height. Это то же самое, что интерлиньяж (leading). Данный параметр определяет высоту каждой строки текста — по существу, расстояние между строками.
  • Background. Этот параметр помещает текст на цвет или изображение. Здесь используются атрибуты color или url (адрес), где адрес указывает расположение файла изображения. Внимание! Этот параметр может быть назначен не только тегу , но и любому тегу или фрагменту текста, чтобы выделить нужную область на странице.

  Классы и группировка

  Два других интересных аспекта таблиц стилей — это классы и группировка.
  Классы (class) определяют способ разбиения стилей на очень точные части. Всякий раз, когда вы хотите, чтобы определенный фрагмент текста как-то отличался от остальных, вы можете создать собственный тег HTML. Каждый тип форматирования текста, который вы определяете, называется стилевым классом (style class).

  За стилевым классом в таблице стилей закрепляется имя. Это имя задается как обычное имя, но с точкой в качестве первого символа.

  Предположим, что в документе вам нужны два различных вида заголовков H1. Можно создать стилевой класс для каждого из них, помещая следующий код в таблицу стилей:

   Н1.serif < font: 34pt "Times New Roman", Times, serif; color: #DC143C;>H1.sans

  Для выбора между двумя стилями класса в теге (аналогичные правила действуют и для других тегов, имеющих описание а таблице стилей) используется атрибут class=имя_стиля.
  Обратите внимание — здесь имя стиля употребляется без точки.
  Например:

  Wisdom

  «Do not fear your enemies. The worst they can do is kill you. Do not fear friends. At worst, they may betray you. Fear those who do not care; they neither kill nor betray, but betrayal and murder exists because of their silent consent.» — Bruno Jasienski.

  More Wisdom

  «Young love is a flame; very pretty, often very hot and fierce, but still only light and flickering. The love of the older and disciplined heart is as coals, deep burning, unquenchable.» — Henry Ward Beecher.

  Слово Wisdom отображается шрифтом Times New Roman, 34 пункта темно-красного цвета (на тех компьютерах, где есть поддержка таблиц стилей броузерами), а слова More Wisdom отображаются шрифтом Arial, 18 пунктов темно-оранжевого цвета (при этом задано выравнивание заголовка посередине страницы). Для текста в промежутках между этими заголовками по умолчанию используетcя шрифт Times, поскольку явно не указал шрифт для этих фрагментов. Поэтому броузер выбирает собственный заданный по умолчанию основной шрифт.
  Мудрые мысли написаны на хорошем английском языке, и принадлежат действительно мудрым людям. В качестве упражнения попробуйте сделать перевод.

  В HTML-коде запись этих «Мудростей» выглядит так:

    "Do not fear your enemies. The worst they can do is kill you. Do not fear friends. At worst, they may betray you. Fear those who do not care; they neither kill nor betray, but betrayal and murder exists because of their silent consent." - Bruno Jasienski. 
  "Young love is a flame; very pretty, often very hot and fierce, but still only light and flickering. The love of the older and disciplined heart is as coals, deep burning, unquenchable." - Henry Ward Beecher.

  Группировка (grouping) состоит в объединении нескольких свойств и значений стилей. При этом возникают более жесткие правила для форматирования. Ниже приведен пример обычного класса:

  Это означает, что все абзацы класса g будут отображаться шрифтом Arial, 22 пункта, с интерлиньяжем 14 пунктов. Если применить к этому классу группировку, то получится следующее определение:

  Страница будет отображаться одинаково в обоих случаях. Обратите внимание на то, что сначала указываются значение для размера шрифта, высота строки после наклонной черты, а затем идет название шрифта. При группировке всегда требуется правильный синтаксис выражения. Попробуем воспользоваться пределением абзаца класса g.

  ПРИМЕР абзаца класса g, к которому применена группировка.

  Краткий обзор способов размещения элементов страницы

  Таблицы стилей могут помогать в создании макета страницы, предоставляя широкие возможности выравнивания элементов страницы и управления полями. Выравнивание текста выполняется с помощью свойства text-align. Возможные значения left, right, center и justify.

  Посмотрим, как это выглядит.

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

  Для управления полями Web-страницы используются четыре свойства: margin-top, margin-bottom, margin-left и margin-right.
  Как и все свойства CSS, они могут применяться к любому логическому объекту. Обычно для управления полями используются объекты BODY и Р (paragraph — абзац). Для указания значений полей можно использовать разные единицы измерения: пиксели, пункты, сантиметры, дюймы и проценты.
  Для справки — стандартные макеты страниц HTML обычно измеряются в пикселях.

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

  На странице Пример создания 3-D эффекта приводится пример, в котором использовалось отрицательное значение полей margin-topдля создания графического эффекта без употребления графических средств.

  Пример создания 3-D эффекта

  Рассмотрим пример, создающий эффект, который без задания стиля можно было бы достичь только с помощью графики. В процессе создания Web-страницы наложим один текст на другой.
  Эта возможность частичного перекрытия текста часто используется в дизайне реальных страниц.
  Сначала посмотрим на результат, а затем обсудим как он получен.

        BODY .тень < color: #DBDBDB; text-align : right; font : lighter "Times New Roman", Times, serif; margin-top : 30px; font-size : 270px; line-height : 270px; >.основа < color: red; font : 900 220px "Times New Roman", Times, serif; margin-top : -230px; line-height : 250px; >.слой1 < color: black; margin-top : -130px; font-weight : normal; font-size : 65px; line-height : 65px; font-family : Arial, Helvetica, sans-serif; >.слой2 
  Пример наложения текстов друг на друга, реализованный с помощью тега 
  и CSS. В результате получаем 3-D эффект.
    
   
   
  Мы
   
  Мы
   
  сделали это без всякой графики
   
  используя только каскадные таблицы стилей
   
   
   
    
  Возврат к рассмотрению вопроса о каскадных таблицах стилей   

  В данном примере тег применяется для выделения фрагмента HTML-документа. Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект.
  Атрибут class этого тега позволяет сослаться на таблицу стилей, и таким образом задать стиль представления текста, расположеного между тегами и .

  Обратите внимание на то, как в таблице стилей определяется стиль — набору свойств в фигурных скобках присваивается имя, перед которым ставится точка.

  В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга.
  Сначала выводится слой тень, на него накладывается слой основа, а затем слой1 и слой2.
  Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тегом .
  Перекрытие слоев обеспечивается применением отрицательных значений свойста margin-top (отступ сверху).

  В рассмотренном нами примере были использованы следующие свойства:

  margin-top	отступ сверху
  color	цвет
  font-size	размер шрифта
  font-family	семейство шрифтов
  font-weight	степень «жирности» шрифтов
  line-height	высота строки

  Запомните — используя отрицательные значения свойста margin-top, можно наложить один текст на другой.

  Позиционирование элементов

  Рассмотрим вопрос позиционирования элементов на странице.
  На этом сайте разбирался вопрос о расположении элементов на странице путем использования фреймов и таблиц.
  Для перекрытия элементов приходилось применять особые ухищрения, как в примере создания 3-D эффекта.

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

  • left — для задания расстояния в пикселах от левого края окна (х-координата);
  • top — для задания расстояния в пикселах от верхнего края окна (у-координата);
  • z-index — для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

  Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем двухмерная плоскость.

  Кроме свойств-координат, для позиционирования элементов понадобится свойство position. Это свойство в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна.
  Свойство position может принимать три значения:

  • absolute — заданные свойства left и top поставят элемент в место с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент).
    Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тэга внутри HTML-документа.
  • relative — элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию.
    Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative, а свойства координат left и top — нулевые значения.
    Ненулевые значения свойств left и top осуществляют сдвиг элемента относительно исходного положения.
  • static — элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

  Посмотрим пример помещение текста на определенное место на странице и назначение ему красного цвета.

          
  Это - позиционированный текст
   
  Текст, созданный без свойства позиционирования
   
   Возврат к рассмотрению вопроса о каскадных таблицах стилей
     

  Стиль текста был задан в теге заголовка первого уровня с помощью атрибута STYLE. В дальнейшем тег применен еще раз, но стиль, указанный в атрибуте STYLE, уже не применяется.
  Второй текст появляется там, где он и должен появиться, как если бы первого тега не было совсем.

  Верхний текст не позиционирован, а нижний — позиционирован.
  Дело в том, что в первом случае использования тега элемент позиционировался индивидуально с помощью атрибута STYLE, а во втором случае специального позиционирования не осуществлялось и броузер расположил элемент так, как он это должен был сделать по умолчанию.

  Статические фильтры

  Фильтры — это эффекты изменения внешнего вида текста и графики на странице.
  Иначе, фильтр — это трансформация исходного изображения по определенным правилам.

  Существуют статические и динамические фильтры.
  Статические фильтры просто изменяют внешний вид элемента. Динамические фильтры позволяют изменить графический элемент со скоростью, задаваемой пользователем. Работа динамических фильтров основана на сценариях.

  Статический фильтр задается как свойство в таблице стилей.

  filter: название_фильтра (параметр1,параметр2. параметр№)

  Параметры не обязательны.

  В версии 4 языка HTML имеется 14 статических фильтра.

  • Blur — эффект размытости
  • Fliph — горизонтальное отражение картинки или текста
  • Flipv — вертикальное отражение картинки или текста
  • Wave «волнистое» искажение картинки или текста
  • Xray — изображение только контура объекта
  • графика и текст без фильтра;
  • графика и текст с фильтром Flipv;
  • графика и текст с фильтром Fliph;
  • графика и текст с фильтром Blur.

  Обратите внимание: фильтр Blur, примененый к тексту создает эффект трехмерности — создается впечатление отбраываемой тени.

  Посмотрим еще один пример использования статических фильтров. . В данном случае применение фильтра Xray создает эффект негатива «картинки», а также изменяет цвет шрифта текста. Фильтр Wave создает не просто «волнистое» искажение картинки — ее просто не видно за этими полосками! Зато текст, обработанный спомощью этого фильтра стал пестреньким (по цвету) и очень миленьким. Не правда ли?

  Инструментальные средства для работы c CSS

  Основную информацию о каскадных таблицах стилей можно найти на следующих web-сайтах:

  Учебник Малдера (Mulder) по каскадным таблицам стилей	http://webmonkey.com/authoring/stylesheets
  Справочник по совместимости каскадных (многоуровневых) таблиц в журнале Webreview.	http://style.webreview.com
  Спецификация каскадных (многоуровневых) таблиц стилей	http://www.w3.org/Style/CSS

  Похожие публикации:

  1. Как в case задать диапазон
  2. Как в qt creator подключить русский язык
  3. Как добавить сертификат в доверенные google chrome
  4. Как создать кнопку в pygame