ब्लॉगर: आपके ब्लॉग पर कोड के लिए सीएसएस शैली
एक मित्र ने मुझसे पूछा कि मैंने ब्लॉगर प्रविष्टि में कोड क्षेत्र कैसे बनाये। मैंने इसे अपने ब्लॉगर टेम्पलेट में सीएसएस के लिए स्टाइल टैग का उपयोग करके किया। यहाँ मैंने जो जोड़ा है:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: यह एक CSS नियम है जो HTML को लक्षित करता है<p>
वर्ग नाम "कोड" वाले तत्व। इसका मतलब है कि इस वर्ग के किसी भी पैराग्राफ को निम्नलिखित गुणों के अनुसार स्टाइल किया जाएगा।font-family: Courier New;
: यह प्रॉपर्टी फ़ॉन्ट परिवार को "कूरियर न्यू" पर सेट करती है। यह उस फ़ॉन्ट को निर्दिष्ट करता है जिसका उपयोग लक्षित तत्वों के भीतर पाठ के लिए किया जाएगा।font-size: 8pt;
: यह प्रॉपर्टी फ़ॉन्ट आकार को 8 बिंदुओं पर सेट करती है। लक्षित तत्वों के भीतर का पाठ इस फ़ॉन्ट आकार में प्रदर्शित किया जाएगा।border-style: inset;
: यह प्रॉपर्टी बॉर्डर शैली को "इनसेट" पर सेट करती है। यह लक्षित तत्वों के चारों ओर की सीमा के लिए धँसा हुआ या दबा हुआ स्वरूप बनाता है।border-width: 3px;
: यह प्रॉपर्टी बॉर्डर की चौड़ाई को 3 पिक्सेल पर सेट करती है। तत्वों के चारों ओर का बॉर्डर 3 पिक्सेल मोटा होगा।padding: 5px;
: यह प्रॉपर्टी लक्षित तत्वों के अंदर सामग्री के चारों ओर 5 पिक्सेल पैडिंग जोड़ती है। यह टेक्स्ट और बॉर्डर के बीच रिक्ति प्रदान करता है।background-color: #FFFFFF;
: यह प्रॉपर्टी पृष्ठभूमि का रंग सफेद (#FFFFFF) पर सेट करती है। लक्षित तत्वों की सामग्री की पृष्ठभूमि सफेद होगी।line-height: 100%;
: यह गुण पंक्ति की ऊंचाई को फ़ॉन्ट आकार के 100% पर सेट करता है। यह सुनिश्चित करता है कि टेक्स्ट पंक्तियाँ फ़ॉन्ट आकार के अनुसार दूरी पर हैं।margin: 10px;
: यह प्रॉपर्टी पूरे तत्व के चारों ओर 10 पिक्सेल का मार्जिन जोड़ती है। यह इस तत्व और पृष्ठ पर अन्य तत्वों के बीच अंतर प्रदान करता है।
प्रदान किया गया सीएसएस कोड "कोड" वर्ग के साथ HTML पैराग्राफ के लिए एक शैली को परिभाषित करता है। यह इन पैराग्राफों के लिए फ़ॉन्ट, फ़ॉन्ट आकार, बॉर्डर शैली, बॉर्डर चौड़ाई, पैडिंग, पृष्ठभूमि रंग, लाइन ऊंचाई और मार्जिन सेट करता है। इस शैली को ब्लॉगर पोस्ट में कोड स्निपेट या पूर्व-स्वरूपित टेक्स्ट पर लागू किया जा सकता है ताकि उन्हें एक विशिष्ट रूप दिया जा सके।
यहां बताया गया है कि यह कैसा दिखेगा:
पी.कोड {
फ़ॉन्ट-फ़ैमिली: कूरियर नया;
फ़ॉन्ट-आकार: 8pt;
बॉर्डर-शैली: इनसेट;
सीमा-चौड़ाई: 3 पीएक्स;
गद्दी: 5px;
पृष्ठभूमि-रंग: #FFFFFF;
लाइन-ऊंचाई: 100%;
मार्जिन: 10px;
}
हैप्पी कोडिंग!