Что такое атрибут в css

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

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

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

Значение атрибута начинается с определённого текста

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

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

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок &#8212; ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http:// , его и добавляем к селектору A , как показано в примере 13.3.

Пример 13.3. Изменение стиля внешней ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 13.3. Изменение стиля для внешних ссылок

В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 13.2 приёмом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведёт на другой сайт.

Значение атрибута оканчивается определённым текстом

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

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором &#8212; только к определённым селекторам.

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4.

Пример 13.4. Стиль для разных доменов

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере содержатся две ссылки, ведущие на разные домены &#8212; com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4. Добавление картинки к ссылкам

Значение атрибута содержит указанный текст

Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст &#8212; в начале, середине или конце. В подобном случае следует использовать такой синтаксис.

В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).

Пример 13.6. Стиль в зависимости от имени класса

HTML5 CSS 2.1 IE Cr Op Sa 5 Fx

В данном примере зелёный цвет текста применяется к селектору H3 , если имя класса у слоя задано как block . Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class . Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере имя класса задано как block-menu-therm , поэтому в стилях используется конструкция |="block" , поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

Вопросы для проверки

1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

1. INPUT[type="text"]
2. INPUT[type="textinput"]
3. INPUT[type="textfield"]
4. INPUT[type="textarea"]
5. INPUT[type="texts"]

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

<p text1-count1-text">Первый абзац</p>
<p text2-count2-text">Второй абзац</p>
<p text3-count3-text">Третий абзац</p>

1. P[class|="text2"]
2. P[class^="text2"]
3. P[class

Атрибуты элементов

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

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

Вначале пишется открывающий тег, затем через пробел имя атрибута, после чего ставится знак равно (=) и в кавычках указывается значение атрибута. Общий синтаксис такой:

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

Вместо двойных кавычек ("значение") можно писать одинарные кавычки (‘значение’) или вообще опустить кавычки (значение). Однако хорошим тоном будет всегда писать значения атрибутов в кавычках, потому что их отсутствие может привести к неявным ошибкам. Приведём небольшой пример.

В данном примере первая строка написана правильно со всеми кавычками, а в следующей строке у атрибута alt кавычки отсутствуют. Поскольку пробел отделяет один атрибут от другого, то браузер в качестве значения alt возьмёт только первое слово («Вид»), а слово «заголовка» будет воспринимать как новый атрибут. Но так как подобного атрибута не существует, то это приведёт к ошибке.

Каждый атрибут должен быть единственным и не должен повторяться ( alt писать можно, alt alt нельзя).

В примере 1 показано добавление картинки на страницу с помощью элемента <img> с разными атрибутами.

Пример 1. Использование атрибутов

Логические атрибуты

У логических атрибутов нет значений, само наличие или отсутствие атрибута уже меняет поведение элемента. Синтаксис достаточно простой:

В примере 2 показано применение логического атрибута для аудиоплеера.

Пример 2. Использование логического атрибута

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

• controls
• controls=""
• controls="controls"

Опять же имена атрибутов не чувствительны к регистру, это значит, что их можно писать маленькими или большими буквами. Но рекомендуем придерживаться единообразия и писать атрибуты в нижнем регистре — name . А никак не Name или NAME . Ещё раз подчеркнём, что так писать не надо.

Порядок атрибутов

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

Универсальные атрибуты

У некоторых элементов есть свой набор характерных атрибутов, но кроме этого существуют атрибуты, которые можно добавлять к любому элементу. По этой причине они называются универсальными или глобальными атрибутами. Список всех таких атрибутов вы можете посмотреть здесь, перечислим лишь некоторые популярные: class , id , lang , style , title .

CSS Attribute Selectors

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

Селектор CSS [атрибут]

Селектор [attribute] используется для выбора элементов с указанным атрибутом.

В следующем примере выбираются все элементы <a> с целевым атрибутом:

Пример

CSS [attribute="value"] Селектор

Селектор [attribute="value"] используется для выбора элементов с указанным атрибутом и значением.

В следующем примере выбираются все элементы < a > с целевым атрибутом = "_бланк":

Пример

Селектор CSS [атрибут

="value"] используется для выбора элементов со значением атрибута, содержащим указанное слово.

В следующем примере выбираются все элементы с атрибутом title, содержащим разделенный пробелами список слов, одним из которых является «цветок»:

Пример

Приведенный выше пример будет соответствовать элементам с названием = "цветок", название = "Летний цветок", и название = "цветок новый", но не название = "Мой-цветок" или название = "Цветы".

Селектор CSS [атрибут | = "значение"]

Селектор [attribute|="value"] используется для выбора элементов с указанным атрибутом, начиная с заданного значения.

В следующем примере выбираются все элементы со значением атрибута Class, начинающимся с "Top":

Примечание: Значение должно быть целым словом, либо в одиночку, как класс = "Top", или за которым следует дефис (-), как класс = "Верхний текст"!

Пример

Селектор CSS [атрибут ^ = "value"]

Селектор [attribute^="value"] используется для выбора элементов, значение атрибута которых начинается с заданного значения.

В следующем примере выбираются все элементы со значением атрибута Class, начинающимся с "Top":

Примечание: Значение не обязательно должно быть целым словом!

Пример

Селектор CSS [атрибут $ = "value"]

Селектор [attribute$="value"] используется для выбора элементов, значение атрибута которых заканчивается заданным значением.

В следующем примере выбираются все элементы со значением атрибута Class, которое заканчивается на "Test":

Примечание: Значение не обязательно должно быть целым словом!

Пример

Селектор CSS [атрибут * = "value"]

Селектор [attribute*="value"] используется для выбора элементов, значение атрибута которых содержит указанное значение.

В следующем примере выбираются все элементы со значением атрибута Class, содержащим "Te":

Примечание: Значение не обязательно должно быть целым словом!

Пример

Укладка форм

Селекторы атрибутов могут быть полезны для стилизации форм без класса или идентификатора:

Пример

input[type="text"] <
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
>

input[type="button"] <
width: 120px;
margin-left: 35px;
display: block;
>