Altın Konu CSS Renk Anahtar Kelimeleri..

ByESiNTi · 23 Tem 2021

Bu sayfada, transparent, current color ve inherit anahtar kelimeleri açıklayacağız.

Şeffaf Anahtar Kelime

Transparent Anahtar kelime bir renk şeffaf hale getirmek için kullanılır. Bu genellikle bir öğe için saydam bir arka plan rengi yapmak için kullanılır.

Örnek

Burada, <div> öğesinin arka plan rengi tamamen şeffaf olacak ve arka plan görüntüsü şu şekilde gösterilecektir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!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>Transparent Background</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:transparent Anahtar kelime RGBA (0,0,0,0) eşdeğerdir. RGBA renk değerleri, bir rengin opaklığını belirten alfa kanalına sahip RGB renk değerlerinin bir uzantısıdır.

Geçerli renk Anahtar Kelimesi

currentcolor Anahtar kelime bir elementin renk özelliğinin geçerli değerini tutan bir değişken gibidir.

Bu anahtar sözcük, belirli bir rengin bir öğede veya sayfada tutarlı olmasını istiyorsanız yararlı olabilir.

Örnek

Bu örnekte <div> öğesinin kenarlık rengi mavi olacaktır, çünkü <div> öğesinin metin rengi mavidir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

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

Örnek

Bu örnekte <div>'in arka plan rengi, gövde öğesinin geçerli renk değerine ayarlanmıştır:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

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

Örnek

Bu örnekte <div>'in kenarlık rengi ve gölge rengi, gövde öğesinin geçerli renk değerine ayarlanmıştır:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

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

Devralınan Anahtar Kelime

inherit Bir özellik, üst elemanın, değerini miras gerektiğini anahtar kelime belirtir.

inherit Anahtar kelime herhangi bir CSS özelliği için kullanılır ve herhangi bir HTML öğesine üzerinde yapılabilir.

Örnek

Bu örnekte <span>'ın kenarlık ayarları üst öğeden devralınır:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

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