Selectors in CSS Free web designing Course Tutorials #15
पिछले ट्यूटोरियल में, हमने CSS लिखने के लिए विभिन्न तरीकों पर चर्चा की है। यहां, हम CSS में विभिन्न चयनकर्ताओं को सीखने के लिए आगे बढ़ रहे हैं। CSS चयनकर्ताओं का उपयोग किसी भी सामग्री को चुनने के लिए किया जाता है जिसे आप शैली करना चाहते हैं। ये सीएसएस नियमों का हिस्सा हैं। CSS चयनकर्ता अपनी id, क्लास, टाइप, विशेषता इत्यादि के अनुसार HTML तत्वों का चयन करते हैं।
.CSS चयनकर्ता HTML तत्वों को लक्षित करने के लिए उपयोग किए जाते हैं।
.चयनकर्ता हमारे लिए मार्कअप में एकल / एकाधिक HTML तत्वों को आसानी से लक्षित करना आसान बनाते हैं।
हम सीएसएस चयनकर्ताओं के चार प्रकार देखेंगे:
सीएसएस तत्व चयनकर्ता
CSS id चयनकर्ता
सीएसएस वर्ग चयनकर्ता
CSS ग्रुपिंग सेलेक्टर
जैसा कि पिछले वीडियो में से एक में चर्चा की गई थी, CSS लिखने का मूल सिंटैक्स है-
p {color: blue;}
परोक्त उदाहरण में, 'p' चयनकर्ता है। यह सभी पैराग्राफ को नीले रंग में बदल देगा।
तो चलिए अब tut14.html के रूप में एक नई फाइल बनाकर शुरू करते हैं और हमेशा की तरह, एक इंस्टेंट बॉयलरप्लेट विजुअल स्टूडियो कोड जोड़ें। <Title> टैग में CSS चयनकर्ता के रूप में शीर्षक दें। इस उदाहरण में, हम आंतरिक सीएसएस का उपयोग करेंगे, न कि इनलाइन सीएसएस का। हालाँकि, आप बाह्य CSS का भी उपयोग कर सकते हैं। मैं आंतरिक सीएसएस का उपयोग करते हुए समझाऊंगा क्योंकि मैं चाहता हूं कि सब कुछ पृष्ठ के भीतर हो। आइए सरल उदाहरण से शुरू करते हैं-
- तत्व चयनकर्ता
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
</div>
उपरोक्त कोड तीनों पैराग्राफ को लाल रंग में बदल देगा जैसा कि नीचे दिखाया गया है-
- कक्षा चयनकर्ता
यदि हम एक पैराग्राफ का चयन करना चाहते हैं और इसके लिए कई गुण निर्दिष्ट करते हैं, तो हम क्लास चयनकर्ता का उपयोग कर सकते हैं। आइए एक उदाहरण से समझते हैं-
<style>
.redElement{
Color: red;
}
.bgBlue{
Background-color: blue;
}
</style>
or
<body>
<h3>CSS Selectors</h3>
<p>This is a simple paragraph to demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
</div>
</body>
यह केवल दूसरे पैराग्राफ को "रेडीमेंट" और "bgBlue" श्रेणी में बदल देगा जैसा कि नीचे दिखाया गया है-
- आईडी चयनकर्ता
यदि हम किसी परिवर्तन को दिखाने के लिए एकमात्र पैराग्राफ का चयन करना चाहते हैं, तो हम आईडी चयनकर्ता का उपयोग करेंगे। आइए एक उदाहरण से समझते हैं-
<style>
#firstPara{
color: green;
}
</style>
or
<body>
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p>This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
</div>
</body>
उपरोक्त कोड लिखकर हम परिवर्तनों को इस प्रकार देखेंगे-
समूह का चयन करने वाला
Grouping Selector का उपयोग तब किया जाता है जब हमें एक से अधिक तत्वों में परिवर्तन करना होता है। आइए एक उदाहरण से समझते हैं। मान लें कि हमारे पास दो तत्व पाद और स्पैन हैं और हम दोनों तत्वों में समान परिवर्तन चाहते हैं। फिर हम निम्नलिखित कर सकते हैं-
<style>
footer, span{
Background-color: pink;
}
</style>
or
<body>
<h3>CSS Selectors</h3>
<p>This is a simple paragraph to demonstrate css selectors</p>
<p>This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
<span>this is span</span>
</div>
<footer>This is footer</footer>
</body>
तो, मुझे विश्वास है, आप सीएसएस चयनकर्ताओं की मूल अवधारणाओं को समझ गए होंगे। अब तक, आपको अपने दिमाग में दो बिंदु रखने होंगे-
CSS- Inline, Internal और External लिखने के तीन तरीके हैं।
CSS चयनकर्ताओं के मूल चयन कैसे करें।
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>CSS Selectors</title>
<style>
/* Element selector */
p{
border: 2px solid red;
}
/* Id selector */
#firstPara{
color: green;
}
/* Class selector */
.bgBlue{
color: yellow;
background-color: blue;
}
/* Grouping selector */
footer, span{
background-color: pink;
}
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
<span>this is span</span>
</div>
<footer>This is footer</footer>
</body>
</html>
