01 को 10
CSS शैली पाना सिर्जना गर्नुहोस्
हामीले HTML को लागि अलग पाठ फाइल सिर्जना गर्नुभएका तरिकाले तपाईँले CSS को लागि पाठ फाइल सिर्जना गर्नुहुनेछ। यदि तपाईंलाई यो प्रक्रियाको लागि भिजुअल आवश्यक छ भने कृपया पहिलो ट्यूटोरियल हेर्नुहोस्। यहाँ नोटप्याडमा तपाइँको CSS शैली पाना सिर्जना गर्ने चरणहरू छन्:
- रिक्त विन्डो प्राप्त गर्न फाइल छनोट गर्नुहोस्> नोटप्याडमा नयाँ
- फाईल
- तपाईंको हार्ड ड्राइवमा my_website फोल्डरमा नेविगेट गर्नुहोस्
- "प्रकारका रूपमा बचत गर्नुहोस्:" "सबै फाइलहरू" मा परिवर्तन गर्नुहोस्
- तपाईंको फाइल "शैलिस.css" (उद्धरणहरू छोड्नुहोस्) को नाम दिनुहोस् र बचत गर्नुहोस् क्लिक गर्नुहोस्
02 को 10
तपाइँको HTML स्टाइलमा सीएसएस शैली पाना लिङ्क गर्नुहोस्
एकपटक तपाइँले तपाइँको वेब साइटको लागि शैली पाना पाउनुभएपछि, तपाईले वेब पृष्ठमा यसलाई सम्बद्ध गर्न आवश्यक पर्दछ। यो गर्न तपाइँ लिङ्क ट्याग प्रयोग गर्नुहोला। निम्न लिङ्क ट्यागलाई
तपाईंको पालतू जनावरहरूको ट्यागमा कागजातको कुनै पनि ठाउँमा राख्नुहोस्:03 मध्ये 10
पृष्ठ मार्गहरू मिलाउनुहोस्
जब तपाईं विभिन्न ब्राउजरहरूको लागि XHTML लेख्दै हुनुहुन्छ, एक कुरा तपाईंले सिक्न सक्नुहुनेछ कि तिनीहरू सबै कुराहरू फरक देखाउँछन् र नियमहरू कसरी प्रदर्शन गर्छन् भनेर। तपाईंको साइट धेरै ब्राउजरहरूमा समान देखिन्छ भन्ने सुनिश्चित गर्न उत्तम तरीका हो किनकि मार्जिनहरू पूर्वनिर्धारित रूपमा ब्राउजर छनोटमा अनुमति नदिने हो।
म माथिल्लो बायाँ कोनेमा मेरो पृष्ठहरू शुरू गर्न मनपर्छ, कुनै अतिरिक्त प्याडिंग वा पाठको वरिपरि कुनै सीमा छैन। यद्यपि म सामग्री प्याड गर्न जाँदैछु भने, मैले शून्यमा हार्जहरू सेट गर्छु ताकि म त्यही खाली स्लेटको साथ सुरू गरें। यो गर्नका लागि, तपाईंको शैलीहरूमा निम्न थप्नुहोस् .ssss कागजात:
html, body {
मार्जिन: 0px;
padding: 0px;
सीमा: 0px;
बायाँ: 0px;
top: 0px;
}
04 मध्ये 10
पृष्ठमा फन्ट परिवर्तन गर्दै
फन्ट प्राय: पहिलो कुरा हो जुन तपाईं वेब पृष्ठमा परिवर्तन गर्न चाहानुहुन्छ। वेब पेजमा पूर्वनिर्धारित फन्ट बदसूरत हुन सक्छ, र वास्तवमा वेब ब्राउजर आफैले नै हो, त्यसैले यदि तपाईंले फन्ट परिभाषित गर्नुभएन भने, तपाईले वास्तवमा थाहा पाउनुहुने छैन कि तपाइँको पृष्ठ कस्तो देखिन्छ।
सामान्यतया, तपाइँले अनुच्छेदमा, वा कहिलेकाहीं सम्पूर्ण कागजात आफैमा फन्ट परिवर्तन गर्नुहुनेछ। यस साइटको लागि हामी हेडर र अनुच्छेद स्तरमा फन्ट परिभाषित गर्नेछौं। तपाईंको शैलीमा निम्न थप्नुहोस् .ssss कागजात:
p, li {
फन्ट: 1 एम एरिड, हेलभेटिका, सेन्स सेरिफ;
}
h1 {
फन्ट: 2em एरिड, हेलभेटिका, सेन्स सेरिफ;
}
h2 {
फन्ट: 1.5em एरिड, हेलभेटिका, सेन्स सेरिफ;
}
h3 {
फन्ट: 1.25ेम एरिड, हेल्भेटिका, सेन्स सेरिफ;
}
मैले 1 मिनेटको साथ अनुच्छेद र सूची वस्तुहरूको लागि आधार आधारको रूपमा सुरू गरे, र त्यसपछि मेरो सुर्खियोंका लागि साइज सेट गर्न प्रयोग भयो। म एच 4 भन्दा गहिरो शीर्षक प्रयोग गर्न अपेक्षा गर्दैन, तर यदि तपाईं योजना गर्नुहुन्छ भने यो शैली पनि चाहनुहुन्छ।
05 मध्ये 10
तपाईंको लिंकहरू थप रमाइलो बनाउने
लिङ्कहरूको पूर्वनिर्धारित रङहरू क्रमशः अनपेक्षित र भ्रमण गरिएका लिंकहरूको लागि नीलो र बैंगनी हुन्। यो मानक हो, यो तपाईंको पृष्ठको रंग योजना फिट गर्न सक्दिन, त्यसैले यसलाई परिवर्तन गर्नुहोस्। तपाईंको शैलीमा.css फाइलमा, निम्न थप्नुहोस्:
a: link {
फन्ट-परिवार: एरिड, हेलभेटिका, सेन्स सेरिफ;
रंग: # FF9900;
पाठ सजावट: रेखांकन;
}
a: भ्रमण गरिएको {
रंग: # FFCC66;
}
a: hover {
पृष्ठभूमि: #FFFFCC;
फन्ट-वजन: बोल्ड;
}
मैले तीन लिङ्क शैलीहरू सेटअप गरें, ए: पूर्वनिर्धारित रूपमा लिङ्क, ए: भ्रमण गरिएको बेलामा भ्रमण गरिएको, म रङ परिवर्तन गर्दछु, र: होभर। एक साथ: होभर मसँग लिङ्क एक पृष्ठभूमि रङ प्राप्त गर्दछ र बोल्डमा क्लिक गर्नुको लागि क्लिक गर्नु पर्ने कडी जोड दिनुहोस्।
06 मध्ये 10
नेभिगेशन सेक्शन स्टाइल गर्दै
हामीले एचटीभीमा नेभिगेसन (आईडी = "नेभिगेसन") खण्ड पहिला राख्नुभन्दा पहिला, यसलाई पहिलेको शैलीमा पहिलो पटक। हामी संकेत गर्न आवश्यक छ कि यो कसरी विस्तृत हुनुपर्छ र दाहिने तिर ठूलो चौडाई राख्नुहोस् ताकि मुख्य पाठ यसको विरुद्धमा टकराउँदैन। मैले पनि यसको वरिपरि सीमा पार गरें।
तपाईंको शैलीमा निम्न CSS लाई थप्नुहोस्.css कागजात:
#nav {
चौडाई: 225px;
मार्जिन-दाँया: 15px;
सीमा: मध्यम ठोस # 000000;
}
#nav li {
सूची शैली: कुनै पनि होइन;
}
.footer {
फन्ट-साइज: .75em;
स्पष्ट: दुवै;
चौडाई: 100%;
text-align: center;
}
सूची-शैली गुणले नेभिगेशन सेक्शन भित्रको सूची सेट गर्दैन कुनै गोलेट वा अंकहरू, र .फुटर शैलीहरू प्रतिलिपि अधिकार सेक्शन सानो हुनुपर्छ र खण्ड भित्र केन्द्रित हुन्छ।
07 मध्ये 10
मुख्य खण्ड स्थिति
तपाईंको मुख्य खण्डलाई पूर्ण स्थितिको स्थितिमा राखेर तपाइँ पक्का हुन सक्नुहुनेछ कि यो तपाईंको वेब पृष्ठमा जहाँ रहन चाहानुहुन्छ त्यहि रहनेछ। मैले ठूला मनिटरहरू समायोजन गर्न मेरो 800px चौडाई बनायो, तर यदि तपाईसँग सानो मनिटर छ भने, तपाइँ त्यस संकीर्ण गर्न चाहन सक्नुहुन्छ।
तपाईंको शैलीमा निम्न स्थान राख्नुहोस.css कागजात:
#main {
चौडाई: 800px;
top: 0px;
स्थिति: पूर्ण;
बायाँ: 250px;
}
08 को 10
तपाईंको अनुच्छेद स्टाइल गर्दै
मैले माथिको अनुच्छेद फन्ट सेट गरेको छु किनकि, म प्रत्येक अनुच्छेदलाई केहि अतिरिक्त "किक" लाई अझ राम्रो बनाउन तयार बनाउन चाहन्छु। मैले यो केवल एक छवि मात्र एक्लै छवि भन्दा धेरै अनुच्छेद हाइलाइट गरेको शीर्षमा राखेर यो गरे।
तपाईंको शैलीमा निम्न स्थान राख्नुहोस.css कागजात:
.topline {
सीमा-माथि: मोटो ठोस # FFCC00;
}
मैले यसलाई "topline" भनिने क्लासको रूपमा निर्णय गर्न निर्णय गरे भन्दा बरु उक्त अनुच्छेदलाई परिभाषित गर्नुको सट्टा। यो तरिका, यदि म निर्णय गर्छु कि म एक माथि पहेंलो रेखा को बिना एक अनुच्छेद चाहते हो, म केवल अनुच्छेद टैग मा वर्ग = "topline" को छोड सकते हो र यसमा शीर्ष सीमा छैन।
09 मध्ये 10
छविहरू स्टाइल गर्दै
छविहरू सामान्यतया तिनीहरूको वरिपरि सीमा छ, यो सधैँ इमान्दर्भिक छैन जब छवि लिङ्क हो, तर म मेरो सीएसएस शैलसिटसिटमा एक क्लास हुन चाहन्छु जुन स्वचालित रूपमा सिमाना बन्द गर्दछ। यो शैलीपानाको लागि, मैले "noborder" वर्ग सिर्जना गरेको थिएँ, र कागजातमा धेरै चित्रहरू यस कक्षाको भाग हुन्।
यी चित्रहरूको अर्को विशेष पृष्ठ पृष्ठमा उनीहरूको स्थान हो। म तिनीहरूलाई चाहिएको तालिकाको प्रयोग बिना तिनीहरू अनुच्छेदको अंश हुन चाहन्थे। यो गर्ने सबै भन्दा सरल तरिका फ्लोट CSS गुण प्रयोग गर्न हो।
तपाईंको शैलीमा निम्न स्थान राख्नुहोस.css कागजात:
#main img {
फ्लोट: बायाँ;
मार्जिन-दाँया: 5px;
margin-bottom: 15px;
}
.noborder {
किनारा: 0px कुनै पनि;
}
तपाईं देख्न सक्नुहुन्छ, छविहरूमा मार्जिन गुणहरू पनि सेट छन्, यो सुनिश्चित गर्नका लागि कि तिनीहरू फ्लोटेड पाठ विरुद्ध पैराग्राफहरूमा बाहिरिन्छन्।
10 मध्ये 10
अब तपाईंको पूरा पृष्ठ हेर्नुहोस्
एकपटक तपाईंले आफ्नो सीएसएस बचत गरेपछि तपाइँले तपाइँको वेब ब्राउजरमा पालतू जनावरहरू पुन: लोड गर्न सक्नुहुनेछ। पृष्ठ। तपाईंको पृष्ठलाई यस तस्वीरमा देखाईएको जस्तो देखिनै पर्छ, तस्बिरहरू सङ्ग्रह र नेभिगेसन पृष्ठको बायाँ तिर सही रूपमा राखिएको छ।
यस साइटको लागि तपाईंको सबै आन्तरिक पृष्ठहरूको लागि यी चरणहरू पालन गर्नुहोस्। तपाईं आफ्नो नेभिगेसनमा हरेक पेजको लागि एक पृष्ठ चाहानुहुन्छ।