 |
Cascading Stylesheets: Textformatierungen
|
Texte mit CSS zu formatieren macht besonders viel Sinn, da sich so leicht ganze Abschnitte übergreifender als bei einem normalem Font-Tag formatieren lassen.
|
|
Für die Formatierung des Textes sind u.a. folgende Attribute möglich:
|
Schriftart
font-family:Schriftart1,Schriftart2,...;
|
 |
Für Schriftart1 den Namen gewünschten Schriftart notieren.
Für Schriftart2 und weitere die Namen von Alternativschriftarten notieren.
|
Schriftstil
font-style:Wert;
|
|
Für Wert einen der folgenden Werte notieren:
italic = Schriftstil kursiv
oblique = Schriftstil kursiv
normal = normaler Schriftstil
|
Schriftgröße
font-size:Wert; |
|
Für Wert eine numerische Angabe wie 12pt, 14px oder 1.2cm notieren oder eine der folgenen Werte:
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
|
Schriftgewicht
font-weight:Wert; |
|
Für Wert einen der folgenden Werte notieren:
normal = normales Schriftgewicht.
bold = fett.
100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extra-fett (900).
Bei den numerischen Werten entspricht die Angabe 500 dem im DTP-Bereich üblichen Begriff medium.
|
Textfarbe
color:Wert; |
|
Für Wert eine Farbangabe wie #FFCC99, red oder rgb(96,255,0) notieren.
|
Textdekoration
text-decoration:Wert;
|
|
Für Wert einen der folgenden Werte notieren:
underline = unterstrichen.
overline = überstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).
|
Schrift (allgemein)
font:Wert;
|
|
Für Wert eine Mischung aus erlaubten Werten für font-family, font-style, font-variant, font-size, font-weight und line-height notieren. Einzelwerte durch Leerzeichen trennen, Reihenfolge ist egal.
z.B. font:Times 13px bold; |
|
|
|
Beispiele:
|
|
|
Schriftformatierung
Dies ist ein Beispieltext.
|
|
<span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: blue; text-decoration: underline">
Dies ist ein Beispieltext.
</span>
|
|
|
|
Textmarkereffekt
Wichtig!
|
|
<p style="color : black; background: LightBlue">Wichtig!</p> |
|
» Einführung CSS
» Gestaltung von Rahmen
» Übersicht
|