Den här sidan kommer att förklara nyckelorden:
transparent
currentcolor
inherit
Nyckelordet transparent
används för att skapa en färg transparent. Detta används ofta för att göra en transparent bakgrundsfärg för ett element.
Här kommer bakgrundsfärgen för elementet <div> att vara helt transparent, och bakgrundsbilden kommer att visas genom:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Prova själv →
<!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>
Obs! Den transparent
nyckelordet motsvarar rgba(0,0,0,0). RGBA-färgvärden är en förlängning av RGB-färgvärden med en alfakanal - som anger opaciteten för en Färg. Läs mer i vårt CSS RGB-kapitel och i vårt kapitel om CSS-färger.
Nyckelordet currentcolor
är som en variabel som håller det aktuella värdet av färgegenskapen för ett element.
Detta nyckelord kan vara användbart om du vill att en specifik färg ska vara konsekvent i en element eller en sida.
I det här exemplet kommer gränsfärgen för elementet <div> att vara blå, eftersom textfärgen för elementet <div> är blå:
div {
color: blue;
border: 10px solid currentcolor;
}
Prova själv →
<!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>
I det här exemplet är <div>s bakgrundsfärg satt till den aktuella färgen värdet på kroppselementet:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
Prova själv →
<!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>
I det här exemplet är <div>s kantfärg och skuggfärg inställd på det aktuella färgvärdet för body-elementet:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
Prova själv →
<!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>
Nyckelordet inherit
anger att en egendom ska ärva sitt värde från sitt överordnade element.
Nyckelordet inherit
kan användas för alla CSS egenskap och på alla HTML-element.
I det här exemplet kommer <span>s gränsinställningar att ärvas från det överordnade elementet:
div {
border: 2px solid red;
}
span {
border:
inherit;
}
Prova själv →
<!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>