Bu sayfada, transparent, current color ve inherit anahtar kelimeleri açıklayacağız.
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.
Bu anahtar sözcük, belirli bir rengin bir öğede veya sayfada tutarlı olmasını istiyorsanız yararlı olabilir.
inherit Anahtar kelime herhangi bir CSS özelliği için kullanılır ve herhangi bir HTML öğesine üzerinde yapılabilir.
Ş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>Paylaşım için teşekkürler
Rica Ederim..Yorumlarınız için Teşekkürler..Paylaşım için teşekkürler