CSS Schriftformatierungen - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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:
<font face="courier" color="#ff0000" size="4">
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:
<p style="color: #ff0000; font-size: 16px; font-family: courier;">
Das ist der Text in ROT.
</p>

Das ist der Text in ROT.

CSS-Kurz-Referenz: Schrifteigenschaften                                                     aus:
Logo CSS4 you
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.
<div id="example">
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>
#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

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt