Ключевые слова CSS-цветов
Несколько предопределённых ключевых слов цвета имеют в CSS особое значение, и их принимают такие свойства, как color, background-color и border-color.
Таких ключевых слов три:
transparentcurrentcolorinherit
Ключевое слово transparent
Прозрачный цвет фона элементы часто получают благодаря ключевому слову transparent, которое делает любой цвет полностью прозрачным.
Примечание: Запись transparent даёт тот же результат, что и rgba(0,0,0,0). Значения цвета RGBA добавляют к значениям цвета RGB альфа-канал, и этот канал задаёт непрозрачность цвета. Подробнее об этом — в нашей главе CSS RGB и в главе CSS Colors.
Пример
Здесь фоновое изображение видно сквозь элемент <div>, поскольку его цвет фона полностью прозрачен.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Background</title>
<style>
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
padding: 20px;
}
</style>
</head>
<body>
<div>
<p>This div has a transparent background color.</p>
<p>The background image of the body element shows through.</p>
</div>
</body>
</html>
Ключевое слово currentcolor
Считайте currentcolor переменной: в ней хранится значение, которое свойство color элемента имеет в данный момент.
Используйте его, когда определённый цвет должен оставаться согласованным на всей странице или в пределах одного элемента.
Рамка с currentcolor
Цвет текста этого элемента <div> синий, поэтому цвет его рамки тоже становится синим.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currentcolor Border</title>
<style>
div {
color: blue;
border: 10px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>
<div>
The border color of this div is blue, because the text color is blue.
</div>
</body>
</html>
Фон с currentcolor
Текущий цвет элемента body здесь также заполняет <div> в качестве его фона.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currentcolor Background</title>
<style>
body {
color: purple;
}
div {
background-color: currentcolor;
padding: 20px;
height: 50px;
}
</style>
</head>
<body>
<p>The body's text color is purple.</p>
<div></div>
<p>The div above has its background color set to currentcolor, which is purple.</p>
</body>
</html>
Тень с currentcolor
Этот элемент <div> берёт и цвет рамки, и цвет тени из цвета, заданного в данный момент для элемента body.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currentcolor Shadow</title>
<style>
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
padding: 15px;
margin: 30px;
}
</style>
</head>
<body>
<div>
The border and shadow of this div are green, matching the body's text color.
</div>
</body>
</html>
Ключевое слово inherit
Свойство со значением inherit берёт значение от родительского элемента.
Это ключевое слово может использовать любое свойство CSS и любой HTML-элемент.
Пример
Здесь родительский элемент передаёт свои настройки рамки элементу <span>.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inherit Border</title>
<style>
div {
border: 2px solid red;
padding: 10px;
}
span {
border: inherit;
}
</style>
</head>
<body>
<div>
The border of the span element <span>is inherited from the parent div</span>.
</div>
</body>
</html>