Значение атрибута содержит указанный текст

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

[атрибут*=" значение" ] { Описание правил стиля }
Селектор[атрибут*=" значение" ] { Описание правил стиля }

В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

 

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" >

< title> Селекторы атрибутов< /title>

< style type=" text/css" >

[href*=" htmlbook" ] {

background: yellow; /* Желтый цвет фона */

}

< /style>

< /head>

< body>

< p> < a href=" http: //www.htmlbook.ru/html/" > Теги HTML< /a> |

< a href=" http: //stepbystep.htmlbook.ru" > Шаг за шагом< /a> |

< a href=" http: //webimg.ru" > Графика для Веб< /a> < /p>

< /body>

< /html>

Результат данного примера показан на рис. 13.5.

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

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

[атрибут~=" значение" ] { Описание правил стиля }
Селектор[атрибут~=" значение" ] { Описание правил стиля }

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).

Пример 13.6. Стиль в зависимости от имени класса

 

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" >

< title> Блок< /title>

< style type=" text/css" >

[class~=" block" ] h3 { color: green; }

< /style>

< /head>

< body>

< div class=" block tag" >

< h3> Заголовок< /h3>

< /div>

< /body>

< /html>

В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

[атрибут|=" значение" ] { Описание правил стиля }
Селектор[атрибут|=" значение" ] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идет дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

 

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" >

< title> Блок< /title>

< style type=" text/css" >

DIV[class|=" block" ] {

background: #306589; /* Цвет фона */

color: #acdb4c; /* Цвет текста */

padding: 5px; /* Поля */

}

DIV[class|=" block" ] A {

color: #fff; /* Цвет ссылок */

}

< /style>

< /head>

< body>

< div class=" block-menu-therm" >

< h2> Термины< /h2>

< div class=" content" >

< ul class=" menu" >

< li> < a href=" t1.html" > Буквица< /a> < /li>

< li> < a href=" t2.html" > Выворотка< /a> < /li>

< li> < a href=" t3.html" > Выключка< /a> < /li>

< li> < a href=" t4.html" > Интерлиньяж< /a> < /li>

< li> < a href=" t5.html" > Капитель< /a> < /li>

< li> < a href=" t6.html" > Начертание< /a> < /li>

< li> < a href=" t7.html" > Отбивка< /a> < /li>

< /ul>

< /div>

< /div>

< /body>

< /html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=" block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

[атрибут1=" значение1" ][атрибут2=" значение2" ] { Описание правил стиля }
Селектор[атрибут1=" значение1" ][атрибут2=" значение2" ] { Описание правил стиля }

Универсальный селектор

Начало формы

Конец формы

 

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

Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и.class являются идентичными по своему результату.

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

Пример 14.1. Использование универсального селектора

 

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" >

< title> Универсальный селектор< /title>

< style type=" text/css" >

* {

font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */

font-size: 96%; /* Размер текста */

}

< /style>

< /head>

< body>

< p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem

nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.< /p>

< /body>

< /html>

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.

Псевдоклассы

 

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

Синтаксис применения псевдоклассов следующий.

Селектор: Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu: hover {color: green}), а также к контекстным селекторам (.menu A: hover {background: #fc0}). Если псевдокласс указывается без селектора впереди (: hover), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: