यो सीएसएस धोखा पानासँगै क्यासिंगिङ स्टाइल पानाहरू जान्नुहोस्

नमूना शैली पानाको साथ क्यासिंगिङ स्टाइल पानाहरूको एक अवलोकन

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

सीएसएस र क्यारेक्टर सेट

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

क्यारेक्टर सेट सेट गर्न सजिलो छ। सीएसएस कागजातको पहिलो रेखा लेख्नुहोस्:

@charset "utf-8";

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

पृष्ठ शरीर स्टाइल गर्दै

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

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

सेतो र पूर्वनिर्धारित पृष्ठभूमि रङलाई पूर्वनिर्धारित अग्रभूमि वा फन्ट रङ सेट गर्नुहोस्। जबकि यो प्राय: वेबपेज डिजाइनको लागि परिवर्तन हुनेछ, यी मानक रङहरू मा सेट र एचटीएमएल ट्यागले पृष्ठलाई पढ्न र काम गर्न सजिलो बनाउँदछ।

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

पूर्वनिर्धारित फन्ट शैलीहरू

फन्ट साइज र फन्ट परिवारले केहि चीजहरू हुन् जुन डिस्प्ले समातिएपछि अनिवार्य रूपले परिवर्तन हुनेछ तर 1 ईमीको पूर्वनिर्धारित फन्ट साइज र एरिड, जिनेभा, वा अन्य सेन्स सेरिफ फन्टको पूर्वनिर्धारित फन्ट परिवारको साथ सुरु गर्नुहोस्। Ems को प्रयोग पृष्ठलाई सम्भव हुन सक्दछ, र एक सेन्स सेरिफ फन्ट स्क्रिनमा अधिक उपयुक्त छ।

html, शरीर, पी, th, td, li, dd, dt {font: 1em arial, helvetica, sans-serif; }

त्यहाँ अन्य स्थानहरू जहाँ तपाई पाठ फेला पार्न सक्नुहुनेछ, तर p , th , td , li , dd , and dt आधार फन्ट को परिभाषित गर्नको लागि राम्रो सुरुवात हो। एचटीएमएल र शरीरमा केवल सामेल समावेश गर्नुहोस् , तर धेरै ब्राउजरले फन्ट छनौटलाई ओभरराइड गरेमा यदि तपाइँ HTML वा शरीरको लागि मात्र तपाईंको फन्टहरू परिभाषित गर्दछ।

Headlines

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

h1, h2, h3, h4, h5, h6 {font-family: arial, helvetica, sans-serif; } h1 {फन्ट-साइज: 2em; } h2 {फन्ट-साइज: 1.5em; } h3 {फन्ट-साइज: 1.2em; } h4 {फन्ट-साइज: 1.0em; } h5 {फन्ट-साइज: 0.9em; } h6 {फन्ट-साइज: 0.8em; }

लिंकहरू बिर्सनु हुँदैन

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

नीलो रंगका लिङ्कहरू सेट गर्न सेट गर्नुहोस्:

• नीलो रूपमा लिङ्कहरू
• गाढा नीलोको रूपमा लिङ्कहरू भ्रमण गरियो
• हेलो लिङ्कको रूपमा लाइट नीलो
• सक्रिय लिङ्कको रूपमा पनि ताला नीलो

जस्तै यो उदाहरणमा देखाइएको छ:

a: link {color: # 00f; } a: भ्रमण गरिएको {रंग: # 009; } a: होवर {रंग: # 06f; } a: active {color: # 0cf; } पर्याप्त निर्दोष रंग योजनाको साथ लिङ्कहरू स्टाइल गरेर यो सुनिश्चित गर्दछ कि म कुनै पनि क्लासहरू बिर्सन सक्दिनँ, र उनीहरूलाई पूर्वनिर्धारित नीलो, रातो र बैंगनी भन्दा कम कम जोर दिन्छ।

पूर्ण शैली पाना

यहाँ पूर्ण शैली पाना हो:

@charset "utf-8"; html, शरीर {मार्जिन: 0px; padding: 0px; सीमा: 0px; रंग: # 000; पृष्ठभूमि: #fff; } एचटीएमएल, शरीर, पी, वें, टीडी, li, dd, dt {font: 1em एरीयल, हेलभेटिका, सेन्स सेरिफ; } h1, h2, h3, h4, h5, h6 {font-family: arial, helvetica, sans-serif; } h1 {फन्ट-साइज: 2em; } h2 {फन्ट-साइज: 1.5em; } h3 {फन्ट-साइज: 1.2em; } h4 {फन्ट-साइज: 1.0em; } h5 {फन्ट-साइज: 0.9em; } h6 {फन्ट-साइज: 0.8em; } a: link {color: # 00f; } a: भ्रमण गरिएको {रंग: # 009; } a: होवर {रंग: # 06f; } a: active {color: # 0cf; }