h1 {
font-weight: bold;
font-size: 12pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
}
Deklarationen lassen sich auch gruppieren, damit man für
jede Eigenschaft eines HTML-Elements nicht den Selektor
noch einmal aufschreiben muss. Dazu werden nach der
öffnenden geschweiften Klammer '{' einfach alle
Deklarationen hintereinander aufgeschrieben und durch
Semikolons getrennt, wobei zusätzlicher Whitespace
(Leerzeichen, Tabulatoren und Zeilenumbrüche) zwischen den
Deklarationen erlaubt ist: Die unterschiedlichen Attribute
werden später im Text noch beschrieben.
Allgemeine Definition:
<html-tag style= "[CSS- Deklarationen]">...</html-tag>
Beispiel:
<h1 style="font-family: courier;">Courier</h1>
Bemerkung: Falls es in einer CSS-Regel im Dokument-Kopf oder
in einem separaten Stylesheet Regeln für die Schriftart von
Überschriften 1. Ordnung gibt, haben diese Formatbefehle
keinen Einfluss auf die Schriftart der obigen Überschrift. Das
bedeutet, direkt dem einzelnen zugewiesene CSS-Angaben
überschreiben alle anderen Definitionen. Mehr dazu werden wir
im Kapitel 'Die Kaskade' genauer erläutern.
Beispiel:
<html>
<head>
<style type="text/css">
h1 {font-family: Arial, Helvetica; font-size: 15pt;}
</style>
</head>
<body>
<h1 style="font-size: 15pt; font-family: courier;">Courier</h1>
<h1>So hätte die obige Überschrift ohne explizite
Formatierung am einleitenden Tag ausgesehen</h1>
</body>
</html>
Beispiel:
font-family: Arial, sans-serif;
In diesem Beispiel wird die Schriftart Arial vorgegeben. Fall
diese auf dem Computer des Lesers nicht installiert ist, soll
eine serifenlose Schrift verwendet werden.
<style type="text/css">
selektor
{
css-Deklarationen
}
</style>
Mit
<style type="text/css">
im Kopf der HTML-Datei wird die Definition der zentralen
Elemente eingeleitet und mit
</style> wird sie abgeschlossen.
Dazwischen stehen dann beliebig viele CSS-Regeln.
Beispiel:
<head>
<style type="text/css">
p {font-size: 14pt; font-family: "Time New Roman"; }
h1 {font-family: Arial; font-style: italic; }
h2 {font-family: Courier, monospace; font-weight: bold;}
h3 {font-family: Arial, Helvetica;}
</style>
</head>
Will man ein Format für mehrere HTML-Elementtypen definieren,
so gibt man alle gewünschten Elementtypen an und trennt diese
durch Kommata.
Beispiel:
<head>
<style type="text/css">
p, h1, h2 {font-size: 15pt;
font-family: "Premier Free Style DB";
font-style: italic;}
</style>
</head>
Allgemeine Definition:
<link rel="stylesheet" type="text/css" href="[url]">
Wobei [url] eine Referenz auf die zu verwendende Style
Sheet-Vorlage ist.
Beispiel:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formatvorlage.css" />
<body>
<h1> ArtNouveau, fett </h1>
<h2> Courier New, monospace, kursiv </h2>
<h3> Times New Roman </h3>
</body>
</html>
Datei formatvorlage.css:
h1 {font-family: ArtNouveau; font-weight: bold;}
h2 {font-family: "Courier New", monospace; font-style: italic;}
h3 {font-family: "Times New Roman";}
Das 'link'-Element wird im Kopf der HTML-Datei angegeben und
stellt eine Referenz zu einer anderen Datei her. Da das
'link'-Element nicht CSS-spezifisch ist, muss dem Browser
mitgeteilt werden, um welche Art von Daten es sich handelt.
Dies geschieht mit dem Attribut rel="...". Als Wert wird dem
Attribut der Dateityp mitgegeben, welcher für
Style-Sheet-Dateien immer 'stylesheet' lautet. Wenn der
WWW-Browser auf einen solchen Befehl stößt, fordert er die
referenzierte Datei vom Server an. Der WWW-Browser weiß
anhand des Befehls rel="stylesheet", wie er den Inhalt der
externen Datei zu verarbeiten hat. In diesem Fall erwartet er
Formatbefehle.
Beispiel:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formatvorlage.css" />
<link rel="stylesheet" type="text/css" href="formatvorlage2.css" />
</head>
<body>
<h1> ArtNouveau, kursiv </h1>
<h2> Courier New, monospace, kursiv </h2>
<h3> Times New Roman </h3>
</body>
</html>
Beispiel:
@import url("farbe.css");
h1{ font-family: Arial;}
h2{ font-family: "Times New Roman";}
Hier wird die Vorlagendatei, für die Formatierung der
Schriftfarbe (farbe.css) in diese Vorlagendatei
eingebunden.
Allgemeine Definition:
@media [Medientypen, durch Kommata getrennt] {CSS-Deklarationen}
Die CSS-Regel @media leitet die Definition zentraler Elemente
ein, die ausschließlich für den oder die angegeben
Medientypen gelten. Der Medientyp wird mit seinem Namen
direkt hinter @media angefügt. Falls die Formate für mehrere
Medien gelten sollen, werden die Namen der Medien durch
Kommata getrennt nacheinander aufgelistet, wobei die
Reihenfolge der Angaben zu den Namen keine Rolle spielt.
Direkt darauf folgen dann die geschweiften Klammern, die die
entsprechenden CSS-Befehle umschließen.
Beispiel:
<style type="text/css">
@media handheld
{
h1 { font-size: 10pt; }
}
@media screen, print
{
h1 { font-size: 14pt; }
}
...
</style>
In diesem Beispiel haben Überschriften 1.Ordnung beim Druck
und auf dem Bildschirm die Schriftgröße 14pt, während sie auf einem
Handheld die Schriftgröße 8pt haben.
Es können auch mehrere Blöcke mit Formatbefehlen zu einem
Medium definiert werden. Man sollte jedoch darauf achten,
dass sich die CSS-Regeln nicht widersprechen.
Beispiel:
<head>
<link rel="stylesheet" type="text/css"
media="screen" href="bildschirm.css">
...
</head>
Die CSS-Datei 'bildschirm.css' wird hier für das
Ausgabemedium 'screen', also die Ausgabe am Bildschirm
verwendet.
Beispiel:
<head>
<link rel="stylesheet" type="text/css"
media="print,screen" href="ausgabe.css" />
<link rel="stylesheet" type="text/css"
media="handheld" href="handheld.css" />
...
</head>
Die CSS-Datei 'ausgabe.css' wird hier für die Ausgabemedien
Drucker und Bildschirm verwendet.
Allgemeine Definition:
@import url("[url] ") [Durch Kommata getrennte Liste von Medientypen];
wie man sieht, wird die @import-Regel einfach am Ende durch
Angabe des Medientyps/der Medientypen ergänzt.
Beispiel:
@import url("handheld.css") handheld;
@import url("ausgabe.css") print,screen;
Die CSS-Datei 'handheld.css' wird hier für das
Ausgabemedium 'handheld' verwendet, während die
CSS-Datei 'ausgabe.css' für die Ausgabemedien 'print' und
'screen' verwendet wird.
| all |
Umfaßt alle Medientypen. Diese Angabe kann auch
weggelassen werden. |
| screen |
Der Medientyp für die Anzeige auf einem
Computer-Bildschirm. |
| print |
Hier gilt die CSS-Datei für den Ausdruck auf Papier.
Web-Browser sollten diese Formatdefinitionen verwenden,
wenn der Anwender die Web-Seite ausdrucken möchte. |
| braille |
Dieser Medientyp gilt für Ausgabegeräte mit einer
sogenannten 'Braille-Zeile'. Dabei wird Text in eine
veränderbare Oberflächenstruktur des Materials der
Braille-Zeile umgewandelt und über Abtasten mit dem
Finger gelesen. Diese Form des Ausgabemediums ist für
blinde Menschen gedacht. |
| embossed |
Wie 'braille# ist auch 'embossed' für blinde Menschen
gedacht, hier allerdings für die Ausgabe auf einem
Braille-Drucker. Dabei wird Text in Form von abtastbaren
Oberflächenstrukturen in Papier oder ein vergleichbares
Material gestanzt. |
| aural |
Dieser Medientyp gilt für die Sprachsynthese, bei der
ein Sprecher den Inhalt des Dokuments vorliest.
Es können u.a. die Lautstärke, Pausen, die Richtung, aus
der der Ton kommt, die Geschwindigkeit, die vorlesende
Stimme (kindlich, weiblich oder männlich), Betonung und
die Tonhöhe beeinflusst werden. |
| tty |
Dieser Medientyp gilt für die Ausgabe auf Geräten,
die nur Text mit fester Buchstabenbreite ausgeben können,
z.B. in der Textkonsole eines Linux-Systems, oder in
einer Telnet- oder SSH-Session. |
| handheld |
Hier gilt die CSS-Datei für die Anzeige am Bildschirm
von tragbaren Kleinstcomputern, wie z.B. web-fähige
elektronische Organizer. |
| projection |
Hier gilt die CSS-Datei für die Datenprojektion mit
Beamern und ähnlichen Geräten. |
| tv |
Hier gilt die CSS-Datei für TV-ähnliche
Ausgabegeräte, die sich durch grobe Bildschirmauflösung
und mangelnde Unterstützung beim Scrollen in Text, dafür
aber durch Sound-Unterstützung auszeichnen. |
Leider werden immer noch einige dieser Angaben von den
meisten Browsern nicht erkannt. Der MS Internet Explorer
interpretiert diese Angaben ab der Software-Version 4.0 zu
einem gewissen Teil. Netscape findet auch in Version 6.0 zwar
die richtige Style-Sheet-Datei für die Bildschirmformate,
ignoriert jedoch beispielsweise Style-Sheet-Dateien mit
Formaten für den Druck.
Zwischen CSS-Angaben können Kommentare formuliert werden.
Diese werden mit /* eingeleitet und mit */ beendet. Alles,
was sich dazwischen befindet, wird vom Browser ignoriert und
somit nicht interpretiert. Auch wenn man dazwischen
CSS-Befehle einfügt, werden diese nicht interpretiert.
Beispiel:
/* Dies ist ein Kommentar */
Kommentare dürfen auch Zeilenumbrüche enthalten, die dürfen
jedoch nicht verschachtelt werden. Nach einem /* beendet das
erste */ den Kommentar. Daher ist folgendes Beispiel falsch:
/* Dieses Beispiel ist falsch.
/* Nach diesem Satz endet der Kommentar */
h1
{
font-family: Arial;
color: red;
}
*/
Nach dem zweiten Satz wird der Kommentar beendet. Somit
wird die Formatierung für h1 vom Browser umgesetzt und das
schließende */ findet keinen Gegenpart mehr und ist somit
fehlerhaft.
Es ist aber auch die Auswahl aller zu einer Klasse
zugehörigen HTML-Elemente möglich:
.classname { ... }
*.classname { ... } /* In CSS2 */
| A B { ... } |
Dieser Selektor wählt genau die Elemente aus, auf die
der Selektor B passt, wenn diese innerhalb von einem
Element stehen, auf das der Selektor A passt. Dabei muss
das von B ausgewählte Element kein direkter Nachfolger
von dem durch A ausgewählten Element sein.
Betrachtet man das obere Beispiel, so würde der Selektor
html p z.B. das 'p'-Element in
der unteren linken Tabellenzelle auswählen.
|
| A > B { ... } |
Dieser Selektor wählt genau die Elemente aus, auf die
der Selektor B passt, wenn diese direkter Nachfolger
eines Elements sind, auf das der Selektor A passt.
Der Selektor html > p würde das
'p'-Element im Beispiel also nicht auswählen. Funktionieren
würde z.B. der Selektor html > body > table > tr > td > p
|
| A + B { ... } |
Dieser Selektor wählt genau die Elemente aus, auf die
der Selektor B passt, wenn diese genau auf ein Element
folgen, auf das der Selektor A passt, und das von A
ausgewählte Element vorher geschlossen wird.
Man kann so z.B. gezielt die n-te Tabellenzelle der n-ten
Zeile auswählen. So würde table > tr + tr > td + td
die 2. Zelle der 2. Zeile auswählen.
|
Wie wir bereits an einigen Beispielen gesehen haben, können
beliebig viele einfache Selektoren mit den oben beschriebenen
Kombinatoren (Whitespace, '+', '>') , auch unterschiedlichen
Typs, verknüpft werden. Es ist weiterhin zulässig, dass der
letzte Selektor der Verkettung zusätzlich ein Pseudo-Element auswählt:
http://www.w3.org/TR/REC-CSS2/images/boxdim.gif
Die Größen und Eigenschaften dieser 3 Rechtecke können mit
Hilfe eigener CSS-Eigenschaften bestimmt werden.
Der Rand ist immer durchsichtig, so dass an seiner Stelle
das Elternelement durchscheint.
Syntax:
length := [['+'|'-']? number unit] | '0'
number := digit+ ['.' digit+]?
digit := '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
Die CSS-Empfehlung unterscheidet zwischen relativen und
absoluten Längenangaben. Sie sieht folgende relative
Längeneinheiten vor:
| em |
Ein 'em' ist die Fontgröße des Elements. Für die
CSS-Eigenschaft 'font-size' ist ein 'em' gleich der
Fontgröße des Elternelements. Das besondere an dieser
Einheit ist, dass sie mit der Schriftgröße skaliert,
einmal passend eingestellt also zu jedem Ausgabemedium
und der dort verwendeten Schriftgröße passt. |
| ex |
Ein 'ex' ist die sogenannte 'x'-Höhe des für das
Element verwendeten Fonts, also die Höhe des kleinen 'x'
dieses Fonts. Sollte ein Font kein kleines 'x' enthalten,
so muss für diesem trotzdem eine 'x'-Höhe definiert sein.
Auch diese Einheit skaliert mit der Schriftgröße. |
| px |
Die Größe eines 'px' hängt von der Auflösung des
verwendeten Ausgabemediums ab, auf einem typischen
Computer-Bildschirm entspricht dies z.B. genau einem
Pixel, also einem Bildpunkt. Unterscheidet sich die
Auflösung des Ausgabemediums stark von einem solchen
Computer-Bildschirm, so sollten Pixel-Angaben skaliert
werden. |
Relative Längenangaben werden nicht als solche vererbt,
vielmehr wird ein aus diesen Angaben errechneter Absolutwert
vererbt.
Beispiele:
td { padding: 1.5em; }
div { margin: 1.5cm; }
td { border-width: 0 }
Syntax:
percentage := [['+'|'-']? number '%'] | '0'
Beispiele:
td { padding: 3.5%; }
div { font-size: 75%; }
Prozentangaben müssen sich immer auf eine andere Angabe
beziehen. Läßt eine CSS-Eigenschaft Prozentangaben zu, so
muss in der CSS-Empfehlung definiert sein, worauf sich diese
Angabe bezieht.
Syntax:
color := colkeyword | hexcol | numcol
colkeyword := 'aqua' | 'black' | 'blue' | 'fuchsia' | 'gray' | 'green'
| 'lime' | 'maroon' | 'navy' | 'olive' | 'purple'
| 'red' | 'silver' | 'teal' | 'white' | 'yellow'
hexcol := ['#' hd hd hd [hd hd hd]? ]
numcol := 'rgb(' ws percentage ws ',' ws percentage ws ',' ws percentage ws ')'
| 'rgb(' ws digit+ ws ',' ws digit+ ws ',' ws digit+ ws ')' |
hd := digit | 'a'|'A' | 'b'|'B' | 'c'|'C' | 'd'|'D' | 'e'|'E' | 'f'|'F'
'ws' bezeichnet hier Whitespace, also Spaces, Tabs und Zeilenumbrüche.
Beispiele:
h1 { color: fuchsia; }
td { background-color: #000; color: #c0c0c0; }
body { color: rgb( 255,255,255); background-color: rgb( 50.0%, 50.0%, 50.0%); }
Syntax:
url := 'url(' ws ['"' locator '"'| "'" locator "'" | locator] ws ')'
'locator' ist ein nach RFC1738 gültiger und nach den obigen
Regeln umgewandelter URL.
Beispiele:
@import url( "http://www.damogran.de/ausarbeitung.css" )
@import url('colors.css')
@import url( "/Folder\ With\ Spaces\ and\ \"\'\"-Characters\ in\ it/test.css")
Relative URLs beziehen sich immer auf die Position des
Stylesheets, in dem sie stehen, nicht auf die Position des
Dokumentes, welches dieses Stylesheet möglicherweise
importiert.
