CSS-Angaben (Auszüge)
Schriftformatierungen
Steht im HTML-Container zu formatierender Text, können Sie die folgenden Angaben verwenden.
| CSS-Angabe | Wert | Bedeutung |
|---|---|---|
font-family |
Schriftartnamen (*) | Schriftart |
font-style |
italic (kursiv), normal (ohne) |
Schriftstil |
font-size |
numerische Angabe (**) | Schriftgröße |
font-weight |
bold (fett), normal (normal) (***) |
Schriftgewicht |
text-decoration |
none (keine), underline, (unterstrichen), line-trough (durchgestrichen) |
Textauszeichnung |
text-transform |
capitalize (Wortanfänge Als Großbuchstaben), uppercase (NUR GROßBUCHSTABEN), lowercase (nur kleinbuchstaben), none (ohne) |
Textumwandlung |
color |
Farbangabe | Schriftfarbe |
font |
Angaben zu family, style, ... (****) |
mehrere Angaben zur Schrift |
(*) Mehrere Schriftarten sind möglich. Trennen Sie die Namen durch Komma, sie werden nacheinander bearbeitet. Gegen Sie zum Abschluss die Schriftartfamilie an (serif, sans-serif oder monospace).
(**) Arbeiten Sie bei numerischen Angaben immer mit Einheiten. Gebräuchliche Einheiten sind: px (Pixel), mm, cm, %. Verwenden Sie bei Dezimalbrüchen den Punkt (kein Komma).
(***) Weitere Angaben sind möglich, werden aber kaum von den Schriftarten unterstützt.
(****) Geben Sie die Schrifteigenschaften nacheinander (getrennt durch Leerzeichen) an. Die Reihenfolge ist egal.
Abstände, Ränder, Ausrichtung
Ränder beschreiben die Abstände des HTML-Elements zum benachbarten oder übergeordneten Element.
| CSS-Angabe | Wert | Bedeutung |
|---|---|---|
margin-top, |
numerische Werte | Abstand nach oben, unten, links, rechts, allgemein |
text-indent |
numerischer Wert (auch negativ) | Texteinrückung |
line-height |
numerischer Wert | Zeilenhöhe |
vertical-align |
top, middle, bottom |
vertikale Ausrichtung |
text-align |
left, right, center |
horizontale Ausrichtung |
Rahmen, Innenabstände
Innenabstände beschreiben den Abstand des Elementinhaltes zum Rand des Elementes.
| CSS-Angabe | Wert | Bedeutung |
|---|---|---|
padding-top, |
numerische Werte | Innenabstand nach oben, unten, links, rechts, allgemein |
border-top-width,-bottom-width,-left-width,-right-width,-width |
numerischer Wert, thin (dünn), medium (mittel), thick (dick) |
Rahmendicke oben, unten, links, rechts, allgemein |
border-color |
numerischer Wert | Rahmenfarbe |
border-style |
none (ohne), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt), groove , ridge, inset, outset (3D-Effekte) |
Rahmen-Stil |
Hintergründe
Sie können für HTML-Elemente Hintergrundfarben und -bilder festlegen, sind damit nicht auf den Dateikörper oder Tabellen beschränkt.
| CSS-Angabe | Wert | Bedeutung |
|---|---|---|
background-color |
Farbwert | Hintergrundfarbe |
background-image:url() |
Dateiname oder -pfadangabe | Hintergrundbild |
background-repeat |
repeat, repeat-x, repeat-y, no-repeat |
Wiederholung |
background-attachment |
scroll, fixed |
Wasserzeicheneffekt |
background-position |
top (obenbündig), center (zentriert), middle (vertikal mittig), bottom (untenbündig), left (linksbündig), right (rechtsbündig) |
Position des Hintergrundbilder (z.B. im Zusammenhang mit background-repeat). |
Positionierung
Positionierungen bieten die interessante Möglichkeit, sture Nacheinanderandordnung von HTML-Elemente im Browser aufzubrechen. Sie können die Elemente frei positionieren, z.B. Texte und Bilder übereinander anordnen.
| CSS-Angabe | Wert | Bedeutung |
|---|---|---|
position |
absolut, relativ, (static, fixed) |
Art der Positionierung zum vorhergehenden Element |
top |
numerischer Wert | Startposition von oben |
left |
numerischer Wert | Startposition von links |
width |
Numerischer Wert | Breite des Elementes |
float |
left (linksbündig), right (rechtsbündig), none (ohne) |
Umfluss des Elements durch seinen Nachfolger |
clear |
left (*), right (**), both (unterhalb), none (ohne) |
Fortsetzung nach Textumfluss |
z-index |
natürliche Zahl (***) | Schichtposition |
(*) erzwingt nach float:left Umbruch unterhalb.
(**) erzwingt nach float:right Umbruch unterhalb.
(***) Interessant mit der Angaben zu position. Sie können Schichten in der Datei festlegen. Bei Positionierungen liegen Schichten höherer Nummer über Schichten niederer Nummer.
Pseudo-Formate
Häufig werden auch Pseudo-Formate für Verweise über CSS-Angaben vergeben. a:visited beschreibt z.B. bereits besuchte Verweise.
| CSS-Angabe | Wert | Bedeutung |
|---|---|---|
a:link |
Text- und Hintergrund: CSS-Angaben im bisher genannten Format | Verweise zu noch nicht besuchten Seiten |
a:visited |
Verweise zu bereits besuchten Seiten | |
a:active |
gerade angeklickte Verweise | |
a:hover |
Verweise, wenn sie mit der Maus überfahren werden | |
a:focus |
Verweise, die den Fokus erhalten, z.B. durch die Tabulatortaste |
Anmerkung:
Oft wird die 'HTML-Unterstreichung' von Hyperlinks als störend für das eigene Layout empfunden. Wollen Sie die Unterstreichung unterdrücken, notieren Sie die CSS-Angabe:
a { text-decoration:none; [weitere Angaben] } |
Über Pseudo-Formate können sie den Verweisen dann weitere Eigenschaften zuweisen.
Beispiel
Ein mit CSS formatierter Absatz könnte dann so aussehen:
Testen Sie CSS!
Der Quelltext zu diesem Beispiel lautet (zur besseren Lesbarkeit teilweise mit Umbrüchen versehen):
|
<p style="font-family: 'Times New Roman',Times,serif; |
Anfangs eventuell verwirrend, aber:
- alle Formatierungen des Absatzes befinden sich im
style-Attribut - einige Formatierungen sind mit HTML nicht möglich
Es sind noch viele weitere CSS-Angaben möglich.