CSS-Angaben

Veröffentlicht in CSS

CSS-Angaben (Auszüge)

Schriftformatierungen

Steht im HTML-Container zu formatierender Text, können Sie die folgenden Angaben verwenden.

CSS-AngabeWertBedeutung
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 (serifsans-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-AngabeWertBedeutung
margin-top,
margin-bottom,
margin-left,
margin-right,
margin
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-AngabeWertBedeutung
padding-top,
padding-bottom,
padding-left,
padding-right,
padding
numerische Werte Innenabstand nach oben, unten, links, rechts, allgemein
border-top-width,
border
-bottom-width,
border
-left-width,
border
-right-width,
border
-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-AngabeWertBedeutung
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-AngabeWertBedeutung
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-AngabeWertBedeutung
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;
   font-size: 18px; font-style: italic; font-weight: bold;
   font-variant: small-caps; color: #0000ff;
   text-decoration: underline; background-color: #ffffcc;
   background-image: url('/images/icons/camera.png');
   background-repeat: no-repeat; background-position: left center;
   letter-spacing: 4px; text-align: left;
   padding: 10px 50px; margin: 40px; border: 8px dotted #ff0000;">
Testen Sie CSS!
</p>

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.