Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение атрибута type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определенного атрибута тега или его значения. Рассмотрим несколько типичных вариантов применения таких селекторов. Простой селектор атрибутаУстанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий. [атрибут] { Описание правил стиля } Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается. В примере 13.1 показано изменение стиля тега <q>, в том случае, если к нему добавлен атрибут title. Пример 13.1. Вид элемента в зависимости от его атрибута HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q. Атрибут со значениемУстанавливает стиль для элемента в том случае, если задано определенное значение специфичного атрибута. Синтаксис применения следующий. [атрибут="значение"] { Описание правил стиля } В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определенным селекторам. В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки. Пример 13.2. Стиль для открытия ссылок в новом окне HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение. Значение атрибута начинается с определенного текстаУстанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий. [атрибут^="значение"] { Описание правил стиля } В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы. Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 13.3. Пример 13.3. Изменение стиля внешней ссылки HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 Результат примера показан ниже (рис. 13.3).
Рис. 13.3. Изменение стиля для внешних ссылок В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 13.2 приемом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведет на другой сайт. Значение атрибута оканчивается определенным текстомУстанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис применения следующий. [атрибут$="значение"] { Описание правил стиля } В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определенным селекторам. Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4. Пример 13.4. Стиль для разных доменов HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Рис. 13.4. Добавление картинки к ссылкам Значение атрибута содержит указанный текстВозможны варианты, когда стиль следует применить к тегу с определенным атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать такой синтаксис. [атрибут*="значение"] { Описание правил стиля } В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook». Пример 13.5. Стиль для разных сайтов HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook» Одно из нескольких значений атрибутаНекоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис. [атрибут~="значение"] { Описание правил стиля } Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6). Пример 13.6. Стиль в зависимости от имени класса HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=. Дефис в значении атрибутаВ именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом. [атрибут|="значение"] { Описание правил стиля } Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идет дефис (пример 13.7). Пример 13.7. Дефисы в значениях HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы. Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд. [атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля } | |
| Просмотров: 685 | Теги: | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |