| 
Mit css (cascading
style sheets) werden im wesentlichen fünf Ziele verfolgt.
css definieren: Innerhalb
des Kopfbereiches der HTML Seite
Stylesheets über Klasssen
definieren
Diskriminierung nach der
Stellung des Elementes
Formatierungen in Ahängigkeit
der Attribute des Elements
Eine Formatierungen in Abhängigkeit
vom Wert des Attributes
Zuweisung einer Formatierung
in Abhängigkeit vom Teil des Inhaltes des Attributes
css Formate direkt im html
tag definieren
css Formatierungen in eine
externe Seite auslagen
| Mit
css (cascading style sheets) werden im wesentlichen
fünf Ziele verfolgt. |
|
| 1. |
Mit css läßt sich
das Design aller Seiten einer Website zentral definieren.
Es ist dann nicht mehr nötig, mittels der traditionellen
tags und deren Attribute wie font, bgcolor, background,
size etc. etc. das Design in jeder Seite zu definieren
und somit redundanten, überflüssigen Code zu
produzieren.
|
| 2. |
Mit css lassen sich Elemente graphisch
beeinflussen, die sich ohne css gar nicht beinflussen
ließen, wie z.B. die Scroll Leisten des Fensters,
der Hintergrund eines Formularelementes, Zuweisung eines
Rahmens für div Bereiche etc. etc.
|
| 3. |
Oft erweitern css die designerischen Möglichkeiten.
Zum Beispiel hat man mehr Möglichkeiten den border
einer Tabelle zu gestalten, es stehen mehr Schriftgrößen
zur Verfügung, man hat viel mehr gestalterische Möglichkeiten
bei Hyperlinks etc. etc.
|
| 4. |
Css lassen sich dynamisch über JavaScript
verändern. Auf diese Art und Weise können dann
alle möglichen optischen Effekte erzielt werden.
|
| 5. |
Mit css lassen sich auch die durch den
<div> definierte Bereiche ansprechen. So ist ein
pixelgenaues Positionnieren von Elementen möglich.
|
Mit css wurde in diesem Handbuch
immer mal wieder gearbeitet, z.B. im Kapitel Rollover
et alter. Wir werden hier das Wesentliche zu css kurz
erläutern, allerdings nur soweit, wie es für das
Verständnis des folgenden Kapitels Zugriff
auf Cascading Style Sheets mit JavaScript notwendig ist.
Zu css werden wir in Kürze ein Handbuch schreiben.
| css
definieren: Innerhalb des Kopfbereiches der HTML Seite |
|
Üblicherweise
werden css im Kopfbereich der HTML Seite definiert, das sieht
dann so aus.
<html><head><title>css</title>
<style type=text/css>
....
irgendwelche css Definitionen
....
</style>
</head><body>
toll !
</body></html>
Mit der Zeile <type=text/css> geben wir
also an, dass die stylesheet Definition beginnt und mit </style>
geben wir an, dass sie endet. Bezogen auf ein konkretes Beispiel
sieht das dann so aus.
<html><head><title>exempla
statut</title>
<style type=text/css>
#karotte{position:absolute; top:10 px;
left:10 px; background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;}
</style>
</head>
<body>
<html><head><title>Matthias Claudius</title></head>
<body>
<div id="karotte">
Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>
Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</div>
</body>
</html>
Das sieht dann so aus:
exempla
statut. Wenn auch die Details, auf
die wir gleich noch zu sprechen kommen, etwas verwirrend sind,
so ist es im grossen und ganzen eigentlich einfach. Mit #karotte{
die css } definieren wir ein Stylesheet für alle Elemente
dieser Id, wobei jedem Element eine Id zugewiesen werden kann.
| Stylesheets
über Klasssen definieren |
|
Definiert man ein Stylesheet über eine
Id, dann ist es nur für die Elemente gültig, die
als zu dieser Id zugehörig definiert wurden. Definiert
man ein Stylesheet für eine Klasse, dann gilt das Stylesheet
für alle Elemente dieser Klasse. Schauen wir uns ein
Beispiel an, dass die Stylesheets einer Klasse zuordnet.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}
td.titel {
font-size:16px;
}
td.autor {
text-align:right;
}
</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td class="titel"> Der Mond ist
aufgegangen</td></tr>
<tr><td class="autor">Mathias Claudius</td></tr>
<tr><td>
Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>
Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>
Das sieht dann so aus Wer
Augen hat zu schauen, der staune!. Unter der Voraussetzung,
dass man es geschickt macht, lässt sich also eine Formatierung
sehr Code minimierend durchführen. Am Anfang definieren
wir einen Stylesheet für die gesamte Tabelle. Dann definieren
wir ein Stylesheet für die td, die Zelle. Wie deutlich
sichtbar, überdeckt das css der Zelle das css der Tabelle,
den der Hintergrund der Zelle ist gold, während er in
der Tabelle gelb ist, was wir noch erkennen, weil das gelb
im Abstand der Zellen zueinander durchschimmert. Für
td definieren wir noch zwei Unterklassen, nämlich titel
und autor. Mit class="autor" bzw. class="titel"
als Attribut der entsprechenden Zellen, weisen wir das entsprechende
Stylesheet den entsprechenden Zellen zu. Da autor bzw. titel
Unterklassen der Klasse td sind, kann titel bzw. autor nur
beim Element td erscheinen, bzw. nur beim Element td wird
das entsprechende Stylesheet zugewiesen. Würde man es
für z.B. für tr verwenden, hätte dies keine
Auswirkung. Wir sehen weiter, dass die Unterklassen autor
bzw. titel alle Eigenschaften von der Klasse td erben. Alle
css Formatierungen, die dort definiert sind, gelten auch in
deren Unterklasse, wie man ja deutlich sieht. Der Witz bei
der Bildung von Klassen und Unterklassen besteht also darin,
dass die Unterklassen von den Klassen erben, was den Schreibaufwand
reduziert. Sinnvollerweise deklariert man also immer zuerst
eine Klasse, die alle wesentlichen Festlegungen enthält
und definiert dann in den Unterklassen die Abweichungen. Definieren
wir also eine Klasse als Unterklasse einer anderen Klasse,
kann diese Klasse nur innerhalb dieser Klasse verwendet werden.
Definieren wir aber eine Klasse nicht als Klasse einer Unterklasse,
dann kann diese Klasse überall verwendet werden. Läßt
man man feinsinnige Unterscheidungen aussen vor, ist in diesem
Falle die Definition einer Klasse hinsichtlich der Wirkung
und den Möglichkeiten mit der Definition einer Id identisch.
Betrachten wir folgenden Beispiel.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}
.titel {
font-size:16px;
}
.autor {
text-align:right;
}
#interpretation {
font-size:10px;font-weight:bold,text-decoration:underline;
background-color:wheat;
}
</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td class="titel"> Der Mond ist
aufgegangen</td></tr>
<tr><td class="autor">Mathias Claudius</td></tr>
<tr><td>geschrieben so um 1778</td></tr>
<tr><td id="interpretation">==> Hinweis
zur Interpretation: Das hässliche Entlein</td></tr>
<tr><td>Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>
Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>
Das sieht dann so aus: Wer
sich nicht wundern kann, der kann nicht philosophieren
Wie deutlich zu sehen, wurde titel und
autor nicht mehr als Unterklasse der td Klasse eingerichtet
sondern allgemein. Trotzdem funktionniert es. (Man kann also
durch die Definition einer Unterklasse verhindern, dass diese
Klasse irdenwo verwendet wird, wo sie nicht hingehört.
Praktisch gesehen ist das alles etwas bedeutungslos. Man kann
Klassen eigentlich immer als allgemein definieren.) Weiter
sehen wir, dass man das gleiche, was mit einer Klasser erreicht
wird, auch mit der Definition einer Id erreicht werden kann.
Bei "==>Hinweis zur Interpretation: Das hässliche
Entlein" wurde nicht, wie im Beispiel zuvor, mit der
Klasse gearbeitet, sondern mit einer Id. Auch hier werden
erstmal alle Formatierungen der Klasse td übernommen.
Die dann zweimal oder gar nicht vorhanden sind, werden durch
die Formatierungen der Id Deklaration überschrieben.
Noch eine Bemerkung zu Ids. Bei XML und im document object
model werden mit Ids Elemente eindeutig charakterisiert. Man
könnte nun versucht sein zu glauben, dass bei css etwas
ähnliches passiert. Das ist tatsächlich nicht der
Fall. Diesselbe Id kann mehrere Male verwendet werden, wobei
das eben keine gut Idee ist, wenn man vorhat das HTML Dokument
mit der dom Sichtweise zu parsen. Wir zeigen das nochmal anhand
eines Beispiels.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}
.titel {
font-size:16px;
}
.autor {
text-align:right;
}
#interpretation {
font-size:10px;font-weight:bold,text-decoration:underline;
background-color:wheat;
}
</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td class="titel"> Der Mond ist
aufgegangen</td></tr>
<tr><td class="autor">Mathias Claudius</td></tr>
<tr><td td id="interpretation">geschrieben
so um 1778</td></tr>
<tr><td id="interpretation">==> Hinweis
zur Interpretation: Das hässliche Entlein</td></tr>
<tr><td>Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>
Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>
Wer wissen will, wie das aussieht, kann
hier
clicken. Dass die Unterscheidung zwischen
Ids und Klassen etwas verschwommen ist, zeigt sich auch daran,
dass es Bemühungen gibt, sie endgültig verschwimmen
zu lassen. Inzwischen, ab den sechser Versionen der jeweiligen
Browser, können nämlich auch mit Ids Unterklassen
gebildet werden, das heisst, wir erhalten das gleiche, wie
oben. Ist die Id eine Unterklasse, dann kann sie nur innerhalb
ihrer Klasse verwendet werden, dass heisst, sie kann dann
nur ihre Mutterklasse modifizieren. Ist sie alleinstehend
deklariert, kann sie jede andere Klasse modifizieren. Wir
zeigen noch mal anhand eines Beispieles die Syntax für
den Fall, dass eine Untegruppe mit einer Id gebildet wird.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}
td#titel {
font-size:16px;
}
td#autor {
text-align:right;
}
#interpretation {
font-size:10px;font-weight:bold,text-decoration:underline;
background-color:wheat;
}
</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td id="titel"> Der Mond ist aufgegangen</td></tr>
<tr><td id="autor">Mathias Claudius</td></tr>
<tr><td td id="interpretation">geschrieben
so um 1778</td></tr>
<tr><td id="interpretation">==> Hinweis
zur Interpretation: Das hässliche Entlein</td></tr>
<tr><td>Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>
Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>
Das Beispiel ist mit dem Beispiel, dass die
Formatierung von Klassen und Unterklassen zeigt weitgehend
idendisch. Lediglich der Punkt wurde durch einen Gartenzaun
ersetzt, also anstatt td.autor td#autor. Weider wurde das
entsprechende Stylesheet nicht mit class="autor"
sondern mit id="autor" aufgerufen. Der Unterschied
zwischen einer Klasse und einer Id dürfte also bezüglich
css zumindest für die Praxis ziemlich bedeutungslos sein.
| Diskriminierung
nach der Stellung des Elementes |
|
Es kann sein, dass ein bestimmtes Konstrukt
aus HTML Elementen immer wieder vorkommt. In diesem Konstrukt
wird das gleiche HTML Element zweimal verwendet, einmal allein
stehend und einmal umklammert von einem anderen Element. Man
kann jetzt wollen, dass das umklammerte eine andere Formatierung
erhält als das alleinstehende. Unstrittig ist, dass man
das auch dadurch erreichen könnte, indem man dem Umklammerten
eine andere Unterklasse zuweisst. Das hat aber den Nachteil,
dass man diese mit der Hand immer wieder da rein schreiben
muss, was bei längeren HTML Dokumenten ja umständlich
ist. Deshalb gibt es hier eine Möglichkeit, genauer zu
diskriminieren und je nachdem ob das HTML Element alleine
steht oder von einem anderen umklammert ist, eine andere Formatierung
zuzuweisen.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}
hr {border:solid #ff0000 1px;
background-color:#00ffff;height:4px;margin:30px 0px;}
td hr {border:solid green 1px;
background-color:yellow;height:2px;margin:3px 0px;}
</style>
</head>
<body>
<hr>
<table>
<tr><td>
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal
ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br>
<hr>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei<br>
<hr>
Dante Alighieri, Divina Comedia
</td></tr>
</table>
<hr>
Das ist die Übersetzung von Zossmann. Es ist mit Abstand
die Beste, aber aus
dem Handel verschwunden. Alle anderen, auch die von Stefan
George, sind Schrott.
</body>
</html>
Wer staunen kann, der staune hier.
Wir sehen, dass für den HTML tag <hr> zweimal eine
Formatierung definiert wurde, wobei die eine nur greift, wenn
sich hr innerhalb von td befindet. Wir sehen also, dass wir
die Feinsteuerung nicht durch eine zusätzliche Angabe
einer Klasse oder Id herstellen, sondern einmalig innerhalb
der css Definition.
| Formatierungen
in Ahängigkeit der Attribute des Elements |
|
Im Moment ausschliesslich bei Netscape 6.0 und
höher gibt es noch die Möglichkeit, die Gültigkeit
einer Formatierung vom Vorhandensein eines Attributes, vom
Wert eines Attributes oder vom Text innerhalb des Elementes
abhängig zu machen. Das Attribut muss hierbei nicht mal
ein gültiges HTML Attribut sein, es kann sogar ein selbst
definiertes sein. Das folgende Beispiel zeigt eine Formatierung,
die nur gültig ist, wenn das Attribut was vorhanden ist.
Es funktionniert nur mit Netscape ab 6.0.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}
td[was] { color:red; }
</style>
</head>
<body>
<table>
<tr><td>
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal
ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br><br>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei</td></tr>
<tr><td was="Autor">Dante Alighieri,
Divina Comedia</td></tr>
</table>
</body>
</html>
Wie das aussieht, kann man sich anschauen, indem
man hier
clickt. Wie deutlich zu erkennen besitzt das Element td bei
"Dante Alighieri, Divina Comedia" das Phantasie
Attribut was. Wir definieren ein css Stylesheet, das nur gültig
ist, wenn das Element td Element das Attribut was besitzt.
| Eine
Formatierungen in Abhängigkeit vom Wert des Attributes
|
|
Noch präziser lässt sich über
den Wert eines Attributes die Gültigkeit von Formatierungen
steueren, wie folgendes Beispiel zeigt.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}
td[was] { color:red; }
td[vers=eins] { color:green; }
td[vers=zwei] { color:coral; }
</style>
</head>
<body>
<table>
<tr><td vers="eins">
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal
ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br><br>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei</td></tr>
<tr><td was="Autor">Dante Alighieri,
Divina Comedia</td></tr>
<tr><td vers="zwei">
Ruht ein Lied in allen Dingen<br>
die da schlummern fort und fort<br>
und die Welt hebt an zu singen<br>
findst du nur das Zauberwort</td></tr>
<tr><td was="Autor">Clemens Brentano,
romantische Lieder</td></tr>
</table>
</body>
</html>
Auch dieses Beispiel funktionniert nur mit Netscape
ab Version 6.0. Mit diesem Browser sieht es dann so
aus. Wie deutlich zu erkennen, haben wir für die Verse
wieder zwei Phantasie Attribute, nämlich vers mit den
Werten eins respektive zwei. In der CSS Definition weisen
wir dann in Abhängigkeit vom Wert des Attributes vers
die entsprechende Formatierung zu.
| Zuweisung
einer Formatierung in Abhängigkeit vom Teil des Inhaltes
des Attributes |
|
Auch das funktionniert nur mit Netscape ab Version
6.0. Mit dieser Methode können wir die Gültigkeit
einer Formatierung von der Frage abhängig machen, ab
innerhalb des Wertes des Attributes ein bestimmtes Wort auftaucht.
Machen wir uns das an einem Beispiel klar.
<html><head><title>exempla
statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}
td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}
td[was] { color:red; }
td[vers=eins] { color:green; }
td[vers=zwei] { color:coral; }
td[zitat~=Faust] {color:hotpink; }
</style>
</head>
<body>
<table>
<tr><td vers="eins">
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal
ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br><br>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei</td></tr>
<tr><td was="Autor">Dante Alighieri,
Divina Comedia</td></tr>
<tr><td vers="zwei">
Ruht ein Lied in allen Dingen<br>
die da schlummern fort und fort<br>
und die Welt hebt an zu singen<br>
findst du nur das Zauberwort</td></tr>
<tr><td was="Autor">Clemens Brentano,
romantische Lieder</td></tr>
<tr><td zitat="Kommt irgendwo aus dem Faust">Doch
im Erstarren such ich nicht mein Heil<br>
das Schaudern ist der Menschheit bester Teil<br>
wie auch die Welt im das Gefühl verteure<br>
ergriffen fühlt er tief das Ungeheuere
</td></tr>
<tr><td was="Autor">Goethe, Faust I</td></tr>
</table>
</body>
</html>
Wie das aussieht, kann man sich anschauen, indem
man hier
clickt. Wir erkennen, dass das Wort Faust Teil des Wertes
von zitat ist. In der css Definition haben wir dann den td
Elementen eine spezielle Formatierung zugewiesen, bei denen
"Faust" ein Bestandteil des Wertes des Attributes
zitat ist.
| css
Formate direkt im html tag definieren |
|
Ausser den oben dargestellten Methoden, gibt
es auch noch die Möglichkeit, css Formatierungen direkt
als Attrbut eines HTML Elementes zu definieren. Das macht
man wohl sinnvollerweise immer dann, wenn lediglich eine Element
formatiert werden soll. Ein Beispiel:
<html><head><title>css
direkt Formatierung</title></head>
<body>
<table>
<tr><td style="background-color:gold;font-family:Tahoma;font-size:12px;font-weight:bold;">
Herr Keuner begegegnet einem Freund: " Sie haben sich
gar nicht verändert", strahlt dieser. "Ach",
sagte Herr Keuner und erblasste.
</td></tr>
<tr><td> frei nach Bertolt Brecht </td></tr>
</table>
</body>
</html>
Wie man sieht, wenn man hier
clickt.
| css
Formatierungen in eine externe Seite auslagen |
|
Will man mehrere Seiten einer Website oder sogar
alle, über css formatieren, dann müssen die css
Formatierungsangaben ausgelagert werden. Wir zeigen im folgenden
einen externe css Datei und eine HTML Seite, die diese Formatiert.
Die HTML Seite
<html><head><title>Das
Gedicht der grossen Welle</title>
<link href="die_welle.css" rel="stylesheet"
type="text/css">
</head>
<table>
<tr><td id="kirsche">Aus der Reihe Welle
im Sturm</td></tr>
<tr><td class="banane">Das Gedicht der
grossen Welle <br>
<div id="name">von Andrés Ehmann</div><br>
<br>
Hurschka nofza, sine tai<br>
scholem blasta, ars kanei !<br>
<hr>
kispe tara, aske tai<br>
tana hosa , kure hai ?<br>
<hr>
ei kanatak !<br>
eike hai !<br>
teika kura<br>
teika hai<br>
</td></tr>
</table>
</body>
</html>
Das CSS Stylesheet, dass diese Datei
nun wiederum formatiert sieht so aus.
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color:blue;
}
td.banane {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bold;
color:red;
vertical-align: top;
}
#kirsche {
font-family:Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: bold;
color:marron;
vertical-align: top;
}
#name {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #000000;
vertical-align: top;
}
Vom Ergebnis her kennen wir das schon
mehr oder weniger, es sieht so
aus. Damit haben wir dann zu dem Thema wie man css Formatierungen
in HTML Seiten einbindet gesagt. Es wurde nichts gesagt, welche
Möglichkeiten css bietet. Wir beschränken uns auf
das das, was benötigt wird um das folgende Kapitel Zugriff
auf Cascading Style Sheets mit JavaScript zu verstehen.
|
