Cuvinte cheie pentru culori CSS
Câteva cuvinte cheie predefinite pentru culori au un sens special în CSS, iar proprietăți precum color, background-color și border-color le acceptă.
Există trei astfel de cuvinte cheie:
transparentcurrentcolorinherit
Cuvântul cheie transparent
Elementele primesc adesea o culoare de fundal transparentă prin cuvântul cheie transparent, care face orice culoare complet transparentă.
Notă: Dacă scrii transparent, obții același rezultat ca rgba(0,0,0,0). Ce adaugă valorile de culoare RGBA față de valorile de culoare RGB este un canal alfa, iar acest canal stabilește cât de opacă este o culoare. Capitolul nostru CSS RGB și capitolul nostru CSS Colors merg mai departe.
Exemplu
Aici imaginea de fundal se vede prin elementul <div>, deoarece culoarea lui de fundal este complet transparentă.
Output: pagină HTML completă
<!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>
Cuvântul cheie currentcolor
Gândește-te la currentcolor ca la o variabilă: păstrează valoarea pe care o are chiar acum proprietatea color a unui element.
Folosește-l când o anumită culoare trebuie să rămână consecventă pe o întreagă pagină sau într-un singur element.
Chenar cu currentcolor
Culoarea textului acestui element <div> este albastră, așa că și culoarea chenarului devine albastră.
Output: pagină HTML completă
<!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>
Fundal cu currentcolor
Culoarea pe care o are în acest moment elementul body umple aici și elementul <div>, ca fundal al lui.
Output: pagină HTML completă
<!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>
Umbră cu currentcolor
Acest element <div> își ia atât culoarea chenarului, cât și culoarea umbrei din culoarea setată în acest moment pe elementul body.
Output: pagină HTML completă
<!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>
Cuvântul cheie inherit
O proprietate setată la inherit își ia valoarea de la elementul părinte.
Orice proprietate CSS poate folosi acest cuvânt cheie, la fel și orice element HTML.
Exemplu
Aici elementul părinte îi transmite elementului <span> setările sale de chenar.
Output: pagină HTML completă
<!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>