CSS Schriftformatierungen

Tutorials

Schriftformatierungen mit und ohne CSS-Code

In diesem Kapitel geht es ausschließlich nur um die Text-Kurzformatierung eines Objektes, mit Hilfe vom CSS-Bereich eines jedem HTML-Code Objekes in Website X5. Jeder kommt in die Verlegenheit einen Code als Text darstellen zu müssen, wie zum Beispiel bei der Ausgabe von HTML Entities-Code. Um das unliebsame programmieren mit einer eigenen CSS zu umgehen, wurden bisher die einfachen Möglichkeiten genutzt Schriftart, Schriftfarbe und Schriftgröße in HTML-Objekten zu formatieren:

Das ist der Text in ROT.

</font>

Das ist der Text in ROT.

In HTML5 wird zwar Schriftart und -farbe noch dargestellt, ergibt aber keinen Sinn, wenn die Schriftgröße aus der Voreinstellung von Website X5 angenommen wird.

So müssen wir auf andere HTML konforme Möglichkeiten für den HTML-Code ausweichen:

Das ist der Text in ROT.

</p>

Das ist der Text in ROT.

CSS-Kurz-Referenz: Schrifteigenschaften aus:

Schriftfamilie:	font-family (Schriftart, Inherit)
Schriftgröße:	font-size (Längenangabe, Prozentangabe, xx-small, x-small, small, smaller, medium, large, x-large, xx-large, larger, Inherit)
Schriftstil:	font-style (italic, oblique, normal, Inherit)
Kapitälchen:	font-variant (small-caps, normal, Inherit)
Schriftgewicht:	font-weight (normal, bold, bolder, lighter, 100 - 900, Inherit)
Innenabstand:	padding (Längenangabe, Prozentangabe, auto, Inherit)
Außenabstand:	margin (Längenangabe, Prozentangabe, auto, Inherit)

Und nun eine einfache Textformatierung mit CSS:

Hier ist der Hintergrund schwarz
mit vierzeiligem Text in rot und
einer Schrifthöhe von 16 Pixel
sowie einem Innenabstand von 10 Pixel.

Zur Farbcode-Tabelle gehts
hier.

Code HTML-Objekt:

Hier ist der Hintergrund schwarz <br>
mit vierzeiligem Text in rot und <br>
einer Schrifthöhe von 16 Pixel <br>
sowie einem Innenabstand von 10 Pixel.

</div>

Code CSS-Bereich:

#example {

background: #000000;
font-size: 16px;
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
padding: 10px; }

Hier wurde noch zusätzlich "background" genutzt, um die Farbe des Hintergrundes im DIV-Container zu ändern und "padding" um einen Innenabstand zu erzeugen.
Wie ihr erkennen könnt, ist das arbeiten mit CSS-Formatierungen doch nicht so schwer und es ergeben sich ganz andere Möglichkeiten in der gesamten Formatierung.

Weitere und spezielle Möglichkeiten zur Formatierung mit CSS erhaltet ihr im Tutorial

"Stylen & Formen mit CSS"

» nach oben «