HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

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

div[align] { font-style: italic }
div[align=left] {font-style: italic }
div[title~="bibliography"] { font-size: smaller }
div[lang|="en"] {color: green }

Первый пример – самый простой. Он выделяет курсивом текстовое содержимое только тех тегов <div>, которые имеют атрибут align, независимо от значения этого атрибута. Второй пример чуть сложнее. Он затрагивает только те теги <div>, у которых атрибут align имеет значение left.

Третья строчка относится к тегам <div>, чей атрибут title содержит слово bibliography, отделенное одним или несколькими пробелами. Частичное совпадение снова не считается. Если бы вы указали div[title~="a"], стиль относился бы только к тем тегам <div>, у которых атрибут title содержит букву «а», отделенную пробелами или стоящую
в начале или конце названия.

Последний пример определяет теги <div>, у которых атрибуту lang присвоен список слов, разделенных дефисами и начинающихся на «en». Под это условие подходят такие атрибуты как lang=en, lang=en-us и lang=en-uk.

Вы можете сочетать универсальный селектор с селекторами атрибутов, чтобы вашему определению соответствовал любой элемент с указанным атрибутом. Например:

*[class=comment] { display: none }

Этот селектор спрячет все элементы документа, у которых атрибут class имеет значение comment.

Netscape, Firefox, Opera и другие современные броузеры поддерживают селекторы атрибутов. По неизвестным причинам Internet Explorer этого не делает.

Стандарт CSS2 определяет дополнительные конструкции селекторов, кроме уже известных, составляемых при помощи запятых и пробелов. Следующие примеры допустимых селекторов иллюстрируют это утверждение:

* {color: purple; font: ZapfDingBats}
ol > li {font-size: 200%; font-style: italic}
h1 + h2 {margin-top: +4mm}

В первом примере звездочка, универсальный селектор, указывает, что стилевое правило должно быть применено ко всем элементам документа, так что любой текст в нем должен быть представлен символами набора ZapfDingBats.1 Во втором примере устанавливаются отношения типа дочерний/родительский, в данном случае между элементами
упорядоченного списка.

Третий пример иллюстрирует тип смежного селектора, который относится к тегу, непосредственно следующему за другим тегом в документе. В этом случае всякий раз, когда за заголовком уровня 1 непосредственно стоит заголовок уровня 2, между ними увеличивается вертикальный интервал.

Обычно поддерживающие стили броузеры применяют определенные на уровне документа или встроенные стили к тегам везде, где они обнаруживаются в тексте документа, безотносительно к контексту. Однако стандарт CSS2 определяет способ применения стиля только к тегам, находящимся в определенном контексте, например содержащим
ся внутри другого тега.

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

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

ol li {list style: upper roman}
ol ol li {list style: upper alpha}
ol ol ol li {list style: decimal}
ol ol ol ol li {list style: lower alpha}

Следуя приведенной таблице стилей, поддерживающий стили броузер, встречая тег <li>, вложенный в один тег <ol>, применяет значение upper roman для свойства list-style тега <li>. Когда тот же броузер видит тег <li>, вложенный в два тега <ol>, он использует значение upper-alpha свойства list-style. Вложите тег <li> в три и четыре тега <ol>, и вы увидите соответственно decimal и lower-alpha стили нумерации.

Подобным образом можно устанавливать некий стиль только для тегов, находящихся в определенном контексте. Следующее определение стиля, например, наделит красным цветом содержимое только тех тегов логического подчеркивания (<em>), которые встречаются внутри заголовков первого уровня (в тегах <h1>), и никаких других:
h1 em {color: red}

Если существует противоречие между двумя контекстными стилями, более специфический контекст побеждает.

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

h1 em, p strong, address {color: red}

означает, что вы увидите красный цвет всюду, где тег <em> содержится в теге <h1> или тег <strong> появляется внутри тега <p>, а также в содержимом тега <adress>.

Для того чтобы было применено контекстное правило, последовательность вложений не обязана точно совпадать с контекстным селектором. К примеру, если тег <strong> вложен в тег <ul>, входящий, в свою очередь, в тег <p>, он все еще подчиняется контекстному правилу p strong, определенному выше. Если некоторое вложение тегов подходит для
применения нескольких стилевых правил, употребляется более специфичное. В частности, если вы определили два контекстных селектора:

p strong {color: red}
p ul strong {color: blue}

и использовали в документе последовательность <p><ul><strong>, будет применено второе, более специфическое, правило, и содержимое тега <strong> будет синим.

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

h1, h2, h3, h4, h5, h6 {text align: center}

делает в точности то же, что и:

h1 {text-align: center}
h2 {text-align: center}
h3 {text-align: center}
h4 {text-align: center}
h5 {text-align: center}
h6 {text-align: center}

Оба стилевых определения предлагают броузеру центрировать содержимое заголовков уровней 1–6. Для большинства авторов первый вариант легче набрать, понять и изменить. И он требует меньше времени и затрат других ресурсов при передаче по сети, хотя результат тривиален. Определяйте стили так, как вам удобнее. Вы не обязаны исполь
зовать множественные селекторы.

Стилевое правило состоит, по меньшей мере, из двух основных частей: селектора, так называется элемент разметки, который подчиняется этому правилу, следующих за ним двух фигурных скобок ({}) и заключенного в этих скобках списка пар вида свойство:значение (property:value), элементы которого разделяются точками с запятой:

selector {property1:value1; property2:value1; …}

В частности, мы могли определить цвет содержимого всех заголовков уровня 1 в нашем документе, написав:

h1 {color:green}

В этом примере h1 – это селектор и в то же время название элемента «заголовок уровня 1», color – свойство стиля, а green – значение. Просто и ясно.

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

selector {property3:value1 value2 value3}
selector {property4:value1, value2, value3}

Например, в следующем случае фон будет черным, а не белым или серым, даже если вы укажете белый и черный цвета в стилевом правиле:

body {background: white black}

Современные поддерживающие стили броузеры игнорируют регистр букв в любом элементе стилевого правила. Так что H1 и h1 – это один итот же селектор, а COLOR, color, CoLOR и cOLor – эквивалентные свойства. Когда то требовалось, чтобы HTML авторы записывали имена селекторов заглавными буквами, например H1, P и STRONG. Это и сейчас принято делать и так пишется в принадлежащем W3C CSS2 документе.

Однако действующие стандарты настаивают, особенно для документов, соответствующих XML, чтобы названия элементов записывались с применением тех же регистров, что использовались в их DTD. Например, в XHTML названия элементов (скажем, h1, strong) вводятся строчными буквами, так что их CSS2 селекторы тоже должны записываться строчными буквами. Мы придерживаемся этого последнего соглашения.

Любое допустимое название элемента (имя тега за вычетом атрибутов и заключающих скобок < и >) может быть селектором. В список селекторов можно включать более чем одно имя тега.

Можно импортировать несколько внешних таблиц и комбинировать их с определениями стилей на уровне документа и тега разными способами. Их эффекты складываются. Можно, например, задать тип шрифта для тега <h1> из нашего примера во внешней таблице, в то время как для его отображения будет использоваться стиль из определений на уровне документа.

Эффекты таблиц стилей не накапливаются, однако из ряда стилей, которые, возможно, определяют различные значения для одного и того же свойства (цвет содержимого тега <h1>, например), всегда существует один, обладающий приоритетом. Его можно найти, следуя правилам, перечисленным ниже, и действуя по порядку.

Ранжируем по источнику
Стиль, определенный «ближе» к тегу, имеет приоритет над установленными с «большего расстояния». Так, встроенные в тег стили обладают большим приоритетом, чем определенные на уровне документа, которые, в свою очередь, приоритетнее действия внешних таблиц.

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

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

Если стилей все еще несколько, ранжируем их по порядку вхождения
Последнее описание преобладает над всеми предыдущими.

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

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

Тем не менее мы советуем просто спасаться бегством от одноразовых, встроенных в документ, локализованных эффектов, достигаемых, скажем, тегом <font> или атрибутом color. Они сделали свое дело, их время ушло. Наступила пора вернуть (безболезненно!) последовательность и систематичность в представление документов. Используйте стили. Это стезя HTML.

Комментарии в теге <style> только приветствуются, как и во внешних таблицах стилей, но вы должны обращаться с ними не так, как с комментариями языка HTML. Таблицы стилей – это не HTML. Лучше выделяйте комментарии, открывая их последовательностью символов /* и закрывая */. Используйте эти правила оформления комментариев как на уровне документа, так и во внешних таблицах стилей. Комментарии нельзя вкладывать друг в друга.

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

На первый взгляд может показаться, что способы присоединения таблиц стилей, использующие тег <link> и директиву @import, эквивалентны и применяют различный синтаксис для достижения одной и той же цели. Это так, если в документе только один тег <link>. Когда их больше, в игру вступают специальные правила CSS2.

Когда в документе содержится один тег <link>, броузер должен загрузить стили из таблицы, на которую ссылается тег, и в соответствии с ними провести форматирование, учитывая, что при конфликте установки на уровне документа и встроенные стили отменяют внешние определения. Если в документе содержатся два и более тегов <link>, броузер должен представить пользователю список таблиц стилей, на которые ссылаются теги. Пользователь выбирает таблицу, которую броузер загружает и применяет при форматировании документа. Остальные таблицы из тегов <link> при этом игнорируются.

Если речь идет об @import, то, напротив, всякий распознающий стили броузер должен слить множество указанных в директивах таблиц в один набор стилевых правил для документа. При возникновении каких либо взаимных противоречий приоритет имеет последняя импортированная таблица. Следовательно, если внешняя таблица стилей
gen_styles.css предлагает броузеру отобразить содержимое тега <h1> синим курсивом, а spec_styles.css настаивает на красном цвете текста того же тега, то содержимое будет отображено красным курсивом. И если впоследствии мы определим для тега <h1> другой цвет, скажем желтый, на уровне документа, тег <h1> будет желтым и наклонным. Каскадный эффект. Понятно?

На практике популярные броузеры обращаются с таблицами стилей, присоединенными с помощью тега <link>, так же, как с импортированными таблицами, каскадным образом совмещая их действие. Броузеры в настоящее время не позволяют выбирать таблицу стилей. Импортированные стили замещают стили, присоединенные тегом <link>,
точно так же, как определенные на уровне документа и встроенные в тег стили замещают внешние определения. Собирая все это вместе, рассмотрим пример:

<html>
<head>
<link rel=stylesheet href=sheet1.css type=text/css>
<link rel=stylesheet href=sheet2.css type=text/css>
<style>
<!
@import url(sheet3.css);
@import url(sheet4.css);
>
</style>
</head>

В соответствии с моделью CSS2 броузер должен предложить пользователю выбирать между sheet1.css и sheet2.css. Затем он должен загрузить выбранную таблицу, за которой последуют sheet3.css и sheet4.css. Стили, определенные в таблицах sheet3.css и sheet4.css, так же как и встроенные стили, будут в случае конфликта применяться вместо стилей выбранной таблицы. На практике популярные броузеры каскадным образом объединят правила таблиц из примера, обрабатывая их в том порядке, в каком они появляются, от sheet1 до sheet4.

Помимо атрибута media для тега <style> стандарт CSS2 содержит еще два средства, которые позволяют применять различные таблицы стилей в зависимости от того, какой агент или устройство будут выводить документ. С помощью этих способов можно применять один или целую таблицу стилей, когда документ отображается на экране компьютера, и другую группу стилей, когда содержимое выводится на принтере, печатающем по системе Брайля. А как же обходиться с сотовыми телефонами в сети?

Подобно тому как атрибут media для тега <style> сообщает, в каких случаях нужно применять описанную в теге таблицу стилей, существует возможность указать обработчику документов1, следует ли ему загружать и использовать внешнюю таблицу в зависимости от того, какое устройство будет доносить до человека содержание документа.
Это можно сделать, добавив в конец команды @import один или несколько отделенных друг от друга запятыми типов посредников.

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

@import url(http://www.kumquats.com/styles/visual_styles.css) screen,print;
@import «http://www.kumquats.com/styles/speech_styles.css» aural;

В CSS2 включены следующие типы устройств вывода: all, aural, braille, embossed, handheld, print, projection, screen, tty и tv.

Другой предусмотренный CSS2 способ учесть устройство вывода состоит в применении явной директивы @media, которая позволяет включать в одну таблицу стилей правила, относящиеся только к определенным посредникам. Это можно делать как на уровне документа, так и во внешней таблице стилей. На уровне документа @media должна,
как и директива @import, содержаться в теге <style>. При этом обе они не могут входить в иные правила. В отличие от @import, директиве @media разрешено следовать за другими стилевыми назначениями, и те, которые описаны в ней, вправе отменять определенные прежде в соответствии с каскадным стандартом.

Содержимое @media включает в себя одно или несколько разделенных запятыми наименований типов посредников, за которыми следуют фигурные скобки ({}), охватывающие набор стилевых правил. Например:

body {background: white}
@media tv, projection {
body {background: yellow}
}

Атрибут yellow у специальной директивы @media окрашивает фон тела документа в желтый цвет (а не в белый, указанный в качестве умолчания в общем стилевом правиле), когда документ отображается на телевизионном экране или проекционной системой (это определяют атрибуты tv и projection).