स्टाइल शीट (सीएसएस) कैसे बनाएं

सामग्री

कदम
टिप्स
चेतावनी

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

कदम

प्रोग्राम शुरू करें "नोटपैड" माइक्रोसॉफ्ट विंडोज में मौजूद आप इसे मेनू के माध्यम से कर सकते हैं "कार्यक्रम" विंडोज या कीवर्ड टाइपिंग "नोटपैड" मेनू खोज फ़ील्ड के भीतर "प्रारंभ" और फिर बटन दबाएं "प्रस्तुत करना"।

प्रोग्राम विंडो से "नोटपैड" दिखाई दिया, मेनू दर्ज करें "फ़ाइल" और विकल्प चुनें "के रूप में सहेजें"।

मैदान के अंदर "फ़ाइल का नाम" दिखाई देने वाले संवाद बॉक्स में, सवाल के लिए फ़ाइल का नाम टाइप करें, जो सरल और संक्षिप्त है, फिर एक्सटेंशन जोड़ें ".css", फ़ाइल प्रारूप का चयन करें "सभी फाइलें" और बटन दबाएं "सहेजें"।

आपकी सीएसएस फ़ाइल का नाम सीधे आपके द्वारा बनाए जा रहे स्टाइल शीट द्वारा संदर्भित वेबसाइट से संबंधित होना चाहिए। उदाहरण के लिए, यदि आपकी वेबसाइट का डोमेन नाम है "createcss.com", नाम असाइन करें "createcss.css" प्रासंगिक सीएसएस फ़ाइल के लिए

फ़ाइल खोलें "index.html" कार्यक्रम का उपयोग कर अपनी वेबसाइट के "नोटपैड"।

समापन टैग से पहले निम्न कोड दर्ज करें "/ सिर": < लिंक rel ="स्टाइलशीट" type ="text / css" href ="createcss.css" >।

कोड की यह रेखा आपके वेबसाइट को बताती है कि उपयोग करने के लिए स्टाइल शीट की परिभाषा कहां मिलनी चाहिए।

अपनी साइट के एचटीएमएल पन्नों के भीतर, अपने मन में मौजूद डिज़ाइन को समझने के लिए आवश्यक सभी तत्वों को दर्ज करें, फिर अपनी उपस्थिति और शैली को निर्धारित करने के लिए संबंधित शैली पत्रक का उपयोग करें।

सीएसएस फ़ाइल में तत्व ऑब्जेक्ट की उपस्थिति और शैली का वर्णन करते हैं, जैसे कि HTML टैग < DIV > एक सीमांकित खंड बनाने के लिए इस्तेमाल किया, टैग < पी > एक अनुच्छेद या टैग बनाने के लिए इस्तेमाल किया < एच 1 > एक बड़े शीर्षक या शीर्षक की पहचान करने के लिए इस्तेमाल किया।

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

आपकी फ़ाइल के भीतर "createcss.css", सभी सीएसएस तत्वों की सूची डालें, प्रत्येक एक के बाद ब्रेसिज़ की एक जोड़ी "{}"।

एक स्टाइल शीट में दिए गए नियम सभी की श्रृंखला की विशेषता हैं "संपत्ति" उसके मूल्य के बाद "संपत्ति" संबंधित HTML तत्व के रूप की पहचान करें जिसे आप बदलना चाहते हैं, जैसे कि पृष्ठभूमि का रंग। सापेक्ष मान एक संख्यात्मक मात्रा या संपत्ति का नाम निर्दिष्ट करने वाला इकाई का प्रतिनिधित्व करता है, हमारे उदाहरण में पृष्ठभूमि के रूप में उपयोग किए जाने वाले रंग का नाम या संख्या। परिभाषा के लिए उपयोग करने के लिए वाक्यविन्यास निम्न {संपत्ति: value-} है। आइए एक ठोस उदाहरण देखें:

उदाहरण के लिए, अगर आपने तय किया है कि आपकी वेबसाइट के सभी पृष्ठों की पृष्ठभूमि नीली होनी चाहिए, तो आपको निम्न तत्व को परिभाषित करना होगा "पृष्ठ {पृष्ठभूमि-रंग: नीला-}"।

आपके HTML पृष्ठों में प्रत्येक तत्व को एक से अवश्य होना चाहिए "आईडी" या "क्लास" विशिष्ट।

स्टाइल शीट के भीतर, एक विशेषता की घोषणा "आईडी" प्रतीक के साथ शुरू होना चाहिए "#", जबकि एक विशेषता की घोषणा "क्लास" प्रतीक के साथ शुरू होना चाहिए "।"।

यदि आप अपने वेब पृष्ठों के पाद लेख को बाकी पृष्ठ से अलग दिखना चाहते हैं तो आइटम बनाएं "#footer" निम्न सिंटैक्स का उपयोग करते हुए HTML दस्तावेज़ के भीतर < div id ="फ़ुटबाल"> और कोड की शुरुआत में कोड डालकर, फिर संबंधित समापन टैग का उपयोग करके प्रश्न में क्षेत्र को बंद करें < / div >।

आपकी सीएसएस फ़ाइल में, "createcss.css", आईडी से संबंधित एक शैली नियम को घोषित करता है "फ़ुटबाल" निम्न सिंटैक्स का उपयोग कर "#FOOTER {फ़ॉन्ट-आकार: x-small-}" (बिना उद्धरण) इस प्रकार सभी पाठ में दर्ज किया गया आईडी ने इंगित किया "फ़ुटबाल" एक बहुत छोटे फ़ॉन्ट आकार के साथ प्रदर्शित किया जाएगा

टिप्स

स्टाइल शीट का उपयोग करके आप अपने वेब पेज के कई पहलुओं और गुणों का प्रबंधन कर सकते हैं। एक संतोषजनक वेबसाइट डिज़ाइन का पता लगाएँ और स्रोत कोड देखें। यदि पृष्ठ के शीर्ष पर, टैग के अंदर "HEAD", सीएसएस फ़ाइल का एक लिंक है, आप इसे अपनी सामग्री प्रदर्शित करने के लिए चुन सकते हैं और देख सकते हैं कि कैसे विभिन्न गुणों को प्रबंधित किया जाता है और कैसे प्रदर्शित किए गए संबंधित तत्वों को मान को असाइन किया जाता है।

चेतावनी

सीधे अन्य स्रोतों से एचटीएमएल और स्टाइल शीट की प्रतिलिपि बनाने से आपको यह समझने में सहायता मिल सकती है कि वे कैसे काम करते हैं, लेकिन शेष राशि पर आपको आपके द्वारा बनाए गए कोड का उपयोग करना होगा। अन्य की उपलब्धियों का उपयोग चोरी और साहित्यिक चोरी से मेल खाती है।

सामाजिक नेटवर्क पर साझा करें:

संबद्ध