HTML: StyleSheets
StyleSheets, genauer Cascading StyleSheets (CSS), sind Definitionen, welche festlegen, wie bestimmte Elemente, Objekte, Klassen (etc.) auszusehen haben. Sie sollen helfen Dokumente zu vereinheitlichen und Umstellungen im Design vereinfachen. Da CSS selbst sehr umfangreich ist, wird hier lediglich darauf eingegangen werden, wie man CSS in HTML einsetzt.
CSS Definition
CSS wird grundsätzlich im head des Dokumentes definiert. Hierzu verwendet man das style-Element. Innerhalb dieses Elements sollte immer ein Kommentar folgen. Innerhalb dieses Kommentars können nun wiederum die Style-Definitionen folgen. Beispiel:
<html>
<head>
...
<style type="text/css">
<!--
P{font-size:12pt; color:black; ...}
H1{color:red; ...}
... weitere Style Definitionen ...
//-->
</style>
</head>
<body>
...
</body>
</html>
Das type-Attribut mit dem Wert text/css gibt dabei Auskunft darüber, dass es sich um Cascading Style Sheets (CSS) handelt.
Externe CSS-Dateien
Zusätzlich ist eine Verwendung externer CSS-Dateien möglich. Dies soll es erleichtern, mehrere Dokumente mit den gleichen StyleSheets auszustatten, so dass nur eine Datei geändert werden muss und nicht sämtliche Dateien.
Externe CSS-Dateien werden mit dem link-Element eingebunden. Das Element erhält dann das href-Attribut, in welchem die URL (Pfad) der Datei notiert wird. Zusätzlich sollten die Art(/Typ) der Datei, sowie eine Bezeichnung der Inhalte angegeben werden. Dies geschieht mit den Attributen type und dem Wert text/css (Bezeichnung der Inhalte) sowie dem rel-Attribut und dem Wert stylesheet (Art der Datei). Diese Angaben werden ebenfalls in den head notiert. Beispiel:
<head>
...
<link rel="stylesheet" href="datei.css" type="text/css">
</head>
...
Medientyp zuweisen
Ab CSS Level 2 ist es möglich StyleSheets für verschiedene Medientypen zu definieren. Medientypen sind die Typen des Ausgabemediums wie z.B. ein Bildschrim, ein Drucker oder ein Handheld-PC. Der Medientyp wird dabei als Wert des media-Attributes notiert. Mehrere Werte werden durch Kommas getrennt. Folgende stehen zur Auswahl:
-
all- Gilt für alle Ausgabegeräte. -
aural- Gilt für aurale Ausgabegeräte (z.B. Sprach-Browser). -
braille- Gilt für Blindenschrit-fähige Ausgabegeräte. -
embossed- Gilt für Drucker, die Blindenschrift ausgeben können. -
handheld- Gilt für Handheld-PC's (Palmtops, PDA's, etc. - allgemein Ausgabegeräte mit kleinem Display). -
print- Gilt für Drucker. -
projection- Gilt für projezierte Präsentationen (z.B. Projektoren, Polylux, etc.). -
screen- Gilt allgemein für alle (Computer-)Bildschirme. -
tty- Gilt für Ausgabegeräte mit feststehendem Symbolgitter/Schriftart ("fixed-pitch character grid") (z.B. Fernschreiber, terminals, Handys, etc.) -
tv- Gilt für Fernseh-Bildschirme.
Beispiel:
<link rel="stylesheet" type="text/css" media="aural, handheld"
href="name.css">
<link rel="stylesheet" type="text/css" media="screen, print"
href="name.css">
Klassen
Um die in CSS definierten Klassen (Class) in HTML zu verwenden, gibt es für jedes Element zusätzlich das class-Attribut. Hier kann als Wert die (CSS-)Klasse des jeweiligen Elements notiert werden. Beispiel:
<p class="NormalP">
<img class="OmasBild" ... >
<table class="T1" ... >
...
Elementstyles
Ebenso wie jedem Element eine Klasse zugewiesen werden kann, kann auch jedem einzelnen Element des Dokumentes eine eigene Formatierung definiert werden. Hierzu verwendet man das style-Attribut, welches bei jedem Element notiert werden kann. Als Wert können hier die jeweiligen CSS-Definitionen (Properties) notiert werden. Beispiel:
<img style=" ... CSS ... " ... >
<p style="font-size:12pt; color:black; ... ">
...
Schnellformatierung
Ebenso wie Sie global das Aussehen für die gesamte Datei bestimmen können, können Sie auch innerhalb der Datei Formatierungen vornehmen. Dies geschieht über das span-Element. Es dient dazu, ebendiese Formatierungen innerhalb von Dokumenten mit Hilfe des sytle-Attributes umzusetzten. Beispiel:
<p> Text
<span style=" ... CSS ... "> CSS Text </span>
</p>
JavaScript StyleSheets (JSSS)
Um JavaScript StyleSheets (JSSS) in HTML-Dokumenten zu verwenden muss lediglich der type-Wert des style-Elementes in den Wert text/javascript geändert werden. Alle JavaScript StyleSheet Angaben können dann innerhalb des style-Elements notiert werden. Beispiel:
<style type="text/javascript">
<!--
tags.p.color = "red";
ids.abc.fontFamily = "Arial";
//-->
</style>
Mehr zu CSS
CSS bietet eine ganze Reihe an Möglichkeiten. Da es in dieser Dokumentation hauptsächlich um HTML geht, haben wir für CSS einen eigene Dokumentation geschrieben. Schauen Sie doch mal rein: CSS Ratgeber
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Skripte
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project