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

Стандарт CSS2 определяет два новых псевдокласса, которые вместе с :active реагируют на поступки пользователя и советуют интерактивному агенту, скажем броузеру, как отображать элемент, подвергнувшийся внешнему воздействию. Другими словами, эти два псевдокласса являются динамическими: hover и focus.

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

a:hover {color: yellow}

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

Подобным образом псевдокласс :focus позволяет изменить стиль элемента, который стал объектом внимания. Элемент может попасть в сферу обзора, если вы дошли до него, нажимая клавишу «Tab», щелкнули на нем мышью или – в зависимости от броузера – подвели к нему курсор. Независимо от способа, каким ему уделено внимание, стилевое
правило, ассоциированное с псевдоклассом :focus, будет применяться к этому элементу, пока вы не утратите к нему интереса.

Популярные, поддерживающие стандарт CSS2 броузеры различают три специальных состояния гиперссылок, созданных при помощи тега <a>: неиспользованная, используемая и использованная. Броузер способен изменять внешний вид содержимого тега, обозначая его состояние подчеркиванием, например, или цветом. При помощи псевдоклассов можно управлять тем, как эти состояния отображаются, определяя стили для a:link (неиспользованная), a:active (используемая) и a:visited (использованная).

Псевдокласс :link управляет внешним видом ссылок, которые не выбраны пользователем и не посещались прежде. Псевдокласс :active определяет внешний вид гиперссылок, которые в настоящий момент выбраны и обрабатываются броузером. Псевдокласс :visited устанавливает облик ссылок, которые ранее уже были использованы.

Чтобы полностью определить все три состояния тега <a>, можно написать:

a:link {color: blue}
a:active {color: red; font-weight: bold}
a:visited {color: green}

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

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

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

<style>
<!–
#yellow {color : yellow}
h1#blue {color : blue}
–>
</style>

Теперь в документе можно написать <h1 id=blue>, чтобы создать синий заголовок, или вставить id=yellow практически в любой тег, чтобы окрасить его содержимое в желтый цвет. Сочетание атрибутов class и id позволяет в некоторых ограничениях применять к одному элементу два независимых стилевых правила.

Употребление правил, созданных таким способом, обладает существенным недостатком – стандарты HTML и XHTML требуют, чтобы значение атрибута id было уникально в каждом случае его использования в документе. А здесь нам приходится неоднократно указывать одно и то же значение для применения стилевого класса.

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

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

.italic {font style: italic}

создает родовой класс по имени italic. Чтобы применить его, простовключите это имя в качестве значения атрибута class в тег. Так, например, используйте конструкции <p> и <h1>, чтобы вывести курсивом абзац или заголовок.

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

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

<style type=»text/css»>
<!–
p.abstract {font-style: italic;
margin left: 0.5cm;
margin right: 0.5cm}
p.equation {font-family: Symbol;
text-align: center}
h1, p.centered {text-align: center;
margin-left: 0.5cm;
margin-right: 0.5cm}
–>
</style>

Приведенный пример показывает: определение стилевого правила для класса состоит в том, что в селекторе к имени тега через точку приписано имя класса. В отличие от «послушного» XHTML селектора, являющегося именем стандартного тега (который необходимо записывать строчными буквами), имя класса может быть любой последова
тельностью букв, цифр и дефисов, но всегда должно начинаться с буквы.1 Будьте, однако, осторожны, регистр в этом случае имеет значение – abstract это не то же самое, что AbsTRact. Классы входят в селекторные списки наряду с обычными селекторами, отделяясь от других классов и селекторов запятыми, как это показано в третьем примере. Единственное ограничение, вводимое для классов, состоит в том, что они не могут вкладываться друг в друга, так что конструкция p.equation.centered, например, не является допустимой.

Первое правило в примере, таким образом, создает класс стилей абзаца под названием «abstract», текст которого должен выводиться курсивом с отступом на полсантиметра от правого и левого краев. Подобным образом второе определение стилевого класса «equation» предписывает броузеру центрировать текст и использовать гарнитуру шриф
та Symbol при его отображении. Последнее правило создает стиль с центрированным текстом и полусантиметровыми полями, который должен применяться ко всем заголовкам уровня 1, как и к абзацам, атрибут class которых имеет значение centered.

Чтобы применить к содержимому тега определенный класс, следует вставить в тег атрибут class, как это делается в нижеследующем примере:

<p>
This is the abstract paragraph. See how the margins are indented?
</p>
<h3>The equation paragraph follows</h3>
<p>
a = b + 1
</p>
<p>
This paragraph’s text should be centered.
</p>

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

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

CSS2 вводит четыре псевдоэлемента, позволяющие определять особые отношения и стили для их отображения: first line (первая строка), first-letter (первая буква), before (перед чем-либо) и after (после чего-либо). Объявляйте эти отношения, добавляя к стандартному элементу разметки отделенный двоеточием суффикс. К примеру:

p:first line {font size: 200%; font style: italic}

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

p:first letter {font size: 200%; float: left}

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

Псевдоэлементы :before и :after позволяют указывать в документе места, куда вставляется автоматически генерируемое содержимое, в частности особые заголовки и т. д. Стало быть, эти псевдоэлементы идут рука об руку с такими свойствами CSS2, как counter и content. Следующий пример вас, возможно, заинтересует:

ul {counter-reset: item; list-style: none}
ul li:before {content: «Item #» counters(item), » «;
counter-increment: item}
…
<ul>
<li> This is item number 1.</li>
<ul>
<li> This is sub-item number 1.1.</li>
</ul>
<li> This is item number 2.</li>
<ul>
<li> This is sub-item 2.1.</li>
<li> This is sub-item 2.2.</li>
… and so on

Все популярные броузеры поддерживают псевдоэлементы, порождающие эффекты. При этом Internet Explorer не поддерживает свойство content. Получается, что только Firefox и Opera корректно отображают последовательную нумерацию элементов списка, определенную в предшествующем примере.

Существует возможность присоединить стиль только к тем элементам 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. Для большинства авторов первый вариант легче набрать, понять и изменить. И он требует меньше времени и затрат других ресурсов при передаче по сети, хотя результат тривиален. Определяйте стили так, как вам удобнее. Вы не обязаны исполь
зовать множественные селекторы.