Content Marketing

Blogger: CSS-stil til kode på din blog

En ven spurgte mig, hvordan jeg lavede kodeområderne i Blogger-indgangen. Jeg gjorde det ved at bruge et stiltag til CSS i min Blogger-skabelon. Her er hvad jeg tilføjede:

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;
}
  1. p.code: Dette er en CSS-regel, der retter sig mod HTML <p> elementer med klassenavnet "kode". Det betyder, at ethvert afsnit med denne klasse vil blive stylet i henhold til følgende egenskaber.
  2. font-family: Courier New;: Denne egenskab indstiller skrifttypefamilien til "Courier New." Det specificerer den skrifttype, der vil blive brugt til teksten i de målrettede elementer.
  3. font-size: 8pt;: Denne egenskab indstiller skriftstørrelsen til 8 punkter. Teksten i de målrettede elementer vil blive vist med denne skriftstørrelse.
  4. border-style: inset;: Denne egenskab indstiller kantstilen til "indsat". Det skaber et forsænket eller presset udseende for grænsen omkring de målrettede elementer.
  5. border-width: 3px;: Denne egenskab indstiller grænsebredden til 3 pixels. Grænsen omkring elementerne vil være 3 pixels tyk.
  6. padding: 5px;: Denne egenskab tilføjer 5 pixel polstring omkring indholdet inde i de målrettede elementer. Det giver afstand mellem teksten og rammen.
  7. background-color: #FFFFFF;: Denne egenskab indstiller baggrundsfarven til hvid (#FFFFFF). Indholdet i de målrettede elementer vil have en hvid baggrund.
  8. line-height: 100%;: Denne egenskab indstiller linjehøjden til 100 % af skriftstørrelsen. Det sikrer, at tekstlinjerne er fordelt efter skriftstørrelsen.
  9. margin: 10px;: Denne egenskab tilføjer en margen på 10 pixels rundt om hele elementet. Det giver afstand mellem dette element og andre elementer på siden.

Den medfølgende CSS-kode definerer en stil for HTML-afsnit med klassen "kode". Den indstiller skrifttype, skriftstørrelse, kantstil, kantbredde, polstring, baggrundsfarve, linjehøjde og margen for disse afsnit. Denne typografi kan anvendes på kodestykker eller forudformateret tekst i et Blogger-indlæg for at give dem et specifikt udseende.

Sådan kommer det til at se ud:

p.kode {
font-family: Courier Ny;
skriftstørrelse: 8pt;
grænse-stil: indsat;
kant-bredde: 3px;
polstring: 5px;
baggrundsfarve: #FFFFFF;
linjehøjde: 100%;
margin: 10px;
}

Glad kodning!

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.