CSS Formatierung
[Materialsammlung]
Cascading Stylesheets sind die zweckmäßige Formatierungsweise für HTML-Elemente.
Allgemeine Empfehlungen
- Die wichtigsten Anweisungen für Formatierungen sollten in einer zentralen CSS-Datei festgelegt werden. Auf diese Weise wird am sichersten gewährleistet, dass das Erscheinungsbild einzelner HTML-Elemente über einen gesamten Webauftritt konsistent bleibt. Zudem lässt sich dadurch einfach die Darstellung für den gesamten Webauftritt verändern.
- CSS-Anweisungen sollten so sparsam wie möglich eingesetzt werden. Die Darstellung der HTML-Elemente wird dadurch dem Browser überlassen und kommt den Erfahrungswerten für das Erscheinungsbild entgegen.
Visuelle Formatierung mit CSS-Anweisungen (Auswahl)
background- Festlegen einer Hintergrundfarbe oder einer Hintergrundgrafik.
- Beispiel: background: red
-
MDN |
background color- Festlegen der Schriftfarbe.
- Beispiel: color: green
-
MDN |
color font-family- Festlegen der Schriftart (mit oder ohne Serifen, …)
-
Beispiele:
- font-family: serif
- font-family: sans-serif
- font-family: monospace
-
MDN |
font-family font-size- Festlegen der Schriftgröße.
-
Beispiele:
- font-size: 25px
- font-size: 20px
- font-size: 16px
- font-size: larger
- font-size: smaller
- font-size: large
- font-size: medium
- font-size: small
- font-size: 80%
-
MDN |
font-size font-style- Text kursiv formatieren
- Beispiel: font-style: italic
-
MDN |
font-style font-weight- Festlegen der Strichstärke (Fett formatieren).
-
Beispiel:
- font-weight: normal
- font-weight: bold
-
MDN |
font-weight letter-spacing- Erhöhte Zeichenabstände festlegen.
- Beispiel: letter-spacing: 2px
-
MDN |
letter-spacing margin- Festlegen von Außenabständen einer Überschrift
-
Beispiel:
- margin-left: 1em
- margin: 0
- margin-top: 1ex
- margin-bottom: 1ex
- margin: 0
- margin: 0
- margin: 1ex 1em
- margin: 0
-
MDN |
margin outline- Außenlinie um das Element.
-
Beispiel:
outline: solid 2px blue; outline-offset: 2px;
-
MDN |
outline opacity- Transparenz zum Hintergrund.
-
Beispiele:
- opacity: 0.1
- opacity: 0.5
- opacity: 1
-
MDN |
padding-left padding- Einrücken von Text innerhalb eines Elements.
-
Beispiel:
- padding: 0
- padding-left: 1em
-
MDN |
padding-left scroll-padding- Effekte zum Einrücken und Verschieben beim Scrollen und bei Fokus (vergleiche Erfolgskriterium 2.4.11).
-
MDN |
scroll-padding text-align- Festlegen der horizontalen Ausrichtung des Texts in einem Element (linksbündig / zentriert / rechtsbündig)
-
Beispiele:
- text-align: left
- text-align: center
- text-align: right
-
MDN |
text-align text-decoration- Festlegen von Unterstreichungen.
- Beispiel: text-decoration: underline
-
MDN |
text-decoration text-transform- Festlegen der Groß- und Kleinschreibung
- Beispiel: text-transform: uppercase
-
MDN |
text-transform
Tipps zu einzelnen CSS-Anweisungen
content before und after
Inhalt sollte in der Regel direkt in HTML-Elementen erscheinen. Eine Ausnahme stellen die CSS Pseudo-Elemente :before und :after dar. Mit deren Hilfe kann HTML-Elementen ein Inhalt beigefügt werden.
Der folgende CSS-Code stellt Elementen mit der Klasse mobil ein Icon für Smart Phones voran (📱). Auf diese Weise können beispielsweise Mobilnummern einheitlich gekennzeichnet werden:
.mobil:before { content: '\1F4F1'; }
Die Namen von Unicode-Zeichen werden durch Screen Reader weithin durch eine Sprachausgabe wiedergegeben. Allerdings sollte deren Interpretation eines Zeichens vor dem Einsatz getestet werden.
- W3C | Accessible Name and Description Computation 1.1
- Unter der Bedingung F werden
beforeundafterals Teil des barrierefreien Namens erläutert.
HTML Attribute für Darstellung verwenden
- hreflang: Sprache der Zieldatei
- Verwendung des Attributs zum automatischen Voranstellen eines Icons für die Sprache der Zieldatei
Beispiele
- Sichtbarkeit bei Fokus
- Einsprunglinks durch Drücken der Tab-Taste sichtbar machen.