यह संभावना नहीं है कि कोई भी इस तथ्य से बहस करेगा कि गणित और भौतिकी में अच्छी नींव के बिना, प्राकृतिक विज्ञान में अविश्वसनीय खोज करना, साथ ही रसायन विज्ञान के ज्ञान के बिना नई दवाओं का आविष्कार करना लगभग असंभव है। किसी भी उद्योग में मौलिक ज्ञान, एक ठोस आधार होता है जिस पर सफल कार्य का निर्माण होता है।

कैस्केडिंग स्टाइल शीट के साथ काम करते समय, सीखने वाली चीजों में से एक सीएसएस चयनकर्ता है। सीएसएस चयनकर्ताओं का अच्छा ज्ञान और उनका उपयोग करने की क्षमता वह ठोस आधार है जिस पर किसी वेबसाइट के बाहरी डिजाइन और लेआउट पर सफल काम किया जाता है।

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

2 शब्दों में CSS नियम बनाना

कैस्केडिंग स्टाइल शीट सीएसएस नियमों का एक सेट है, जिनमें से प्रत्येक को वेब पेज के एक विशिष्ट तत्व को प्रारूपित करने के लिए डिज़ाइन किया गया है। नियम में स्वयं 2 भाग होते हैं:

1. चयनकर्ता
2. विज्ञापन ब्लॉक

चयनकर्ता का उपयोग करके, हम उस तत्व को इंगित करते हैं जिस पर हम कार्य करेंगे। विज्ञापन ब्लॉक का उपयोग करके, हम चयनित तत्वों के लिए पैरामीटर सेट करते हैं। बदले में, विज्ञापन ब्लॉक में 2 भाग होते हैं:

1. संपत्ति
2. अर्थ

प्रॉपर्टी का उपयोग उस पैरामीटर को चुनने के लिए किया जाता है जिसे हम कॉन्फ़िगर करेंगे।

टैग चयनकर्ता

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

पी(
फ़ॉन्ट-परिवार: वर्दाना;
}

यदि हम प्रथम स्तर के शीर्षकों के लिए वर्दाना फ़ॉन्ट को अपनाना चाहते हैं, तो निम्नलिखित नोटेशन मान्य होगा:

एच1 (
फ़ॉन्ट-परिवार: वर्दाना;
}

इस प्रकार के चयनकर्ता का मुख्य और एकमात्र सिद्धांत उस टैग को निर्दिष्ट करना है जिसे स्वरूपित करने की आवश्यकता है।

चयनकर्ताओं का समूह दृश्य

विभिन्न टैग के लिए समान विज्ञापन ब्लॉक बनाना कोई गलती नहीं है। हालाँकि, सक्षम वेबमास्टरों के लिए ऐसी प्रविष्टि अस्वीकार्य है। उपरोक्त उदाहरण में, हमने 2 टैगों को एक ही फ़ॉन्ट दिया, और हमने दो अलग-अलग नियम बनाकर ऐसा किया, हालाँकि हम केवल एक के साथ भी ऐसा कर सकते थे। ऐसा करने के लिए, बस स्वरूपित टैग को अल्पविराम से अलग करके सूचीबद्ध करें:

पी, एच1 (
फ़ॉन्ट-परिवार: वर्दाना;
}

चयनकर्ताओं का समूह दृश्य बहुत सुविधाजनक है और सीएसएस फ़ाइल के आकार को काफी कम कर सकता है। जैसा कि पहले ही उल्लेख किया गया है, फ़ॉर्मेट किए जाने वाले टैग को अल्पविराम से अलग करके सूचीबद्ध करना पर्याप्त है।

सार्वभौमिक चयनकर्ता

लेकिन क्या होगा यदि आपको किसी वेब पेज के सभी तत्वों को समान मान निर्दिष्ट करने की आवश्यकता हो? अल्पविराम से अलग किए गए सभी टैग की सूची बनाएं? यह बिल्कुल भी आवश्यक नहीं है; सभी टैग सूचीबद्ध करने के बजाय, आपको केवल "*" निर्दिष्ट करना चाहिए। जी हां, बिल्कुल तारांकन चिन्ह, जिसकी मदद से किसी वेब पेज के सभी तत्वों को हाइलाइट किया जाता है।

* {
फ़ॉन्ट-परिवार: वर्दाना;
}

कक्षा चयनकर्ता

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

कंटेनर (
फ़ॉन्ट-परिवार: वर्दाना;
}

एक बिंदु और कक्षा का नाम लिखना ही काफी है। मैं यह नोट करना चाहूंगा कि "कंटेनर" वर्ग के साथ ब्लॉक तत्व में नेस्टेड सभी तत्वों को भी स्वरूपित किया जाएगा।

आईडी चयनकर्ता

यहाँ भी कक्षाओं जैसी ही कहानी है। फर्क सिर्फ इतना है कि हम अवधि की जगह "#" लिखते हैं। "अद्वितीय" आईडी वाले पैराग्राफ को प्रारूपित करने के लिए निम्नलिखित प्रविष्टि आवश्यक है:

#अद्वितीय (
फ़ॉन्ट-परिवार: वर्दाना;
}

ट्री फॉर्म HTML

अक्सर आप देख सकते हैं कि कैसे शुरुआती लोग सही प्रकार का चयनकर्ता नहीं चुन पाते हैं। इसका कारण हाइपरटेक्स्ट मार्कअप के ट्री फॉर्म की अस्पष्ट समझ है।

इस समस्या को हल करने के लिए, अपनी याददाश्त को ताज़ा करना और HTML में टैग के बीच संबंधों को याद रखना उपयोगी होगा।

HTML ट्री फॉर्म

जैसा कि आप उपरोक्त चित्रण से देख सकते हैं, बॉडी टैग अन्य सभी टैगों का पूर्वज है। नेस्टेड div टैग इसका बच्चा है, जो स्वयं h2 और p टैग का जनक और a टैग का पूर्वज है। और पहले स्तर की बुलेटेड सूची में 3 बाल तत्व (ली, उल) और 2 वंशज तत्व (ली) हैं।

उपरोक्त सभी टैग तीन प्रकार के संबंधों में फिट बैठते हैं:

1. पूर्वज - वंशज
2. माता-पिता - बच्चा
3. सहयोगी तत्व (सामान्य अभिभावक के समान स्तर पर टैग)

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

वंशज चयनकर्ता

यदि किसी निश्चित टैग के वंशजों को प्रारूपित करना आवश्यक है, तो हम उपयुक्त चयनकर्ता का उपयोग करते हैं। उदाहरण के लिए, किसी ब्लॉक तत्व (div) में सभी नेस्टेड पैराग्राफों को प्रारूपित करने के लिए, निम्नलिखित नोटेशन का उपयोग करें:

डिव पी (
रंग नीला;
}

पहले हम पूर्वज को इंगित करते हैं, फिर, एक स्थान से अलग करके, वंशज तत्व को इंगित करते हैं। उपरोक्त प्रविष्टि का अर्थ है: "div टैग के अंदर सभी अनुच्छेदों को नीले रंग में प्रदर्शित करें।" एक पैराग्राफ के भीतर सभी लिंक को प्रारूपित करने के लिए, हम निम्नलिखित लिखते हैं:

पी ए(
लाल रंग;
}

उपरोक्त प्रविष्टि का अर्थ है: "पैराग्राफ के भीतर सभी लिंक लाल रंग में प्रदर्शित करें।" जैसा कि आप देख सकते हैं, सब कुछ बहुत सरल है।

बाल चयनकर्ता

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

सब कुछ ठीक होगा, लेकिन इससे कुछ समस्याएं पैदा हो जाती हैं। "वास्तव में कौन से?" - आप पूछना। ठीक है, कम से कम यह तथ्य कि यदि कुछ गुण "पूर्वजों" को दिए जाते हैं, तो वे वंशज तत्वों को विरासत में मिलेंगे। ताकि हम फ़ॉर्मेटिंग के लिए तत्वों का सटीक चयन कर सकें, कई प्रकार के चयनकर्ताओं का आविष्कार किया गया, जिनमें चाइल्ड चयनकर्ता भी शामिल थे।

आइए कल्पना करें कि हमें केवल "जानकारी" वर्ग वाले ब्लॉक के चाइल्ड पैराग्राफ पर कार्य करने की आवश्यकता है; हमें वंशजों में कोई दिलचस्पी नहीं है। ऐसा करने के लिए हम चाइल्ड चयनकर्ता का उपयोग करते हैं:

जानकारी>पी (
फ़ॉन्ट-परिवार: एरियल;
}

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

उल>ली (
रंग नीला;
}

उपरोक्त प्रविष्टि का अर्थ है: "बुलेट सूची के सभी बच्चों का रंग नीला कर दें।" यह सीएसएस नियम उपयोगी हो सकता है, क्योंकि एक सूची के अंदर दूसरी भी हो सकती है।

कुछ मामलों में, सभी चाइल्ड तत्वों का नहीं, बल्कि केवल कुछ का चयन करना आवश्यक हो सकता है। पहले चाइल्ड तत्व को नियंत्रित करने के लिए, आपको छद्म तत्व का उपयोग करने की आवश्यकता है :पहला बच्चा

रैपर: पहला बच्चा (
फ़ॉन्ट-परिवार: ताहोमा;
}

उपरोक्त नियम का अर्थ है: "कक्षा "रैपर" के पहले चाइल्ड तत्व को ताहोमा फ़ॉन्ट में प्रदर्शित करें।"

छद्म तत्व :आखरी बच्चाअंतिम चाइल्ड तत्व को नियंत्रित करने में मदद करता है:

रैपर:अंतिम-बच्चा (
फ़ॉन्ट-परिवार: ताहोमा;
}

हमारे पास छद्म तत्व का उपयोग करके किसी भी बच्चे तत्व का चयन करने की क्षमता भी है :nवाँ-बच्चा

रैपर:एनवां-बच्चा(सम) (
रंग: गुलाबी;
}

उपरोक्त प्रविष्टि का अर्थ है: "कक्षा "रैपर" के सभी सम संख्या वाले बच्चों को गुलाबी रंग से हाइलाइट करें।" विषम तत्वों को उजागर करने के लिए, सम को प्रतिस्थापित करने की आवश्यकता है विषम.

प्रत्येक 5 तत्व का चयन करने के लिए आपको 5n जोड़ना होगा। यदि आप छठे से शुरू करके प्रत्येक चौथे तत्व का चयन करना चाहते हैं, तो आपको कोष्ठक में - 4n+6 को इंगित करना होगा। कोष्ठक में मान आपके विवेक पर बदले जा सकते हैं:

रैपर:nth-child(3n+2) (
बॉर्डर-तल: 1px ठोस काला;
}

उपरोक्त नियम इंगित करता है कि दूसरे से शुरू करते हुए, हर तीसरे बच्चे के तत्व पर जोर दिया जाना चाहिए।

छद्म कक्षाएं

कभी-कभी आपको उन वेब पेजों के तत्वों को प्रबंधित करने की आवश्यकता होती है जिनमें टैग नहीं होते हैं। इन समस्याओं को हल करने के लिए छद्म वर्ग और छद्म तत्व हैं। लिंक की विभिन्न स्थितियों को प्रबंधित करने के लिए, 4 प्रकार के छद्म वर्ग हैं:

ए:लिंक शांत स्थिति में लिंक के प्रकट होने के लिए जिम्मेदार है ए:होवर है जब माउस कर्सर उस पर मँडरा रहा है तो लिंक के प्रकट होने के लिए जिम्मेदार है ए:सक्रिय लिंक पर क्लिक करने पर उसके प्रकट होने के लिए जिम्मेदार है ए:विज़िट किया गया जिम्मेदार है पहले से देखे गए लिंक की उपस्थिति के लिए

इन छद्म वर्गों का उपयोग कैसे किया जा सकता है इसका एक उदाहरण:

एक लिंक (
रंग नीला;
}

ए: होवर (
नारंगी रंग;
}

ए:सक्रिय (
लाल रंग;
}

एक लिंक (
रंग: भूरा;
}

उपरोक्त प्रविष्टि का अर्थ है: "लिंक को उनकी सामान्य स्थिति में नीले रंग में हाइलाइट करें। उनके ऊपर होवर करते समय उन्हें नारंगी रंग में प्रदर्शित करें। क्लिक करने पर लिंक को लाल रंग में प्रदर्शित करें। उन लिंक को ग्रे रंग में हाइलाइट करें जिन्हें पहले ही देखा जा चुका है।"

छद्म वर्ग: होवर

इस छद्म वर्ग का उपयोग न केवल लिंक के संबंध में किया जा सकता है, क्योंकि हम वेब पेज के किसी भी अन्य तत्व पर होवर कर सकते हैं। उदाहरण के लिए:

Img: होवर (
बॉर्डर: 1px सॉलिड ग्रे;
}

उपरोक्त प्रविष्टि का अर्थ है: "सभी छवियों पर होवर करते समय उन्हें ग्रे फ्रेम के साथ चुनें।" इसी तरह, आप किसी अन्य तत्व पर कर्सर घुमाते ही उसे कॉन्फ़िगर कर सकते हैं।

छद्म तत्वों

छद्म तत्वों का उपयोग करना :पहलेऔर :बादहम इस या उस सामग्री को वेब पेज तत्वों के सामने या अंत में जोड़ सकते हैं। यदि हमें अनुच्छेदों के आगे कुछ जोड़ना हो तो हम निम्नलिखित लिखते हैं:

पी.ध्यान दें:पहले (
सामग्री: "ध्यान दें!";
}

उपरोक्त प्रविष्टि का अर्थ है: "ध्यान वर्ग वाले पैराग्राफ से पहले "ध्यान दें!" शब्द जोड़ें।" किसी तत्व के अंत में जोड़ने के लिए हम लिखते हैं:

पी.ध्यान दें:बाद में (
सामग्री: "ध्यान दें!";
}

छद्म तत्व :केंद्रइनपुट फ़ील्ड की उपस्थिति को नियंत्रित करने में मदद करता है:

इनपुट: फोकस (
पृष्ठभूमि-रंग: नीला;
फ़ॉन्ट-शैली: इटैलिक;
}

उपरोक्त प्रविष्टि का अर्थ है "इनपुट फ़ील्ड की पृष्ठभूमि को नीला रंग दें और टाइप करते समय इटैलिक फ़ॉन्ट शैली का उपयोग करें।"

छद्म तत्व का उपयोग करना ::चयनटेक्स्ट का चयन करते समय हम फ़ॉन्ट का रंग और पृष्ठभूमि चुन सकते हैं। डिफ़ॉल्ट रूप से, टेक्स्ट नीले रंग में हाइलाइट किया जाता है, और हम निम्नलिखित लिख सकते हैं:

::चयन (
रंग सफेद;
पृष्ठभूमि-रंग: काला;
}

उपरोक्त नियम का अर्थ है: "पाठ का चयन करने पर पृष्ठभूमि का रंग काला और फ़ॉन्ट का रंग सफेद प्रदर्शित करें।" यह चयनकर्ता फ़ायरफ़ॉक्स ब्राउज़र से अपरिचित है, और इस समस्या को हल करने के लिए आपको नियम से पहले निम्नलिखित जोड़ना होगा:

::-मोज़-चयन (
रंग सफेद;
पृष्ठभूमि-रंग: काला;
}

प्रकार के अनुसार बाल तत्व

इस प्रकार का चयनकर्ता मूल्यवान है क्योंकि हम न केवल बाल तत्वों को नियंत्रित कर सकते हैं, बल्कि वे तत्व भी जो एक विशिष्ट प्रकार से संबंधित हैं।

उदाहरण के लिए, हम क्लास कंटेनर वाले ब्लॉक की पहली चाइल्ड क्रमांकित सूची को हाइलाइट कर सकते हैं:

कंटेनर>ol:प्रथम-प्रकार (
रंग: पीला;
}

साथ ही, हमारे पास छद्म तत्व भी हैं :अंतिम-प्रकारऔर :nth-of-प्रकार, जो क्रमशः :last-child और :nth-child अनुकरण करते हैं।

#मुख्य>h2:अंतिम-प्रकार (
रंग: पीला;
}

उपरोक्त उदाहरण में, हमने पहचानकर्ता मुख्य के साथ ब्लॉक से संबंधित अंतिम दूसरे स्तर के चाइल्ड हेडर को हाइलाइट किया है।

आसन्न तत्व चयनकर्ता

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

एच1+पी (
फ़ॉन्ट: इटैलिक 20px एरियल;
}

उपरोक्त नियम के अनुसार, यदि h1 हेडिंग और पैराग्राफ के बीच कुछ और है, जैसे कि कोई छवि, तो p टैग फॉर्मेट नहीं किया जाएगा। आप इसके स्थान पर धन चिह्न का भी उपयोग कर सकते हैं ~ (टिल्डे). यह h1 शीर्षक के बाद सभी बुलेटेड सूचियों को प्रारूपित करेगा:

H1~ul (
नारंगी रंग;
}

गुण चयनकर्ता

इस प्रकार के चयनकर्ता का उपयोग करके, आप तत्वों को विशेषता के आधार पर चुनकर प्रारूपित कर सकते हैं। सभी बाहरी लिंक प्रबंधित करने के लिए आपको निम्नलिखित निर्दिष्ट करना होगा:

ए (
रंग: एक्वा;
}

प्रविष्टि href^='http://' का अर्थ है कि आपको http:// से शुरू होने वाले सभी लिंक का चयन करना होगा। ऐसे सीएसएस नियम इसलिए लागू होते हैं क्योंकि निरपेक्ष पते मुख्य रूप से बाहरी लिंक के लिए उपयोग किए जाते हैं।

ए (
भूरा रंग;
}

आपके पास ऐसी स्थिति हो सकती है जहां आपको उन छवियों को उजागर करने की आवश्यकता है जिनके शीर्षक में एक निश्चित शब्द है। आइए उदाहरण के लिए एक ऑनलाइन स्टोर लें जहां आपको फुटबॉल जूते की तस्वीरों के लिए एक फ्रेम बनाने की आवश्यकता है। सबसे अधिक संभावना है कि उनके नाम में बूट शब्द शामिल हो। इस स्थिति में, एक ccs नियम बनाएं:

आईएमजी (
बॉर्डर: 2px धराशायी ग्रे;
}

तारांकन चिन्ह आपको उन छवियों को चुनने में मदद करता है जिनके शीर्षक में बूट शब्द शामिल है।

संबंधित वर्ग वाले ब्लॉक में स्थित सभी छवियों का चयन करने के लिए, हम निम्नलिखित सीएसएस नियम बनाते हैं:

रिश्तेदार (
बॉर्डर: 2px धराशायी ग्रे;
}

निषेध का छद्म वर्ग

यदि आपने कभी वर्डप्रेस इंजन से निपटा है, तो आपको पता होना चाहिए कि इसमें सभी लिंक का एक पूर्ण रूप है। जैसा कि हमने ऊपर चर्चा की, यदि आपको बाहरी लिंक को हाइलाइट करने की आवश्यकता है, तो आप एक विशेषता चयनकर्ता का उपयोग कर सकते हैं, जो http:// से शुरू होते हैं। जैसा कि आप समझते हैं, वर्डप्रेस इंजन के साथ समस्या का यह समाधान काम नहीं करेगा। लेकिन हमारे पास एक शानदार नकार छद्म वर्ग है जिसका हम उपयोग कर सकते हैं:

ए:नहीं() (
बॉर्डर: 2px धराशायी भूरा;
}

उपरोक्त नियम का अर्थ है: "http://mysite.com से शुरू होने वाले लिंक को छोड़कर http:// से शुरू होने वाले सभी लिंक को भूरे रंग में हाइलाइट करें।" नकार छद्म वर्ग का उपयोग न केवल विशेषता चयनकर्ताओं के साथ, बल्कि अन्य सरल चयनकर्ताओं के साथ भी किया जा सकता है।

यह जानने योग्य है कि आप प्रत्येक चयनकर्ता के लिए केवल एक निषेध छद्म वर्ग का उपयोग कर सकते हैं। निम्नलिखित प्रविष्टि गलत होगी - .container:not(#info):not(h3)

आपके लिए सभी प्रकार के CSS चयनकर्ताओं को याद रखना संभवतः कठिन होगा, लेकिन यह आवश्यक नहीं है। जब आप काम करते हैं, पेज दर पेज टाइप करते हैं तो आप उनमें से कई को याद रखेंगे। और जैसा कि वे कहते हैं, अपनी याददाश्त को ताज़ा करने के लिए, आप जिस चयनकर्ता में रुचि रखते हैं उसे सही समय पर ढूंढने में सक्षम होने के लिए, इस पृष्ठ को अपने बुकमार्क में जोड़ना बहुत उपयोगी होगा।

मेरे लिए बस इतना ही है. मुझे आशा है कि आपको यह सामग्री उपयोगी लगी होगी। यदि हां, तो कृपया इस लेख को सोशल मीडिया पर दोबारा पोस्ट करें ताकि अधिक लोग इससे लाभान्वित हो सकें।

यहीं पर मैं आपको अलविदा नहीं कहता। आपका ध्यान देने के लिए धन्यवाद और अगले प्रकाशनों में मिलते हैं!

खैर, शुरुआत के लिए, मैं कहूंगा कि चयनकर्ता का उपयोग HTML दस्तावेज़ में उस तत्व को विशिष्ट रूप से पहचानने के लिए किया जाता है, जिस पर हम एक विशेष सीएसएस शैली लागू करना चाहते हैं।

तत्व चयनकर्ता

इस बिंदु तक, हम इस चयनकर्ता के साथ काम कर रहे हैं। जिस HTML तत्व पर हम इस शैली को लागू करना चाहते थे उसका नाम चयनकर्ता के रूप में उपयोग किया गया था। वे। उदाहरण के लिए अनुच्छेद (पी) के लिए एक कक्षा लिखने के बाद, पृष्ठ के सभी अनुच्छेदों ने इस वर्ग की शैली प्राप्त कर ली।

पी{
फ़ॉन्ट-आकार: 12px
}

अब एक ऐसी स्थिति की कल्पना करें जहां आपको पहला पैराग्राफ एक शैली में, दूसरा दूसरे में, तीसरा तीसरे में आदि बनाना होगा। यहां यह हमारी सहायता के लिए आएगा वर्ग के अनुसार चयनकर्ता.

वर्ग के अनुसार चयनकर्ता

आइए देखें कि सीएसएस में एक सामान्य वर्ग कैसे बनाया जाए। और ऐसा करना बहुत आसान है: पहले हम एक अवधि डालते हैं, फिर तुरंत, बिना किसी स्थान के, हम कक्षा का नाम लिखते हैं, और फिर घुंघराले कोष्ठक में शैली लिखते हैं। खैर, उदाहरण के लिए:

।हरा {
फ़ॉन्ट-परिवार: एरियल, वर्दाना, सैन्स-सेरिफ़;
फ़ॉन्ट-आकार: 12px; हरा रंग करें;
}

इस स्टाइल को कैसे लागू करें?

मान लीजिए कि हम इस शैली को दस्तावेज़ में एक विशिष्ट अनुच्छेद पर लागू करना चाहते हैं। यह html में इस तरह दिखेगा:

वर्ग = "हरा" > ... पैरा पाठ...

जैसा कि आप देख सकते हैं, विशेषता का उपयोग किया गया है कक्षाशैली नाम के अर्थ के साथ. यह स्पष्ट है? यहां आपके लिए एक और उदाहरण है:

यह एक सामान्य अनुच्छेद है, यह एक तत्व चयनकर्ता का उपयोग करता है

वर्ग = "हरा"> यह अनुच्छेद हरा है क्योंकि इस पर एक वर्ग लागू किया गया है

कक्षा='बड़ा_लाल' > और यह पैराग्राफ बड़े फ़ॉन्ट और लाल रंग में है

तत्व चयनकर्ता वर्ग द्वारा यह पैराग्राफ फिर से सामान्य है

पी {
फ़ॉन्ट-फ़ैमिली: एरियल, वर्दाना, सैन्स-सेरिफ़;
फ़ॉन्ट-आकार:18px;
}
।हरा(हरा रंग करें;)
।बड़ी लाल{
फ़ॉन्ट-आकार:28px;
लाल रंग;
}

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

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

आप बिंदु से पहले तत्व का नाम निर्दिष्ट करके वर्ग को केवल एक विशिष्ट तत्व (उदाहरण के लिए, एक पैराग्राफ) पर कार्य करवा सकते हैं:

पी.ग्रीन(हरा रंग करें;)

अब हरा वर्ग P तत्व के अलावा किसी अन्य चीज़ पर कार्य नहीं करेगा।

शीर्ष

आईडी द्वारा चयनकर्ता

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

एचटीएमएल भाग:

<Н1 आईडी = "फर्स्टहेडर" > पृष्ठ पर पहला शीर्षक

सीएसएस - भाग:

एच 1#फर्स्टहेडर { लाल रंग; फोंट की मोटाई: बोल्ड; पाठ-संरेखण: केंद्र }

जैसा कि आप देख सकते हैं, html भाग में, क्लास विशेषता के बजाय, आईडी विशेषता का उपयोग किया जाता है, और सीएसएस में, डॉट के बजाय, # चिह्न का उपयोग किया जाता है।

सिद्धांत रूप में, क्लास चयनकर्ता का उपयोग करके भी ऐसा ही किया जा सकता है, यह इस बात पर निर्भर करता है कि आप इसे कैसे पसंद करते हैं :)

शीर्ष

प्रसंग चयनकर्ता

ये बहुत काम की चीज़ है. मान लीजिए कि हमारे पास पाठ की तालिकाओं और पैराग्राफों वाला एक पृष्ठ है, और तालिका और पैराग्राफ दोनों में बोल्ड (मजबूत) शब्द हैं। और इसलिए, हमें अचानक पैराग्राफ में बोल्ड में हाइलाइट किए गए शब्दों को हरा बनाने की जरूरत पड़ी। तो यह यहाँ है.

व्लाद मर्ज़ेविच

एक पहचानकर्ता (जिसे "आईडी चयनकर्ता" भी कहा जाता है) किसी तत्व के लिए एक अद्वितीय नाम परिभाषित करता है, जिसका उपयोग इसकी शैली को बदलने और स्क्रिप्ट के माध्यम से इसे संदर्भित करने के लिए किया जाता है।

पहचानकर्ता का उपयोग करने का सिंटैक्स इस प्रकार है।

सार्वभौमिक चयनकर्ता

व्लाद मर्ज़ेविच

कभी-कभी आपको एक ही समय में वेब पेज के सभी तत्वों के लिए एक शैली सेट करने की आवश्यकता होती है, उदाहरण के लिए, एक फ़ॉन्ट या टेक्स्ट शैली सेट करें। इस मामले में, एक सार्वभौमिक चयनकर्ता जो वेब पेज के किसी भी तत्व से मेल खाता है, मदद करेगा।

तारांकन चिह्न (*) का उपयोग सार्वभौमिक चयनकर्ता को दर्शाने के लिए किया जाता है, और सामान्य तौर पर वाक्यविन्यास इस प्रकार है।

* (शैली नियमों का विवरण)

विशेषता चयनकर्ता

व्लाद मर्ज़ेविच

कई टैग उनके द्वारा उपयोग की जाने वाली विशेषताओं के आधार पर उनके प्रभाव में भिन्न होते हैं। उदाहरण के लिए, टैग केवल प्रकार विशेषता के मान को बदलकर एक बटन, टेक्स्ट फ़ील्ड और अन्य फॉर्म तत्व बना सकते हैं। हालाँकि, INPUT चयनकर्ता में शैली नियम जोड़ने से इस टैग का उपयोग करके बनाए गए सभी तत्वों पर एक साथ शैली लागू हो जाएगी। ऐसे तत्वों की शैली को लचीले ढंग से नियंत्रित करने के लिए, विशेषता चयनकर्ताओं को सीएसएस में पेश किया गया है।

बाल चयनकर्ता

व्लाद मर्ज़ेविच

चाइल्ड तत्व एक ऐसा तत्व है जो सीधे मूल तत्व के अंदर स्थित होता है। दस्तावेज़ तत्वों के बीच संबंधों को बेहतर ढंग से समझने के लिए, आइए थोड़ा कोड देखें (उदाहरण 12.1)।

उदाहरण 12.1. किसी दस्तावेज़ में तत्वों का घोंसला बनाना

HTML5 CSS 2.1 IE Cr Op Sa Fx

आसन्न चयनकर्ता

व्लाद मर्ज़ेविच

किसी वेब पेज के तत्वों को आसन्न तब कहा जाता है जब वे दस्तावेज़ कोड में तुरंत एक दूसरे का अनुसरण करते हैं। आइए तत्व संबंधों के कुछ उदाहरण देखें।

लोरेम इप्सम मातमआमेट बैठो.

इस उदाहरण में टैग टैग का एक बच्चा है

क्योंकि यह इस कंटेनर के अंदर है. क्रमश

माता-पिता के रूप में कार्य करता है .

प्रसंग चयनकर्ता

व्लाद मर्ज़ेविच

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

इस तरह आप एक ही समय में एक व्यक्तिगत टैग के साथ-साथ दूसरे टैग के अंदर मौजूद टैग के लिए भी शैली निर्धारित कर सकते हैं।

यह सामग्री चयनकर्ताओं का उपयोग करके इंटरनेट संसाधन पर स्टाइलिंग की मूल बातें के लिए समर्पित है।

CSS में चयनकर्ताओं का उपयोग किसी विशिष्ट को परिभाषित करने के लिए किया जाता है
HTML पेज में वह तत्व जिसके लिए आपको आवेदन करना है
या CSS शैली बदलें.

सीएसएस में चयनकर्ताओं के प्रकार

तत्व चयनकर्ता

आवश्यक CSS शैली देने के लिए, इस स्थिति में html तत्व का नाम चयनकर्ता के रूप में लिखा जाता है। उदाहरण के लिए, H1 शीर्षक के लिए वांछित शैली निर्दिष्ट करना पर्याप्त है, जिसके बाद ये शीर्षक वह रूप ले लेंगे जिसकी हमें आवश्यकता है। कोड इस प्रकार दिखेगा:

एच1 (
फ़ॉन्ट-आकार: 11pt;
}

अक्सर ऐसे समय होते हैं जब आपको विभिन्न शैलियों में शीर्षक बनाने की आवश्यकता होती है। यहां, एक वर्ग चयनकर्ता इस समस्या को हल करने में मदद करेगा।

वर्ग के अनुसार चयनकर्ता

सीएसएस में वर्ग चयनकर्ता सार्वभौमिक है। आप इसे इस प्रकार लिख सकते हैं: कक्षा के नाम से पहले हम एक बिंदु लिखते हैं, और उसके बाद ही घुंघराले कोष्ठक में हम उस शैली को इंगित करते हैं जिसकी हमें आवश्यकता है:

।लाल (
फ़ॉन्ट-परिवार: ताहोमा, सैन्स-सेरिफ़;
लाल रंग;
फ़ॉन्ट-आकार: 11pt;
}

वर्ग चयनकर्ता का उपयोग करने का एक उदाहरण. आइए इस शैली को html पेज में H1 हेडर पर लागू करें:

पृष्ठ का शीर्षक

ऊपर दिए गए उदाहरण से आप देख सकते हैं कि "वर्ग" विशेषता निर्दिष्ट सीएसएस शैली नाम के साथ लागू होती है " लाल".
एक और उदाहरण। HTML भाग में हम लिखते हैं:

यह हेडर नीला है क्योंकि संबंधित वर्ग इस पर लागू होता है

पहचान".

HTML दस्तावेज़ में यह इस तरह दिखेगा:

आइए इस अनुच्छेद के लिए शैली निर्धारित करें

सीएसएस दस्तावेज़ में:

पी#न्यूस्टाइल (रंग: नीला; फ़ॉन्ट-आकार: 12पीएक्स;)

परिणामस्वरूप, इस अनुच्छेद के लिए 12px आकार वाले नीले फ़ॉन्ट का उपयोग किया जाएगा।

प्रसंग चयनकर्ता

उतना ही आवश्यक घटक है संदर्भ चयनकर्ता.
उदाहरण के लिए, एक वेबसाइट पर टैग के साथ संलग्न "H1" शीर्षकों की आवश्यकता थी बोल्डलाल रंग में हाइलाइट करें:

H1 बोल्ड (रंग:लाल;)

जैसा कि आप देख सकते हैं, H1 शीर्षक पहले लिखा गया है, एक स्थान जोड़ा गया है, टैग बोल्डऔर फिर कोष्ठक में वह शैली निर्दिष्ट करें जो हमने निर्दिष्ट की है। इसे इस तरह शब्दों में व्यक्त किया जा सकता है: "यदि H1 हेडर के अंदर एक बोल्ड टैग है, तो टेक्स्ट लाल होना चाहिए।"

इस तरह, आप नेस्टिंग के विभिन्न स्तरों के साथ बुलेटेड सूचियों, तालिकाओं और यहां तक ​​कि उनकी कोशिकाओं में आइटमों के लिए शैलियाँ भी सेट कर सकते हैं।

अगला पृष्ठ -

कैस्केडिंग स्टाइल शीट्स (CSS) W3C कंसोर्टियम द्वारा घोषित एक स्टाइल मानक है। अवधि व्यापकविभिन्न प्रकार की शैलियों को मर्ज करने और बाहरी टैगों से आंतरिक टैग द्वारा शैलियों को प्राप्त करने की संभावना को इंगित करता है।

सीएसएस एक ऐसी भाषा है जिसमें दस्तावेज़ की उपस्थिति को परिभाषित करने के लिए गुणों का एक सेट होता है। सीएसएस विनिर्देश HTML तत्वों के साथ संचार करने के लिए गुणों और वर्णनात्मक भाषा को परिभाषित करता है।

सीएसएस एक अमूर्त है जिसमें वेब दस्तावेज़ की उपस्थिति को उसकी सामग्री से अलग परिभाषित किया जाता है।

कुछ शैलियाँ सभी ब्राउज़रों द्वारा समर्थित नहीं हैं। हालाँकि, आप कोई भी शैली निर्दिष्ट कर सकते हैं, क्योंकि असमर्थित शैलियों को आसानी से अनदेखा कर दिया जाएगा।

आपको इसकी भी आवश्यकता हो सकती है:

किसी दस्तावेज़ में शैलियाँ जोड़ने की विधियों के आधार पर, शैलियाँ तीन प्रकार की होती हैं।

आंतरिक शैलियाँ

आंतरिक शैलियाँ विशेषता द्वारा परिभाषित की जाती हैं शैलीविशिष्ट टैग. एक आंतरिक शैली केवल ऐसे टैग द्वारा परिभाषित तत्वों को प्रभावित करती है। यह विधि पारंपरिक HTML से थोड़ा अलग है।

उदाहरण

नीले पाठ वाला अनुच्छेद

परिणाम:

नीले पाठ वाला अनुच्छेद

लाल पाठ वाला अनुच्छेद

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

वैश्विक शैलियाँ

वैश्विक सीएसएस शैलियाँ कंटेनर में स्थित हैं , कंटेनर में बदले में स्थित है ... .

गुण टाइप करें = "टेक्स्ट/सीएसएस", पहले टैग के लिए आवश्यक था .........

वेब पेज के सभी पैराग्राफ में ग्रे टेक्स्ट का रंग

परिणाम:

वेब पेज के सभी पैराग्राफ में ग्रे टेक्स्ट का रंग

वेब पेज के सभी पैराग्राफ में ग्रे टेक्स्ट का रंग

बाहरी (जुड़ी हुई) शैलियाँ

बाहरी (संबंधित) शैलियों को एक्सटेंशन के साथ एक अलग फ़ाइल में परिभाषित किया गया है सीएसएस. बाहरी शैलियाँ साइट के सभी पृष्ठों को एक समान दिखने देती हैं।

शैलियों का वर्णन करने वाली फ़ाइल से लिंक करने के लिए, टैग का उपयोग करें एक कंटेनर में स्थित है ... .

इस टैग में दो विशेषताएँ निर्धारित होनी चाहिए: rel='स्टाइलशीट'और href, शैलियाँ फ़ाइल का पता परिभाषित करना।

उदाहरण

......... ......... .........

शैलियों को जोड़ना

वैश्विक और बाहरी शैलियों को जोड़ने का नियम शामिल है चयनकर्ताऔर विज्ञापन शैली.

नियम के बाईं ओर स्थित चयनकर्ता, उस तत्व को निर्धारित करता है जिसके लिए नियम निर्धारित किया गया है। इसके बाद, शैली घोषणाओं को घुंघराले ब्रेसिज़ में सूचीबद्ध किया जाता है, जिन्हें अर्धविराम से अलग किया जाता है। उदाहरण के लिए:

पी (पाठ-इंडेंट: 30px; फ़ॉन्ट-आकार: 14px; रंग: #666;)

शैली घोषणा एक जोड़ी है सीएसएस संपत्ति: सीएसएस मूल्य.

उदाहरण के लिए: लाल रंग

शैली को आंतरिक रूप से कनेक्ट करते समय, सीएसएस नियम, जो विशेषता मान है शैली, अर्धविराम द्वारा अलग की गई शैली घोषणाएँ शामिल हैं। उदाहरण के लिए:

सीएसएस चयनकर्ता

चयनकर्ता	विवरण	अधिक जानकारी
*	कोई भी तत्व
इ	टैग ई द्वारा परिभाषित तत्व
ई#मायआईडी	आईडी "myid" के साथ ई तत्व
ई.मायक्लास	वर्ग "मायक्लास" का ई तत्व
इ	विशेषता अस्तित्व चयनकर्ता
इ	विशेषता समानता चयनकर्ता
इ	मानों की सूची के साथ विशेषता चयनकर्ता	विशेषता चयनकर्ता
इ	विशेषता उपसर्ग चयनकर्ता
इ	विशेषता प्रत्यय चयनकर्ता
इ	विशेषता सबस्ट्रिंग चयनकर्ता
ई:लिंक	तत्व ई - एक लिंक जो अभी तक उपयोगकर्ता द्वारा नहीं देखा गया है	गतिशील छद्म वर्ग
ई: दौरा किया	तत्व ई - लिंक पहले ही उपयोगकर्ता द्वारा देखा जा चुका है	गतिशील छद्म वर्ग
ई:होवर	तत्व ई जब उस पर माउस मँडराते हैं	गतिशील छद्म वर्ग
ई:सक्रिय	उपयोगकर्ता सक्रिय तत्व ई	गतिशील छद्म वर्ग
ई: फोकस	फोकस में तत्व	गतिशील छद्म वर्ग
ई: लक्ष्य	ई तत्व जो लिंक का लक्ष्य है	लक्ष्य छद्म वर्ग
ई:लैंग	ई तत्व निर्दिष्ट भाषा में लिखा गया है	भाषा छद्म वर्ग
ई:सक्षम	तत्व ई - सुलभ रूप तत्व	राज्यों के छद्म वर्ग
ई:अक्षम	तत्व ई - दुर्गम रूप तत्व	राज्यों के छद्म वर्ग
ई:चेक किया गया	तत्व ई - सक्षम चेकबॉक्स या रेडियो बटन	राज्यों के छद्म वर्ग
ई:अनिश्चित	तत्व ई - अपरिभाषित चेकबॉक्स या रेडियो बटन	राज्यों के छद्म वर्ग
ई:जड़	तत्व ई, दस्तावेज़ रूट	संरचनात्मक छद्म वर्ग
E:nth-child(n)	तत्व E, मूल तत्व का nवाँ बच्चा	संरचनात्मक छद्म वर्ग
ई:एनवां-अंतिम-बच्चा(एन)	तत्व ई, मूल तत्व का नौवाँ बच्चा, अंत से गिनती	संरचनात्मक छद्म वर्ग
ई:वें-प्रकार(एन)	प्रकार E का nवाँ तत्व	संरचनात्मक छद्म वर्ग
ई:एनवां-अंतिम-प्रकार(एन)	प्रकार E का nवाँ तत्व, अंत से गिनती करते हुए	संरचनात्मक छद्म वर्ग
ई: पहला बच्चा	ई तत्व, माता-पिता की पहली संतान	संरचनात्मक छद्म वर्ग
ई:अंतिम-बच्चा	ई तत्व, माता-पिता की अंतिम संतान	संरचनात्मक छद्म वर्ग
ई: प्रथम प्रकार का	प्रकार E का पहला तत्व	संरचनात्मक छद्म वर्ग
ई: अंतिम प्रकार का	प्रकार E का अंतिम तत्व	संरचनात्मक छद्म वर्ग
ई: एकमात्र बच्चा	माता-पिता का एकमात्र संतान तत्व	संरचनात्मक छद्म वर्ग
ई: केवल प्रकार का	माता-पिता का ई प्रकार का एकमात्र तत्व	संरचनात्मक छद्म वर्ग
ई:खाली	ई तत्व जिसमें कोई संतान नहीं है	संरचनात्मक छद्म वर्ग
ई:नहीं(एक्स)	एक तत्व E जो एक साधारण चयनकर्ता X से मेल नहीं खाता है	निषेध का छद्म वर्ग
ई::पहली पंक्ति	तत्व E की पहली पंक्ति	छद्म तत्वों
ई::प्रथम अक्षर	तत्व E का पहला अक्षर	छद्म तत्वों
ई::पहले	तत्व E से पहले की सामग्री	छद्म तत्वों
ई::बाद	तत्व ई के बाद की सामग्री	छद्म तत्वों
ई::चयन	तत्व ई में चयन	छद्म तत्वों
ई एफ	एक F तत्व जो E तत्व के अंदर है
ई>एफ	एक F तत्व जो सीधे E तत्व के अंदर है
ई+एफ	वह F तत्व जो तुरंत E तत्व का अनुसरण करता है
ई~एफ	F तत्व जो E तत्व के बाद आता है

सार्वभौमिक चयनकर्ता

एक सार्वभौमिक चयनकर्ता HTML दस्तावेज़ में किसी भी तत्व से मेल खाता है।

तारांकन चिह्न (*) का उपयोग सार्वभौमिक चयनकर्ता को दर्शाने के लिए किया जाता है।

इसका उपयोग तब किया जाता है जब आपको किसी वेब पेज के सभी तत्वों के लिए समान शैली सेट करने की आवश्यकता होती है। उदाहरण के लिए:

* (मार्जिन: 0; पैडिंग: 0;)

कुछ मामलों में, तारांकन (*) वर्ण छोड़ा जा सकता है:
*।मेरी कक्षाऔर ।मेरी कक्षासमकक्ष,
*#मेरी आईडीऔर #मेरी आईडीसमकक्ष

टैग चयनकर्ता

चयनकर्ता कोई भी HTML टैग हो सकता है जिसके लिए स्टाइलिंग नियम परिभाषित हैं। उदाहरण के लिए:

H1 (रंग: लाल; पाठ-संरेखण: केंद्र;)

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

H1, h2, h3, h4 (रंग: लाल; पाठ-संरेखण: केंद्र;)

आईडी चयनकर्ता

HTML किसी भी टैग को एक विशिष्ट पहचानकर्ता निर्दिष्ट करने की क्षमता प्रदान करता है। पहचानकर्ता विशेषता द्वारा निर्दिष्ट किया गया है पहचान. उदाहरण के लिए:

...

पहचानकर्ता मान लैटिन अक्षर से शुरू होना चाहिए और इसमें अक्षर (,), संख्याएं (), हाइफ़न (-), और अंडरस्कोर (_) हो सकते हैं।

सभी विशेषता मान पहचान HTML दस्तावेज़ में अद्वितीय होना चाहिए। अगर वे मिलते हैं पहचानसमान मानों के साथ, तो इन पहचानकर्ताओं को अनदेखा कर दिया जाता है, और वेब पेज कोड अमान्य हो जाता है।

सीएसएस कोड में, एक पहचानकर्ता चयनकर्ता को हैश चिह्न (#) द्वारा दर्शाया जाता है। पहचानकर्ता के बाद से पहचानकेवल अद्वितीय तत्वों पर लागू होता है, हैश चिह्न (#) से पहले टैग नाम आमतौर पर छोड़ दिया जाता है:

Div#a1 (रंग: हरा;)

इसी तरह

#a1 (रंग: हरा;)

प्रयोग करने की सलाह दी जाती है पहचानतत्व को स्टाइल करने के लिए नहीं, बल्कि स्क्रिप्ट के माध्यम से या किसी लिंक का अनुसरण करके उस तक पहुंचने के लिए।

कक्षा चयनकर्ता

क्लास चयनकर्ताओं का उपयोग अक्सर स्टाइलिंग के लिए किया जाता है। टैग के लिए वर्ग विशेषता द्वारा निर्दिष्ट किया गया है कक्षा. उदाहरण के लिए:

...

कक्षा का नाम लैटिन अक्षर से शुरू होना चाहिए और इसमें अक्षर (,), संख्याएँ (), हाइफ़न (-), और अंडरस्कोर (_) हो सकते हैं।

यदि विशेषता पहचानविशिष्ट पहचान के लिए उपयोग किया जाता है, फिर विशेषता का उपयोग किया जाता है कक्षाटैग किसी न किसी समूह को सौंपा गया है।

सीएसएस कोड में, एक पहचानकर्ता चयनकर्ता को एक बिंदु (.) द्वारा दर्शाया जाता है। विभिन्न टैगों को एक ही वर्ग में वर्गीकृत किया जा सकता है। इस स्थिति में, अवधि (.) से पहले का टैग नाम हटा दिया जाता है:

I.हरा (रंग: #008000;) b.लाल (रंग: #f00;).नीला (रंग: #00f;)

एक टैग के लिए, आप एक ही समय में कई वर्गों को विशेषता में सूचीबद्ध करके निर्दिष्ट कर सकते हैं कक्षाएक स्थान के माध्यम से. इस मामले में, प्रत्येक निर्दिष्ट वर्ग की शैलियाँ तत्व पर लागू होती हैं।

...

यदि इनमें से कुछ वर्गों में समान शैली गुण हैं, लेकिन विभिन्न मानों के साथ, तो सीएसएस कोड में नीचे स्थित वर्ग के शैली मान लागू किए जाएंगे।

विशेषता चयनकर्ता

ऐसे कई विशेषता चयनकर्ता हैं जिनका उपयोग आप किसी टैग को उसकी विशेषताओं के आधार पर स्टाइल करने के लिए कर सकते हैं।

h1 (रंग: #800000;) /* h1 तत्व जिसमें शीर्षक विशेषता है */
इनपुट (बॉर्डर: 1px सॉलिड #sss; पैडिंग: 4px 6px; चौड़ाई: 300px;)
ए (पाठ-सजावट: कोई नहीं; सीमा-नीचे: 1px ठोस #06सी; रंग: #06सी;)
स्पैन (प्रदर्शन: इनलाइन-ब्लॉक; पृष्ठभूमि-छवि: यूआरएल ("/img/icon_sprite.png");)
ए, ए (पृष्ठभूमि: यूआरएल ("तस्वीर.जीआईएफ") नीचे बाईं ओर कोई दोहराव नहीं; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 32px;)
(प्रदर्शन: ब्लॉक; फ्लोट: बाएँ; चौड़ाई: 280px;)

टैग नाम और वर्गाकार ब्रैकेट ([)! के बीच कोई स्थान नहीं होना चाहिए!

सार्वभौमिक चयनकर्ता, टैग, पहचानकर्ता, वर्ग और विशेषता चयनकर्ता, और छद्म वर्ग सभी सरल चयनकर्ता हैं।

सरल चयनकर्ताओं को वेब दस्तावेज़ ट्री में तत्वों के संबंधों के आधार पर विशिष्ट अनुक्रमों में जोड़ा जा सकता है। ऐसे निर्माणों को कॉम्बिनेटर कहा जाता है।

प्रसंग चयनकर्ता

सबसे अधिक उपयोग किए जाने वाले कॉम्बिनरों में से एक संदर्भ चयनकर्ता है।

संदर्भ चयनकर्ता या वंशज चयनकर्ता कई तत्वों को परिभाषित करते हैं, जिनमें से एक दूसरे के भीतर समाहित होता है। एक संदर्भ चयनकर्ता में, सरल चयनकर्ताओं को एक स्थान से अलग किया जाता है।

उदाहरण

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

परिणाम:

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

बाल चयनकर्ता

एक बच्चा चयनकर्ता एक ऐसे तत्व की पहचान करता है जो दूसरे के अंदर ही होता है। चाइल्ड चयनकर्ता में, सरल चयनकर्ताओं को बड़े से बड़े चिह्न (>) द्वारा अलग किया जाता है।

उदाहरण

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

परिणाम:

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

आसन्न चयनकर्ता

एक आसन्न चयनकर्ता एक धन चिह्न (+) निर्दिष्ट करता है जो साधारण चयनकर्ताओं के दो अनुक्रमों को अलग करता है। इन अनुक्रमों द्वारा दर्शाए गए तत्व एक ही कंटेनर में समाहित होते हैं और दूसरा तुरंत पहले का अनुसरण करता है, किसी अन्य टैग द्वारा अलग नहीं किया जाता है।

उदाहरण

संवेदनशीलता

परिणाम:

संवेदनशीलता

आसन्न चयनकर्ता

एक आसन्न चयनकर्ता एक टिल्ड (~) वर्ण निर्दिष्ट करता है जो साधारण चयनकर्ताओं के दो अनुक्रमों को अलग करता है। इन अनुक्रमों द्वारा दर्शाए गए तत्व एक ही कंटेनर में समाहित हैं और दूसरा पहले का अनुसरण करता है (जरूरी नहीं कि सीधे)।

उदाहरण

---

संवेदनशीलता

"चेतन और अचेतन जीवन के सभी कार्य, उनकी उत्पत्ति के तरीके के अनुसार, प्रतिवर्त हैं।" उन्हें। सेचेनोव

---

रिफ्लेक्सोलॉजी रिफ्लेक्सिस के नियंत्रण के माध्यम से रोगों का उपचार है। इसका उपयोग जटिल उपचार कार्यक्रमों या व्यक्तिगत तकनीक के रूप में सफलतापूर्वक किया जाता है।

परिणाम:

संवेदनशीलता

"चेतन और अचेतन जीवन के सभी कार्य, उनकी उत्पत्ति के तरीके के अनुसार, प्रतिवर्त हैं।" उन्हें। सेचेनोव

रिफ्लेक्सोलॉजी रिफ्लेक्सिस के नियंत्रण के माध्यम से रोगों का उपचार है। इसका उपयोग जटिल उपचार कार्यक्रमों या व्यक्तिगत तकनीक के रूप में सफलतापूर्वक किया जाता है।