Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Пример 13.1. Вид элемента в зависимости от его атрибута




HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title> Селекторы атрибутов </title> <style> 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. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...