css mit Adi Prinz

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:

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; }

Achtung: Google Fonts ist nicht DSGVO-konform, wenn es über die Google-Server in eine Seite eingebunden wird. Um die Weiterleitung der Userdaten an Google in die USA zu verhindern, können Seitenbetreiber Google Web Fonts lokal auf ihrem eigenen Server einbinden. Dazu müssen sie die entsprechende Schriftart herunterladen und in die style.css-Datei ihrer Webseite einbinden.

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.

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; }

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.

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; }

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.

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.