Schriftformatierungen (Fonts)

Schriftarten, Schriftgrößen, Zeilenabstände, Schriftschnitte usw. zählen zu den Schriftformatierungen. Alle Schriftformatierungen sind Vererbbar und werden standardmäßig auf alle Kindelemente übertragen. Hier finden sie eine Liste der möglichen Fonts.

Eigenschaft Bedeutung Mögliche Werte
font-family Schriftart (Schriftfamilie) Schriftart, initial, Inherit
font-size Schriftgröße Längenangabe, Prozentangabe, xx-small, x-small, small, smaller, medium, large, x-large, xx-large, larger, initial, Inherit
line-height Zeilenhöhe normal, Zahl, Längenangabe oder Prozentangabe, initial, Inherit
font-variant Schriftvariante small-caps, normal, initial, Inherit
font-weight Schriftgewicht normal, bold, bolder, lighter, 100 - 900, initial, Inherit
font-style Schriftstil normal, oblique, italic, initial, Inherit
font Zusammenfassung Schriftstil Schriftvariante Schriftgewicht/Schriftgröße Zeilenhöhe Schriftart

Die Eigenschaft font ist eine Zusammenfassung der möglichen Einzelangaben font-style, font-variant, font-weight, font-size, line-height und font-family. 

span { font: italic  normal 400/1.1em 110% Georgia, Times, 'Times New Roman', serif; }

Mit der Kurzschrift font müssen zumindest font-size und font-family geschrieben werden, sonst hat font keine Wirkung. font-weight und font-size werden mit einem Slash (/) getrennt.

font-family

Der Browser des Clients kann nur Schriftarten darstellen, die auf dem Rechner installiert sind. Deshalb sollten sie mehrere Schriftarten, getrennt mit einem Komma anführen. Sollte der Name der Schriftart Leerzeichen beinhalten (z.B Times New Roman) dann müssen sie die Anweisung in Anführungszeichen setzen. Der Browser verwendet dann die erste Schriftart die er erkennt. Sie sollten auch Schriftfamilien angeben, falls keine der Schriftarten installiert sind.

Mögliche Schriftfamilien (Schriftklassen)

  • serif: Serifenschrift (z.B. 'Times New Roman', Georgia)
  • sans-serif: serifenfreie Schrift (z.B. Arial, Helvetica)
  • cursive: Schreibschrift (z.B. 'Lucida Handwriting')
  • fantasy: Fantasieschrift (z.B. Comic Sans Serif)
  • monospace: Schrift mit fester Laufweite (z.B. Courier)
p { font-family: 'Times New Roman', Georgia, Serif; }

@font-face

Mit @font-face kann Schrift auf einer Webseite eingesetzt werden, wenn ihnen die Schriftdateien zur Verfügung stehen (Achtung auf Urheberrechtsbestimmung). Der Browser wird dann die Schrift laden. 

@font-face {
  font-family: myFont;
  src: url(schriftdatei.woff);
}

Mit font-family: geben sie der Schriftart einen benutzerdefinierten Namen. Mit der Eigenschaft src: geben sie den Speicherort der Datei an. Alle modernen Browser sollten Dateien mit der Endung .woff erkennen. Sie können auch mehrere Dateien in unterschiedlichen Formaten angeben (z.B. .otf .eot .ttf .svg)
@font-face stellt ihnen noch folgende Eigenschaften zur Verfgügung:

Eigenschaft Wert Beschreibung
font-family Name der Schriftart Benutzerdefinierter Wert
src URL Pfad und Dateiname
font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded Schrift strecken
font-style normal italic oblique Normal oder Kursiv
font-weight normal bold 100 - 900 Schriftgewicht
font-style Schriftstil normal, oblique, italic, initial, Inherit
font Zusammenfassung Schriftstil Schriftvariante Schriftgewicht/Schriftgröße Zeilenhöhe Schriftart

Beispiel von @font-face in einem Stylesheet

@font-face {
  font-family: myFont;
  src: url(sansation_light.woff);
  font-weight: 400;
}
body { font-family: myFont, Arial, sans-serif; )

Web Fonts

Mit dem link-Tag von HTML können sie auch Web-Fonts in ihr Dokument einbinden. Dazu müssen sie die Schriftart nich auf dem Server laden, sie wird beim Aufruf des Dokuments automatisch aktiviert. Google Fonts bietet ihnen eine menge von Schriftarten, die sie kostenlos verwenden können. 

<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

Google Fonts ansehen

Das Einbinden im Stylesheet könnte wie folgt aussehen: 

body { font-family: 'Roboto Condensed', sans-serif; }

font-size

Wenn sie in ihrem HTML-Dokument keine Schrfitgröße angeben wird der Standardwert verwendet. Die meisten Browser verwenden als Standartwert 16 Pixel (16px). Für die tatsächliche Schriftgröße ist in diesem Fall die Bildschirmauflösung verantwortlich. Die Angabe der Schriftgröße mit em wird durch das Elternelement bestimmt. 1.0em (Achtung: Punkt, kein Beistrich) entspricht dann einer Schriftgröße von 16px. Genauso verhält sich die Angabe in Prozent (%). 100% entspricht einer Schriftgröße von 16px, bzw 1.0em. Wertzuweisungen mit large, larger, small, smaller können sie natürlich genauso verweden.

Pixel Umrechner

Es gibt eine ganze Menge von Längenangaben in CSS. In diesem Script verwende ich fast ausschließlich Pixel, em und Prozentangaben.

W3C Längenangaben und Maße 

h1 { font-size; 2.0em; }

initial und Inherit

Mit der Wertzuweisung initial stellen sie für das Element wieder die Standardeinstellung her. Inherit weist dem Browser an, die Formatierung des Elternelements zu übernehmen. Diese beiden Wertzuweisungen stehen bei fast allen Eigenschaften zur Verfügung und bedeuten immer dasselbe.

line-height

line-height definiert die Zeilenhöhe des Elements. Auch hier sind Längenangaben und Prozentwerte möglich. Der Wert Zahl multipliziert die Schriftgröße des Elternelements 

p { line-height: 2; }

Wenn das Elternelement in diesem Beispiel eine Schriftgröße von 16px hat, bekommen sie hier eine Zeilenhöhe von 32px.

font-variant und font-style

small-caps weist einen Texteffekt Kapitälchen zu. oblique und italic formatieren die Schrift mit dem Schriftschitt kursiv. 

span.kapitaelchen { font-variant: small-caps; }
span.kursiv { font-style: italic; }

font-weight

Das Schriftgewicht (wie fett soll der text sein) schreiben sie mit der Eigenschaft font-weight. bold, bolder, lighter sind mögliche Werte. Auch folgende Zahlen (100 200 300 400 500 600 700 800 900) sind zulässig. 

span.fett { font-weight: 500; }

Textformatierungen

Textausrichtung, Schriftfarbe, Textgestaltung usw. Gehören zu den Textformatierungen. Die meisten dieser Eigenschaften erinnern an ein Textverarbeitungsprogramm und werden auch so angewendet. Hier finden sie eine Liste der möglichen Textformatierungen.

Eigenschaft Bedeutung Mögliche Werte
text-align horizonztale Textausrichtung left, right, center, justify (Blocksatz), inherit, initial
text-align-last Textausrichtung (letzte Zeile bei Blocksatz) auto, left, right, center, justify, start, end, initial, inherit
vertical-align vertikale Textausrichtung baseline, Längenangabe, Prozentangabe, sub, super, top, text-top, middle, bottom,text-bottom, initial, inherit
color Schriftfarbe Farbname, Hexadezimal, RGB, RGBA, HSL, HSLA
word-spacing Wortabstand normal, Längenangabe (auch negative Werte), initial, inherit
letter-spacing Zeichenabstand normal, Längenangabe (auch negative Werte), initial, inherit
text-indent Zeileneinzug Längenangabe (auch negative Werte), Prozentwerte, initial, inherit
text-decoration Textgestaltung none, underline, overline, line-through, blink, initial, inherit
text-transform Groß- und Kleinbuchstaben none, capitalize, uppercase, lowercase, initial, inherit
text-overflow Text abschneiden clip, ellipsis, string (Text), initial, inherit
white-space steuert Zeilenumbrüche normal, nowrap, pre, pre-line, pre-wrap, initial, inherit
word-break Zeilenumbruch innerhalb von Wörtern normal, break-all, keep-all, initial, inherit
word-wrap Zeilenumbruch bei langen Wörtern normal, break-word, initial, inherit
hyphens Silbentrennung none, manual, auto, initial, inherit
text-shadow Textschatten h-shadow(inPixel) v-shadow(inPixel) Weichzeichnereffekt(Zahl auch Minuswerte) color, none, initial, inherit
unicode-bidi Um direction zu ermöglichen, muss unicode-bidi geschrieben werden normal, embed, bidi-override, intitial, inherit
direction Schreibrichtung ltr, rtl, initial, inherit

text-align, text-align-last

Linksbündig, Rechtsbündig, Zentriert und Blocksatz sind mögliche Textausrichtungen. Mit der Eigenschaft text-align können sie Text ausrichten. Für Blocksatz steht zusätzlich noch das Attribut text-align-last zur Verfügung. text-align-last bestimmt wie die letzte Zeile ausgerichtet wird. Für text-align-last muss man noch proprietäre Eigenschaften verwenden. Beide Eigenschaften sind Vererbbar. 

p { 
  text-align: justify; 
  -moz-text-align-last: center;
  text-align-last: center; 
}

Werte für text-align

  • left: Linksbündig (Standardwert wenn direction ltr ist)
  • right: Rechtsbündig
  • center: Zentriert
  • justify: Blocksatz

Werte für text-align-last

  • auto: Links (Standardwert)
  • start: Links wenn direction ltr ist
  • end: Rechts wenn direction ltr ist
  • left, right, center, justify: Linksbündig, Rechtsbündig, Zentriert, Blocksatz

vertical-align

vertical-align legt die vertikale Ausrichtung fest, vertical-align wird nicht vererbt.

vertical-align ist nicht dazu geeignet, Blockelemente selbst auszurichten. 

img.top { vertical-align: text-top; }

Werte für vertical-align

  • baseline: Grundlinie des Element ist Grundlinie des Elternelements (Standard)
  • Prozentwert: Verschiebt ein Element nach oben oder unten (Auch Negativwerte)
  • Längenangabe: Verschiebt ein Element nach oben oder unten (Auch Negativwerte)
  • sub: tiefgestellter Text
  • super: hochgestellter Text
  • top: am oberen Rand des Elternelements
  • text-top: am oberen Textrand
  • middle: mitte zwischen oberen und unteren Rand des Elternelements
  • bottom: am unteren Rand des Elternelements
  • text-bottom: am unteren Textrand

word-spacing, letter-spacing

word-spacing bestimmt den Abstand zwischen Wörtern, letter-spacing bestimmt den Abstand zwischen Buchstaben, auch negative Werte sind möglich. Beide Eigenschaften sind Vererbbar. 

p { 
  word-spacing: 1px;
  letter-spacing: 1px; 
}

Werte für word-spacing, letter-spacing

  • Längenangabe: Auch Negativwerte sind erlaubt

text-indent

text-indent erzeugt einen Texteinzug "Erste Zeile". Als Wert stehen Längenangaben und Prozentwerte zur Verfügung, text-indent wird vererbt. 

p { text-indent: 50px; }

Werte für text-indent

  • Längenangabe: Auch Negativwerte sind erlaubt
  • Prozentangabe: Auch Negativwerte sind erlaubt

text-decoration

Unterstreichen, Übersrich und durchgestrichenen Text erstellen sie mit der Eigenschaft text-decoration, text-decoration wird nicht vererbt. Die Strichfarbe wird automatisch mit der Schriftfarbe erzeugt. 

p { text-decoration: underline; }

Werte für text-decoration

  • underline: Unterstrich
  • overline: Oberstrich
  • line-through: Durchgestrichen
  • blink: Blinkend

text-transform

Großbuchstaben, Kleinbuchstaben, erster Buchstabe groß bestimmen sie mit text-transform, text-transform ist vererbbar. 

span { text-transform: uppercase; }

Werte für text-transform

  • capitalize: erster Buchsabe groß
  • lowercase: Kleinbuchstaben
  • uppercase: Großbuchstaben

text-overflow

Was geschieht mit Text, wenn dafür der Platz zu klein ist? Mit text-overflow können sie darauf reagieren. Beachten sie, dass text-overflow nur Sinn macht, wenn die overflow-Eigenschaft des Containers den Wert hidden, scroll oder auto hat. Außerdem muss der automatische Zeilenumbruch durch white-space: nowrap; verboten sein, text-overflow ist nicht vererbbar. 

span { text-overflow: ellipsis; }

Werte für text-overflow

  • clip: Standardwert, Text wird abgeschnitten
  • ellipsis: (...) zeigt an, dass der Text abgeschnitten wird
  • string: beuntzerdefinierter Hinweis (hat bei meinen Tests nicht funktioniert)

white-space

white-space bestimmt, wie die im Quelltext enthaltene Zeilenumbrüche und Leerzeichen im Browser dargestellt werden, white-space ist vererbbar. 

div { white-space: nowrap; }

Werte für white-space

  • normal: (Standardwert) Umbrüche werden vom Browser bestimmt
  • nowrap: keine Umbrüche
  • pre: Verhalten wie beim pre-Tag von HTML
  • pre-wrap: Verhalten wie beim pre-Tag von HTML, automatischer Umbruch wenn notwendig
  • pre-line: Verhalten wie beim pre-Tag von HTML, automatischer Umbruch wenn notwendig, Leerzeichen kollabieren

word-break

word-break regelt den Umbruch innerhalb von Wörtern, word-break ist vererbbar. 

div { word-break: break-all; }

Werte für word-break

  • normal: (Standardwert)
  • break-all: Umbrüche am Zeilenende
  • keep-all: Umbrüche am Zeilenende aber nicht bei gleichen Buchstaben

word-wrap

word-wrap regelt den Umbruch von langen Wörtern, word-wrap ist vererbbar. 

div { word-wrap: break-word; }

Werte für word-wrap

  • normal: (Standardwert)
  • break-word: Umbrüche im Wort

hyphens

hyphens regelt die Silbentrennung in einem Element. Allerdings wird hyphens von aktuellen Browsern nur mäßig unterstützt. Für hyphens muss man noch proprietäre Eigenschaften verwenden hyphens ist vererbbar. 

div { 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
 }

Werte für hyphens

  • manual: keine Silbentrennung (Standard) bedingte Trennstriche werden beachtet
  • none: keine Silbentrennung bedingte Trennstriche werden unterdrückt
  • auto: automatische Silbentrennung, definierte bedingte Trennstriche haben Priorität

Zusätzlich müssen sie für automatische Silbentrennung die Sprache im Element über das HTML-Attribut lang definieren. 

<div lang="de">
<!--Inhalt-->
</div>

text-shadow

Jeder der mit MS Word arbeitet kennt Texteffekte. Ähnliche Eigenschaften sind mit dem Attribut text-shadow möglich. Dazu müssen sie nur eine horizontale- und vertikale Ausdehnung definieren. Weichzeichner und Farbangaben sind optional, text-shadow ist vererbbar. 

h1 {
    text-shadow: 3px 2px 5x #ff0;
}

Mögliche Werte für text-shadow

  • none: kein Schatten (Standardwert)
  • h-shadow: horizontaler Abstand (auch Minuswerte)
  • v-shadow: vertikaler Abstand (auch Minuswerte)
  • blur: Weichzeichnungsradius (Standard: 0)
  • color: Farbangaben (Standard: Schriftfarbe)

unicode-bidi, direction

Diese Eigenschaften steuern die Textrichtung von HTML. Beide Eigenschaften werden nur selten gebraucht und deshalb in diesem Script nicht weiter behandelt.

Nummerierung- und Aufzählungszeichen (Listen)

Listen werden in HTML mit dem ul- bzw. ol-Element definiert. Jedes li-Tag darin erzeugt einen Listeneintrag. Mit dem start-Attribut im ol-Tag definieren sie den Beginn der Nummerierung, mit dem reversed-Attribut im ol-Tag können sie die Nummerierung umkehren. Mit dem value-Attribut im li-Tag können sie noch den Wert für jeden Listeneintrag bestimmen.

Eigenschaft Bedeutung Mögliche Werte
list-style-type ungeordnete Listen (Aufzählungszeichen) mit ul-Tag, geordneten Listen (Nummerierung) mit ol-Tag disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, lower-latin, upper-alpha, upper-latin, inherit, initial
list-style-position Position des Listenzeichens inside, outside, initial, inherit
list-style-image Bild als Aufzählungszeichen none, url, initial, inherit
list-style Zusammenfassung (type und image gleichzeitig heisst: Bild wird angezeigt, falls vorhanden! list-style-type, list-style-position,list-style-image

list-style-type

Bei der Eigenschaft list-style-type unterscheiden wir zwischen Aufzählungen (ul) und Nummerierungen (ol). Es wäre zwar optisch egal welches Element man verwendet, jedoch für sauberen HTML-Code sollte man darauf achten. list-style-type ist vererbbar. 

ul { list-style-type: square; }
ol { list-style-type: lower-roman; }

Werte für list-style-type (Aufzählungszeichen)

  • disc: gefüllter Kreis
  • circle: leerer Kreis
  • square: Rechteck
  • none: kein Aufzählungszeichen

Werte für list-style-type (Nummerierung)

  • decimal: z.B. 1. 2. 3. usw.
  • decimal-leading-zero: z.B. 01. 02. 03. usw.
  • lower-roman: z.B. i. ii. ii. usw.
  • upper-roman: z.B. I. II. III. usw.
  • lower-alpha: z.B. a. b. c. usw.
  • lower-latin: z.B. a. b. c. usw.
  • upper-alpha: z.B. A. B. C. usw.
  • upper-latin: z.B. A. B. C. usw.
  • none: keine Nummerierung

list-style-position

Mit list-style-position bestimmen sie, ob Nummerierungen und Aufzählungszeichen innerhalb oder außerhalb des Listenlements positioniert werden. list-style-position ist vererbbar. 

ul { list-style-position: inside; }

Werte für list-style-position

  • inside: innerhalb des Listenelements (Standardwert)
  • outside: außerhalb des Listenelements

list-style-image

Mit list-style-image können sie ein Bild als Aufzählungszeichen verwenden. list-style-image ist vererbbar. 

ul { list-style-image: url(bild.png); }

Werte für list-style-image

  • url: Bildpfad
  • none: kein Bild (setzt Aufzälungszeichen auf Standardwert)

ACHTUNG: Nicht alle Browser stellen das Bild in der gleichen Größe dar.

list-style

list-style beschreibt eine Zusammenfassung der Listenformatierungen. list-style ist vererbbar. 

ul { list-style: circle inside; }

Multiple Columns (Text in Spalten)

Mit Hilfe von CSS-Columns (Multiple Columns) ist es möglich ein mehrspaltiges Textlayout zu konstruieren. Dieses Layout ist zum Unterschied von Tabellen flexibel, das heißt dass Browser den Text in mehrere Spalten gleichmäßig verteilen. Die column-Eigenschaften sind noch nicht in allen Browsern vollständig implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

Eigenschaft Bedeutung Mögliche Werte
columns Zusammenfasung column-width column-count, auto, inherit, initial
column-width Spaltenbreite Längenangabe, auto, initial, inherit
column-count Spaltenanzahl Zahl, auto, initial, inherit
column-gap Spalten-Zwischenraum Längenangabe, normal, initial, inherit
column-rule Zusammenfassung column-rule-width column-rule-style column-rule-color, initial, inherit
column-rule-style Linienart none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit
column-rule-width Linienbreite medium, thin, thick, Längenangabe, initial, inherit
column-rule-color Linienfarbe Farbangabe
column-span Spalten verbinden none, all, initial, inherit
column-fill Spalten-Aufteilung balance, auto, initial, inherit
break-before, break-after, break-inside Noch keine Browserkompatibilität

columns

Die columns-Eigenschaft ist eine Zusammnefassung von column-width und column-count. Die Eigenschaft auto weist column-width und column-count die Eigenschaft auto zu, columns ist nicht vererbbar. 

p {
  -moz-columns: 100px 3;
  -webkit-columns: 100px 3;
  columns: 100px 3;
}

column-width

Mit der column-width-Eigenschaft wird die Spaltenbreite definiert, column-width ist nicht vererbbar. 

p {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

Mögliche Werte von column-width

  • auto: keine Multiple Columns (Standardwert)
  • Längenangabe

column-count

Mit der column-count-Eigenschaft wird die Spaltenanzahl definiert, column-count ist nicht vererbbar. 

p {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

Mögliche Werte von column-count

  • auto: Standardwert, die Anzahl der Spalten wird durch andere Eigenschaften bestimmt (z.B. Spaltenbreite)
  • Zahl

column-gap

Mit der column-gap-Eigenschaft wird der Abstand zwischen den Spalten definiert, column-gap ist nicht vererbbar. 

p {
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

Mögliche Werte von column-gap

  • normal: Standardwert, 1em
  • Längenangabe

column-rule

Die column-rule-Eigenschaf ist eine Zusammnefassung von column-rule-width column-rule-style column-rule-color. column-rule beschreibt Eigenschaften einer Zwischenlinie für Multiple Columns, column-rule ist nicht vererbbar. 

p {
  -webkit-column-rule: 4px outset #ff00ff;
  -moz-column-rule: 4px outset #ff00ff;
  column-rule: 4px outset #ff00ff;
}

column-rule-style

Mit der column-rule-style-Eigenschaft wird die Linienart definiert. Wenn column-rule-style nicht geschrieben ist, wird standardmäßig keine Linie erzeugt, column-rule-style ist nicht vererbbar. 

p {
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  column-rule-style: solid;
}

Mögliche Werte von column-rule-style

  • none: Standardwert - keine Linie
  • hidden: keine Linie
  • dotted: gepunktet
  • dashed: gestrichelt
  • solid: durchgezogen
  • double: doppelte Linie
  • groove: 3D-Effekt
  • ridge: 3D-Effekt
  • inset: 3D-Effekt
  • outset: 3D-Effekt

column-rule-width

Mit der column-rule-width-Eigenschaft wird die Breite der Zwischenlinie definiert, column-rule-width ist nicht vererbbar. 

p {
  -webkit-column-rule-width: 4px;
  -moz-column-rule-width: 4px;
  column-rule-width: 4px;
}

Mögliche Werte von column-rule-width

  • medium: Standardwert
  • thin
  • thick
  • Längenangabe

column-rule-color

Mit der column-rule-color-Eigenschaft wird die Linienfarbe definiert, column-rule-color ist nicht vererbbar. 

p {
  -webkit-column-rule-color: #ff0000;
  -moz-column-rule-color: #ff0000;
  column-rule-color: #ff0000;
}

Mögliche Werte von column-rule-color

  • Farbangabe: Standard ist die Schriftfarbe des Elements

column-span

Mit der column-span-Eigenschaft werden Spalten verbunden (z.B. für eine Überschrift). Das Element muss innerhalb der Multiple Columns liegen, column-span ist nicht vererbbar.
Bei meinen Tests hat Firefox diese Eigenschaft nicht erkannt! 

h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
}

Mögliche Werte von column-span

  • none: Standard keine Spaltenverbindung
  • all: Verbindung über alle Spalten

column-fill

Die Eigenschaft column-fill erlaubt es, festzulegen, ob die Spalten gleichmäßig oder sequentiell (der Reihe nach) mit Inhalten befüllt werden. Macht nur Sinn, wenn für das Element eine Höhe (height) definiert ist, column-fill ist nicht vererbbar.
Bei meinen Tests haben alle neuen Browser column-fill erkannt! 

div {
 -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

Mögliche Werte von column-fill

  • balance: Standard - Spalten sollen gleiche Höhen haben
  • auto: Spalten können unterschiedliche Höhen haben

break-before, break-after, break-inside

Diese Attribute werden von den meisten Browsern noch nicht erkannt, und deshlab hier nicht erklärt.

Hyperlinks

Hyperlinks(Links) werden im a-Element geschrieben und können unterschiedlich gestaltet werden, je nachdem, in welchem Zustand sie sich befinden. Ein Link-Zustand kann u.A unbesucht, besucht oder aktiv sein. In jedem Fall brauche sie dafür sogenannte Pseudo-Klassen, die einer besonderen Syntax folgen. Den Zustand eines besuchten Links definieren sie mit a:visited. Standardmäßig wird jeder Link unterstrichen, farbig und mit einem Handsymbol als Cursor dargestellt. 

a:visited { Deklarationsblock }

Link-Zustände

  • a:link - unbesuchter Link
  • a:visited - besuchter Link
  • a:hover - bei MouseOver
  • a:active - beim Klicken

Bitte beachten sie die Reihenfolge der Pseudo-Klassen.

  • a:hover muss nach a:link und a:visited stehen
  • a:active muss nach a:hover stehen
a:link { color:red; }
a:visited { color:blue; }
a:hover { color:green; }
a:active { color:yellow; }

Mehr informationen finden sie im Kapitel Pseudo-Elemente & Pseudo-Klassen.