नमूना के साथ कैस्केडिंग स्टाइल शीट (सीएसएस) अवलोकन

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

सीएसएस और कैरेक्टर सेट

सबसे पहले चीज़ें, अपने CSS दस्तावेज़ों के वर्ण सेट को इस पर सेट करें यूटीएफ-8. हालांकि यह संभव है कि आपके द्वारा डिज़ाइन किए गए अधिकांश पृष्ठ अंग्रेज़ी में लिखे गए हों, कुछ को स्थानीयकृत किया जा सकता है—विभिन्न भाषाई और सांस्कृतिक संदर्भों के लिए अनुकूलित। जब वे होते हैं, utf-8 प्रक्रिया को सरल करता है। चरित्र सेट को में सेट करना बाहरी स्टाइल शीट किसी पर वरीयता नहीं लेंगे एचटीटीपी शीर्षलेख, लेकिन अन्य सभी स्थितियों में, यह होगा।

चरित्र सेट सेट करना आसान है। CSS दस्तावेज़ की पहली पंक्ति के लिए लिखें:

@charset "utf-8";

इस तरह, यदि आप सामग्री संपत्ति में या के रूप में अंतरराष्ट्रीय वर्णों का उपयोग करते हैं वर्ग और आईडी नाम, स्टाइल शीट अभी भी सही ढंग से काम करेगी।

पेज बॉडी को स्टाइल करना

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

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

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

एचटीएमएल, शरीर {
रंग: #000;
पृष्ठभूमि: #fff;
}

डिफ़ॉल्ट फ़ॉन्ट शैलियाँ

फ़ॉन्ट आकार और फ़ॉन्ट परिवार कुछ ऐसा है जो डिज़ाइन के पकड़ में आने के बाद अनिवार्य रूप से बदल जाएगा लेकिन 1 font के डिफ़ॉल्ट फ़ॉन्ट आकार से शुरू होगा एम और एक डिफ़ॉल्ट फुहारा परिवार एरियल, जिनेवा, या किसी अन्य के बिना सेरिफ़ फ़ॉन्ट. ईएमएस का उपयोग पृष्ठ को यथासंभव सुलभ रखता है, और बिना सेरिफ़ फ़ॉन्ट स्क्रीन पर अधिक सुपाठ्य है।

एचटीएमएल, बॉडी, पी, वें, टीडी, ली, डीडी, डीटी {
फ़ॉन्ट: 1em एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}

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

मुख्य बातें

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

एच1, एच2, एच3, एच4, एच5, एच6 {
फ़ॉन्ट-परिवार: एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
h1 {फ़ॉन्ट-आकार: 2em; }
h2 {फ़ॉन्ट-आकार: 1.5em; }
h3 {फ़ॉन्ट-आकार: 1.2em; }
h4 {फ़ॉन्ट-आकार: 1.0em; }
h5 {फ़ॉन्ट-आकार: 0.9em; }
h6 {फ़ॉन्ट-आकार: 0.8em; }

लिंक्स को न भूलें

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

सेट करने के लिए लिंक नीले रंग के रंगों में सेट करें:

• लिंक नीले रंग के रूप में
• देखे गए लिंक गहरे नीले रंग के रूप में
• होवर लिंक हल्के नीले रंग के रूप में
• सक्रिय लिंक और भी हल्का नीला

जैसा कि इस उदाहरण में दिखाया गया है:

ए: लिंक {रंग: #00f; }
ए: विज़िट किया गया {रंग: #009; }
ए: होवर {रंग: #06f; }
ए: सक्रिय {रंग: #0cf; }

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

पूर्ण शैली पत्रक

यहाँ पूर्ण स्टाइल शीट है:

@charset "utf-8";
एचटीएमएल, शरीर {
मार्जिन: 0px;
पैडिंग: 0px;
सीमा: 0px;
रंग: #000;
पृष्ठभूमि: #fff;
}
एचटीएमएल, बॉडी, पी, वें, टीडी, ली, डीडी, डीटी {
फ़ॉन्ट: 1em एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
एच1, एच2, एच3, एच4, एच5, एच6 {
फ़ॉन्ट-परिवार: एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
h1 {फ़ॉन्ट-आकार: 2em; }
h2 {फ़ॉन्ट-आकार: 1.5em; }
h3 {फ़ॉन्ट-आकार: 1.2em; }
h4 {फ़ॉन्ट-आकार: 1.0em; }
h5 {फ़ॉन्ट-आकार: 0.9em; }
h6 {फ़ॉन्ट-आकार: 0.8em; }
ए: लिंक {रंग: #00f; }
ए: विज़िट किया गया {रंग: #009; }
ए: होवर {रंग: #06f; }
ए: सक्रिय {रंग: #0cf; }