01 ते 10
सीएसएस स्टाइल शीट तयार करा
याच प्रकारे आपण एचटीएमएलसाठी वेगळी टेक्स्ट फाईल बनवली, तर आपण सीएसएस साठी एक टेक्स्ट फाईल बनवू. आपण या प्रक्रियेसाठी दृश्ये आवश्यक असल्यास कृपया प्रथम ट्यूटोरियल पहा. नोटपैड मध्ये आपली सीएसएस शैली पत्रक तयार करण्यासाठी खालील पायरी आहेत:
- रिक्त विंडो प्राप्त करण्यासाठी फाईल> नोटपैड मध्ये नवीन निवडा
- फाइल म्हणून क्लिक करुन ही सीडी जतन करा.
- आपल्या हार्ड ड्राइव्हवरील my_website फोल्डरवर नेव्हिगेट करा
- "सर्व फाइल्स" असे टाइप करा "जतन करा प्रकार":
- आपल्या फाइलला "styles.css" नाव द्या (कोट्स सोडून द्या) आणि जतन करा क्लिक करा
10 पैकी 02
आपल्या HTML मध्ये सीएसएस शैली पत्रकाशी दुवा साधा
एकदा आपण आपल्या वेबसाईटसाठी एक स्टाईल शीट मिळवल्यावर, आपल्याला ते स्वतः वेब पेजशी जोडणे आवश्यक आहे. हे करण्यासाठी आपण दुवा टॅग वापरा. आपल्या पाळीव प्राण्यांच्या संकेतशब्दाचे
टॅगमध्ये खालील दुवा टॅग ठेवा:03 पैकी 10
पृष्ठ समास निश्चित करा
जेव्हा आपण वेगवेगळ्या ब्राऊझर्ससाठी एक्सएचटीएमएल लिहितो तेव्हा आपण शिकू शकाल की त्यांनी सर्व गोष्टी कशा दर्शवल्या त्याकरिता वेगवेगळ्या मार्जिन व नियमावली आहेत. बर्याच ब्राउझर्समध्ये आपली साइट एकसारखी दिसते हे सुनिश्चित करण्याचा सर्वोत्तम मार्ग म्हणजे मार्जिनसारख्या गोष्टी ब्राउझर पसंतीस डीफॉल्ट म्हणून अनुमती देत नाहीत.
मी वरच्या डाव्या कोपर्यात माझ्या पृष्ठांना प्रारंभ करण्यास प्राधान्य देतो, मजकूराच्या अगाध पॅडिंग किंवा मार्जिनशिवाय. जरी मी त्यातील पॅडवर जात असलो, तरी मी मार्जिन्स शून्यवर सेट करते, म्हणजे मी त्याच रिक्त स्लेटपासून सुरू होत आहे. हे करण्यासाठी, आपल्या styles.css दस्तऐवजास निम्न जोडा:
html, body {
समास: 0 पिक्सेल;
पॅडिंग: 0 पिक्सेल;
सीमा: 0 पिक्स;
डावी: 0 पिक्सेल;
शीर्ष: 0 पिक्सेल;
}
04 चा 10
पृष्ठावरील फॉन्ट बदलणे
फॉन्ट बहुतेकदा आपण वेब पृष्ठ बदलू इच्छित सर्वप्रथम आहे. वेबपृष्ठाचा डीफॉल्ट फॉन्ट खराब असू शकतो आणि खरं तर वेब ब्राउझर स्वतःच असतो, त्यामुळे आपण फॉन्ट परिभाषित न केल्यास, आपल्याला खरोखर माहित नसेल की आपले पृष्ठ कसे दिसेल.
थोडक्यात, आपण परिच्छेदावरचे फॉन्ट बदलू किंवा कधीकधी संपूर्ण कागदपत्रावरच बदलू शकता. या साइटसाठी आम्ही शीर्षलेख आणि परिच्छेद स्तरावर फॉन्ट परिभाषित करू. आपल्या styles.css दस्तऐवजास निम्न जोडा:
पी, ली {
फॉन्ट: 1em एरियल, हेल्व्हटिका, सेन्स-सेरिफ;
}
h1 {
फॉन्ट: 2em एरियल, हेल्व्हटिका, सेन्स-सेरीफ;
}
h2 {
फॉन्ट: 1.5म एरियल, हेल्व्हटिका, सेन्स-सेरीफ;
}
h3 {
फॉन्ट: 1.25em एरियल, Helvetica, sans-serif;
}
परिच्छेद आणि सूची आयटमसाठी मी माझा आधार आकार म्हणून 1 मसह प्रारंभ केला आणि नंतर माझ्या सुर्खियांसाठी आकार सेट करण्यासाठी वापरले. मी एच 4 पेक्षा जास्त मथळा वापरण्याची अपेक्षा करत नाही, परंतु जर आपल्याला योजना करायची असेल तर आपण ते तसेच शैली करू इच्छित असाल.
05 चा 10
आपल्या दुवे आणखी रुचिपूर्ण बनवण्यासाठी
दुव्यांसाठी मुलभूत रंग अनुक्रमे न भेटलेल्या आणि भेट दिलेल्या दुव्यांसाठी निळ्या आणि जांभळ्या आहेत. हे मानक असताना, ते कदाचित आपल्या पृष्ठांची रंगयोजना बसत नाही, तर ते बदलू द्या. आपल्या styles.css फाईलमध्ये, पुढील जोडा:
साखळी {
फॉन्ट-फॅमिली: एरियल, हेल्व्हटिका, सेन्स-सेरीफ;
रंग: # एफएफ 9900;
मजकूर-सजावट: अधोरेखित;
}
a: भेट दिलेले {
रंग: # एफएफसीसी 66;
}
a: होव्हर {
पार्श्वभूमी: #FFFFCC;
फॉन्ट-वजन: ठळक;
}
मी तीन दुवा शैली सेट केली, एक: दुवा डीफॉल्ट म्हणून, a: भेट दिली गेली तेव्हा भेट दिली, मी रंग बदलू, आणि एक: फिरवा एकासह: होव्हर मला या दुव्याचा बॅकग्राउंड रंग मिळाला आहे आणि त्यावर क्लिक करण्यासाठी जोर धरण्याचा प्रयत्न करा.
06 चा 10
नेव्हिगेशन विभाग स्टाईल
आपण प्रथम HTML मध्ये नेव्हिगेशन (id = "nav") विभाग ठेवले असल्याने, आपण ते प्रथम शैलीने करू. आम्हाला असे दर्शविण्याची आवश्यकता आहे की ती किती मोठी असली पाहिजे आणि उजव्या बाजूवर मोठे मार्जिन ठेवा जेणेकरुन मुख्य मजकूर त्याच्या विरोधात उंचावत नाही. मी त्याच्या सभोवतालची सीमा देखील लावली.
आपल्या styles.css दस्तऐवजामध्ये पुढील CSS जोडा:
#nav {
रुंदीः 225px;
समास-उजवीकडे: 15px;
सीमा: मध्यम घन # 000000;
}
#nav li {
सूची-शैली: काहीही नाही;
}
.footer {
फॉन्ट-आकार: .75em;
स्पष्ट: दोन्ही;
रुंदीः 100%;
मजकूर-संरेखन: केंद्र;
}
सूची-शैलीतील गुणधर्म नॅव्हिगेशन विभागात सूची नाही की बुलेट्स किंवा संख्या नाहीत आणि .footer शैली हा विभागांमध्ये लहान आणि केंद्रीत असलेल्या कॉपीराइट विभागात सेट करते.
10 पैकी 07
मुख्य विभाग ठिकाण
आपल्या मुख्य विभागात परिपूर्ण स्थिती निर्धारण करून आपण खात्री करून घेऊ शकता की ते आपल्या वेब पृष्ठावर कुठेही टिकेल असेच असेल. मी मोठय़ा मॉनिटरच्या सोबत माझी 800 पिक्स्स रुंद केली, परंतु आपण एक लहान मॉनिटर असल्यास, आपण ती संकुचित करू इच्छित असाल
आपल्या styles.css दस्तऐवजात निम्नलिखित ठेवा:
#main {
रुंदीः 800 पिक्सेल;
शीर्ष: 0 पिक्सेल;
स्थान: परिपूर्ण;
डावीकडे: 250px;
}
10 पैकी 08
आपले परिच्छेद शैली
मी आधीच वरील परिच्छेद फॉन्ट सेट केले असल्यामुळे, मी प्रत्येक परिच्छेद थोडासा अतिरिक्त "किक" देऊ इच्छितो जेणेकरून ते अधिक चांगला होईल. मी हे केवळ अशाच चित्रांपेक्षा जास्त परिच्छेद हायलाइट केलेल्या शीर्षस्थानी बॉर्डर लावून केले.
आपल्या styles.css दस्तऐवजात निम्नलिखित ठेवा:
.शिर्षक ओळ {
सीमा-शीर्ष: जाड सॉलिशन # एफएफसीसी 00;
}
मी त्या प्रमाणे सर्व परिच्छेदांची व्याख्या करण्याऐवजी "टॉपलाइन" नावाचे वर्ग म्हणून करण्याचा निर्णय घेतला. अशाप्रकारे, जर मी ठरवले की मला वरच्या पिवळी ओळीशिवाय एक परिच्छेद हवा असेल तर मी पॅराग्राफ टॅगमध्ये वर्ग = "टॉपलाइन" सोडू शकेन आणि त्यास वरची सीमा नाही.
10 पैकी 9
प्रतिमा स्टाईल करणे
प्रतिमा साधारणतः त्यांच्या सभोवतालची आहेत, जोपर्यंत प्रतिमा एक दुवा नसली तरीही हे नेहमी दृश्यमान नसते, परंतु माझ्या सीएसएस स्टाइलशीटमध्ये एक वर्ग असावा जो आपोआप सीमा पार करते. या स्टाईलशीटसाठी, मी "noborder" वर्ग तयार केला आहे, आणि दस्तऐवजातील बहुतांश प्रतिमा या वर्गाचा भाग आहेत.
या प्रतिमांचा इतर विशेष भाग पृष्ठावर त्यांचे स्थान आहे. मी त्यांना परिमितीचा एक भाग बनावे असे वाटते जे ते टेबलाचा वापर न करता ते एकमेकांना जोडण्यासाठी करतात. फ्लोट सीएसएस गुणधर्म वापरणे हे सर्वात सोपा मार्ग आहे.
आपल्या styles.css दस्तऐवजात निम्नलिखित ठेवा:
#main img {
फ्लोट: डावे;
समास-उजवी: 5px;
समास-तळ: 15 पीएक्स;
}
.noborder {
सीमा: 0 पिक्सेल काहीही नाही;
}
आपण पाहू शकता की, पॅराग्राफमध्ये त्यांच्या बाजूला असलेल्या मजकुराशी ते खराब झालेले नाहीत याची खात्री करण्यासाठी चित्रांवर सेट केलेले मार्जिन गुणधर्म देखील आहेत.
10 पैकी 10
आता आपली पूर्ण पृष्ठ पहा
एकदा आपण आपली CSS जतन केल्यानंतर आपण आपल्या वेब ब्राउझरमधील pets.htm पृष्ठ रीलोड करू शकता. आपले पृष्ठ या चित्रात दर्शविलेल्या प्रमाणेच दिसले पाहिजे, प्रतिमा संरेखित आणि पृष्ठाच्या डाव्या बाजूवर योग्यरित्या नेव्हिगेशन ठेवलेल्यासह.
या साइटसाठी आपल्या सर्व अंतर्गत पृष्ठांसाठी या समान चरणांचे अनुसरण करा. आपण आपल्या नेव्हिगेशन प्रत्येक पृष्ठ एक पृष्ठ इच्छित.