Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

 

<! 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" >

.level1 { font-size: 1em; }

.level2 { font-size: 1.2em; }

.level3 { font-size: 1.4em; }

.level4 { font-size: 1.6em; }

.level5 { font-size: 1.8em; }

.level6 { font-size: 2em; }

A.tag {

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

}

< /style>

< /head>

< body>

< div>

< a href=" /term/2" class=" tag level6" > Paint.NET< /a>

< a href=" /term/69" class=" tag level6" > Photoshop< /a>

< a href=" /term/3" class=" tag level5" > цвет< /a>

< a href=" /term/95" class=" tag level5" > фон< /a>

< a href=" /term/11" class=" tag level4" > палитра< /a>

< a href=" /term/43" class=" tag level3" > слои< /a>

< a href=" /term/97" class=" tag level2" > свет< /a>

< a href=" /term/44" class=" tag level2" > панели< /a>

< a href=" /term/16" class=" tag level1" > линия< /a>

< a href=" /term/33" class=" tag level1" > прямоугольник< /a>

< a href=" /term/14" class=" tag level1" > пиксел< /a>

< a href=" /term/27" class=" tag level1" > градиент< /a>

< /div>

< /body>

< /html>

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

Рис. 8.4. Облако тегов

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

Идентификаторы

Начало формы

Конец формы

 

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

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

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

При описании идентификатора вначале указывается символ решетки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 9.1). Символ решетки при этом уже не указывается.

Пример 9.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" >

#help {

position: absolute; /* Абсолютное позиционирование */

left: 160px; /* Положение элемента от левого края */

top: 50px; /* Положение от верхнего края */

width: 225px; /* Ширина блока */

padding: 5px; /* Поля вокруг текста */

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

}

< /style>

< /head>

< body>

< div id=" help" >

Этот элемент помогает в случае, когда вы находитесь в осознании того

факта, что совершенно не понимаете, кто и как вам может помочь. Именно

в этот момент мы и подсказываем, что помочь вам никто не сможет.

< /div>

 

< /body>

< /html>

В данном примере определяется стиль тега < div> через идентификатор с именем help (рис. 9.1).

Рис. 9.1. Результат применения идентификатора

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

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора. В примере 9.2 показано использование идентификатора применительно к тегу < p>.

Пример 9.2. Применение идентификатора совместно с тегом

 

<! 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" >

P {

color: green; /* Зеленый цвет текста */

font-style: italic; /* Курсивное начертание текста */

}

P#opa {

color: red; /* Красный цвет текста */

border: 1px solid #666; /* Параметры рамки */

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

padding: 5px; /* Поля вокруг текста */

}

< /style>

< /head>

< body>

< p> Обычный параграф< /p>

< p id=" opa" > Параграф необычный< /p>

< /body>

< /html>

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

Рис. 9.2. Вид текста после применения стиля

В данном примере вводится стиль для тега < p> и для такого же тега, но с указанием идентификатора opa.

Контекстные селекторы

Начало формы

Конец формы

 

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

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

Тег1 Тег2 {... }

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

< Тег1>

< Тег2> ... < /Тег2>

< /Тег1>

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример 10.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" >

P B {

font-family: Times, serif; /* Семейство шрифта */

font-weight: bold; /* Жирное начертание */

color: navy; /* Синий цвет текста */

}

< /style>

< /head>

< body>

< div> < b> Жирное начертание текста< /b> < /div>

< p> < b> Одновременно жирное начертание текста

и выделенное цветом< /b> < /p>

< /body>

< /html>

В данном примере показано обычное применение тега < b> и этого же тега, когда он вложен внутрь абзаца < p>. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

Рис. 10.1. Оформление текста в зависимости от вложенности тегов

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

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса, как показано в примере 10.2.

Пример 10.2. Использование классов

 

<! 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" >

A {

color: green; /* Зеленый цвет текста для всех ссылок */

}

.menu {

padding: 7px; /* Поля вокруг текста */

border: 1px solid #333; /* Параметры рамки */

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

}

.menu A {

color: navy; /* Темно-синий цвет ссылок */

}

 

< /style>

< /head>

< body>

< div class=" menu" >

< a href=" 1.html" > Русская кухня< /a> |

< a href=" 2.html" > Украинская кухня< /a> |

< a href=" 3.html" > Кавказская кухня< /a>

< /div>

< p> < a href=" text.html" > Другие материалы по теме< /a> < /p>

< /body>

< /html>

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

Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задается с помощью селектора A, будет действовать на всей странице, а стиль второй ссылки (.menu A) применяется только к ссылкам внутри элемента с классом menu.

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

Соседние селекторы

Начало формы

Конец формы

 

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

< p> Lorem ipsum < b> dolor< /b> sit amet.< /p>

В этом примере тег < b> является дочерним по отношению к тегу < p>, поскольку он находится внутри этого контейнера. Соответственно < p> выступает в качестве родителя < b>.

< p> Lorem ipsum < b> dolor< /b> < var> sit< /var> amet.< /p>

Здесь теги < var> и < b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера < p>, никак не влияет на их отношение.

< p> Lorem < b> ipsum < /b> dolor sit amet, < i> consectetuer< /i> adipiscing < tt> elit< /tt>.< /p>

Соседними здесь являются теги < b> и < i>, а также < i> и < tt>. При этом < b> и < tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер < i>.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

В примере 11.1 показана структура взаимодействия тегов между собой.

Пример 11.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" >

B + I {

color: red; /* Красный цвет текста */

}

< /style>

< /head>

< body>

< p> Lorem < b> ipsum < /b> dolor sit amet, < i> consectetuer< /i> adipiscing elit.< /p>

< p> Lorem ipsum dolor sit amet, < i> consectetuer< /i> adipiscing elit.< /p>

< /body>

< /html>

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

Рис. 11.1. Выделение текста цветом при помощи соседних селекторов

В данном примере происходит изменение цвета текста для содержимого контейнера < i>, когда он располагается сразу после контейнера < b>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег < i>, но по соседству никакого тега < b> нет, так что стиль к этому контейнеру не применяется.

Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путем и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовем его sic, и станем применять его к тегу < h2>. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 11.2). Вид остальных абзацев останется неизменным.

Пример 11.2. Изменение стиля абзаца

 

<! 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" >

H2.sic {

font-size: 140%; /* Размер шрифта */

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

font-weight: normal; /* Нормальное начертание текста */

margin-left: 30px; /* Отступ слева */

margin-bottom: 0px; /* Отступ снизу */

}

H2.sic + P {

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

margin-left: 30px; /* Отступ слева */

margin-top: 0.5em; /* Отступ сверху */

padding: 7px; /* Поля вокруг текста */

}

< /style>

< /head>

< body>

< h1> Методы ловли льва в пустыне< /h1>

< h2> Метод последовательного перебора< /h2>

< p> Пусть лев имеет габаритные размеры L x W x H, где L - длина льва от

кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. После чего

пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает

с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном

участке, а одновременно на двух из них, клетку для ловли следует делать повышенной

площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке

окажется пойманным лишь половина льва или, что хуже, только его хвост.< /p>

< h2 class=" sic" > Важное замечание< /h2>

< p> Для упрощения расчетов хвост в качестве погрешности измерения можно

отбросить и не принимать во внимание.< /p>

< p> Далее последовательно накрываем каждый из размеченных прямоугольников

пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке,

процедура поимки считается завершенной.< /p>

< /body>

< /html>

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

Рис. 11.2. Изменение вида абзаца за счет использования соседних селекторов

В данном примере текст отформатирован с применением абзацев (тег < p> ), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега < h2>, у которого добавлен класс с именем sic.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги < h1> и < h2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов < h2> и < p>, а также в других подобных случаях. В примере 11.3 таким манером изменяется величина отступов между указанными тегами.

Пример 11.3. Отступы между заголовками и текстом

 

<! 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" >

H1 + H2 {

margin-top: -10px; /* Смещаем заголовок 2 вверх */

}

H2 + P {

margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */

}

< /style>

< /head>

< body>

< h1> Заголовок 1< /h1>

< h2> Заголовок 2< /h2>

< p> Абзац! < /p>

< /body>

< /html>

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

Дочерние селекторы

Начало формы

Конец формы

 

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

Пример 12.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> Lorem ipsum< /title>

< /head>

< body>

< div class=" main" >

< p> < em> Lorem ipsum dolor sit amet< /em>, consectetuer adipiscing

elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam

erat volutpat.< /p>

< p> < strong> < em> Ut wisis enim ad minim veniam< /em> < /strong>,

quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex

ea commodo consequat.< /p>

< /div>

< /body>

< /html>

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

Рис. 12.1. Дерево элементов для примера

На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу < div> выступает тег < p>. Вместе с тем тег < strong> не является дочерним для тега < div>, поскольку он расположен в контейнере < p>.

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

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Если снова обратиться к примеру 12.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег < em> находится внутри контейнера < p>, и не даст никакого результата для второго абзаца. А все из-за того, что тег < em> во втором абзаце расположен в контейнере < strong>, поэтому нарушается условие вложенности.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 12.2).

Пример 12.2. Контекстные и дочерние селекторы

 

<! 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 I { /* Контекстный селектор */

color: green; /* Зеленый цвет текста */

}

P > I { /* Дочерний селектор */

color: red; /* Красный цвет текста */

}

< /style>

< /head>

< body>

< div>

< p> < i> Lorem ipsum dolor sit amet< /i>, consectetuer adipiscing

elit, sed diem nonummy nibh euismod tincidunt ut lacreet < i> dolore magna< /i>

aliguam erat volutpat.< /p>

< /div>

< /body>

< /html>

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

Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора

На тег < i> в примере действуют одновременно два правила: контекстный селектор (тег < i> расположен внутри < div> ) и дочерний селектор (тег < i> является дочерним по отношению к < p> ). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

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

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 12.3 показано изменение вида списка с помощью стилей. За счет вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 12.3).

Рис. 12.3. Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевое свойство float. Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы (пример 12.3).

Пример 12.3. Использование дочерних селекторов

 

<! 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" >

UL#menu {

margin: 0; padding: 0; /* Убираем отступы */

}

UL#menu > LI {

list-style: none; /* Убираем маркеры списка */

width: 100px; /* Ширина элемента в пикселах */

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

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

padding: 5px; /* Поля вокруг текста */

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

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Жирное начертание */

float: left; /* Располагаем элементы по горизонтали */

}

LI > UL {

list-style: none; /* Убираем маркеры списка */

margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */

border-bottom: 1px solid #666; /* Граница внизу */

padding-top: 5px; /* Добавляем отступ сверху */

}

LI > A {

display: block; /* Ссылки отображаются в виде блока */

font-weight: normal; /* Нормальное начертание текста */

font-size: 90%; /* Размер шрифта */

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

border: 1px solid #666; /* Параметры рамки */

border-bottom: none; /* Убираем границу снизу */

padding: 5px; /* Поля вокруг текста */

}

< /style>

< /head>

< body>

< ul id=" menu" >

< li> Правка

< ul>

< li> < a href=" #" > Отменить< /a> < /li>

< li> < a href=" #" > Вырезать< /a> < /li>

< li> < a href=" #" > Копировать< /a> < /li>

< li> < a href=" #" > Вставить< /a> < /li>

< /ul>

< /li>

< li> Начертание

< ul>

< li> < a href=" #" > Жирное< /a> < /li>

< li> < a href=" #" > Курсивное< /a> < /li>

< li> < a href=" #" > Подчеркнутое< /a> < /li>

< /ul>

< /li>

< li> Размер

< ul>

< li> < a href=" #" > Маленький< /a> < /li>

< li> < a href=" #" > Нормальный< /a> < /li>

< li> < a href=" #" > Средний< /a> < /li>

< li> < a href=" #" > Большой< /a> < /li>

< /ul>

< /li>

< /ul>

< /body>

< /html>

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

Селекторы атрибутов

Начало формы

Конец формы

 

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег < input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение атрибута type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определенного атрибута тега или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

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

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

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

В примере 13.1 показано изменение стиля тега < q>, в том случае, если к нему добавлен атрибут title.

Пример 13.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" >

Q {

font-style: italic; /* Курсивное начертание */

quotes: " \00AB" " \00BB"; /* Меняем вид кавычек в цитате */

}

Q[title] {

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

}

< /style>

< /head>

< body>

 

< p> Продолжая известный закон Мерфи, который гласит: < q> Если неприятность

может случиться, то она обязательно случится< /q>, можем ввести свое наблюдение:

< q title=" Из законов Фергюссона-Мержевича" > После того, как веб-страница

будет корректно отображаться в одном браузере, выяснится,

что она неправильно показывается в другом< /q>.< /p>

 

< /body>

< /html>

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

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера < q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q.

Атрибут со значением

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

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

В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определенным селекторам.

В примере 13.2 показано изменение стиля ссылки в том случае, если тег < a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 13.2. Стиль для открытия ссылок в новом окне

 

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

< html>

< head>

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

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

< style type=" text/css" >

A[target=" _blank" ] {

background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */

padding-left: 15px; /* Смещаем текст вправо */

}

< /style>

< /head>

< body>

< p> < a href=" 1.html" > Обычная ссылка< /a> |

< a href=" link2" target=" _blank" > Ссылка в новом окне< /a> < /p>

< /body>

< /html>

Результат примера показан ниже (рис. 13.2).

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

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

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

Поделиться: