Пример 13.4. Стиль для разных доменов
HTML5CSS 2.1IECrOpSaFx <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title> Селекторы атрибутов </title> <style> A [href$=".ru"] { /* Если ссылка заканчивается на.ru */ background: url( images/ru.png ) no-repeat 0 6px; /* Добавляем фоновый рисунок */ padding-left: 12px; /* Смещаем текст вправо */ } A [href$=".com"] { /* Если ссылка заканчивается на.com */ background: url( images/com.png ) no-repeat 0 6px; padding-left: 12px; } </style> </head> <body> <p><a href="http://www.yandex.com" > Yandex.Com </a> | <a href="http://www.yandex.ru" > Yandex.Ru </a></p> </body></html> В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута. Рис. 13.4. Добавление картинки к ссылкам Значение атрибута содержит указанный текст Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать такой синтаксис. [атрибут*="значение"] { Описание правил стиля } В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Читайте также: b) Пример классического. Воспользуйтесь поиском по сайту: ©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...
|