CSS-Formatierung

Im Beitrag „Design der Eingabe- und Bedienelemente“ war die CSS-Formatierung noch im Kopf der HTML-Datei mit eingebunden. Wir lagern diesen CSS-Quellcode nun in eine externe Datei mit Namen „style.css“ aus.
Um dies zu erreichen benötigen wir einen Eintrag im Header des HTML-Quelltextes.

In Zeile 11 beginnt der Kopf der HTML-Datei und in Zeile 19 haben wir den Link zu unserer CSS Formatierungsdatei.

• „link ^[1]„. Legt fest in welcher Beziehung das aktuelle Dokument, die HTML-Datei, zu einem anderen Dokument, also hier die CSS-Datei steht.
• „href=“ … „. href = Hyperreferenz. Die URL zur CSS-Datei. Relative- und absolute Pfadangaben sind ebenfalls möglich.
• „rel=“stylesheet“. Hier wird die logische Beziehung des Dokuments festgelegt. Wird mittlerweile von den neueren Browsern ignoriert.
• type=“text/css“. der MIME Typ (Multipurpose Internet Mail Extensions) des Dokuments.
• „media=“screen“. Den Ausgabetypen der CSS-Formatierung angeben, also welches Ausgabemedium verwendet werden soll.

Style.css als Download: CSS-Formatierung in externer Datei. ^[2]

Das Universal Attribut für HTML-Tags „id=’Name'“ ist ein sogenannter Selektor ^[3], mit dem die Verbindung von der CSS-Formatierung zum HTML-Element hergestellt wird.

• „#b“. Der ID-Selektor für den body-Tag der HTML Datei. Hier wird von Zeile 5 – 8 die Hintergrund- und Schriftfarbe festgelegt.
• Für weitere Informationen lies bitte die Kommentarzeilen in der oben angegebenen CSS-Datei.

Man kann auch direkt am HTML-Element mit CSS Formatieren. Dazu dient das Attribut

style=“Key: value; ….“

„style“ gibt an, das es sich um eine CSS-Formatierung handelt. „key“ ist das Schlüsselwort gefolgt von einem „:“ [Colon]. „value“ der entsprechende Wert von „Key“ gefolgt von einem „;“ [Semicolon]. Mehrere durch Semikolon getrennte Paare können vorkommen.

Ausblick:

Nun kommen wir so langsam zur Javascript Programmierung. Da der Quellcode recht lang werden wird, ist es sinnvoll einzelne Programmier-Module zu verwenden. Dazu verwenden wir einige Quellcode Zeilen in unserer HTML Datei. Hier können wir dann unsere Module beliebig Einfügen. Die geschieht wieder im Header der HTML Datei.