CSS Color Keywords

CSS இல் சில சிறப்பு முன்கணிக்கப்பட்ட நிற முக்கிய சொற்கள் உள்ளன, அவை color, background-color மற்றும் border-color போன்ற பண்புகளுடன் பயன்படுத்தப்படலாம்.

சிறப்பு முக்கிய சொற்கள்:

transparent
currentcolor
inherit

The transparent Keyword

transparent முக்கிய சொல் ஒரு நிறத்தை வெளிப்படையாக்க பயன்படுகிறது. இது பெரும்பாலும் ஒரு உறுப்புக்கு வெளிப்படையான பின்னணி நிறத்தை உருவாக்க பயன்படுத்தப்படுகிறது.

எடுத்துக்காட்டு

இங்கே, <div> உறுப்பின் பின்னணி நிறம் முழுமையாக வெளிப்படையாக இருக்கும், மேலும் பின்னணி படம் வெளிப்படும்:

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

div {
    background-color: transparent;
}

📝 குறிப்பு:

transparent முக்கிய சொல் rgba(0,0,0,0) க்கு சமமானது. RGBA நிற மதிப்புகள் ஒரு ஆல்ஃபா சேனலுடன் RGB நிற மதிப்புகளின் நீட்டிப்பாகும் - இது ஒரு நிறத்திற்கான ஒளிப்புக்மையை குறிப்பிடுகிறது. எங்கள் CSS RGB அத்தியாயம் மற்றும் எங்கள் CSS Colors அத்தியாயத்தில் மேலும் வாசிக்கவும்.

The currentcolor Keyword

currentcolor முக்கிய சொல் ஒரு உறுப்பின் color பண்பின் தற்போதைய மதிப்பை வைத்திருக்கும் மாறி போன்றது.

ஒரு உறுப்பில் அல்லது பக்கத்தில் ஒரு குறிப்பிட்ட நிறம் ஒத்திசைவாக இருக்க வேண்டும் என்றால் இந்த முக்கிய சொல் பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் <div> உறுப்பின் எல்லை நிறம் நீலமாக இருக்கும், ஏனெனில் <div> உறுப்பின் உரை நிறம் நீலம்:

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

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் <div> இன் பின்னணி நிறம் body உறுப்பின் தற்போதைய நிற மதிப்பாக அமைக்கப்படும்:

body {
    color: purple;
}

div {
    background-color: currentcolor;
}

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் <div> இன் எல்லை நிறம் மற்றும் நிழல் நிறம் body உறுப்பின் தற்போதைய நிற மதிப்பாக அமைக்கப்படும்:

body {
    color: green;
}

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

The inherit Keyword

inherit முக்கிய சொல் ஒரு பண்பு அதன் பெற்றோர் உறுப்பிலிருந்து அதன் மதிப்பைப் பெற வேண்டும் என்பதைக் குறிக்கிறது.

inherit முக்கிய சொல் எந்த CSS பண்புக்கும், மற்றும் எந்த HTML உறுப்புக்கும் பயன்படுத்தப்படலாம்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் <span> இன் எல்லை அமைப்புகள் பெற்றோர் உறுப்பிலிருந்து பெறப்படும்:

div {
    border: 2px solid red;
}

span {
    border: inherit;
}