Esta página explicará las palabras clave:
transparent
currentcolor
inheritLa palabra clave transparent se utiliza para crear una color transparente. Esto se utiliza a menudo para crear un color de fondo transparente para un elemento.
Aquí, el color de fondo del elemento <div> será completamente transparente y la imagen de fondo se mostrará a través de:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
} Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
div.ex1 {
background-color: lightgreen;
border: 2px solid black;
padding: 15px;
}
div.ex2 {
background-color: transparent;
border: 2px solid black;
padding: 15px;
}
</style>
</head>
<body>
<h2>The transparent Keyword</h2>
<div class="ex1">This div has a light green background.</div>
<br>
<div class="ex2">This div has a transparent background.</div>
</body>
</html>
Nota: El transparente La palabra clave es equivalente a rgba(0,0,0,0). Los valores de color RGBA son una extensión de Valores de color RGB con un canal alfa, que especifica la opacidad de un color. Lea más en nuestro capítulo CSS RGB y en nuestro capítulo Colores CSS.
La palabra clave currentcolor es como una variable que contiene el valor actual de la propiedad de color de un elemento.
Esta palabra clave puede ser útil si desea que un color específico sea consistente en un elemento o una página.
En este ejemplo, el color del borde del elemento <div> será azul, porque el El color del texto del elemento <div> es azul:
div {
color: blue;
border: 10px solid currentcolor;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
border: 10px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>The currentcolor keyword refers to the current value of the color property of an element.</p>
<div>
This div element has a blue text color and a blue border.
</div>
</body>
</html>
En este ejemplo, el color de fondo del <div> se establece en el color actual valor del elemento del cuerpo:
body {
color: purple;
}
div {
background-color:
currentcolor;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: purple;
}
div {
background-color: currentcolor;
padding: 15px;
}
div p {
color: white;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>This is some text in the body part...</p>
<div>
<p>This div's background color is set to the current color value of the body element.</p>
</div>
</body>
</html>
En este ejemplo, el color del borde y el color de la sombra del <div> se establecen en el valor de color actual del elemento del cuerpo:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>This is some text in the body part...</p>
<div>
<p>This div's border color and shadow color is set to the current color value of the body element.</p>
</div>
</body>
</html>
La palabra clave hered especifica que un La propiedad debe heredar su valor de su elemento padre.
La palabra clave hered se puede utilizar para cualquier CSS propiedad y en cualquier elemento HTML.
En este ejemplo, la configuración del borde de <span> se heredará de el elemento padre:
div {
border: 2px solid red;
}
span {
border:
inherit;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
}
span {
border: inherit;
}
</style>
</head>
<body>
<h2>The inherit Keyword</h2>
<div>Here, the <span>span element's</span> border settings will be inherited from the parent element.</div>
<br>
<div style="border:2px dotted blue;">Here, the <span>span element's</span> border settings will also be inherited from the parent element.</div>
</body>
</html>