समीक्षा सीएसएस शैली प्राथमिकता स्तर

कैस्केडिंग स्टाइल शीट (सीएसएस) मुझे लगता है कि अन्य वेब-संबंधित भाषाओं की तुलना में सबसे सरल भाषाएं हैं, इसलिए बहुत से ऐसे लोगों को ढूंढना आश्चर्यजनक नहीं है, जो सिर्फ यह जानने के लिए शुरुआत कर रहे हैं कि वेबसाइट कैसे बनाई जाए, इस भाषा और HTML को पहले सीखना होगा।.

इस पोस्ट में, हम CSS मूल बातें पर वापस जाएंगे। हम यह समीक्षा करने जा रहे हैं कि सीएसएस शैलियों को शुरू में कैसे लागू किया जाता है, कौन सी शैलियाँ लागू होंगी, कैसे कुछ शैलियाँ एक दूसरे को ओवरराइट करती हैं जबकि अन्य नहीं करते हैं.

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

डिफ़ॉल्ट ब्राउज़र शैलियाँ

फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा और इंटरनेट एक्सप्लोरर वर्तमान में बाजार में शीर्ष पांच डेस्कटॉप ब्राउज़र हैं। ये ब्राउज़र और अन्य सभी ब्राउज़र HTML तत्वों को रेंडर करने के लिए अंतर्निहित डिफ़ॉल्ट शैलियों को शामिल करने के लिए एक मानक नियम का पालन करते हैं.

इसलिए, जब हम बिना किसी स्टाइल के कुछ रैंडम HTML एलिमेंट्स डालते हैं, तो आप देखेंगे कि यह अभी भी ब्राउजर में ठीक से रेंडर है.

लेकिन, यदि हम उन तत्वों का सावधानीपूर्वक निरीक्षण करते हैं, तो प्रत्येक ब्राउज़र में उनके लिए अलग-अलग मूल्य होते हैं “चूक” घोषणा जो ब्राउज़रों में असंगतता का कारण है, विशेष रूप से पुराने में जैसे IE6, 7 और फ़ायरफ़ॉक्स 3.0.

उदाहरण के लिए, जैसा कि आप ऊपर दिए गए स्क्रीनशॉट से देख सकते हैं, नवीनतम फ़ायरफ़ॉक्स ने इसका प्रतिपादन किया ब्लॉककोट के साथ डिफ़ॉल्ट रूप से मार्जिन: 16px 40px 16px 40px, जबकि दूसरी तरफ ए इंटरनेट एक्सप्लोरर 7 प्रस्तुत करेगा ब्लॉककोट साथ में मार्जिन: 0px 40px.

ऊपर दिखाई गई विसंगतियों को दूर करने के लिए, कई वेब डिजाइनर और डेवलपर्स उन सभी शैलियों को अधिलेखित करना पसंद करते हैं सीएसएस रीसेट. इस CSS फ़ाइल में आम तौर पर लगभग सभी HTML होते हैं प्रकार चयनकर्ता, उन्हें समान नियमों के साथ परिभाषित करते हैं.

कई सीएसएस रीसेट उपलब्ध हैं, लेकिन यहां मेरे तीन शीर्ष पसंदीदा हैं:

• Normalize.css
• सीएसएस रीसेट
• HTML5 रीसेट शैलियाँ

चयनकर्ताओं

आपके द्वारा देखे गए वेब डिज़ाइन / विकास ब्लॉग पर संभवतः आप अक्सर इस शब्द को पढ़ते हैं; चयनकर्ताओं.

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

चयनकर्ता टाइप करें

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

 p / ** घोषणा ** / 

सभी मैच होगा पी या अनुच्छेद तत्व और इसका उपयोग करके अंततः ब्राउज़र से दी गई डिफ़ॉल्ट शैलियों को अधिलेखित कर दिया जाएगा.

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

जब आपने एक वर्ग या यहां तक ​​कि कई वर्गों को एक तत्व में जोड़ा है, तो आप उन कक्षाओं को भी लक्षित कर सकते हैं। कक्षा चयनकर्ता ए से शुरू होता है डॉट पैरामीटर.

 .बॉक्स / ** घोषणा ** / 

उपरोक्त स्निपेट बॉक्स क्लास वाले सभी तत्वों से मेल खाएगा, या हम और भी विशेष रूप से चुन सकते हैं.

 p.box / ** घोषणा ** / 

यह केवल लक्ष्य होगा पी तत्व जिसमें है डिब्बा कक्षा.

जब हम उपयोग कर रहे हैं कक्षा चयनकर्ता, दोनों से एक ही शैली की घोषणा प्रकार चयनकर्ता और डिफ़ॉल्ट ब्राउज़र ओवरराइट किया जाएगा.

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

आईडी एक बहुत ही प्रतिबंधक विशेषता है, हम केवल एक ही कर सकते हैं आईडी एक तत्व पर और यह भी अद्वितीय होना चाहिए.

 
सामग्री
 

मामले में हमने ए आईडी एक तत्व में, हम उपयोग कर सकते हैं आईडी चयनकर्ता उस तत्व को लक्षित करने के लिए; आईडी चयनकर्ता एक हैश के साथ परिभाषित किया गया है # पैरामीटर.

 #uniqueID / ** घोषणा ** / 

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

शैलियाँ एम्बेड करना

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

बाहरी शैलियाँ

बाहरी शैलियाँ वे शैलियाँ हैं जो एक अलग फ़ाइल में जोड़ी जाती हैं, आमतौर पर ए में .सीएसएस फाइल जो तब HTML डॉक्यूमेंट से जुड़ी होती है टैग उन शैलियों को लागू करने के लिए.

और फाइलों में घोषित सभी शैलियों का व्यवहार होगा जैसा हमने उल्लेख किया है चयनकर्ताओं ऊपर अनुभाग, अर्थात् यह मुख्य रूप से अधिलेखित होगा डिफ़ॉल्ट ब्राउज़र शैली, शैली और चयनकर्ताओं के प्राथमिकता स्तर के आधार पर एक और शैली घोषणा को अधिलेखित करें.

शैलियों को संलग्न करने के लिए यह अभ्यास सबसे अनुशंसित तरीका है, खासकर जब आपके पास संलग्न करने के लिए कई पृष्ठों वाले सीएसएस कोड की हजारों लाइनें हैं.

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

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

आंतरिक शैलियाँ वे शैलियाँ हैं जो सीधे HTML दस्तावेज़ में एम्बेड की जाती हैं, आम तौर पर अंदर टैग.

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

इसकी प्राथमिकता के स्तर के आधार पर, आंतरिक शैली अधिक है, इसलिए यह बाहरी शैलियों को अधिलेखित कर देगा.

इनलाइन स्टाइल्स

इनलाइन शैलियाँ ऐसी शैलियाँ हैं जो सीधे HTML तत्व में सन्निहित हैं.

 
यह एक पैराग्राफ है
 

ऊपर यह उदाहरण जोड़ देगा 5px पैराग्राफ तत्व के लिए मार्जिन और यह आंतरिक और बाहरी दोनों शैलियों में उस तत्व के लिए घोषित मार्जिन को भी अधिलेखित करेगा.

लेकिन ऐसा करने से बचें, क्योंकि आपके मार्कअप को उन सभी शैली की घोषणाओं के साथ जोड़ दिया जाएगा; यदि आपके पास शैलियों का एक गुच्छा एम्बेडेड है, तो यह आपके सभी HTML और शैलियों को देखने और बनाए रखने के लिए एक दुःस्वप्न भी बन जाएगा.

आगे की पढाई: CSS डालने के तीन तरीके - W3CSchools.

महत्वपूर्ण नियम

कुछ परिस्थितियाँ ऐसी होती हैं जब हमें किसी तत्व के लिए एक विशिष्ट शैली को लागू करना होता है लेकिन उस तत्व के लिए उसी शैली को स्टाइलशीट या दस्तावेज़ में अन्यत्र भी घोषित किया जाता है। उदाहरण के लिए:

हमारे पास एंबेडेड स्टाइल वाले निम्नलिखित एंकर टैग हैं

 यह एक कड़ी है 

और हमारे पास स्टाइल शीट में उस एंकर टैग के लिए एक अलग शैली भी है.

 a बॉर्डर: 1px ठोस # 333; पृष्ठभूमि-रंग: # 555;  

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

 एक सीमा: 1px ठोस # 333; महत्वपूर्ण; पृष्ठभूमि-रंग: # 555; महत्वपूर्ण  

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

आगे की पढाई:! महत्वपूर्ण सीएसएस घोषणाएँ: कैसे और कब उन्हें उपयोग करने के लिए - मुंहतोड़ पत्रिका.

निष्कर्ष

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

लेकिन, मुझे लगता है कि सामान्य रूप से हर वेब डिज़ाइनर इस बात से सहमत होगा कि किसी विषय के हमारे मौलिक ज्ञान की समीक्षा करने के लिए मूल बातें पर वापस जाना कभी-कभी आवश्यक होता है। वास्तव में, हम अक्सर कुछ बुनियादी सामानों को याद करते हैं, क्योंकि हम इस तरह के भयानक (और पागल) सामान से अधिक प्रभावित होते हैं.

अंत में, मैंने आपके लिए एक डेमो और स्रोत फ़ाइल प्रदान की है, जो इस लेख में हमारी चर्चा को और आगे बढ़ाएगी.

• डेमो
• स्रोत डाउनलोड करें

मुझे उम्मीद है कि आपको यह पोस्ट अच्छी लगी होगी और अगर आपको इसमें कुछ अशुद्धि लगे, या मैंने कुछ महत्वपूर्ण बिंदुओं को याद किया है, तो मुझे नीचे टिप्पणी अनुभाग में सूचित करने में संकोच न करें.