मास्टर शैली शैलीको साथ पूर्वनिर्धारित ब्राउजर स्टाइलिङ कसरी हटाउने?

यी सुझावहरूसँग तथ्यहरू प्राप्त गर्नुहोस्

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

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

एक मास्टर शैलीपाना तपाईले तपाइँका सबै कागजातहरूमा पहिलो शैलसिट हुनुपर्छ। तपाइँले पूर्वनिर्धारित ब्राउजर सेटिङ्हरू हटाउन मास्टर स्टाइलसिट प्रयोग गर्दछ जुन क्रस-ब्राउजर वेब डिजाइनमा समस्याहरू हुन सक्छ। एक पटक मास्टर स्टाइलसिटको साथ शैलीहरू सफा गरिसकेपछि, तपाईंको डिजाइन सबै ब्राउजरहरूमा एकै ठाउँबाट सुरु हुन्छ - चित्रका लागि सफा क्यानभासहरू।

ग्लोबल डिफल्टहरू

तपाईंको मास्टर स्टाइलशिट पृष्ठमा मार्जिन, paddings र बोर्डिङ बाहिर शून्य गरेर सुरु गर्नु पर्छ। केहि वेब ब्राउजरहरूले कागजातको शरीरलाई ब्राउजर फलक किनाराबाट इन्डेन्टेड 1 वा 2 पिक्सेलमा पूर्वनिर्धारित गर्दछ। यसले यो सुनिश्चित गर्दछ कि तिनीहरू सबै त्यहि प्रदर्शन गर्दछ:

html, शरीर {मार्जिन: 0px; padding: 0px; सीमा: 0px; }

तपाईं पनि फन्ट अनुरूप बनाउन चाहानुहुन्छ। फन्ट साइज 100 प्रतिशत वा 1em सम्म सेट गर्न निश्चित हुनुहोस्, त्यसैले तपाईंको पृष्ठ पहुँचयोग्य छ, तर आकार अझै पनि स्थिर छ। र लाइन उचाइ समावेश गर्न निश्चित हुनुहोस्।

शरीर {फन्ट: 1em / 1.25 एरिड, हेलभेटिका, सेन्स सेरिफ; }

हेडलाइन ढाँचा

हेडलाइन वा हेडर ट्याग (H1, H2, H3, आदि) सामान्य रूपमा ठूलो मार्जिन वा वरिपरि चौडाइको साथ बोल्ड टेक्स्टमा डिफल्ट। वजन, मार्जिन र प्याडिङ्ग खाली गर्दै, तपाइँले यो सुनिश्चित गर्नुहुने छ कि यी ट्याग अझै थप शैलीहरू बिना वरिपरिको पाठ भन्दा ठूला (वा सानो) रहन्छ:

h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; फन्ट-वजन: सामान्य; फन्ट-परिवार: एरिड, हेलभेटिका, सेन्स सेरिफ; }

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

सादा पाठ ढाँचा

हेडलाइन्सहरूभन्दा बाहिर, त्यहाँ अन्य पाठ ट्यागहरू छन् जुन तपाईंले हटाउन निश्चित हुनुपर्दछ। एक सेट कि मान्छे प्रायः बिर्सन्छन् टेबल सेल ट्यागहरू (थ र टीडी) र ट्यागहरू (चयन, पाठ पाठ र इनपुट) हुन्। यदि तपाईंले आफ्नो शरीर र अनुच्छेद पाठको रूपमा त्यहि साइजलाई सेट गर्नुभएन भने, तपाइँ ब्राउजरहरूले तिनीहरूलाई कसरी प्रस्तुत गर्ने अनौठो रूपमा आश्चर्यचकित हुन सक्दछन्।

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; padding: 0; फन्ट: सामान्य सामान्य सामान्य 1em / 1.25 एरिड, हेल्भेटिका, सेन्स-सेरिफ; }

तपाईंको उद्धरणहरू (ब्लककोट र क्यू), एन्क्रिप्शन, र संक्षिप्त विवरणहरू थप अतिरिक्त शैलीमा पनि राम्रो छ, ताकि तिनीहरू एकदम बढी खडा हुनुहोस्:

blockquote {margin: 1.25em; padding: 1.25em} q {फन्ट-शैली: इटालिक; } संक्षिप्त नाम, abbr {कर्सर: मदद; सीमा-तल: 1px ड्यास गरिएको; }

लिङ्कहरू र तस्बिरहरू

लिङ्कहरू व्यवस्थित गर्न र त्यस उल्लिखित उज्ज्वल नीलो रेखांकित पाठबाट परिवर्तन गर्न सजिलो छ। म सधैं मेरो लिङ्कहरू रेखांकित गर्न मनपर्छ, तर यदि तपाइँ यसलाई फरक मनपर्छ भने तपाइँ यी विकल्पहरू अलग-अलग सेट गर्न सक्नुहुनेछ। म पनि मास्टर शैली पानामा रङहरू समावेश गर्दैन, किनभने यो डिजाइनमा निर्भर गर्दछ।

a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }

छविहरूसँग, सीमानाहरू बन्द गर्न महत्त्वपूर्ण छ। जबकि अधिकांश ब्राउजरहरूले सादा छवि वरिपरि सीमा नदेखाउँदा, जब छवि जोडिएको हुन्छ, ब्राउजरहरूले बोर्डमा घुमाउँछन्। यसलाई ठीक गर्न:

img {border: none; }

तालिकाहरू

जब तालिकाहरू अब लेआउट प्रयोजनका लागि प्रयोग गरिदैन, तपाइँले अझै पनि वास्तविक ट्याब्लेट डेटाको लागि प्रयोग गर्न सक्नुहुनेछ। यो HTML तालिकाहरूको ठीक प्रयोग हो। हामीले पहिले नै निश्चित गरेको छ कि पूर्वनिर्धारित पाठ आकार तपाईंको तालिका कक्षहरूको लागि समान छ, तर त्यहाँ केही अन्य शैलीहरू छन् जुन तपाईंले सेट गर्नुपर्छ ताकि तपाइँका तालिकाहरू त्यहि नै रहन्छन्।

तालिका {मार्जिन: 0; padding: 0; किनारा: कुनै पनि होइन; }

फारमहरू

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

फारम {मार्जिन: 0; padding: 0; प्रदर्शन: इनलाइन; }

तपाईंको लेबलका लागि कर्सर परिवर्तन गर्न यो राम्रो विचार हो। यसले मानिसहरूलाई मानिसहरूलाई हेर्नको लागि मद्दत गर्दछ कि लेबलले यसलाई केहि गर्न सक्दछ।

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

साधारण कक्षाहरू

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

स्पष्ट छ {स्पष्ट: दुवै; } .फ्लोटलफ्ट {फ्लोट: बायाँ; } .फ्लैटटाइट {फ्लोट: दायाँ; } .textLft {text-align: left; } .textRight {text-align: right; } .textCenter {पाठ-पङ्क्तिबद्ध: केन्द्र; } .textJustify {पाठ-पङ्क्तिबद्ध: justify; }। ब्लक कन्टेन {डिस्प्ले: ब्लक; मार्जिन-बायाँ: स्वत: मार्जिन-दायाँ: ओटो; } / * चौडाई सेट गर्न सम्झनुहोस् * / .बल्ड {फन्ट-वजन: बोल्ड; } .italic {फन्ट-शैली: इटालिक; } .रेन्डलाइन {पाठ-सजावट: रेखांकन; } .नोन्डेन्ट {मार्जिन-बायाँ: 0; padding-left: 0; } .नमर्जिन {मार्जिन: 0; } .nopadding {padding: 0; } .निबलेट {सूची शैली: कुनै पनि होइन; सूची शैली-छवि: कुनै पनि होइन; }

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

सम्पूर्ण मास्टर शैलसिटसिट

/ * ग्लोबल डिफल्ट * / html, शरीर {मार्जिन: 0px; padding: 0px; सीमा: 0px; } शरीर {फन्ट: 1em / 1.25 एरिड, हेलभेटिका, सेन्स-सेरिफ; } / * हेडलाइन * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; फन्ट-वजन: सामान्य; फन्ट-परिवार: एरिड, हेलभेटिका, सेन्स सेरिफ; } / * पाठ शैली * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; padding: 0; फन्ट: सामान्य सामान्य सामान्य 1em / 1.25 एरिड, हेल्भेटिका, सेन्स-सेरिफ; } ब्लकक्वाट {मार्जिन: 1.25em; padding: 1.25em} q {फन्ट-शैली: इटालिक; } संक्षिप्त नाम, abbr {कर्सर: मदद; सीमा-तल: 1px ड्यास गरिएको; } सानो {फन्ट-साइज: .85em; } ठूलो {फन्ट-आकार: 1.2em; } / * लिङ्क र छवियाँ * / एक, एक: लिङ्क, एक: भेटियो, एक: सक्रिय, एक: होवर {पाठ-सजावट: रेखांकन; } img {सीमा: कुनै; } / * टेबल * / तालिका {मार्जिन: 0; padding: 0; किनारा: कुनै पनि होइन; } / * रूप * / फारम {मार्जिन: 0; padding: 0; प्रदर्शन: इनलाइन; } लेबल {कर्सर: सूचक; } / * सामान्य कक्षाहरू * / अस्पष्ट {स्पष्ट: दुवै; } .फ्लोटलफ्ट {फ्लोट: बायाँ; } .फ्लैटटाइट {फ्लोट: दायाँ; } .textLft {text-align: left; } .textRight {text-align: right; } .textCenter {पाठ-पङ्क्तिबद्ध: केन्द्र; } .textJustify {पाठ-पङ्क्तिबद्ध: justify; }। ब्लक कन्टेन {डिस्प्ले: ब्लक; मार्जिन-बायाँ: स्वत: मार्जिन-दायाँ: ओटो; } / * चौडाई सेट गर्न सम्झनुहोस् * / .बल्ड {फन्ट-वजन: बोल्ड; } .italic {फन्ट-शैली: इटालिक; } .रेन्डलाइन {पाठ-सजावट: रेखांकन; } .नोन्डेन्ट {मार्जिन-बायाँ: 0; padding-left: 0; } .नमर्जिन {मार्जिन: 0; } .nopadding {padding: 0; } .निबलेट {सूची शैली: कुनै पनि होइन; सूची शैली-छवि: कुनै पनि होइन; }

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