Cascading Stylesheets (CSS)
CSS (Cascading Stylesheets) ergänzen HTML, indem sie es ermöglichen,
einzelnen HTML-Elementen (Tags) spezielle Formatierungseigenschaften
zuzuweisen. So können Sie sowohl bestehende Tags umformatieren, aber auch
durch Formatzuweisungen bekannte Tags zu neuen "Tags" umdefinieren.
Anmerkung: Wie zu befürchten, interpretiert jeder Browser
CSS ein wenig anders. Es empfiehlt sich, HTML-Seiten mit CSS mit mindestens
zwei Browsern auszutesten!
Es gibt verschiedene Möglichkeiten, CSS in einem HTML-Dokument
unterzubringen:
- in der
HEAD-Section.
Der CSS-Bereich wird eingeleitet durch
<style type="text/css">
<!--
Es folgen die Definitionen der Formateigenschaften. Der Bereich wird durch
//-->
</style>
abgeschlossen.
Anmerkung: Es ist auch möglich, Stylesheets im
BODY-Teil zu definieren. Der STYLE-Tag macht dies
kenntlich; die Kommentarzeichen verhindern, dass die Definitionen in
nicht-CSS-fähigen Browsern angezeigt werden.
- in einer eigenen CSS-Format-Datei.
Dazu wird zwingend im HEADer der Tag <link
rel="stylesheet" type="text/css" href="datei.css"> verwendet.
datei.css ist hierbei der Name der Datei, die die zentralen
Formatdefinitionen enthät. Diese wird ebenfalls mit dem
STYLE-Tag eingeleitet (s.o.)
Anmerkung: So wird es möglich, an einer Stelle die
Formatierung für alle HTML-Dateien zu ändern!
- direkt in einem Tag.
Diese Direkt-Formatierung wird mit dem Attribut style in einem Tag
vorgenommen, z.B.
<i style="color:#FF007B"> bewirkt, dass darin eingeschlossene Texte kursiv in dieser Farbe
angezeigt werden.
Die Syntax einer Formatdefinition ist in jedem Fall gleich:
Tag { Formateigenschaft: Wert; ... }
z.B.
H1 {
font-family: Comic Sans MS;
font-size: 14pt;
color: #FF0000;
font-style: bold;
}
das ist jetzt ein mit <H1> formatierter text in ROT und
in 14 Punkt-Größe
Daneben gibt es Formatunterklassen, auf die im HTML-code mit dem
Attribut class="..." zugegriffen werden kann.
Beispiel:
H2.rot { color: #ff000 }
H2.blau { color: #0000FF }
...
<H2 class="rot">Rote Überschrift</h2>
<H2 class="blau">Blaue Überschrift</h2>
Rote Überschrift
Blaue Überschrift
Und noch einfacher wird es, wenn mit all.rot oder einfach
.rot gearbeitet wird: alle Tags, die class="rot" als
Attribut beinhalten, werden rot!
Eine zweite Erweiterung stellt die Kombination von Tags dar. So
kann man definieren, daß die Kombination der Tags
<H6><I> in grün, kursiv und ganz groß angezeigt
wird:
h6 i {
font-family: serif;
font-size: xx-large;
color: #00FF00;
}
Und so sieht der Effekt aus:
<h6><i> wird nun groß und grün!
Vorsicht: Hier NICHT mit Komma trennen! h6,i {
formatzuweisung } würde die Tags <H6> und
<I> mit den gleichen Eigenschaften formatieren und nicht nur die
Kombination von Beiden!
Große Möglichkeiten eröffnen sich mit der dritten Variante, den
selbstdefinierten Formaten, auf die mit dem Attribut
id="..." zugegriffen wird.
Diese werden mit einem "Hash" (dem Gartenzaun #) eingeleitet, es folgt der Name
des selbst definierten Formats, und dann in geschweiften Klammern die
Festlegung der Eigenschaften.
Beispiel:
#selbstgemacht {
font-family: ParkAvenue BT;
font-size: large;
font-weight: bold;
font-style: italic;
text-decoration: underline;
text-align: right;
color: #FFFF00;
background: #408080;
}
Dieser Text ist nun selbstgemacht!
(Er wurde mit <b id="selbstgemacht"> eingeleitet.)
Mit sogenannten Pseudoformaten können Sie das
Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits
besuchten Seiten und zu Verweisen, die gerade mit der Maus überfahren oder
angeklickt werden, bestimmen.
Vorsicht: Gerade hier reagieren die Browser sehr unterschiedlich!
Ein Beispiel: Bitte halten Sie die
Reihenfolge ein - diese ist bindend!
a:link { font-weight:bold; color:#FF7D00; }
a:visited { font-weight:bold; color:#C6C3C6; }
a:hover { font-weight:bold; color:#FF00FF; font-style:italic; }
a:active { font-weight:bold; color:#00AEAD; font-style:italic }
a:focus { font-weight:bold; color:#00AEFF; }}
Den Effekt sehen Sie an den Links oben und unten!
Es empfiehlt sich, Kommentarzeilen (vor allem in einer zentralen
Stylesheet-Datei) einzubauen. Dies geschieht durch Zeilen, die mit
/* eingeleitet und mit */ abgeschlossen werden.
Beispiel: /* Formatierung der
Fussnoten */
Der HTMLEditor Phase 52 verfügt über einen Tab
CSS, der sowohl den STYLE-Tag einfügt, aber auch einen
Eingabeassistenten für neue Style Elemente anbietet. In der Vorschau
können Sie sofort sehen, welche Auswirkungen die Neu-Definition haben
wird.
SelfHTML verfügt über eine CSS-Kurzreferenz, in der Sie (fast ?) alle
Möglichkeiten der Formatierung ersehen können. Bitte beachten Sie die
Browserabhängigkeiten!
![[weiter]](right.gif){kind=small}