Bu sayfada anahtar kelimeler açıklanacaktır:
transparent
currentcolor
inheritşeffaf anahtar kelimesi, bir şeffaflık oluşturmak için kullanılır. renk şeffaf. Bu genellikle şeffaf bir arka plan rengi oluşturmak için kullanılır. bir element.
Burada <div> elemanının arka plan rengi tam olarak aynı olacaktır. şeffaf ve arka plan resmi şunu gösterecek:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
} Kendiniz Deneyin →
<!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>
Not: şeffaf anahtar kelime rgba(0,0,0,0) ile eşdeğerdir. RGBA renk değerleri aşağıdakilerin bir uzantısıdır: Bir alfa kanalına sahip RGB renk değerleri - bu, bir öğenin opaklığını belirtir renk. Daha fazlasını CSS RGB bölümümüzde okuyun ve CSS Renkleri bölümümüz.
currentcolor anahtar kelimesi bir değişken gibidir bir öğenin renk özelliğinin geçerli değerini tutan.
Belirli bir rengin tutarlı olmasını istiyorsanız bu anahtar kelime yararlı olabilir. öğe veya bir sayfa.
Bu örnekte <div> öğesinin kenarlık rengi mavi olacaktır çünkü <div> öğesinin metin rengi mavidir:
div {
color: blue;
border: 10px solid currentcolor;
}Kendiniz Deneyin →
<!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>
Bu örnekte <div>'in arka plan rengi geçerli renge ayarlanmıştır gövde elemanının değeri:
body {
color: purple;
}
div {
background-color:
currentcolor;
}Kendiniz Deneyin →
<!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>
Bu örnekte <div>'in kenarlık rengi ve gölge rengi şu şekilde ayarlanmıştır: gövde öğesinin geçerli renk değeri:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}Kendiniz Deneyin →
<!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>
inherit anahtar sözcüğü şunu belirtir: özellik, değerini ana öğesinden miras almalıdır.
inherit anahtar kelimesi herhangi bir CSS için kullanılabilir özelliğinde ve herhangi bir HTML öğesinde.
Bu örnekte <span>'ın kenarlık ayarları şuradan devralınacak: ana öğe:
div {
border: 2px solid red;
}
span {
border:
inherit;
}Kendiniz Deneyin →
<!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>