वेब डिजाइनिंग के अंतर्गत कैस्केडिंग स्टाइल शीट्स जिसको संक्षेप में सीएसएस कहते हैं, एक वेब डिजाइनिंग तकनीक है, जिसकी सहायता से वेबपेज की स्टायलिंग व डिजाइनिंग की जाती है। CSS फ़ाइल का एक्सटेंशन .CSS होता है। इस फ़ाइल का उपयोग किसी वेबसाइट के पेजों की स्टायलिंग करने के लिए किया जाता है। CSS वस्तुतः स्टायलिंग के नियमों को उपलब्ध कराता है जिसका उपयोग वेबपेजों की डिजाइन करने के लिए किया जाता है। इसका मुख्य उद्देश्य पेजों की प्रेजेंटेशन को मनोभावन बनाना है।
किसी वेबपेज में CSS यूज करने के लिए css फ़ाइल बनाना अनिवार्य नहीं है। किसी वेबपेज के भीतर <style> टैग के भीतर CSS रूल्स को लिखकर पेज की स्टायलिंग की जा सकती है। जब CSS रूल्स को .CSS फ़ाइल में लिखा गया होता है तो उसे external CSS कहते हैं जबकि style टैग के भीतर css रूल्स होने पर उसे inernal CSS कहते हैं। ऐसा सम्भव है कि किसी वेबसाइट में external और internal CSS दोनों का उपयोग किया गया हो। इस बारे में हम आगे समझेंगें।
वेबपेज के जिस एलिमेंट के ऊपर सीएसएस को अप्लाई करना होता है, उसके लिए, सबसे पहले उस एलिमेंट को या एलिमेंट्स को सेलेक्ट करना होता है। इसके लिए सीएसएस सिलेक्टर्स को समझना जरूरी है।
वेब पेज के विभिन्न एलिमेंट्स को सेलेक्ट करने के लिए कुछ रूल्स बनाए गए हैं और एलिमेंट्स को सेलेक्ट करने के लिए जो रूल्स है वह सिलेक्टर्स पर अप्लाई किया जाता है। रूल्स को कर्ली ब्रेस { } के भीतर लिखा जाता है। जैसे selector {attribute:value; }
ध्यान दीजिए कि किसी सेलेक्टर के विभिन्न प्रकार के attributes होते हैं। किसी एट्रीब्यूट की value सेट करने के लिए attribute और वैल्यू को कोलन से separate करते हैं और colon के बाद वैल्यू लिखते हैं। एट्रीब्यूट वैल्यू pair के इस स्टेटमेंट को semicolon से terminate किया जाता है। स्टेटमेंट्स को एक ही लाइन में लिखा जा सकता है अथवा प्रत्येक स्टेटमेंट को अलग अलग लाइन में लिखा जा सकता है।
Selector {
attribute1:value; attribute2:value;
}
यदि किसी एट्रीब्यूट के एक से ज्यादा values हैं तो उन values को comma से separate करते हैं।
Selector {
attribute:value1, value2, value3;
attribute2:value;
}
Compound word दो या उससे अधिक वर्ड्स से बनते हैं और वर्ड्स के बीच मे स्पेस होता है जैसे Times New Roman । यदि किसी एट्रीब्यूट का value कंपाउंड वर्ड हो तो उसको single quota में लिखते हैं।
selector { attribute: 'compound word'; }
सीएसएस के अंतर्गत कई प्रकार के सिलेक्टर्स का प्रयोग किया जाता है। अलग-अलग प्रकार के सिलेक्टर्स के लिए अलग-अलग तरह के सिंबल्स का प्रयोग किया जाता है। उदाहरण के लिए यूनिवर्सल सिलेक्टर के लिए * symbol का प्रयोग किया जाता है जबकि आईडी सिलेक्टर के लिए # सिंबल का प्रयोग किया जाता है। इसी तरह, क्लास सिलेक्टर के लिए डॉट(.) सिंबल का प्रयोग किया जाता है जबकि चाइल्ड सेलेक्टर के लिए > सिंबल का प्रयोग किया जाता है। इन सब बातों को हम आगे लेख में उदाहरण सहित देखेंगे।
Universal selector *
सबसे पहला सिलेक्टर है यूनिवर्सल सिलेक्टर। यूनिवर्सल सिलेक्टर की सहायता से वेबपेज के सभी एलिमेंट्स को एकसाथ सिलेक्ट किया जाता है। कई बार ऐसा होता है कि हम वेबपेज के सभी एलिमेंट्स के किसी कॉमन एट्रीब्यूट को एक समान स्टाइलिंग देना चाहते हैं तो इसके लिए यूनिवर्सल सेक्टर का उपयोग किया जाता है। यूनिवर्सल सिलेक्टर के लिए * सिंबल का प्रयोग किया जाता है। ऐसा बहुत कम होता है कि हम पूरे वेब पेज पर सभी एलिमेंट्स के लिए एक समान स्टाइलिंग करें, अतः यूनिवर्सल सिलेक्टर का प्रयोग बहुत कम होने का चांस होता है। उदाहरण के लिए
*{
margin:0px;
}
Id selector #
इसके बाद दूसरे प्रकार का सिलेक्टर है जिसे आईडी सिलेक्टर कहते हैं। आईडी सिलेक्टर की सहायता से हम वेबपेज के किसी एलमेंट को उसके आइडी के आधार पर सिलेक्ट करते हैं और स्टायलिंग करते हैं। जैसा कि हम जानते हैं कि किसी भी एलिमेंट का आईडी यूनिक होता है, अतः आईडी सिलेक्टर की मदद से हम किसी एक एलमेंट को ही स्टाइलिंग दे सकते हैं। आईडी किसी एलिमेंट का एक एट्रिब्यूट होता है। उदाहरण के लिए
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p> Paragraph before primary div...</p>
<div id="primary-div">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni qui laborum veniam unde nam laboriosam ipsum distinctio perspiciatis? Provident, ipsum!
<p>First Paragraph inside div tag...</p>
</div>
<div class="secondary">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis!
<p>It is a paragraph inside 2nd div...</p>
<p>It is another paragraph inside 2nd div...</p>
</div>
</body>
</html>
#primary-div {
background-color: yellow;
}
Element selector
एलिमेंट सिलेक्टर का उपयोग करके हम उस नाम के जितने भी एलिमेंट वेबपेज में हैं उन सभी एलिमेंट्स पर हम स्टाइलिंग अप्लाई कर सकते हैं। एलिमेंट सेलेक्टर को हम टैग सेलेक्टर भी कह सकते हैं। उदाहरण के लिए
p{
color: red;
}
Grouping selector
Comma separator is used to group different selectors.
एलिमेंट्स ग्रुपिंग सिलेक्टर की मदद से हम विभिन्न प्रकार के एलिमेंट्स को ग्रुप कर लेते हैं और उन पर स्टायल अप्लाई करते हैं। मान लीजिए आपके पास कुछ अलग अलग एलिमेंट्स हैं और उन सभी एलिमेंट्स पर एक ही जैसा स्टाइल अप्लाई करना है तो ऐसी हालत में ग्रुपिंग सिलेक्टर का प्रयोग करते हैं। एलिमेंट्स को ग्रुप करने के लिए हम कौमा सेपरेटर का प्रयोग करते हैं। उदाहरण के लिए
<body>
<h1>Heading First</h1>
<p> Paragraph before primary div...</p>
<div class="secondary">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis!
<p>It is a paragraph inside 2nd div...</p>
<p>It is another paragraph inside 2nd div...</p>
</div>
</body>
/* grouping selector */
h1, p {
text-transform: uppercase;
}
Dot operator is used to create a class selector.
सबसे महत्वपूर्ण सिलेक्टर है क्लास सिलेक्टर। क्लास सिलेक्टर सबसे ज्यादा प्रयोग किए जाने वाला स्टाइलिंग सिलेक्टर है। क्लास सिलेक्टर का अभिप्राय यह है कि हम वेब पेज के अलग अलग एलिमेंट्स को समान क्लास एट्रिब्यूट देकर हम उस क्लास के आधार पर स्टाइलिंग कर सकते हैं। जिस जिस एलिमेंट में क्लास का नाम समान होंगा उन उन एलिमेंट पर उस क्लास के नाम से बना स्टाइलिंग एप्लाई हो जाएगा।
किसी खास एलिमेंट के ऊपर क्लास सिलेक्टर का प्रयोग करने के लिए हम Element.Class सिलेक्टर का प्रयोग करते हैं। उदाहरण के लिए
<body>
<h1>Heading First</h1>
<p> Paragraph before primary div...</p>
<div class="secondary">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis!
<p>It is a paragraph inside 2nd div...</p>
<p>It is another paragraph inside 2nd div...</p>
</div>
<div>
<h2>heading level Two Again</h2>
</div>
</body>
/* class selector */
.secondary {
color: blue;
}
Child selector >
Greater than symbol is used to create a child selector.
चाइल्ड सेलेक्टर से अभिप्राय वेबपेज के एलिमेंट्स के बीच पैरंट चाइल्ड रिलेशनशिप को ध्यान रखते हुए जो चाइल्ड एलिमेंट्स हैं उन चाइल्ड एलिमेंट्स पर स्टाइलिंग का प्रयोग करना है। उदाहरण के लिए
<body>
<h1>Heading First</h1>
<p> Paragraph before primary div...</p>
<div class="secondary">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis!
<p>It is a paragraph inside 2nd div...</p>
<p>It is another paragraph inside 2nd div...</p>
</div>
<div>
<h2>heading level Two Again</h2>
</div>
</body>
/* child selector */
div > p {
color:blue;
}
Descendant selector
Space operator is used to create a descendant selector.
डिसेंडेंट सिलेक्टर। असेंडिंग का अर्थ चढ़ना होता है और डिसेंडिंग का अर्थ उतरना होता है। जिस प्रकार एक पिता के पुत्र के पुत्र के पुत्र इत्यादि हो सकते हैं तो यह सारे पुत्र प्रथम पिता के डिसेंडेंट माने जाएंगे। ठीक इसी प्रकार जब किसी भी वेबपेज के भीतर वेब एलिमेंट्स के बीच में पूर्वज और पश्चज/अगली पीढ़ी का एक लंबा संबंध हो तो आने वाली पीढ़ी के एलिमेंट को सेलेक्ट करने के लिए डिसेंडेंट सिलेक्टर का प्रयोग किया जाता है। चाइल्ड सिलेक्ट की मदद से जहां एक ओर बिल्कुल अगली next पीढ़ी का सिलेक्शन होता है, ठीक उसी तरह, उससे थोड़ा आगे जाकर डिसेंडेंट सिलेक्टर के अंतर्गत किसी एलिमेंट के जितने भी अगले चाइल्ड एलिमेंट से है और उस चाइल्ड की चाइल्ड है, उन सभी एलिमेंट्स को सिलेक्ट किया जा सकता है।डिसेंडेंट सेलेक्टर के लिए हम ब्लेंक स्पेस ऑपरेटर का उपयोग करते हैं। इस बात को हम उदाहरण की सहायता से ज्यादा अच्छे तरीके से समझ सकते हैं। उदाहरण के लिए
<body>
<h1>Heading First</h1>
<p> Paragraph before primary div...</p>
<div class="secondary">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis!
<p>It is a paragraph inside 2nd div...</p>
<h2> heading level Two</h2>
<p>It is another paragraph inside 2nd div...</p>
</div>
<div>
<h2>heading level Two Again</h2>
</div>
</body>
/* Descendant selector */
div p {
color:blue;
}
Siblings selector +
Plus operator is used to create a Siblings selector.
सिबलिंग सेलेक्टर। चाइल्ड कलेक्टर और डिसेंडिंग कलेक्टर के अंतर्गत जहाँ अगली पीढ़ी के एलिमेंट्स को सिलेक्ट करते हैं वही सिबलिंग सिलेक्टर के द्वारा हम एक ही पीढ़ी के एलिमेंट्स को सेलेक्ट कर सकते हैं। जिस प्रकार एक पिता के कई पुत्र पुत्रियां होते हैं, उन पुत्र पुत्रियों को हम सिबलिंग कहते हैं। ठीक इसी प्रकार वेबपेज के जो अलग-अलग एलिमेंट्स है उन अलग-अलग एलिमेंट्स के बीच में जो संबंध होता है वह संबंध या तो पिता पुत्र संबंध होता है अथवा एक ही पीढ़ी के सिबलिंग का संबंध होता है। सिबलिंग भी दो तरह के माने जाते हैं। उदाहरण के लिए
<body>
<h1>Heading First</h1>
<p> Paragraph before primary div...</p>
<div class="secondary">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, officiis!
<p>It is a paragraph inside 2nd div...</p>
<h2> heading level Two</h2>
<p>It is another paragraph inside 2nd div...</p>
</div>
<div>
<h2>heading level Two Again</h2>
</div>
</body>
/* Siblings selector */
h2 + p {
color:blue;
}
Adjacent Siblings + और general Siblings ~
जब दो सिबलिंग एलिमेंट्स बिल्कुल एक दूसरे के अगल-बगल में होते हैं ऐसी सिब्लिंग्स को एडजसेन्ट सिबलिंग कहते हैं अन्यथा उन्हें जनरल सिबलिंग के अंतर्गत माना जाएगा। इस तथ्य को हम उदाहरण से ज्यादा अच्छी तरीके से समझ सकते हैं। उदाहरण के लिए
कैस्केडिंग स्टाइल शीट्स का उपयोग किसी वेब पेज में करने के 3 तरीके होते हैं।
External style sheet or Linked style
पहला तरीका यह है जिसके अंतर्गत किसी बाहरी स्टाइल शीट अर्थात एक css फ़ाइल जिसका फ़ाइल एक्सटेंशन css होता है को उस वेबपेज में लिंक कर दिया जाता है जिस वेबपेज के एलिमेंट्स पर css की स्टाइल अप्लाई करनी होती है। ऐसा करने के लिए link टैग का उपयोग उस वेबपेज के head टैग के भीतर किया जाता है।
Embedded style
किसी भी वेबपेज पर सीएसएस को अप्लाई करने का दूसरा तरीका <style> टैग है। इसके लिए स्टाइल टैग्स के भीतर css को लिखा जाता है।
Inline style
किसी वेबपेज के अंतर्गत सीएसएस को अप्लाई करने का तीसरा तरीका यह है कि जिस एलिमेंट के ऊपर सीएसएस अप्लाई करना है, उस एलिमेंट के भीतर स्टाइल अटरीब्यूट के द्वारा सीएसएस को परिभाषित कर दिया जाता है। इस तरीके से जब सीएसएस को परिभाषित किया जाता है तो वह सीएसएस केवल उसी एलिमेंट के ऊपर अप्लाई होता है।
लेखक अजीत कुमार
No comments:
Post a Comment