10 में से 01
सीएसएस स्टाइल शीट बनाएं
उसी तरह हमने HTML के लिए एक अलग टेक्स्ट फ़ाइल बनाई है, आप सीएसएस के लिए एक टेक्स्ट फ़ाइल तैयार करेंगे। अगर आपको इस प्रक्रिया के लिए दृश्यों की आवश्यकता है तो कृपया पहला ट्यूटोरियल देखें। नोटपैड में अपनी सीएसएस स्टाइल शीट बनाने के लिए यहां दिए गए कदम हैं:
- खाली विंडो पाने के लिए फ़ाइल> नोटपैड में नया चुनें
- फ़ाइल को क्लिक करके सीएसएस के रूप में सहेजें <के रूप में सहेजें ...
- अपने हार्ड ड्राइव पर my_website फ़ोल्डर पर नेविगेट करें
- "सभी प्रकार के रूप में सहेजें:" को "सभी फ़ाइलें" में बदलें
- अपनी फ़ाइल "style.css" नाम दें (उद्धरण छोड़ दें) और सहेजें पर क्लिक करें
10 में से 02
सीएसएस स्टाइल शीट को अपने एचटीएमएल से लिंक करें
एक बार जब आपको अपनी वेबसाइट के लिए स्टाइल शीट मिल जाए, तो आपको इसे वेब पेज से ही जोड़ना होगा। ऐसा करने के लिए आप लिंक टैग का उपयोग करें। अपने पालतू जानवरों के
टैग के भीतर कहीं भी निम्न लिंक टैग रखें। एचटीएम दस्तावेज़:10 में से 03
पेज मार्जिन को ठीक करें
जब आप विभिन्न ब्राउज़रों के लिए एक्सएचटीएमएल लिख रहे हैं, तो एक चीज जो आप सीखेंगे वह यह है कि वे सभी चीजों को प्रदर्शित करने के लिए अलग-अलग मार्जिन और नियम मानते हैं। यह सुनिश्चित करने का सबसे अच्छा तरीका है कि आपकी साइट अधिकांश ब्राउज़रों में समान दिखती है, मार्जिन जैसी चीज़ों को ब्राउजर पसंद में डिफ़ॉल्ट करने की अनुमति नहीं देना है।
मैं अपने पृष्ठों को ऊपरी बाएं कोने में शुरू करना पसंद करता हूं, जिसमें पाठ के आस-पास कोई अतिरिक्त पैडिंग या मार्जिन नहीं होता है। यहां तक कि यदि मैं सामग्री को पैड करने जा रहा हूं, तो भी मैं मार्जिन को शून्य पर सेट करता हूं ताकि मैं उसी रिक्त स्लेट से शुरू कर रहा हूं। ऐसा करने के लिए, अपने शैलियों.css दस्तावेज़ में निम्न जोड़ें:
एचटीएमएल, बॉडी {
मार्जिन: 0 पीएक्स;
पैडिंग: 0 पीएक्स;
सीमा: 0 पीएक्स;
बाएं: 0 पीएक्स;
शीर्ष: 0 पीएक्स;
}
10 में से 04
पेज पर फ़ॉन्ट बदलना
फ़ॉन्ट अक्सर पहली चीज है जिसे आप किसी वेब पेज पर बदलना चाहते हैं। वेब पेज पर डिफ़ॉल्ट फ़ॉन्ट बदसूरत हो सकता है, और वास्तव में वेब ब्राउज़र ही है, इसलिए यदि आप फ़ॉन्ट को परिभाषित नहीं करते हैं, तो आप वास्तव में नहीं जान पाएंगे कि आपका पृष्ठ कैसा दिखाई देगा।
आम तौर पर, आप पैराग्राफ पर फ़ॉन्ट, या कभी-कभी पूरे दस्तावेज़ पर बदल देंगे। इस साइट के लिए हम हेडर और पैराग्राफ स्तर पर फ़ॉन्ट को परिभाषित करेंगे। अपने शैलियों.css दस्तावेज़ में निम्नलिखित जोड़ें:
पी, ली {
फ़ॉन्ट: 1em एरियल, हेल्वेटिका, संस-सेरिफ़;
}
एच 1 {
फ़ॉन्ट: 2em एरियल, हेल्वेटिका, संस-सेरिफ़;
}
एच 2 {
फ़ॉन्ट: 1.5 ए एरियल, हेल्वेटिका, संस-सेरिफ़;
}
एच 3 {
फ़ॉन्ट: 1.25 ए एरियल, हेल्वेटिका, संस-सेरिफ़;
}
मैंने अनुच्छेदों और सूची वस्तुओं के लिए अपने मूल आकार के रूप में 1em के साथ शुरुआत की, और उसके बाद मेरे शीर्षकों के लिए आकार निर्धारित करने के लिए उपयोग किया। मैं एच 4 की तुलना में गहराई से एक शीर्षक का उपयोग करने की उम्मीद नहीं करता, लेकिन यदि आप योजना बनाते हैं तो आप इसे स्टाइल करना चाहेंगे।
10 में से 05
अपने लिंक को और अधिक दिलचस्प बनाना
लिंक के लिए डिफ़ॉल्ट रंग क्रमशः अनजान और विज़िट किए गए लिंक के लिए नीले और बैंगनी हैं। हालांकि यह मानक है, यह आपके पृष्ठों की रंग योजना फिट नहीं हो सकता है, तो चलिए इसे बदल दें। अपनी शैलियों.css फ़ाइल में, निम्न जोड़ें:
एक लिंक {
फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सैन्स-सेरिफ़;
रंग: # एफएफ 99 00;
पाठ-सजावट: रेखांकन;
}
ए: विज़िट {
रंग: # एफएफसीसी 66;
}
ए: होवर {
पृष्ठभूमि: # एफएफएफएफसीसी;
फोंट की मोटाई: बोल्ड;
}
मैंने तीन लिंक शैलियों को स्थापित किया है, ए: डिफॉल्ट के रूप में लिंक, ए: जब इसका दौरा किया गया है, तो मैं रंग बदलता हूं, और एक: होवर। एक के साथ: होवर मेरे पास लिंक पृष्ठभूमि रंग मिलता है और क्लिक करने के लिए एक लिंक पर बल देने के लिए बोल्ड हो जाता है।
10 में से 06
नेविगेशन अनुभाग स्टाइलिंग
चूंकि हमने नेविगेशन (id = "nav") अनुभाग को HTML में पहले रखा है, चलो इसे पहले स्टाइल करें। हमें यह इंगित करने की ज़रूरत है कि यह कितना चौड़ा होना चाहिए और दाएं तरफ एक व्यापक मार्जिन डालें ताकि मुख्य पाठ इसके खिलाफ टक्कर न सके। मैंने इसके चारों ओर एक सीमा भी लगाई।
निम्नलिखित शैलियों को अपने style.css दस्तावेज़ में जोड़ें:
#nav {
चौड़ाई: 225 पीएक्स;
मार्जिन-दाएं: 15 पीएक्स;
सीमा: मध्यम ठोस # 000000;
}
#nav li {
सूची-शैली: कोई नहीं;
}
.footer {
फ़ॉन्ट आकार: .75em;
दोनों को साफ करो;
चौड़ाई: 100%;
पाठ-संरेखण: केंद्र;
}
सूची-शैली की संपत्ति नेविगेशन अनुभाग के अंदर सूची को कोई बुलेट या संख्या नहीं है, और .footer कॉपीराइट अनुभाग को अनुभाग के भीतर छोटे और केंद्रित होने के लिए शैलियों को शैलियों को सेट करता है।
10 में से 07
मुख्य खंड पोजिशनिंग
पूर्ण स्थिति के साथ अपने मुख्य अनुभाग को पोजीशन करके आप यह सुनिश्चित कर सकते हैं कि यह वही रहेगा जहां आप इसे अपने वेब पेज पर रखना चाहते हैं। मैंने बड़े मॉनीटर को समायोजित करने के लिए मेरा 800px चौड़ा बनाया, लेकिन यदि आपके पास एक छोटा मॉनिटर है, तो आप उस संकुचित को बनाना चाहेंगे।
अपने शैलियों.css दस्तावेज़ में निम्न रखें:
#मुख्य {
चौड़ाई: 800 पीएक्स;
शीर्ष: 0 पीएक्स;
स्थिति: पूर्ण;
बाएं: 250 पीएक्स;
}
10 में से 08
अपने पैराग्राफ स्टाइलिंग
चूंकि मैंने पहले से ही पैराग्राफ फ़ॉन्ट सेट कर लिया है, इसलिए मैं प्रत्येक पैराग्राफ को थोड़ा अतिरिक्त "किक" देना चाहता हूं ताकि इसे बेहतर तरीके से खड़ा कर दिया जा सके। मैंने शीर्ष पर एक सीमा डालने से ऐसा किया जो अनुच्छेद को केवल छवि से अधिक हाइलाइट करता है।
अपने शैलियों.css दस्तावेज़ में निम्न रखें:
।शीर्ष पंक्ति {
सीमा-शीर्ष: मोटी ठोस # एफएफसीसी 00;
}
मैंने इसे इस तरह के सभी पैराग्राफ को परिभाषित करने के बजाय "टॉपलाइन" नामक कक्षा के रूप में करने का फैसला किया। इस तरह, अगर मैं फैसला करता हूं कि मैं शीर्ष पीले रंग की रेखा के बिना अनुच्छेद बनाना चाहता हूं, तो मैं अनुच्छेद टैग में कक्षा = "टॉपलाइन" को छोड़ सकता हूं और इसमें शीर्ष सीमा नहीं होगी।
10 में से 09
छवियों को स्टाइल करना
छवियों में आम तौर पर उनके चारों ओर एक सीमा होती है, यह हमेशा तब तक दिखाई नहीं देता जब तक कि छवि एक लिंक न हो, लेकिन मुझे अपनी सीएसएस स्टाइलशीट के भीतर एक कक्षा होना पसंद है जो सीमा को स्वचालित रूप से बंद कर देता है। इस स्टाइलशीट के लिए, मैंने "noborder" वर्ग बनाया है, और दस्तावेज़ में अधिकांश छवियां इस कक्षा का हिस्सा हैं।
इन छवियों का अन्य विशेष भाग पृष्ठ पर उनका स्थान है। मैं चाहता था कि वे उन अनुच्छेदों का हिस्सा बनें जो वे बिना संरेखित करने के लिए टेबल का उपयोग किए थे। ऐसा करने का सबसे आसान तरीका फ्लोट सीएसएस संपत्ति का उपयोग करना है।
अपने शैलियों.css दस्तावेज़ में निम्न रखें:
#main img {
बाईंओर तैरना;
मार्जिन-दाएं: 5 पीएक्स;
मार्जिन-तल: 15 पीएक्स;
}
।कोई सीमा नहीं {
सीमा: 0 पीएक्स कोई नहीं;
}
जैसा कि आप देख सकते हैं, छवियों पर मार्जिन गुण भी सेट किए गए हैं, यह सुनिश्चित करने के लिए कि वे पैराग्राफ में उनके पास फ़्लोट किए गए टेक्स्ट के खिलाफ नहीं टूट गए हैं।
10 में से 10
अब अपना पूरा पृष्ठ देखें
एक बार जब आप अपना सीएसएस सहेज लेते हैं तो आप अपने वेब ब्राउजर में pet.h.hm पेज को पुनः लोड कर सकते हैं। आपका पृष्ठ इस तस्वीर में दिखाए गए एक जैसा दिखना चाहिए, छवियों के साथ गठबंधन किया गया है और पृष्ठ के बाईं ओर नेविगेशन सही ढंग से रखा गया है।
इस साइट के लिए अपने सभी आंतरिक पृष्ठों के लिए इन चरणों का पालन करें। आप अपने नेविगेशन में प्रत्येक पृष्ठ के लिए एक पृष्ठ चाहते हैं।