Colors In CSS Free web designing Course Tutorials #18
Colors In CSS
इस ट्यूटोरियल में, हम CSS में रंगों के बारे में जानने जा रहे हैं। Tut18.html के रूप में एक नई फ़ाइल बनाने से शुरू करें और एम्मेट संक्षिप्त नाम के माध्यम से तत्काल बॉयलरप्लेट जोड़ें। शीर्षक में कलर्स के रूप में सीएसएस में शीर्षक शीर्षक के तहत <शीर्षक> टैग दें। हमारे उदाहरण के लिए मूल कोड है-
<body>
<h2>This is my first box</h2>
<p id="firstPara">This is a paragraph from first box</p>
<h2>This is my first box</h2>
<p id="secondPara">This is a paragraph from second box</p>
<h2>This is my first box</h2>
<p id="thirdPara">This is a paragraph from third box</p>
</body>
1 CSS में रंग को परिभाषित करने की पहली विधि सीधे विशेष रंग नाम लिख रही है। इसका उदाहरण है !
#firstPara{
color:blueviolet; /* Color by name */
}
उपरोक्त कोड का उपयोग करते हुए, हमने अपने पैराग्राफ के रंग को ब्लू-वायलेट में बदल दिया है।
2 रंग को परिभाषित करने का दूसरा तरीका of RGB की मदद से है, 'जैसा कि नीचे दिखाया गया है। RGB रंग सीमा 0 से 255 तक भिन्न होती है।
यहां, हम RGB को एक फ़ंक्शन के रूप में मानते हैं और लाल, हरे और नीले रंग के लिए उस फ़ंक्शन में मान पास करते हैं। जैसा कि हम फ़ंक्शन में अलग-अलग मान देते हैं, यह लाल, हरे और नीले रंग के साथ विभिन्न रंगों के विभिन्न संयोजनों को बनाता है।
3. तीसरा रास्ता हेक्स रंग देकर है। हालांकि, यह बहुत कम ही उपयोग किया जाता है।
#thirdPara{
color: white;
background-color: #ff4532; /* Color by hex value */
}
उपरोक्त कोड में, हम "#" वर्ण देख सकते हैं। इसका उपयोग किसी भी रंग के हेक्साडेसिमल मूल्य देने के लिए किया जाता है। विभिन्न रंगों के हेक्साडेसिमल मान उत्पन्न करने के लिए आपको इंटरनेट पर विभिन्न संदर्भ मिलेंगे।
आइए अब हेक्स रंगों के काम को समझते हैं। हेक्स रंग भी एक तरह का RGB है। उदाहरण के लिए, एक हेक्स मान को '# 60DCA4' के रूप में लेते हैं, यहाँ 60 RGB का लाल है, DC RGB का हरा है, और A4 RGB का नीला है। इस रंग के लिए RGB में समान मूल्य कुछ होगा (96, 220,164)।
कलर पिकर सबसे दिलचस्प चीजों में से एक है जो आपको किसी भी रंग प्रकार का उपयोग करके वीएस कोड में मिलेगा। आप रंग बीनने वाले रंगों में से किसी भी रंग का चयन कर सकते हैं, और उस विशेष रंग प्रकार के लिए रंग पिकर द्वारा मान स्वचालित रूप से सेट हो जाएंगे।
पृष्ठभूमि का रंग भी उसी तरह काम करता है जैसे कि टेक्स्ट रंग काम करता है, उदाहरण के लिए:
#secondPara{
background-color: rgb(0,0,0);
}
सीएसएस में जहां भी रंग संपत्ति का उपयोग किया जाता है, आप उपरोक्त तीन तरीकों में से किसी को भी लागू कर सकते हैं। कुछ और गुण रंग का उपयोग करते हैं, जैसे सीमा संपत्ति और पृष्ठभूमि रंग, जिसे हम चरण दर चरण सीखेंगे क्योंकि हम पेशेवर वेबसाइटों के निर्माण में आगे बढ़ते हैं।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Colors in CSS</title>
<style>
#firstPara{
color:blueviolet; /* Color by name */
}
#secondPara{
color: rgb(223, 130, 54); /* Color by rgb value */
}
#thirdPara{
color: white;
background-color: #ff4532; /* Color by hex value */
}
</style>
</head>
<body>
<h2>This is my first box</h2>
<p id="firstPara">This is a paragraph from first box</p>
<h2>This is my first box</h2>
<p id="secondPara">This is a paragraph from second box</p>
<h2>This is my first box</h2>
<p id="thirdPara">This is a paragraph from third box</p>
</body>
</html>
