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

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

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).

Второй способ загрузки внешней таблицы стилей импортирует файлы, применяя специальную директиву (так называемое правило at) в теге <style>:

<head>
<title>Импортированный стиль</title>
<style type=»text/css»>
<!–
@import url(http://www.kumquats.com/styles/gen_styles.css);
@import «http://www.kumquats.com/styles/spec_styles.css»;
body {background: url(backgrounds/marble.gif)}
–>
</style>
</head>

Директива @import ожидает параметр в виде URL, указывающего путь в сети к внешней таблице стилей. Как показано в этом примере, URL может быть заключенной в двойные кавычки строкой, заканчивающейся точкой с запятой, или следовать за ключевым словом url, так же оканчиваясь точкой с запятой, но помещаясь при этом в скобки. URL может быть абсолютным или относительным, отсчитываемым от базового URL документа.

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

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

Один способ загрузить внешнюю таблицу стилей – использовать тег <link> внутри тега

<head> в вашем документе:
<head>
<title>Присоединение стиля с помощью link</title>
<link rel=stylesheet type=»text/css»
href=»http://www.kumquats.com/styles/gen_styles.css»
title=»Синева»>
</head>
<body>
<h1>Я такой сииинииий!</h1>
…
<h1>И я тожеее сииинииий!</h1>

Напомним, что тег <link> связывает документ, в котором он содержится, с каким то другим документом в сети. В примере мы сообщаем броузеру, что документ, поименованный в атрибуте href, имеет тип stylesheet, как это указано в атрибуте type. Ссылка на внешнюю таблицу стилей в теге <link> требует указания атрибутов href и type. Кроме того, мы явно, причем добровольно, сообщаем броузеру, что отношение файла к нашему документу определяется значением stylesheet (таблица стилей). Мы также добавили атрибут title, определяющий название таблицы стилей, создав возможность для ссылок на нее в будущем.

Тег <link> и его обязательные атрибуты href и type должны появляться только в заголовке документа. URL таблицы стилей может быть абсолютным или относительным, отсчитываемым от базового URL документа.

Кроме того, можно помещать определения стилей в отдельный документ (текстовый файл, MIME типом которого является text/css) и импортировать такие «внешние» таблицы стилей в документы. Чтобы придать своим документам унифицированный вид, пользуйтесь единой таблицей стилей для других документов в этом собрании и даже
для других собраний документов. Поскольку внешняя таблица является отдельным файлом и загружается броузером из сети, ее можно хранить где угодно, использовать многократно и даже применять чужие таблицы стилей.

Например, допустим, что мы создали файл gen_styles.css, включающий следующее стилевое правило:

h1 {color: blue; font style: italic}

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

Загрузить в документ внешнюю таблицу стилей можно двумя способами: при помощи тега <link> или директивы @import.

Действительная сила таблиц стилей становится более очевидной, когда вы помещаете список правил представления в начало HTML-или XHTML-документа. Расположенные внутри тега <head> и заключенные в собственный тег <style> (с закрывающим </style>) таблицы стилей на «уровне документа» действуют на все вхождения тегов в документ, за исключением тех, что содержат обладающие более высоким приоритетом встроенные определения с атрибутом style.

Все, что находится между тегами <style> и </style>, рассматривается как часть стилевых правил, которые должны быть применены к документу. На самом деле содержимое тега <style> не относится к HTML или XHTML и не подчиняется обычным правилам размеченного содержимого. Тег <style>, таким образом, позволяет вставить в документ
чужеродную информацию, которую броузер использует для форматирования тегов.

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

<head>
<title>Все синее</title>
<style type=»text/css»>
<!
/* делаем все заголовки 1 го уровня синими и курсивом */
h1 {color: blue; font style: italic}
>
</style>
</head>
<body>
<h1> Я такой сииинииий!</h1>
…
<h1>И я тожеее сииинииий!</h1>