Blogger: CSS-Stil für Code in Ihrem Blog
Ein Freund fragte mich, wie ich die Coderegionen im Blogger-Eintrag erstellt habe. Ich habe dazu ein Style-Tag für CSS in meiner Blogger-Vorlage verwendet. Folgendes habe ich hinzugefügt:
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
: Dies ist eine CSS-Regel, die auf HTML abzielt<p>
Elemente mit dem Klassennamen „code“. Das bedeutet, dass jeder Absatz mit dieser Klasse entsprechend den folgenden Eigenschaften gestaltet wird.font-family: Courier New;
: Diese Eigenschaft setzt die Schriftfamilie auf „Courier New“. Es gibt die Schriftart an, die für den Text innerhalb der Zielelemente verwendet wird.font-size: 8pt;
: Diese Eigenschaft legt die Schriftgröße auf 8 Punkt fest. Der Text innerhalb der Zielelemente wird in dieser Schriftgröße angezeigt.border-style: inset;
: Diese Eigenschaft setzt den Rahmenstil auf „Einsatz“. Dadurch entsteht ein eingesunkenes oder gedrücktes Erscheinungsbild des Randes um die Zielelemente.border-width: 3px;
: Diese Eigenschaft legt die Rahmenbreite auf 3 Pixel fest. Der Rand um die Elemente ist 3 Pixel dick.padding: 5px;
: Diese Eigenschaft fügt 5 Pixel Abstand um den Inhalt innerhalb der Zielelemente hinzu. Es sorgt für Abstand zwischen dem Text und dem Rand.background-color: #FFFFFF;
: Diese Eigenschaft setzt die Hintergrundfarbe auf Weiß (#FFFFFF). Der Inhalt innerhalb der Zielelemente hat einen weißen Hintergrund.line-height: 100%;
: Diese Eigenschaft setzt die Zeilenhöhe auf 100 % der Schriftgröße. Es stellt sicher, dass die Textzeilen entsprechend der Schriftgröße beabstandet sind.margin: 10px;
: Diese Eigenschaft fügt einen Rand von 10 Pixeln um das gesamte Element hinzu. Es sorgt für den Abstand zwischen diesem Element und anderen Elementen auf der Seite.
Der bereitgestellte CSS-Code definiert einen Stil für HTML-Absätze mit der Klasse „code“. Es legt Schriftart, Schriftgröße, Rahmenstil, Rahmenbreite, Abstand, Hintergrundfarbe, Zeilenhöhe und Rand für diese Absätze fest. Dieser Stil kann auf Codeausschnitte oder vorformatierten Text in einem Blogger-Beitrag angewendet werden, um ihnen ein bestimmtes Aussehen zu verleihen.
So wird es aussehen:
p.code {
Schriftfamilie: Courier New;
Schriftgröße: 8pt;
Randstil: eingefügt;
Randbreite: 3px;
padding: 5px;
Hintergrundfarbe: #FFFFFF;
Zeilenhöhe: 100 %;
margin: 10px;
}
Viel Spaß beim Codieren!