सीएसएस चयनकर्ताओं और संयोजन के लिए शब्दार्थ

CSS सिंटैक्स सीधा है और आपको इसे समझने के लिए IT में PhD की आवश्यकता नहीं है। हालांकि, यह कुछ लोकप्रिय भाषाओं में से एक है जो शब्द के सबसे शाब्दिक अर्थों में तर्कसंगत नहीं है। अन्य वेब प्रोग्रामिंग भाषाओं के विपरीत, जैसे कि जावास्क्रिप्ट और पीएचपी, सीएसएस आम तर्क का उपयोग करके समस्याओं का समाधान नहीं करता है। एल्गोरिथ्म जैसे "यदि X, तो Y बनाएं, अन्यथा Z बनाएं" या "सभी Y का चयन करें, तो X को उनके साथ बनाएं" को CSS जैसी भाषा में लागू नहीं किया जा सकता है। सीधे शब्दों में कहें, यह डिज़ाइन के लिए बनाई गई भाषा है, डिजाइनरों के लिए भाषा है, डेवलपर्स नहीं। अनुभवी प्रोग्रामर में से कुछ मैंने इस कारण से काम किया कि बहुत समय सीएसएस में महारत हासिल किया।

सीएसएस प्रशिक्षण कक्षाओं और आईडी के साथ-साथ उपयोग के साथ शुरू होता है। और # तत्वों को सीधे इंगित करने के लिए। यह पूरी तरह कार्यात्मक वेबसाइट बनाने के लिए पर्याप्त है, लेकिन यह एक पूर्ण डिजाइन परिवर्तन की स्थिति में एक लचीला समाधान नहीं है। आइए इन दुर्गम तत्वों के प्रबंधन के लिए एक वैकल्पिक दृष्टिकोण पर एक नज़र डालें।

पड़ोसी सहोदर संयोजक

आइए एक चयनकर्ता के साथ शुरू करें जो मुश्किल परिस्थितियों में सुविधाजनक है, - एक पड़ोसी सहोदर कॉम्बिनेटर के साथ। आसन्न सिबलिंग कॉम्बिनेटर को दो तत्वों के संयोजन द्वारा + संकेत का उपयोग करके दर्शाया गया है:

  h1 + p 

यह DOM में h1-element के तुरंत बाद स्थित अगले p-element को हाइलाइट करता है। टाइपोग्राफिक सिद्धांत बताता है कि हमें किसी पाठ के पैराग्राफ में इंडेंट का उपयोग करना चाहिए, लेकिन केवल तभी जब वे दूसरे पैराग्राफ का पालन करें। व्यवहार में, इसका इस्तेमाल पहले को छोड़कर सभी पैराग्राफ को इंडेंट करने के लिए किया जा सकता है:

 p + p { text-indent: 1em; } 

यह वर्ग = "प्रथम" के साथ पहले पैराग्राफ को उजागर करने की तुलना में बहुत अधिक सुविधाजनक है। तीन लाइनें, कोई कक्षाएं नहीं और पूर्ण ब्राउज़र समर्थन। यदि आप p टैग के अंदर साइट को भरने से संबंधित img टैग लगाते हैं (जैसा कि आपको वास्तव में करना चाहिए), तो आप केवल नकारात्मक -1em मान का उपयोग करके अपने बाएं मार्जिन को पीछे धकेल सकते हैं:

 p + p img { margin-left: -1em; } 

बहुत आसान है, है ना? लेकिन क्या होगा अगर हम सभी पैराग्राफ की पहली पंक्ति को उजागर करना चाहते हैं जो कि शेष सभी पैराग्राफ को बदलने के बिना शीर्षकों के तुरंत बाद दिखाई देती हैं? फिर से, हम प्रस्तुति वर्ग का उपयोग कर सकते हैं। आसन्न कंपाउंड कॉम्बीनेटर और छद्म तत्व से बना एक साधारण चयनकर्ता काम करेगा:

 h1 + p::first-line { font-variant: small-caps; } 

नोट: छद्म तत्व: सीएसएस 2.1 में पहली पंक्ति को अपनाया जाता है, छद्म वर्गों और छद्म तत्वों के बीच अंतर करने के लिए, नोटेशन :: का उपयोग सीएसएस 3 में किया जाता है।

वंशानुगत संयोजक

सामान्य मार्कअप प्रोटोकॉल को # पेज या # क्रैप में नामित तत्व में सेक्शन रखना है:

 <div id="page"> <header></header> <article> <section id="main"></section> <aside></aside> </article> <footer></footer> </div> 

भले ही आप HTML 5 या XHTML 1.1 सिंटैक्स का उपयोग करें, यह मूल प्रारूप आपको परिचित होना चाहिए। यदि आपके दस्तावेज़ में 960px की निश्चित चौड़ाई है, केंद्रित है और प्रत्येक तत्व क्षैतिज है, तो आपका CSS सबसे अधिक संभावना जैसा दिखता है:

 #page { width: 960px; margin: 0 auto; } header, article, footer { width: 100%; } 

शायद आप अपने काम में अधिक सटीक हैं, और शीर्ष-स्तरीय तत्वों में अवांछित परिवर्तनों से बचने के लिए, उपयोग करें:

 #page header, #page article, #page footer { width: 100%; } 

एक बेहतर तरीका है। हम सभी सार्वभौमिक चयनकर्ता * से परिचित हैं। यदि आप वंशानुगत चयनकर्ता के साथ इसके उपयोग को जोड़ते हैं, तो आप "पोते" तत्वों पर कोई प्रभाव डाले बिना, # तत्वों के प्रत्यक्ष वंशज का चयन कर सकते हैं।

 #page > * { width: 100%; } 

भविष्य में, यह आपको दस्तावेज़ में शीर्ष-स्तरीय तत्वों को जोड़ने या निकालने में मदद करेगा। हमारी प्रारंभिक लेआउट योजना पर लौटते हुए, यह हेडर, लेख और पाद लेख तत्वों को प्रभावित करेगा, लेकिन यह लेख तत्व के अंदर #main और बाकी सभी चीजों को स्पर्श नहीं करेगा।

स्ट्रिंगर और सब स्ट्रिंग एटिट्यूड सेलेक्टर्स

गुण चयनकर्ता सबसे शक्तिशाली हैं। वे सीएसएस 2.1 में भी मौजूद थे और आमतौर पर इनपुट [प्रकार = "पाठ"] या [href = "# शीर्ष"] के रूप में उपयोग किया जाता था। लेकिन CSS3 स्ट्रिंग्स और सबस्ट्रिंग के रूप में एक गहरे स्तर का नियंत्रण प्रदान करता है।

नोट: अब तक, हमने जो कुछ भी चर्चा की है वह सीएसएस 2.1 मानक से संबंधित है, लेकिन अब हम CSS3 क्षेत्र में प्रवेश कर रहे हैं।

चार मूल स्ट्रिंग विशेषता चयनकर्ता हैं, जहां 'v' = मान, 'a' = विशेषता है।
v किसी स्थान द्वारा अलग किए गए मानों की सूची में से एक है: तत्व [a ~ a = "v"]
v से शुरू होता है: तत्व [a ^ = "v"]
v: तत्व [a $ = "v"] के साथ समाप्त होता है
एक मान होता है: तत्व [a * = "v"]

पंक्ति विशेषता चयनकर्ताओं की क्षमता लगभग अंतहीन है, लेकिन आइकन एक महान उदाहरण हैं। मान लीजिए कि आपके पास सामाजिक नेटवर्क पर प्रोफ़ाइल की लिंक की एक अनियंत्रित सूची है:

 <ul id="social"> <li><a href="http://facebook.com/designfestival">Like on Facebook</a></li> <li><a href="http://twitter.com/designfestival">Follow on Twitter</a></li> <li><a href="http://feeds.feedburner.com/designfestival">RSS</a></li> </ul> 

किसी कीवर्ड को खोजने के लिए उनके href विशेषता के माध्यम से अनुरोध करने के लिए उन्हें क्रम में रखना उतना ही सरल है। हम उन्हें इस तरह व्यवस्थित कर सकते हैं:

 #social li a::before { content: ''; background: left 50% no-repeat; width: 16px; height: 16px; } #social li a[href*="facebook"]::before { background-image: url(images/icon-facebook.png); } #social li a[href*="twitter"]::before { background-image: url(images/icon-twitter.png); } #social li a[href*="feedburner"]::before { background-image: url(images/icon-feedburner.png); } 

इसी तरह, आप PDF दस्तावेज़ों में सभी लिंक का चयन कर सकते हैं जिसमें Suffix विशेषता चयनकर्ता है:

 a[href$=".pdf"]::before { background-image: url(images/icon-pdf.png); } 

CSS3 में सबस्ट्रिंग विशेषताओं का समर्थन नहीं करने वाले ब्राउज़र इन आइकन को नहीं दिखाएंगे, लेकिन यह इतना महत्वपूर्ण नहीं है - वे बहुत कार्यक्षमता के बिना, केवल एक अच्छा जोड़ हैं।

संरचनात्मक छद्म वर्ग

अंत में, मैं छद्म वर्गों (छद्म तत्वों और लिंक और राज्य छद्म वर्गों के साथ भ्रमित नहीं होना) का उपयोग करने के लाभों को रेखांकित करना चाहता हूं। हम डोम में उनकी स्थिति के आधार पर तत्वों का चयन करने के लिए उनका उपयोग कर सकते हैं। संरचनात्मक छद्म वर्ग का उपयोग करने का एक अच्छा उदाहरण तत्व पेड़ में पहले (या अंतिम) तत्व को उजागर करना है, या सम और विषम तत्वों के बीच चयन करना है।

 <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> <li>List Item 6</li> </ul> ul li { border-top: 1px solid #DDD; } ul li:last-child { border-bottom: 1px solid #DDD; } ul li:nth-child(even) { background: #EEE; } 

नोट: CSS 2.1 में उपलब्ध एकमात्र छद्म तत्व है: पहला-बच्चा। अन्य सभी छद्म तत्व, जिनमें अंतिम बच्चे शामिल हैं, CSS3 मानक हैं।

हालांकि, आपको यह जानना होगा कि संरचनात्मक छद्म तत्वों का उपयोग कब नहीं करना चाहिए। उन्हें केवल एक तत्व को उसकी स्थिति से उजागर करने के लिए उपयोग किया जाना चाहिए, न कि इसकी सामग्री द्वारा। यदि आपको किसी तत्व पर कोई कार्रवाई करने की आवश्यकता है, तो DOM में इसके स्थान की परवाह किए बिना, अर्थपूर्ण अर्थ चयनकर्ताओं का उपयोग करें, उदाहरण के लिए, वर्ग, आईडी या स्ट्रिंग।

शायद आप पहले से ही उपरोक्त कुछ कॉम्बिनेटरों और चयनकर्ताओं का उपयोग कर रहे हैं - शायद सही या शायद नहीं - लेकिन एक अतिरिक्त अनुस्मारक जिसमें वे एक वर्ग या आईडी की तुलना में अधिक सुविधाजनक हैं, वे चोट नहीं पहुंचाएंगे। यहां तक ​​कि हम में से सबसे अच्छी तरह से ऐसी चीजों में अक्सर गलत होते हैं।