नमूना स्टाइल शीट के साथ कैस्केडिंग स्टाइल शीट का अवलोकन
जब आप स्क्रैच से कोई वेबसाइट बनाते हैं, तो परिभाषित मूल शैलियों से शुरू करना स्मार्ट होता है। यह एक साफ कैनवास और ताजा ब्रश से शुरू करने जैसा है। वेब डिज़ाइनरों का सामना करने वाली पहली समस्याओं में से एक यह है कि वेब ब्राउज़र सभी अलग हैं। डिफ़ॉल्ट फ़ॉन्ट आकार प्लेटफ़ॉर्म से प्लेटफ़ॉर्म तक अलग होता है, डिफ़ॉल्ट फ़ॉन्ट परिवार अलग होता है, कुछ ब्राउज़र शरीर टैग पर मार्जिन और पैडिंग परिभाषित करते हैं जबकि अन्य नहीं करते हैं, और इसी तरह। अपने वेब पृष्ठों के लिए डिफ़ॉल्ट शैलियों को परिभाषित करके इन विसंगतियों को प्राप्त करें।
सीएसएस और चरित्र सेट
सबसे पहले चीज़ें, अपने सीएसएस दस्तावेज़ों के चरित्र सेट को utf-8 पर सेट करें। हालांकि यह संभावना है कि आपके द्वारा डिजाइन किए गए अधिकांश पृष्ठ अंग्रेजी में लिखे गए हैं, कुछ को स्थानीय भाषाई और सांस्कृतिक संदर्भ के लिए स्थानांतरित किया जा सकता है। जब वे हैं, utf-8 प्रक्रिया को सरल बनाता है। बाहरी स्टाइल शीट में वर्ण सेट को सेट करने से HTTP शीर्षलेख पर प्राथमिकता नहीं ली जाएगी, लेकिन अन्य सभी परिस्थितियों में, यह होगा।
चरित्र सेट सेट करना आसान है। सीएसएस दस्तावेज़ की पहली पंक्ति के लिए लिखें:
@ चार्सेट "यूटीएफ -8";इस तरह, यदि आप सामग्री संपत्ति में या कक्षा और आईडी नामों के रूप में अंतरराष्ट्रीय वर्णों का उपयोग करते हैं, तो स्टाइल शीट अभी भी सही तरीके से काम करेगी।
पेज बॉडी स्टाइलिंग
अगली चीज़ एक डिफ़ॉल्ट स्टाइल शीट की आवश्यकता मार्जिन, पैडिंग और सीमाओं के बाहर शून्य करने के लिए शैलियों हैं। यह सुनिश्चित करता है कि सभी ब्राउज़र एक ही स्थान पर सामग्री रखें, और ब्राउज़र और सामग्री के बीच कोई छुपी जगह नहीं है। अधिकांश वेब पृष्ठों के लिए, यह पाठ के किनारे के बहुत करीब है, लेकिन वहां शुरू करना महत्वपूर्ण है ताकि पृष्ठभूमि छवियों और लेआउट डिवीजनों को सही ढंग से रेखांकित किया जा सके।
एचटीएमएल, बॉडी {मार्जिन: 0 पीएक्स; पैडिंग: 0 पीएक्स; सीमा: 0 पीएक्स; }डिफ़ॉल्ट फोरग्राउंड या फ़ॉन्ट रंग को काले और डिफ़ॉल्ट पृष्ठभूमि रंग को सफेद पर सेट करें। हालांकि यह अधिकांश वेबपृष्ठ डिज़ाइनों के लिए सबसे अधिक संभावना बदलता है, जबकि इन मानक रंगों को शरीर पर सेट किया गया है और एचटीएमएल टैग पहले पृष्ठ को पढ़ने और काम करने में आसान बनाता है।
एचटीएमएल, शरीर {रंग: # 000; पृष्ठभूमि: # एफएफएफ; }डिफ़ॉल्ट फ़ॉन्ट शैलियों
फ़ॉन्ट आकार और फ़ॉन्ट परिवार कुछ ऐसा होता है जो डिजाइन को पकड़ने के बाद अनिवार्य रूप से बदल जाएगा लेकिन 1 एम के डिफ़ॉल्ट फ़ॉन्ट आकार और एरियल, जिनेवा, या कुछ अन्य सैन्स-सेरिफ़ फ़ॉन्ट के डिफ़ॉल्ट फ़ॉन्ट परिवार से शुरू होता है। ईएमएस का उपयोग पृष्ठ को यथासंभव सुलभ रखता है, और एक सैन्स-सेरिफ़ फ़ॉन्ट स्क्रीन पर अधिक सुगम है।
एचटीएमएल, बॉडी, पी, वें, टीडी, ली, डीडी, डीटी {फ़ॉन्ट: 1 ए एरियल, हेलवेस्टिका, सैन्स-सेरिफ; }ऐसे अन्य स्थान हो सकते हैं जहां आपको टेक्स्ट मिल सकता है, लेकिन पी , वें , टीडी , ली , डीडी , और डीटी बेस फ़ॉन्ट को परिभाषित करने के लिए एक अच्छी शुरुआत है। एचटीएमएल और बॉडी को बस मामले में शामिल करें, लेकिन कई ब्राउज़र फ़ॉन्ट विकल्पों को ओवरराइड करते हैं यदि आप केवल HTML या बॉडी के लिए अपने फोंट को परिभाषित करते हैं।
मुख्य बातें
एचटीएमएल शीर्षलेख आपकी साइट की रूपरेखा में मदद करने के लिए उपयोग करने के लिए महत्वपूर्ण हैं और खोज इंजन को आपकी साइट में गहराई से जाने दें। शैलियों के बिना, वे सभी काफी बदसूरत हैं, इसलिए उन सभी पर डिफ़ॉल्ट शैलियों को सेट करें और प्रत्येक के लिए फ़ॉन्ट परिवार और फ़ॉन्ट आकार को परिभाषित करें।
एच 1, एच 2, एच 3, एच 4, एच 5, एच 6 {फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; } एच 1 {फ़ॉन्ट आकार: 2em; } एच 2 {फ़ॉन्ट आकार: 1.5em; } एच 3 {फ़ॉन्ट आकार: 1.2em; } एच 4 {फ़ॉन्ट आकार: 1.0em; } एच 5 {फ़ॉन्ट आकार: 0.9em; } एच 6 {फ़ॉन्ट आकार: 0.8em; }लिंक भूल जाओ नहीं
लिंक रंगों को स्टाइल करना हमेशा डिजाइन का एक महत्वपूर्ण हिस्सा होता है, लेकिन यदि आप उन्हें डिफ़ॉल्ट शैलियों में परिभाषित नहीं करते हैं, तो संभावना है कि आप कम से कम छद्म वर्गों को भूल जाएंगे। उन्हें नीले रंग में कुछ छोटे बदलाव के साथ परिभाषित करें और फिर साइट के परिभाषित किए जाने के लिए रंग पैलेट होने के बाद उन्हें बदलें।
नीले रंग के रंगों में लिंक सेट करने के लिए, सेट करें:
- नीले रंग के रूप में लिंक
- गहरे नीले रंग के रूप में लिंक गए
- हल्के नीले रंग के रूप में होवर लिंक
- पैलर नीले रंग के रूप में भी सक्रिय लिंक
जैसा कि इस उदाहरण में दिखाया गया है:
ए: लिंक {रंग: # 00 एफ; } ए: विज़िट {रंग: # 00 9; } ए: होवर {रंग: # 06 एफ; } ए: सक्रिय {रंग: # 0 सीएफ; } एक काफी निर्दोष रंग योजना के साथ लिंक स्टाइल करके यह सुनिश्चित करता है कि मैं किसी भी कक्षा को नहीं भूलूंगा, और डिफ़ॉल्ट नीले, लाल और बैंगनी से थोड़ा कम जोर देता हूं।पूर्ण स्टाइल शीट
यहां पूर्ण स्टाइल शीट है:
@ चार्सेट "यूटीएफ -8"; एचटीएमएल, बॉडी {मार्जिन: 0 पीएक्स; पैडिंग: 0 पीएक्स; सीमा: 0 पीएक्स; रंग: # 000; पृष्ठभूमि: # एफएफएफ; } एचटीएमएल, बॉडी, पी, वें, टीडी, ली, डीडी, डीटी {फ़ॉन्ट: 1 ए एरियल, हेल्वेटिका, सैन्स-सेरिफ; } एच 1, एच 2, एच 3, एच 4, एच 5, एच 6 {फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; } एच 1 {फ़ॉन्ट आकार: 2em; } एच 2 {फ़ॉन्ट आकार: 1.5em; } एच 3 {फ़ॉन्ट आकार: 1.2em; } एच 4 {फ़ॉन्ट आकार: 1.0em; } एच 5 {फ़ॉन्ट आकार: 0.9em; } एच 6 {फ़ॉन्ट आकार: 0.8em; } ए: लिंक {रंग: # 00 एफ; } ए: विज़िट {रंग: # 00 9; } ए: होवर {रंग: # 06 एफ; } ए: सक्रिय {रंग: # 0 सीएफ; }