CSS-väriavainsanat

Sisällysluettelo

Tämä sivu selittää avainsanat:

transparent
currentcolor
inherit

Läpinäkyvä avainsana

läpinäkyvä-avainsanaa käytetään a väri läpinäkyvä. Tätä käytetään usein läpinäkyvän taustavärin tekemiseen elementti.

Esimerkki

Tässä <div>-elementin taustaväri on täysin läpinäkyvä, ja taustakuva näkyy läpi:

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

Kokeile itse →

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

Huomaa: läpinäkyvä avainsana vastaa rgba(0,0,0,0). RGBA-väriarvot ovat laajennus RGB-väriarvot alfakanavalla - joka määrittää läpinäkyvyyden a.:lle väri. Lue lisää CSS RGB -luvustamme ja sisään CSS-värit -luvussamme.

Nykyinen väriavainsana

Avainsana currentcolor on kuin muuttuja joka sisältää elementin väriominaisuuden nykyisen arvon.

Tämä avainsana voi olla hyödyllinen, jos haluat tietyn värin olevan yhtenäinen elementtiä tai sivua.

Esimerkki

Tässä esimerkissä <div>-elementin reunaväri on sininen, koska <div>-elementin tekstin väri on sininen:

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

Kokeile itse →

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

Esimerkki

Tässä esimerkissä <div>:n taustaväri on asetettu nykyiseen väriin runkoelementin arvo:

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

Kokeile itse →

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

Esimerkki

Tässä esimerkissä <div>:n reunan väri ja varjon väri on asetettu body-elementin nykyinen väriarvo:

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

Kokeile itse →

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

Peritty avainsana

Avainsana inherit määrittää, että a ominaisuuden tulee periä arvonsa emoelementistään.

inherit-avainsanaa voidaan käyttää missä tahansa CSS:ssä ominaisuudessa ja missä tahansa HTML-elementissä.

Esimerkki

Tässä esimerkissä <span>:n reuna-asetukset peritään pääelementti:

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

Kokeile itse →

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