మీ బ్లాగులో కోడ్ కోసం CSS శైలి

CSS

నా చివరి బ్లాగ్ ఎంట్రీలో కోడ్ ప్రాంతాలను ఎలా చేశాను అని నా స్నేహితుడు నన్ను అడిగాడు. నేను నిజంగా ఒక శైలిని ఉపయోగించి కోడ్ ప్రాంతాన్ని 'నకిలీ' చేసాను. బ్లాగర్ లోపల, మీరు మీ టెంప్లేట్‌ను సవరించవచ్చు. నేను ఈ క్రింది శైలిని జోడించాను:

p.code {font-family: కొరియర్ కొత్తది; font-size: 8pt; సరిహద్దు-శైలి: చొప్పించు; సరిహద్దు-వెడల్పు: 3px; పాడింగ్: 5 పిక్స్‌; నేపథ్య-రంగు: #FFFFFF; లైన్-ఎత్తు: 100%; మార్జిన్: 10px}

తదుపరి దశ నా ట్యాగ్‌ను 'సవరించు HTML' మోడ్‌లో సవరించడం. నేను ట్యాగ్ చేయడం ద్వారా నా క్రొత్త శైలిని సూచిస్తాను. వోయిలా! శైలులను విచ్ఛిన్నం చేయడం:

  • ఫాంట్‌ను కొరియర్ న్యూగా సెట్ చేయండి… సాధారణ కోడ్ ఎడిటర్ లాగా కనిపిస్తుంది
  • కుడివైపు చూడటానికి ఫాంట్ పరిమాణాన్ని 8pt కు సెట్ చేయండి
  • పేరా సరిహద్దు శైలిని 'చొప్పించు' కు సెట్ చేయండి. ఇది పేజీలో టెక్స్ట్ఏరియా ఎలా ఉంటుందో ప్రతిబింబిస్తుంది.
  • సరిహద్దు వెడల్పును 2 లేదా 3 పిక్సెల్‌లకు సెట్ చేయండి. ఇది ఇన్సెట్ సరిహద్దు శైలి సరిగ్గా కనిపించేలా చేస్తుంది.
  • పాడింగ్ సరిహద్దు మరియు లోపల టెక్స్ట్ మధ్య దూరాన్ని సెట్ చేస్తుంది.
  • నేపథ్య రంగు… దీన్ని తెలుపు రంగుకు సెట్ చేయండి (#FFFFFF)
  • పంక్తి-ఎత్తు - నేను దీన్ని 100% కు సర్దుబాటు చేసాను ఎందుకంటే నా బ్లాగర్ థీమ్‌లోని కొన్ని ఇతర శైలులు నా పంక్తి ఎత్తును 200% గా చేశాయి
  • మార్జిన్‌ను 10 px కు సెట్ చేయండి. ఇది పేరాగ్రాఫ్ (పి ట్యాగ్) ను అన్నింటికీ 10 పిక్సెల్స్ దూరం చేస్తుంది.

అంతే ఉంది! ఒక గమనిక: బ్లాగర్‌తో వచ్చే ఎడిటర్ మీ బ్లాగులో కనిపించే విధంగా ప్రదర్శించగల సామర్థ్యం లేదు. కానీ ఇది పనిచేస్తుంది మరియు చాలా బాగుంది!

ఇంకొక గమనిక… మీరు ట్యాగ్‌కు సవరణ చేసిన తర్వాత, బ్లాగర్ ఎడిటర్ మీ పోస్ట్‌లో యాదృచ్చికంగా దీన్ని ఉపయోగించడానికి ఇష్టపడతారు. ఇది కొద్దిగా బాధించేది! నా సలహా ఏమిటంటే, మీ మొత్తం పోస్ట్‌ను వ్రాసి, ఆపై ఒక చిన్న సవరణ చేయండి.

ఒక చివరి గమనిక… మీ చిహ్నాలను ప్రదర్శించడానికి HTML ఎంటిటీలను ఉపయోగించడం మర్చిపోవద్దు! ఒక జంట ఉదాహరణలు:

  • కోట్స్ (“)“
  • > ఉంది>
  • > ఉంది>

హ్యాపీ కోడింగ్!

3 వ్యాఖ్యలు

  1. 1
  2. 2
  3. 3

    నేను ఇప్పుడు వ్రాయవలసిన అవసరం లేదు. మీరు సహాయక సంపాదకులను ఉపయోగించవచ్చు.మీరు రంగు, సరిహద్దు మొదలైన వాటిని ఎంచుకోవచ్చు.

మీరు ఏమి ఆలోచిస్తాడు?

స్పామ్ తగ్గించడానికి ఈ సైట్ Akismet ను ఉపయోగిస్తుంది. మీ వ్యాఖ్య డేటా ఎలా ప్రాసెస్ చేయబడిందో తెలుసుకోండి.