मास्टर स्टाइलशीट के साथ डिफ़ॉल्ट ब्राउज़र स्टाइल को कैसे निकालें

इन युक्तियों के साथ तथ्यों को प्राप्त करें

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

डिफ़ॉल्ट ब्राउज़र शैलियों सहायक हो सकती हैं, लेकिन कई मामलों में वेब डिज़ाइनर इन शैलियों को हटाना चाहते हैं ताकि वे शैलियों के साथ ताजा शुरू कर सकें कि वे 100% नियंत्रण में हैं। यह "मास्टर स्टाइलशीट" के रूप में जाना जाता है इसका उपयोग करके किया जाता है।

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

वैश्विक डिफ़ॉल्ट

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

एचटीएमएल, बॉडी {मार्जिन: 0 पीएक्स; पैडिंग: 0 पीएक्स; सीमा: 0 पीएक्स; }

आप फ़ॉन्ट को लगातार बनाना चाहते हैं। फ़ॉन्ट आकार को 100 प्रतिशत या 1em पर सेट करना सुनिश्चित करें, ताकि आपका पृष्ठ पहुंच योग्य हो, लेकिन आकार अभी भी सुसंगत है। और लाइन-ऊंचाई शामिल करना सुनिश्चित करें।

शरीर {फ़ॉन्ट: 1em / 1.25 एरियल, हेल्वेटिका, संस-सेरिफ़; }

शीर्षक प्रारूपण

हेडलाइन या हेडर टैग (एच 1, एच 2, एच 3, इत्यादि) आमतौर पर बड़े मार्जिन या उनके चारों ओर पैडिंग के साथ बोल्ड टेक्स्ट में डिफ़ॉल्ट होते हैं। वजन, मार्जिन और पैडिंग को साफ़ करके, आप सुनिश्चित करते हैं कि अतिरिक्त टैग किए बिना उनके टैग के चारों ओर ये टैग अभी भी बड़े (या छोटे) बने रहें:

एच 1, एच 2, एच 3, एच 4, एच 5, एच 6 {मार्जिन: 0; पैडिंग: 0; फ़ॉन्ट वजन: सामान्य; फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; }

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

सादा पाठ स्वरूपण

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

पी, वें, टीडी, ली, डीडी, डीटी, उल, ओएल, ब्लॉकक्वोट, क्यू, संक्षिप्त नाम, abbr, ए, इनपुट, चयन, textarea {मार्जिन: 0; पैडिंग: 0; फ़ॉन्ट: सामान्य सामान्य सामान्य 1em / 1.25 एरियल, हेल्वेटिका, संस-सेरिफ़; }

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

ब्लॉकक्वोट {मार्जिन: 1.25em; पैडिंग: 1.25em} क्यू {फ़ॉन्ट-शैली: इटालिक; } संक्षिप्त नाम, abbr {कर्सर: सहायता; सीमा-तल: 1 पीएक्स डैश किया गया; }

लिंक और छवियां

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

ए, ए: लिंक, ए: विज़िट, ए: एक्टिव, ए: होवर {टेक्स्ट-सजावट: अंडरलाइन; }

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

img {सीमा: कोई नहीं; }

टेबल्स

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

तालिका {मार्जिन: 0; पैडिंग: 0; सीमा: कोई नहीं; }

फार्म

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

फॉर्म {मार्जिन: 0; पैडिंग: 0; प्रदर्शन: इनलाइन; }

अपने लेबल के लिए कर्सर को बदलना भी एक अच्छा विचार है। इससे लोगों को यह देखने में मदद मिलती है कि जब लेबल क्लिक करेंगे तो लेबल कुछ करेगा।

लेबल {कर्सर: सूचक; }

सामान्य वर्ग

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

। स्पष्ट {स्पष्ट: दोनों; } .floatLeft {फ्लोट: बाएं; } .floatRight {फ्लोट: दाएं; } .textLeft {टेक्स्ट-संरेखण: बाएं; } .textRight {टेक्स्ट-संरेखण: दाएं; } .textCenter {टेक्स्ट-संरेखण: केंद्र; } .textJustify {टेक्स्ट-संरेखण: औचित्य; } .blockCenter {प्रदर्शन: ब्लॉक; मार्जिन बाएं: ऑटो; मार्जिन-दाएं: ऑटो; } / * चौड़ाई सेट करने के लिए याद रखें * / .bold {font-weight: bold; } .italic {फ़ॉन्ट शैली: इटालिक; } .underline {पाठ-सजावट: रेखांकन; }। नॉंडेंट {मार्जिन-बाएं: 0; पैडिंग-बाएं: 0; }। नोमार्गिन {मार्जिन: 0; } .nopadding {पैडिंग: 0; } .nobullet {सूची-शैली: कोई नहीं; सूची-शैली-छवि: कोई नहीं; }

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

संपूर्ण मास्टर स्टाइलशीट

/ * वैश्विक डिफ़ॉल्ट * / एचटीएमएल, शरीर {मार्जिन: 0 पीएक्स; पैडिंग: 0 पीएक्स; सीमा: 0 पीएक्स; } शरीर {फ़ॉन्ट: 1em / 1.25 एरियल, हेल्वेटिका, संस-सेरिफ़; } / * हेडलाइंस * / एच 1, एच 2, एच 3, एच 4, एच 5, एच 6 {मार्जिन: 0; पैडिंग: 0; फ़ॉन्ट वजन: सामान्य; फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; } / * पाठ शैलियों * / पी, वें, टीडी, ली, डीडी, डीटी, उल, ओएल, ब्लॉकक्वोट, क्यू, संक्षिप्त नाम, abbr, ए, इनपुट, चयन, textarea {मार्जिन: 0; पैडिंग: 0; फ़ॉन्ट: सामान्य सामान्य सामान्य 1em / 1.25 एरियल, हेल्वेटिका, संस-सेरिफ़; } ब्लॉकक्वोट {मार्जिन: 1.25em; पैडिंग: 1.25em} क्यू {फ़ॉन्ट-शैली: इटालिक; } संक्षिप्त नाम, abbr {कर्सर: सहायता; सीमा-तल: 1 पीएक्स डैश किया गया; } छोटा {फ़ॉन्ट आकार: .85em; } बड़ा {फ़ॉन्ट आकार: 1.2em; } / * लिंक और छवियां * / ए, ए: लिंक, ए: विज़िट किया गया, ए: सक्रिय, ए: होवर {टेक्स्ट-सजावट: अंडरलाइन; } img {सीमा: कोई नहीं; } / * टेबल्स * / टेबल {मार्जिन: 0; पैडिंग: 0; सीमा: कोई नहीं; } / * फॉर्म * / फॉर्म {मार्जिन: 0; पैडिंग: 0; प्रदर्शन: इनलाइन; } लेबल {कर्सर: सूचक; } / * सामान्य वर्ग * / .clear {स्पष्ट: दोनों; } .floatLeft {फ्लोट: बाएं; } .floatRight {फ्लोट: दाएं; } .textLeft {टेक्स्ट-संरेखण: बाएं; } .textRight {टेक्स्ट-संरेखण: दाएं; } .textCenter {टेक्स्ट-संरेखण: केंद्र; } .textJustify {टेक्स्ट-संरेखण: औचित्य; } .blockCenter {प्रदर्शन: ब्लॉक; मार्जिन बाएं: ऑटो; मार्जिन-दाएं: ऑटो; } / * चौड़ाई सेट करने के लिए याद रखें * / .bold {font-weight: bold; } .italic {फ़ॉन्ट शैली: इटालिक; } .underline {पाठ-सजावट: रेखांकन; }। नॉंडेंट {मार्जिन-बाएं: 0; पैडिंग-बाएं: 0; }। नोमार्गिन {मार्जिन: 0; } .nopadding {पैडिंग: 0; } .nobullet {सूची-शैली: कोई नहीं; सूची-शैली-छवि: कोई नहीं; }

जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 10/6/17 को संपादित किया गया