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