नमुना शैली पत्रकसह कॅस्केडिंग शैली पत्रकांचा आढावा
आपण सुरवातीपासून एखादी वेबसाइट तयार करता तेव्हा, परिभाषित केलेल्या मूळ शैलीसह प्रारंभ करणे चतुर आहे तो एक स्वच्छ कॅनव्हास आणि ताज्या ब्रशेसपासून सुरुवात करण्यासारखे आहे. वेब डिझाइनर प्रथम समस्या आहेत ज्या वेब ब्राऊजर सर्व भिन्न आहेत डीफॉल्ट फॉन्ट आकार प्लॅटफॉर्मपासून प्लॅटफॉर्म पर्यंत भिन्न आहे, डीफॉल्ट फॉन्ट कुटुंब भिन्न आहे, काही ब्राउझर शरीर टॅगवर मार्जिन आणि पॅडिंग परिभाषित करतात तर इतर नसतात आणि याप्रमाणे. आपल्या वेबपृष्ठांसाठी डीफॉल्ट शैली परिभाषित करून या विसंगतींचा भंग करा.
CSS आणि अक्षर सेट
प्रथम सर्वप्रथम, आपल्या CSS दस्तऐवजांचे वर्ण सेट utf-8 मध्ये सेट करा. कदाचित आपण डिझाइन केलेली बहुतेक पृष्ठे इंग्रजीमध्ये लिहिली जातात, काही भाषांतरीत केले जाऊ शकतात- विविध भाषिक आणि सांस्कृतिक संदर्भासाठी रुपांतर. जेव्हा ते यूटीएफ -8 प्रक्रियेस सरळ करतात. बाह्य शैली पत्रकामध्ये वर्ण सेट सेट करणे HTTP शीर्षलेखापेक्षा श्रेष्ठ नसेल, परंतु इतर सर्व परिस्थितींमध्ये, ते होईल.
वर्ण संच सेट करणे सोपे आहे. सीएसएस दस्ताऐवजची पहिली ओळ लिहा:
@चर्ससेट "utf-8";अशा प्रकारे, आपण सामग्री मालमत्तेत किंवा श्रेणी आणि आयडी नावे आंतरराष्ट्रीय वर्णांचा वापर केल्यास, शैली पत्रक अद्याप योग्यरित्या कार्य करेल.
पृष्ठ बॉडी स्टाइल करणे
पुढची गोष्ट जी डीफॉल्ट शैली शीटला मार्जिन, पॅडिंग आणि सीमेबाहेर शून्य करते. हे सुनिश्चित करते की सर्व ब्राउझर एकाच ठिकाणी सामग्री ठेवतात आणि ब्राउझर आणि सामग्री दरम्यान कोणत्याही लपलेल्या स्पेसेस नाहीत. बर्याच वेब पेजेससाठी, हे मजकूराच्या धारापर्यंत खूप जवळ आहे, परंतु तेथे सुरू करणे महत्वाचे आहे जेणेकरून बॅकग्राऊंड प्रतिमा आणि मांडणी विभाग योग्यरित्या अचूक नसतात
html, शरीर {मार्जिन: 0 पिक्स; पॅडिंग: 0 पिक्सेल; सीमा: 0 पिक्स; }डीफॉल्ट अग्रभूमी किंवा फॉन्ट रंगास काळ्या रंगात आणि डीफॉल्ट पार्श्वभूमी रंग पांढरा वर सेट करा हे बहुतेक वेबपृष्ठ डिझाईन्ससाठी बहुधा बदलतील, परंतु हे मानक रंग आणि एचटीएमएल टॅगवर प्रथम सेट केल्याने पृष्ठ वाचणे सोपे होते आणि काम करावे लागते.
html, body {colour: # 000; पार्श्वभूमी: #fff; }डीफॉल्ट फॉन्ट शैली
फॉन्ट आकार आणि फाँट कुटुंबाची अशी रचना अशी आहे जी एकदा डिझाइन घेईल परंतु डीफॉल्ट फॉन्ट आकार 1 एम आणि एरियल, जिनीव्हा किंवा काही इतर संस्रिफ फॉन्टच्या डीफॉल्ट फाँट कुटुंबासह सुरू होईल. ईएमएसच्या वापरास शक्य तितक्या पृष्ठाला प्रवेशयोग्य ठेवू शकता, आणि स्क्रीनवर एक नसा-सेरीफचा फॉन्ट अधिक सुगम आहे.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }इतर ठिकाणी आपण मजकूर शोधू शकता, परंतु पी , व्ही , टीडी , ली , डीडी आणि डीटी ही बेस फॉन्ट परिभाषित करण्यासाठी चांगली सुरुवात आहे. एचटीएमएल आणि बॉडी ज्यात समाविष्ट करा , परंतु आपण केवळ एचटीएमएल किंवा बॉडीसाठी आपले फॉन्ट परिभाषित केल्यास बरेच ब्राउझर फाँट निवडी अधिलिखित करतात.
ठळक बातम्या
एचटीएमएल शीर्षके आपल्या साइटची रूपरेषा शोधण्यात आणि आपल्या साइटवर शोध इंजिन आणखी खोलवर जाण्यासाठी वापरण्यासाठी महत्वपूर्ण आहेत. शैलीशिवाय, ते सर्व बर्यापैकी निराळी आहेत, त्यामुळे त्यांच्यातील डीफॉल्ट शैली सेट करा आणि फॉन्ट कुटुंब आणि प्रत्येकासाठी फाँट आकार परिभाषित करा.
h1, h2, h3, h4, h5, h6 {फॉन्ट-कुटुंब: एरियल, हेल्व्हटिका, सेन्स-सेरीफ; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2mm; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }दुवे विसरु नका
लिंक रंगमंच स्टाइल जवळजवळ नेहमीच डिझाइनचा एक महत्वपूर्ण भाग असतो, परंतु आपण त्यास डिफॉल्ट शैलीमध्ये परिभाषित करत नसल्यास आपण कमीतकमी एक सिंड्रो-क्लास विसरू शकाल. निळ्यावर काही लहान फरक देऊन त्यांची व्याख्या करा आणि एकदा साइट परिभाषित केल्यासाठी रंग पॅलेट आपल्याकडे केल्यानंतर बदला.
निळ्या रंगाच्या छटामध्ये दुवे सेट करण्यासाठी, सेट करा:
- निळा म्हणून दुवे
- गडद निळा म्हणून दुवे भेट दिली
- हलका निळे म्हणून दुवे मागवा
- अगदी रंगहीन निळे म्हणून सक्रिय दुवे
या उदाहरणामध्ये दाखवल्याप्रमाणे:
a: link {color: # 00f; } a: भेट दिलेले {colour: # 009; } a: hover {colour: # 06f; } a: सक्रिय {color: # 0cf; } एका निष्क्रीय स्वरुपातील रंगसंगती असलेल्या दुवे स्टाईल करून हे सुनिश्चित करते की मी कोणत्याही वर्गांना विसरणार नाही आणि मुलभूत निळ्या, लाल आणि जांभळ्यापेक्षा थोडी कमी जोरदार बनविते.पूर्ण शैली पत्रक
येथे संपूर्ण शैली पत्रक आहे:
@चर्ससेट "utf-8"; html, शरीर {मार्जिन: 0 पिक्स; पॅडिंग: 0 पिक्सेल; सीमा: 0 पिक्स; रंग: # 000; पार्श्वभूमी: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2mm; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: भेट दिलेले {colour: # 009; } a: hover {colour: # 06f; } a: सक्रिय {color: # 0cf; }