Функция attr()
Описание
Функция применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.
Синтаксис
attr(атрибут тип значение)| Значение | Описание |
| атрибут | Имя атрибута элемента передаваемое в CSS. |
| тип | Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др. |
| значение | Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить. |
Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.site::after {
content: ' (' attr(href) ') ';
background: rgba(22, 137, 213, 0.542);
color: rgb(255, 0, 0);
}
</style>
<p><a href='https://gki-webik.ru' class='site'>Полезный сайт</a></p>
</body>
</html>Читайте также
Свойство background-blend-mode
Описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
Функция calc()
Используется для указания вычисляемого значения свойств, которые в качестве значений используют р...
Свойство animation-name
Указывает имя запускаемой аниимации.
Свойство margin-right
Устанавливает величину отступа от правой границы текущего элемента до внутренней границы его роди...
Селекторы атрибутов со значениями через пробел
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы зада...