Blogger: CSS-stijl voor code op uw blog
Een vriend vroeg me hoe ik de coderegio's in Blogger-invoer maakte. Ik deed het met behulp van een stijltag voor CSS in mijn Blogger-sjabloon. Dit is wat ik heb toegevoegd:
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
: Dit is een CSS-regel die zich richt op HTML<p>
elementen met de klassenaam ‘code’. Het betekent dat elke alinea met deze klasse wordt opgemaakt volgens de volgende eigenschappen.font-family: Courier New;
: Met deze eigenschap wordt de lettertypefamilie ingesteld op 'Courier New'. Het specificeert het lettertype dat zal worden gebruikt voor de tekst binnen de beoogde elementen.font-size: 8pt;
: Met deze eigenschap wordt de lettergrootte ingesteld op 8 punten. De tekst binnen de beoogde elementen wordt met deze lettergrootte weergegeven.border-style: inset;
: Met deze eigenschap wordt de randstijl ingesteld op 'inset'. Het creëert een verzonken of gedrukt uiterlijk voor de rand rond de beoogde elementen.border-width: 3px;
: Met deze eigenschap wordt de randbreedte ingesteld op 3 pixels. De rand rond de elementen is 3 pixels dik.padding: 5px;
: deze eigenschap voegt 5 pixels opvulling toe rond de inhoud binnen de beoogde elementen. Het biedt ruimte tussen de tekst en de rand.background-color: #FFFFFF;
: Met deze eigenschap wordt de achtergrondkleur ingesteld op wit (#FFFFFF). De inhoud binnen de beoogde elementen heeft een witte achtergrond.line-height: 100%;
: Met deze eigenschap wordt de lijnhoogte ingesteld op 100% van de lettergrootte. Het zorgt ervoor dat de tekstregels op een bepaalde afstand van de lettergrootte staan.margin: 10px;
: Deze eigenschap voegt een marge van 10 pixels toe rond het gehele element. Het biedt ruimte tussen dit element en andere elementen op de pagina.
De meegeleverde CSS-code definieert een stijl voor HTML-paragrafen met de klasse ‘code’. Het stelt het lettertype, de lettergrootte, de randstijl, de randbreedte, de opvulling, de achtergrondkleur, de lijnhoogte en de marge voor deze alinea's in. Deze stijl kan worden toegepast op codefragmenten of vooraf opgemaakte tekst in een Blogger-bericht om ze een specifiek uiterlijk te geven.
Hier ziet u hoe het eruit zal zien:
p.code {
lettertypefamilie: Courier New;
lettergrootte: 8pt;
randstijl: inzet;
border-breedte: 3px;
padding: 5px;
achtergrondkleur: #FFFFFF;
lijnhoogte: 100%;
marge: 10px;
}
Gelukkig codering!