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;
}
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.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.font-size: 8pt;
: Denne egenskab indstiller skriftstørrelsen til 8 punkter. Teksten i de målrettede elementer vil blive vist med denne skriftstørrelse.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.border-width: 3px;
: Denne egenskab indstiller grænsebredden til 3 pixels. Grænsen omkring elementerne vil være 3 pixels tyk.padding: 5px;
: Denne egenskab tilføjer 5 pixel polstring omkring indholdet inde i de målrettede elementer. Det giver afstand mellem teksten og rammen.background-color: #FFFFFF;
: Denne egenskab indstiller baggrundsfarven til hvid (#FFFFFF). Indholdet i de målrettede elementer vil have en hvid baggrund.line-height: 100%;
: Denne egenskab indstiller linjehøjden til 100 % af skriftstørrelsen. Det sikrer, at tekstlinjerne er fordelt efter skriftstørrelsen.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!