Пример 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. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Читайте также: b) Пример классического. Воспользуйтесь поиском по сайту: ©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...
|