 |
Hintergrund
Denkt ein Web-Designer über HTML nach, fallen ihm sofort div. Inkompatibilitäten, verschiedene Browser und das Problem eines pixelgenauen Layouts ein. Der Grund dafür ist, dass der Web-Designer immer versucht, mit HTML das Aussehen seiner Dokumente zu beeinflussen. Dass das nicht wirklich funktionieren kann, ist klar: HTML wurde erfunden, um bestimmte Textstellen inhaltlich zu markieren, und nicht, um Seiten-Layouts zu gestalten.
Zum Glück für den Web-Designer gibt es CSS, die Cascading Style Sheets. Damit ist es endlich möglich, Layout-Angaben zu machen, die zumindest theoretisch von jedem Browser identisch interpretiert werden.
Theorie
Es gibt verschiedene Möglichkeiten, Style Sheets zu verwenden. Zunächst jedoch ein wenig Theorie. Mit CSS ist es möglich, Layout-Eigenschaften für
- ein einzelnes Element, z.B. die erste Überschrift einer Seite, zu definieren
- eine Klasse von Elementen, also z.B. alle Überschriften einer Seite, zu definieren
- eine allgemeine Klasse zu definieren, die keinem spezifischen Element (oder Tag) zugeordnet werden kann. Die Eigenschaften dieser Klasse können dann im Code einzelnen Elementen zugewiesen werden, z.B. einer Überschrift und einem Textabschnitt
Definition
CSS-Definitionen kommen an drei verschiedenen Positionen vor: ausgelagert in einer externen Datei, im <style>-Abschnitt einer HTML-Datei oder direkt als Tag-Attribut. Logisch, dass sich letzteres dann nur auf das entsprechende Tag auswirkt.
... im style-Abschnitt
Will man eine Datei mit CSS-Definitionen einbinden, sieht das hinterher so aus:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
B { font-family: Verdana; font-color: green;}
-->
</STYLE>
</HEAD>
... in einer externen Datei
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="standard.css">
</HEAD>
Die Datei standard.css könnte dann z.B. das hier enthalten:
B { font-family: Verdana; font-color: green;}
... als Tag-Attribut
<b style="font-family: Verdana; font-color: green;">Irgendein Text</b>
Wie oben schon erwähnt, wirkt sich solch eine Definition nur auf das aktuelle Tag aus. Würde darunter z.B. ein anderes <b>-Tag stehen, hätte die aktuelle Definition keine Auswirkungen auf das untenstehende Tag.
Diese Form wird auch InLine-Notation genannt.
Synatx
CSS-Definitionen bestehen (fast) immer aus zwei Teilen: einem Identifier und den dahinter folgenden Layout-Anweisungen:
B { font-family: Verdana; font-color: green;}
B ist hier der Bezeichner, die geschweiften Klammern und das darin stehende definieren das Aussehen.
(Fast) immer aus zwei Teilen? Ja. Wenn CSS direkt als Tag-Attribut angegeben werden, fällt der Identifier weg, denn dann beziehen sich die Layout-Anweisungen immer aufs Tag.
Identifier
Will man ein Tag umdefinieren, nimmt man das Tag als Identifier. Beispiele:
B { font-family: Verdana; font-color: green;}
TD { font-family: Arial; font-color: black;}
Will man dagegen eine "allgemeingültige" Layout-Klasse erstellen, sucht man sich einen praktisch beliebigen Namen aus und stellt die Raute davor:
#gruen {font-color: green;}
#grossertext { font-size: 40pt;}
Und so verwendet man die Klasse bei einem Tag:
<b id="gruen">Das ist ein grüner Text!</b>
<b id="grossertext">Ein grosses A</b>
Zu guter Letzt auch noch die Identifier-lose Lösung:
<b style="font-color: green;">Das ist ein grüner Text!</b>
Nachfolgende Layout-Anweisungen
Die Layout-Anweisungen werden von geschweiften Klammern umschlossen, außer, man verwendet die InLine-Notation.
Wie an den bisherigen Beispielen gut ersichtlich, gibt man zuerst an, was man definieren möchte, dann folgt der Wert und abschließend ein Semikolon.
Ausblick
Sie wissen jetzt, wie CSS in der Theorie funktionieren. Allerdings wissen Sie nicht, welche Werte und Parameter in den Layout-Anweisen erlaubt sind. Darauf gehen wir sehr bald ein, im Artikel CSS II: Typographie.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
