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

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

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

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

a.plain:link, a.plain:active, a.plain:visited {color: blue}
a:link {color: blue}
a:visited {color: green}
a:active {color: red}
a.fancy:link {font-style: italic}
a.fancy:visited {font-style: normal}
a.fancy:active {font-weight: bold; font-size: 150%}

Простая (plain) версия <a> всегда синяя вне зависимости от состояния гиперссылки.Соответственно нормальная гиперссылка имеет сначала синий цвет, становится красной, когда активна, и превращается в зеленую после посещения. Затейливая (fancy) ссылка наследует цветовую схему нормальной, но ее текст до использования выводится курсивом, после посещения возвращается к обычному и вырастает в полтора раза и становится жирным, когда она активна.

Два слова в предупреждение по поводу класса fancy – указывая изменение размера шрифта для преходящего свойства, вы задаете броузеру работу по отображению окружающего содержимого. Поскольку некоторые броузеры работают на медленных машинах, этот эффект может остаться незамеченным определенной частью ваших пользователей. Кроме того, поскольку реализация такого сорта изменений в отображе
нии довольно хлопотна, маловероятно, что большинство броузеров будут поддерживать радикальную модификацию внешнего вида в псевдоклассах тега <a>.

CSS2 псевдокласс :first-child позволяет указать способ, каким можно отобразить элемент, являющийся первым потомком некоего родительского элемента. К примеру, следующее правило применяется только к тем абзацам, которые входят первыми в состав раздела. Перед абзацем не должно быть никаких элементов (обратите внимание на специальное использование знака «больше» по отношению к первому элементу-потомку):

div > p:first-child {font-style: italic}

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

<div>
<p>
Я отображаюсь курсивом, потому что мой абзац является первым
элементом раздела.
</p>
</div>
<div>
<h2> Новый раздел</h2>
<p>
Я отображен обычным шрифтом, потому что этот параграф – второй
потомок в разделе.

Наконец, стандарт CSS2 определяет новый псевдокласс, который позволяет выбирать элемент, основываясь на его языке. В частности, если включить в тег <div> атрибут lang=fr, то броузер поймет, что раздел содержит текст на французском языке, и, возможно, будет обращаться с ним в особой манере. Другой путь – самим установить определенный способ отображения, определив псевдокласс :lang. К примеру:

div:lang(it) {font-family: Roman}

говорит, что текст в разделах, содержащих итальянский язык, должен применять шрифты семейства Roman. Как считаете, подходит? Заметьте, что язык указывается в скобках сразу после ключевого слова lang. Используйте для псевдокласса :lang те же коды языков
по стандарту ISO, что и для атрибута lang.

Стандарт 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 корректно отображают последовательную нумерацию элементов списка, определенную в предшествующем примере.