मास्टर स्टाइलशीटसह डीफॉल्ट ब्राउझर शैली कशी काढावी?

या टिपा सह तथ्य मिळवा

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

डीफॉल्ट ब्राउझर शैली उपयुक्त असू शकते परंतु बर्याच बाबतीत वेब डिझाइनर ही शैली काढून टाकायचे आहेत जेणेकरून ते शैलीशी ताजेतपणाने सुरू करू शकतील जे ते 100% च्या नियंत्रणात आहेत. हे "मास्टर स्टाइलशीट" म्हणून ओळखले जाते ते वापरला जातो.

मुख्य स्टिसिलशीट आपण आपल्या सर्व दस्तऐवजांमध्ये कॉल करतांना प्रथम स्टाईलशीट असावी. आपण क्रॉस-ब्राऊझर वेब डिझाइनमध्ये समस्या निर्माण करु शकणारे डीफॉल्ट ब्राउझर सेटिंग्ज साफ करण्यासाठी एक मास्टर स्टिफाइल वापरता एकदा आपण मास्टर स्टिलीटसह शैली साफ केल्यावर, आपले डिझाइन सर्व ब्राऊझर्समधील एकाच ठिकाणी सुरू होते - जसे की पेंटिंगसाठी स्वच्छ कॅन्व्हास.

ग्लोबल डीफॉल्ट्स

आपला मास्टर स्टिकरेट पृष्ठावर मार्जिन, पॅडिंग आणि सीमा ओलांडून प्रारंभ करायला हवा. काही वेब ब्राऊझर डॉक्युमेंटच्या शरीराला 1 किंवा 2 पिक्सेलमध्ये अडकले आहेत. हे ते सर्व समान प्रदर्शित करते याची खात्री करते:

html, शरीर {मार्जिन: 0 पिक्स; पॅडिंग: 0 पिक्सेल; सीमा: 0 पिक्स; }

आपल्याला फॉन्ट सुसंगत करायचा असेल. फॉन्ट आकार 100 टक्के किंवा 1em वर सेट करणे सुनिश्चित करा, म्हणजे आपले पृष्ठ प्रवेशयोग्य असेल परंतु आकार अद्याप सुसंगत असेल. आणि लाइन-उंची समाविष्ट करण्याचे सुनिश्चित करा.

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

मथळा स्वरूपन

ठळक शीर्षक किंवा शीर्षलेख टॅग (H1, H2, H3, इत्यादी) सहसा ठळक मजकूराकडे मोठ्या आकारासह किंवा त्यांच्या सभोवतालच्या पॅडिंगसह डीफॉल्ट होतात. वजन, मार्जिन आणि पॅडिंग साफ करून, आपण सुनिश्चित करता की हे टॅग्ज अतिरिक्त शैली न घेता त्यांच्या जवळपासच्या मजकूरापेक्षा मोठे (किंवा लहान) राहतील:

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

आपण आपल्या शीर्षलेख टॅग्सवर विशिष्ट आकार, अक्षरांचे अंतर आणि पॅडिंग सेट करण्याचा विचार करू शकता परंतु हे खरोखर आपण डिझाइन करत असलेल्या साइटच्या शैलीवर अवलंबून आहे आणि मास्टर शैली पत्रकातून बाहेर ठेवले जावे. आपण आपल्या विशिष्ट डिझाइनसाठी आवश्यक असलेल्या या शीर्षकासाठी अधिक शैली जोडू शकता.

साधा मजकूर स्वरूपन

मथळेपलीकडे, इतर मजकूर टॅग आहेत जे आपल्याला साफ करण्याची खात्री व्हावीत. एक लोक जे बहुतेकदा विसरतात ते एक टेबल सेल टॅग्ज (टीएच आणि टीडी) आणि फॉर्म टॅग्ज (सिलेक्ट, टेक्सटाएआ आणि इनपूट) आहेत. जर आपण ते आपले शरीर आणि परिच्छेद मजकूराप्रमाणे समान आकारात सेट न करता, तर आपण ब्राउझर त्यांना कशी प्रस्तुत करते ते आश्चर्यचकित होऊ शकते.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {मार्जिन: 0; पॅडिंग: 0; फॉन्ट: सामान्य सामान्य सामान्य 1em / 1.25 एरियल, Helvetica, sans-serif; }

आपल्या कोटेशन (BLOCKQUOTE आणि Q), संक्षेप, आणि संक्षेप थोडा जास्त शैली देण्यास देखील चांगले आहे, जेणेकरून ते आणखी थोडे अधिक उभे राहतील:

ब्लॉककोट {समास: 1.25em; पॅडिंग: 1.25em} q {फॉन्ट-शैली: इटॅलीक; } परिवर्णी शब्द, abbr {cursor: help; सीमा-तळाशी: 1 पीएक्स डॅश; }

दुवे आणि प्रतिमा

दुवे सहज हाताळण्यास आणि त्या वरून उज्ज्वल उज्वल रेषा अधोरेखित केलेल्या मजकूरामध्ये बदल करण्यास सोपे आहे. मी नेहमी माझे लिंक्स अधोरेखित करत राहण्यास प्राधान्य देते, परंतु आपण हे वेगळा मार्ग निवडल्यास आपण हे पर्याय स्वतंत्रपणे सेट करू शकता. मी मास्टर स्टाइल शीटमध्ये रंग समाविष्ट करत नाही, कारण हे डिझाइनवर अवलंबून आहे.

a, a: link, a: visited, a: सक्रिय, a: hover {text-decor: underline; }

प्रतिमा सह, सीमा बंद करणे महत्वाचे आहे बहुतेक ब्राऊझर्स साध्या प्रतिमाभोवती सीमा प्रदर्शित करत नाहीत, जेव्हा प्रतिमा जोडली जाते, तेव्हा ब्राऊझर सीमेवर चालू करतात याचे निराकरण करण्यासाठी:

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

सारण्या

सारण्या यापुढे लेआउट उद्देशांसाठी वापरली जात नसल्यास, आपण तरीही साइट वास्तविक टॅब्लुलर डेटासाठी वापरू शकता. हे HTML सारण्यांचा एक चांगला वापर आहे आम्ही आधीच आपल्या टेबल सेलसाठी डिफॉल्ट मजकूर आकार समान असल्याची खात्री केली आहे, परंतु आपण आपली मांडणी समान ठेवण्यासाठी काही इतर शैली देखील असाव्या:

सारणी {समास: 0; पॅडिंग: 0; सीमा: काहीही नाही; }

फॉर्म

इतर घटकांप्रमाणेच, आपण आपल्या फॉर्म्सभोवती मार्जिन व पेडिंग्ज साफ करायला हवे. मला आणखी एक गोष्ट म्हणजे फॉर्म टॅग " इनलाइन " म्हणून पुन्हा लिहीणे, जेणेकरुन आपण कोडमध्ये टॅग ठेवता तेथे अतिरिक्त स्पेस जोडू शकणार नाही. इतर मजकुर घटकांसह, मी निवडलेल्या, मजकूरिकेला आणि इनपुट वरून फाँट माहिती परिभाषित करतो, जेणेकरून हे माझे बाकीचे मजकूर सारखेच असेल.

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

आपल्या लेबलांसाठी कर्सर बदलणे देखील एक चांगली कल्पना आहे. हे लोकांना ते जेव्हा क्लिक करतात तेव्हा काहीतरी करेल हे लोकांना मदत करते.

लेबल {कर्सर: पॉइंटर; }

सामान्य वर्ग

मास्टर स्टाइलशीटच्या या भागासाठी, आपल्याला क्लासेस परिभाषित करा जे आपल्याला माहिती देते. हे काही वर्ग मी बर्याचदा वापरतो. लक्षात ठेवा की ते कोणत्याही विशिष्ट घटकामध्ये सेट नसतात, जेणेकरून आपल्याला आवश्यक असलेल्या गोष्टी त्यांना नियुक्त करू शकता:

स्पष्ट {स्पष्ट: दोन्ही; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textcenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; समास-डावीकडे: स्वयं; समास-उजवी: स्वयं; } / * ला रूंदी सेट करणे लक्षात ठेवा * / .bold {font-weight: bold; } .italic {font-style: italic; } .इनलाइन {मजकूर-सजावट: अधोरेखित; } .noindent {मार्जिन-डावा: 0; पॅडिंग-डावीकडे: 0; } .nomargin {समास: 0; } .nopadding {पॅडिंग: 0; } .nobullet {list-style: none; list-style-image: काहीही नाही; }

लक्षात ठेवा की या वर्गांना इतर कोणत्याही शैलींपुढे लिहून ठेवण्यात आले आहे आणि ते फक्त वर्ग आहेत, नंतर ते अधिक विशिष्ट शैली गुणधर्मांवर अधोरेखित करणे सोपे आहे जे नंतरच्या कॅसकेडमध्ये होतात . आपण एखाद्या घटकावरील सामान्य वर्ग सेट केला आहे आणि ते प्रभावी होत नसल्यास आपल्याला याची खात्री करण्यासाठी तपासावे की आपल्या नंतरच्या स्ट्रीशीट्सपैकी एका वेगळ्या शैलीमध्ये त्याच तत्वावर परिणाम होणार नाही.

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

/ * ग्लोबल डीफॉल्ट्स * / html, body {मार्जिन: 0 पिक्स; पॅडिंग: 0 पिक्सेल; सीमा: 0 पिक्स; } शरीर {फॉन्ट: 1em / 1.25 एरियल, हेल्व्हटिका, सेन्स-सेरिफ; } / * मथळे * / h1, h2, h3, h4, h5, h6 {मार्जिन: 0; पॅडिंग: 0; फॉन्ट वजन: सामान्य; फॉन्ट-फॅमिली: एरियल, हेल्व्हटिका, सेन्स-सेरीफ; } / * मजकूर शैली * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {मार्जिन: 0; पॅडिंग: 0; फॉन्ट: सामान्य सामान्य सामान्य 1em / 1.25 एरियल, Helvetica, sans-serif; } ब्लॉककोट {समास: 1.25em; पॅडिंग: 1.25em} q {फॉन्ट-शैली: इटॅलीक; } परिवर्णी शब्द, abbr {cursor: help; सीमा-तळाशी: 1 पीएक्स डॅश; } लहान {फॉन्ट-आकार: .85em; } मोठा {फॉन्ट-आकार: 1.2mm; } / * दुवे आणि प्रतिमा * / a, a: link, a: visited, a: सक्रिय, a: hover {text-decor: underline; } img {सीमा: काहीही नाही; } / * सारण्या * / सारणी {समास: 0; पॅडिंग: 0; सीमा: काहीही नाही; } / * फॉर्मस * / फॉर्म {समास: 0; पॅडिंग: 0; प्रदर्शन: इनलाइन; } लेबल {cursor: pointer; } / * सामान्य वर्ग * /. स्पष्ट {स्पष्ट: दोन्ही; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textcenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; समास-डावीकडे: स्वयं; समास-उजवी: स्वयं; } / * ला रूंदी सेट करणे लक्षात ठेवा * / .bold {font-weight: bold; } .italic {font-style: italic; } .इनलाइन {मजकूर-सजावट: अधोरेखित; } .noindent {मार्जिन-डावा: 0; पॅडिंग-डावीकडे: 0; } .nomargin {समास: 0; } .nopadding {पॅडिंग: 0; } .nobullet {list-style: none; list-style-image: काहीही नाही; }

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