Palavras-chave de cores CSS

Índice

Esta página explicará as palavras-chave:

transparent
currentcolor
inherit

A palavra-chave transparente

A palavra-chave transparent é usada para fazer um cor transparente. Isso geralmente é usado para criar uma cor de fundo transparente para um elemento.

Exemplo

Aqui, a cor de fundo do elemento <div> será totalmente transparente, e a imagem de fundo será exibida através de:

 body {
  background-image: url("paper.gif");
}
div { 
  
  background-color: transparent;
}

Experimente você mesmo →

<!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>

Observação: o transparente palavra-chave é equivalente a rgba(0,0,0,0). Os valores de cores RGBA são uma extensão de Valores de cores RGB com um canal alfa - que especifica a opacidade de um cor. Leia mais em nosso capítulo CSS RGB e em nosso capítulo Cores CSS.

A palavra-chave currentcolor

A palavra-chave currentcolor é como uma variável que contém o valor atual da propriedade color de um elemento.

Esta palavra-chave pode ser útil se você quiser que uma cor específica seja consistente em um elemento ou uma página.

Exemplo

Neste exemplo a cor da borda do elemento <div> será azul, pois o a cor do texto do elemento <div> é azul:

 div {
  color: blue;
  border: 10px solid currentcolor;
}

Experimente você mesmo →

<!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>

Exemplo

Neste exemplo a cor de fundo do <div> está definida para a cor atual valor do elemento body:

 body {
  color: purple;
}
div {
  background-color: 
  currentcolor;
}

Experimente você mesmo →

<!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>

Exemplo

Neste exemplo, a cor da borda e a cor da sombra do <div> estão definidas como o valor da cor atual do elemento body:

 body {
 color: green;
}
div { 
  box-shadow: 0px 0px 
  15px currentcolor;
  border: 5px solid currentcolor;
}

Experimente você mesmo →

<!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>

A palavra-chave herdada

A palavra-chave inherit especifica que um propriedade deve herdar seu valor de seu elemento pai.

A palavra-chave inherit pode ser usada para qualquer CSS propriedade e em qualquer elemento HTML.

Exemplo

Neste exemplo, as configurações de borda do <span> serão herdadas de o elemento pai:

 div {
  border: 2px solid red;
}
span {
  border: 
  inherit;
}

Experimente você mesmo →

<!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>