Content Marketing

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;
}
  1. 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.
  2. 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.
  3. font-size: 8pt;: Diese Eigenschaft legt die Schriftgröße auf 8 Punkt fest. Der Text innerhalb der Zielelemente wird in dieser Schriftgröße angezeigt.
  4. border-style: inset;: Diese Eigenschaft setzt den Rahmenstil auf „Einsatz“. Dadurch entsteht ein eingesunkenes oder gedrücktes Erscheinungsbild des Randes um die Zielelemente.
  5. border-width: 3px;: Diese Eigenschaft legt die Rahmenbreite auf 3 Pixel fest. Der Rand um die Elemente ist 3 Pixel dick.
  6. 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.
  7. background-color: #FFFFFF;: Diese Eigenschaft setzt die Hintergrundfarbe auf Weiß (#FFFFFF). Der Inhalt innerhalb der Zielelemente hat einen weißen Hintergrund.
  8. 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.
  9. 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!

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.