2116 Aufrufe

StyleSheet-Definitionen

Mit StyleSheet-Definitionen können Sie festlegen wie bestimmte Teile der Datei, Elemente, Objekte oder Klassen aussehen sollen. Dadurch läßt sich eine Trennung von Inhalt und Layout deutlich einfacher verwirklichen und es hilft Dokumente zu vereinheitlichen. HTML bietet die Möglichkeit StyleSheet-Definitionen einzubinden.

Anwendung:

HTML bietet drei verschiedene Wege StyleSheets in eine HTML-Datei einzubinden.

mit dem Attribut style="Definitionen"
durch einen StyleSheet-Bereich im Kopfbereich der Datei
und durch das Einbinden einer externen StyleSheet-Datei

Hinweis:

Die Möglichkeiten die StyleSheets bieten um Definitionen festzulegen sind sehr vielfältig und würden den Rahmen dieses Abschnittes um Weiten sprengen. Daher wird in diesem Abschnitt nicht näher darauf eingegangen, sonder nur ein paar Angaben für die Bsp. genutzt.

StyleSheet-Definitionen direkt einbinden

Das Attribut style

style = Stil

Bescheibung:

StyleSheet-Angaben können mit dem Attribut style="Angaben" direkt innerhalb jedes HTML Elementes im Start-Tag angegeben werden. Wichtig hierbei ist, daß die Angaben nicht Dateiübergreifend gelten, sondern nur auf das Element in welchem Sie vorkommen.

Syntax:

Um StyleSheet-Angaben innerhalb eines Elementes zu definieren, müssen Sie das Attribut style="Angaben" innerhalb des Start-Tags notieren. Dabei geben Sie für "Angaben" die Definitionen ein die Sie für dieses eine Element festlegen wollen.

Quelltext:

<p style="color:blue;">Dieser Absatz 
hat die Schriftfarbe "blau".</p>

Ausgabe:

Dieser Absatz hat die Schriftfarbe "blau".

StyleSheet-Bereiche definieren

Das HTML Element style

style = Stil

Beschreibung:

In HTML haben Sie die Möglichkeit mit dem Element style einen StyleSheet-Bereich zu definieren, um dateiweite Angaben zum Layout zu machen. Dies kann z.B. die Schriftgröße bei Absätzen sein, oder z.B. die Schriftfarbe für Überschriften. Dieser StyleSheet-Bereich muß innerhalb des Kopfbereiches der HTML-Datei notiert werden, also zwischen dem Start-Tag <head> und dem End-Tag </head>.

Syntax:

Um einen StyleSheet-Bereich zu definieren notieren Sie innerhalb des Kopfbereiches der HTML-Datei (innerhalb des HTML-Elementes head), das Start-Tag <style>, und das End-Tag </style>. Zwischen diesen beiden Tags notieren Sie dann die dateiweiten StyleSheet-Definitionen.

Quelltext:

<head>
<style>
...
</style>
</head>

Das Pflicht-Attribut type:

Beschreibung:

Damit der Browser weiß um was es sich für eine Stylesheet-Sprache handelt, geben Sie dies durch das Attribut type="MIME-Typ" an.

Syntax:

Notieren Sie das Attribut type="MIME-Typ" innerhabl des Start-Tags <style>. Dabei geben Sie für "MIME-Typ" den MIME-Typen an, der der gewünschten StyleSheet-Sprache zugewiesen ist. Bei CSS z.B. handelt es sich um "text/css".

Quelltext:

<style type="text/css">
...
</style>

Ausgabetyp wählen:

Beschreibung:

Mit dem Attribut media="Medientyp" können Sie Angaben darüber machen, bei welchem Ausgabemedium die StyleSheet-Definitionen angewendet werden sollen. Dadurch können Sie verschiedene Gestaltungsmöglichkeiten für verschiedene Ausgabemedien erstellen. Z.B. einen StyleSheet-Bereich für die Ausgabe über einen Bildschirm (media="screen") und einen eigenen StyleSheet-Bereich für die Ausgabe über einen Beamer (media="projection").

Syntax:

Notieren Sie das Attribut media="Medientyp" innerhalb des Start-Tags <style>. Dabei geben Sie für "Medientyp" das Ausgabemedium an, bei welchem die StyleSheet-Definitionen angewendet werden sollen.

Quelltext:

<style media="screen">
...
</style>
<style media="projection">
...
</style>

Externe StyleSheet-Dateien einbinden

Das HTML Element link

link = Verknüpfung

Beschreibung:

HTML bietet die Möglichkeit extern gelagerte Dateien, welche StyleSheet-Definitionen beinhalten, in ein HTML-Dokument einzubinden. Dies macht vorallem dann Sinn, wenn es viele StyleSheet-Angaben gibt. Dadurch bleibt zum einen die HTML-Datei übersichtlicher und zum anderen ist es so einfacher StyleSheet-Definitionen in andere HTML-Dateien zu übertragen.

Syntax:

Um eine externe StyleSheet-Datei in ein HTML-Dokument einzubinden, müssen Sie innerhalb des Kopfbereiches (zwischen dem Start-Tag <head> und dem En-Tag </head>) das HTML Element <link> und die Attribute type="MIME-Typ" und href="URI" notieren. Dabei geben Sie für "MIME-Typ" den entsprechenden MIME-Typ an (z.B. für CSS "text/css") und für "URI" die Adresse an welcher sich die Datei befindet (z.B. für eine CSS-Datei im gleichen Ordner "styles.css").

Quelltext:

<head>
...
<link type="text/css" href="styles.css">
</head>