Blogger: CSS-stil for kode på bloggen din
En venn spurte meg hvordan jeg laget kodeområdene i Blogger-oppføringen. Jeg gjorde det ved å bruke en stilkode for CSS i Blogger-malen min. Her er det jeg la til:
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 som retter seg mot HTML<p>
elementer med klassenavnet «kode». Det betyr at ethvert avsnitt med denne klassen vil bli stylet i henhold til følgende egenskaper.font-family: Courier New;
: Denne egenskapen setter skriftfamilien til "Courier New." Den spesifiserer fonten som skal brukes for teksten innenfor de målrettede elementene.font-size: 8pt;
: Denne egenskapen setter skriftstørrelsen til 8 poeng. Teksten i de målrettede elementene vil vises med denne skriftstørrelsen.border-style: inset;
: Denne egenskapen setter kantstilen til «innsatt». Det skaper et nedsunket eller presset utseende for grensen rundt de målrettede elementene.border-width: 3px;
: Denne egenskapen setter kantbredden til 3 piksler. Kanten rundt elementene vil være 3 piksler tykk.padding: 5px;
: Denne egenskapen legger til 5 piksler med polstring rundt innholdet i de målrettede elementene. Det gir avstand mellom teksten og rammen.background-color: #FFFFFF;
: Denne egenskapen setter bakgrunnsfargen til hvit (#FFFFFF). Innholdet i de målrettede elementene vil ha en hvit bakgrunn.line-height: 100%;
: Denne egenskapen setter linjehøyden til 100 % av skriftstørrelsen. Det sikrer at tekstlinjene er fordelt i henhold til skriftstørrelsen.margin: 10px;
: Denne egenskapen legger til en margin på 10 piksler rundt hele elementet. Det gir avstand mellom dette elementet og andre elementer på siden.
Den oppgitte CSS-koden definerer en stil for HTML-avsnitt med klassen "kode". Den angir skrifttype, skriftstørrelse, kantstil, kantbredde, utfylling, bakgrunnsfarge, linjehøyde og marg for disse avsnittene. Denne stilen kan brukes på kodebiter eller forhåndsformatert tekst i et Blogger-innlegg for å gi dem et spesifikt utseende.
Slik vil det se ut:
p.kode {
font-family: Courier Ny;
skriftstørrelse: 8pt;
border-style: innfelt;
kant-bredde: 3px;
padding: 5px;
bakgrunnsfarge: #FFFFFF;
linjehøyde: 100 %;
margin: 10px;
}
Glad koding!