CSS स्टाइल शीट बनाएं
उसी तरह हमने के लिए एक अलग टेक्स्ट फ़ाइल बनाई एचटीएमएल, आप CSS के लिए एक टेक्स्ट फ़ाइल बनाएंगे। यदि आपको इस प्रक्रिया के लिए दृश्यों की आवश्यकता है तो कृपया पहला ट्यूटोरियल देखें। नोटपैड में अपनी सीएसएस स्टाइल शीट बनाने के चरण यहां दिए गए हैं:
- का चयन करें फ़ाइल> नया नोटपैड में खाली विंडो पाने के लिए
- फाइल को CSS के रूप में सेव करें क्लिक करके फ़ाइल
- अपनी हार्ड ड्राइव पर my_website फ़ोल्डर में नेविगेट करें
- को बदलें "टाइप के रुप में सहेजें:" सेवा मेरे "सारे दस्तावेज"
- अपनी फ़ाइल को नाम दें "Styles.css"(उद्धरण छोड़ें) और क्लिक करें सहेजें
CSS स्टाइल शीट को अपने HTML से लिंक करें
एक बार आपके पास एक शैली पत्रक अपनी वेब साइट के लिए, आपको इसे वेब पेज से ही संबद्ध करना होगा। ऐसा करने के लिए आप लिंक टैग का उपयोग करें। निम्नलिखित लिंक टैग को इसके भीतर कहीं भी रखें।
पेज मार्जिन ठीक करें
जब आप लिख रहे हों एक्सएचटीएमएल विभिन्न ब्राउज़रों के लिए, आप एक बात सीखेंगे कि वे सभी चीजों को कैसे प्रदर्शित करते हैं, इसके लिए अलग-अलग मार्जिन और नियम हैं। यह सुनिश्चित करने का सबसे अच्छा तरीका है कि आपकी साइट अधिकांश ब्राउज़रों में एक जैसी दिखती है, मार्जिन जैसी चीज़ों को ब्राउज़र की पसंद के अनुसार डिफ़ॉल्ट रूप से अनुमति नहीं देना है।
हम ऊपरी बाएँ कोने में पृष्ठ प्रारंभ करना पसंद करते हैं, जिसमें टेक्स्ट के आस-पास कोई अतिरिक्त पैडिंग या मार्जिन नहीं है। यहां तक कि अगर हम सामग्री को पैड करने जा रहे हैं, तो हम मार्जिन को शून्य पर सेट करते हैं ताकि हम उसी खाली स्लेट से शुरू कर सकें। ऐसा करने के लिए, अपने Styles.css दस्तावेज़ में निम्नलिखित जोड़ें:
एचटीएमएल, शरीर {
मार्जिन: 0px;
पैडिंग: 0px;
सीमा: 0px;
बाएं: 0px;
शीर्ष: 0px;
}
पृष्ठ पर फ़ॉन्ट बदलना
फॉन्ट अक्सर पहली चीज है जिसे आप वेब पेज पर बदलना चाहेंगे। डिफ़ॉल्ट वेब पेज पर फ़ॉन्ट font बदसूरत हो सकता है और वास्तव में वेब ब्राउज़र पर निर्भर है, इसलिए यदि आप फ़ॉन्ट को परिभाषित नहीं करते हैं, तो आप वास्तव में नहीं जानते कि आपका पृष्ठ कैसा दिखेगा।
आम तौर पर, आप पैराग्राफ पर या कभी-कभी पूरे दस्तावेज़ पर ही फ़ॉन्ट बदल देंगे। इस साइट के लिए, हम शीर्षलेख और अनुच्छेद स्तर पर फ़ॉन्ट परिभाषित करेंगे। अपने Styles.css दस्तावेज़ में निम्नलिखित जोड़ें:
पी, ली {
फ़ॉन्ट: 1em एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
एच1 {
फ़ॉन्ट: 2em एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
एच2 {
फ़ॉन्ट: 1.5em एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
एच3 {
फ़ॉन्ट: 1.25em एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
हमने पैराग्राफ और सूची आइटम के लिए आधार आकार के रूप में 1em के साथ शुरुआत की और फिर इसका उपयोग मेरी सुर्खियों के लिए आकार निर्धारित करने के लिए किया। हम h4 से अधिक गहरे शीर्षक का उपयोग करने की अपेक्षा नहीं करते हैं, लेकिन यदि आप योजना बनाते हैं तो आप इसे स्टाइल भी करना चाहेंगे।
अपने लिंक्स को और अधिक रोचक बनाना
लिंक के लिए डिफ़ॉल्ट रंग क्रमशः न देखे गए और देखे गए लिंक के लिए नीले और बैंगनी हैं। हालांकि यह मानक है, हो सकता है कि यह आपके पृष्ठों की रंग योजना में फिट न हो, तो चलिए इसे बदलते हैं। अपनी Styles.css फ़ाइल में, निम्नलिखित जोड़ें:
एक लिंक {
फ़ॉन्ट-परिवार: एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
रंग: #FF9900;
पाठ-सजावट: रेखांकित;
}
ए: दौरा किया {
रंग: #FFCC66;
}
ए: होवर {
पृष्ठभूमि: #FFFFCC;
फोंट की मोटाई: बोल्ड;
}
हम तीन लिंक शैलियाँ सेट करते हैं, a: डिफ़ॉल्ट के रूप में लिंक, a: जब इसे देखा गया है, तो हम रंग बदलते हैं, और a: hover। ए के साथ: होवर हमारे पास लिंक को पृष्ठभूमि रंग मिलता है और इस पर जोर देने के लिए बोल्ड हो जाता है कि यह एक लिंक है जिसे क्लिक किया जाना है।
नेविगेशन अनुभाग को स्टाइल करना
चूंकि हमने नेविगेशन (id="nav") सेक्शन को पहले HTML में रखा है, आइए पहले इसे स्टाइल करें। हमें यह इंगित करने की आवश्यकता है कि यह कितना चौड़ा होना चाहिए और दायीं ओर एक व्यापक मार्जिन रखना चाहिए ताकि मुख्य पाठ इसके खिलाफ न टकराए। हम भी, इसके चारों ओर एक सीमा लगाते हैं।
अपने Styles.css दस्तावेज़ में निम्न CSS जोड़ें:
#नव {
चौड़ाई: 225px;
मार्जिन-दाएं: 15px;
सीमा: मध्यम ठोस #000000;
}
#नव ली {
सूची-शैली: कोई नहीं;
}
फुटर {
फ़ॉन्ट-आकार: .75em;
दोनों को साफ करो;
चौड़ाई: 100%;
पाठ-संरेखण: केंद्र;
}
सूची-शैली की संपत्ति नेविगेशन अनुभाग के अंदर सूची को सेट करती है ताकि कोई बुलेट या संख्या न हो, और .पाद लेख कॉपीराइट अनुभाग को छोटा और अनुभाग के भीतर केंद्रित करने के लिए शैलीबद्ध करता है।
मुख्य खंड की स्थिति
अपने मुख्य भाग को पूर्ण स्थिति के साथ रखकर आप यह सुनिश्चित कर सकते हैं कि यह ठीक वहीं रहेगा जहां आप इसे अपने वेब पेज पर रखना चाहते हैं। हमने इसे समायोजित करने के लिए 800px चौड़ा बनाया है बड़े मॉनिटर, लेकिन यदि आपके पास एक छोटा मॉनिटर है, तो हो सकता है कि आप उसे संकरा बनाना चाहें।
निम्नलिखित को अपने Styles.css दस्तावेज़ में रखें:
#मुख्य {
चौड़ाई: 800px;
शीर्ष: 0px;
स्थिति: निरपेक्ष;
बाएं: 250 पीएक्स;
}
अपने अनुच्छेदों को स्टाइल करना
चूंकि मैंने पहले ही पैराग्राफ़ का फ़ॉन्ट ऊपर सेट कर दिया है, इसलिए मैं प्रत्येक पैराग्राफ़ को थोड़ा अतिरिक्त "किक" देना चाहता था ताकि इसे और बेहतर बनाया जा सके। मैंने शीर्ष पर एक सीमा लगाकर ऐसा किया जिसने केवल छवि से अधिक अनुच्छेद को हाइलाइट किया।
निम्नलिखित को अपने Styles.css दस्तावेज़ में रखें:
।शीर्ष पंक्ति {
बॉर्डर-टॉप: मोटा ठोस #FFCC00;
}
हमने इसे केवल इस तरह से सभी अनुच्छेदों को परिभाषित करने के बजाय "टॉपलाइन" नामक एक वर्ग के रूप में करने का निर्णय लिया। इस तरह, अगर हम तय करते हैं कि हम एक शीर्ष पीली रेखा के बिना एक पैराग्राफ रखना चाहते हैं, तो हम केवल पैराग्राफ टैग में वर्ग = "टॉपलाइन" को छोड़ सकते हैं और इसमें शीर्ष सीमा नहीं होगी।
छवियों को स्टाइल करना
छवियों में आमतौर पर उनके चारों ओर एक सीमा होती है, यह हमेशा तब तक दिखाई नहीं देता जब तक कि छवि एक लिंक न हो, लेकिन हम इसके भीतर एक वर्ग रखना पसंद करते हैं CSS स्टाइलशीट जो बॉर्डर को अपने आप बंद कर देती है. इस स्टाइलशीट के लिए, हमने "नोबॉर्डर" वर्ग बनाया है, और दस्तावेज़ में अधिकांश छवियां इस वर्ग का हिस्सा हैं।
इन छवियों का अन्य विशेष भाग पृष्ठ पर उनका स्थान है। हम चाहते थे कि वे उस पैराग्राफ का हिस्सा बनें जिसमें वे टेबल का उपयोग किए बिना उन्हें संरेखित करने के लिए थे। ऐसा करने का सबसे आसान तरीका फ्लोट सीएसएस संपत्ति का उपयोग करना है।
निम्नलिखित को अपने Styles.css दस्तावेज़ में रखें:
#मुख्य img {
बाईंओर तैरना;
मार्जिन-दाएं: 5px;
मार्जिन-बॉटम: 15px;
}
।कोई सीमा नहीं {
सीमा: 0px कोई नहीं;
}
जैसा कि आप देख सकते हैं, छवियों पर मार्जिन गुण भी सेट हैं, यह सुनिश्चित करने के लिए कि वे पैराग्राफ में उनके बगल में फ़्लोट किए गए टेक्स्ट के खिलाफ तोड़े नहीं गए हैं।
अब अपना पूरा पेज देखें
एक बार जब आप अपना सीएसएस सहेज लेते हैं तो आप अपने वेब ब्राउज़र में pets.htm पृष्ठ को पुनः लोड कर सकते हैं। आपका पृष्ठ इस चित्र में दिखाए गए चित्र के समान दिखना चाहिए, जिसमें चित्र संरेखित हों और पृष्ठ के बाईं ओर नेविगेशन सही ढंग से रखा गया हो।
इस साइट के लिए अपने सभी आंतरिक पृष्ठों के लिए इन्हीं चरणों का पालन करें। आप अपने नेविगेशन में प्रत्येक पृष्ठ के लिए एक पृष्ठ रखना चाहते हैं।