it:css:css-01a:01

Erste Schritte

Hinweis Bitte beachte die Konventionen dieser Dokumentation.

Voraussetzungen Kenntnisse im Umgang mit einem Computer und in HTML.

Werkzeuge Ein Computer und ein Editor.

Ziel Sicherer Umgang in der Anwendung von CSS.

Zielgruppe Anfänger von 10-100.

CSS (Cascading Style Sheets) dient der Formatierung von HTML-Seiten und anderen Dokumententypen durch mehrstufige Stilangaben. HTML ist eine Auszeichnungssprache, die Seiteninhalte hierarchisch strukturiert. CSS ist eine Formatierungssprache, die Seiteninhalte gestaltet.

Hinweis Die Abkürzung CSS wird in dieser Dokumentation im Singular verwendet.

HTML-Seite ohne CSS

CSS ist nicht zwingend notwendig, um Seiteninhalte lesbar zu machen, wie ❑CSS1 zeigt.

CSS1: HTML-Seite ohne Stilangaben.

Ξ HTML-Code ❑CSS1 Ξ

HTML-Seite mit integrierten CSS

Stilangaben sorgen nicht nur für die Formatierung, sondern auch für die Betonung und die bessere Lesbarkeit. Die Stilangaben können in der HTML-Seite an zentraler Stelle erfolgen wie in ❑CSS2.

CSS2: HTML-Seite mit Stilangaben in der HTML-Seite.

Ξ Code ❑CSS2 Ξ

Die Stilangaben können alternativ in den Tags erfolgen wie in ❑CSS3. Diese Möglichkeit widerspricht der Idee, Struktur und Gestaltung zu trennen und sollte nicht oder nur sparsam verwendet werden.

CSS3: Das Erscheinungsbild von ❑CSS2 und ❑CSS3 ist identisch.

Ξ Code ❑CSS3 Ξ

HTML-Seite mit referenzierten CSS

Dienen die Stilangaben mehreren HTML-Dateien, ist eine separate .css-Datei sinnvoller, die in jeder HTML-Seite referenziert ist.

CSS4: HTML-Seite mit Stilangaben in der referenzierten »css_04.css«.

Ξ Code ❑CSS4 Ξ

Eine abweichende Stilangabe zur referenzierten .css-Datei kann (grundsätzlich) in dem Tag der HTML-Seite erfolgen wie in ❑CSS5. Abweichende Stilangaben entsprechen dem Prinzip der Mehrstufigkeit {Kaskadierung}, sollten jedoch bevorzugt in der .css-Datei erfolgen wie in ❑CSS6.

CSS5: HTML-Seite mit Stilangaben in der referenzierten »css_05.css« und in der HTML-Seite.

Ξ Code ❑CSS5 Ξ

Neben den Tag-Selektoren kennt CSS auch Class- und ID-Selektoren. In ❑CSS6 dienen sie dazu, um bereits festgelegte Formatierungen zu überschreiben. Das ist das Prinzip der Mehrstufigkeit.

CSS6: HTML-Seite mit Stilangaben in der referenzierten »css_06.css«.

Ξ Code ❑CSS6 Ξ

This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information
  • Zuletzt geändert: 2019/12/04 11:49
  • von wh