Einführung in Cascading Style Sheets : Grundlagen
- Genereller Syntax
- Einbinden in HTML
- Gruppieren der Styles
- Vererbung
- Attribut 'Class' als Selektor
- Attribut 'Id' als Selektor
- Kontextabhängige Selektoren
- Kommentare
Genereller Syntax
Eigene Style
Sheets zu erstellen ist recht simpel. Man braucht eigentlich nur ein
paar HTML Kenntnisse, um loszulegen. Ein Beispiel: Um die Textfarbe
einer Überschrift 1. Ordnung H1
festzulegen, benutzt man
diese Regel:
H1 { color: red }
Das Beispiel
oben ist eine einfache CSS Regel. So eine Regel besteht aus zwei Hauptteilen,
dem Selektor H1
und der Deklaration color: red
.
Die Deklaration besteht ebenfalls aus zwei Teilen, der Eigenschaft color
und dem Wert red
. Daraus ergibt sich dann folgender Syntax:
SELEKTOR { Eigenschaft: Wert }
Der Selektor
H1
ist die Verbindung zwischen HTML und dem Style Sheet,
und alle gültigen HTML Elemente sind mögliche Selektoren.
Die Eigenschaft 'color' ist nur eine von vielen Eigenschaften, mit denen man das Aussehen des HTML Dokumentes beeinflussen kann. Eine Liste der möglichen Eigenschaften mit ihren möglichen Werten findet sich später in diesem Tutorial.
Einbinden in HTML
Um Style Sheets auch nutzen zu können, muss man sie im Html Dokument einbinden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <HTML> <HEAD> <TITLE>Dokument Titel</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="http://imported.com/blues.css" TITLE="Blues"> <STYLE TYPE="text/css"> @import url(http://imported.com/basics.css); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Die Überschrift ist blau</H1> <P STYLE="color: red">Und der Paragraph ist Rot. </BODY> </HTML>
Dieses Beispiel
gibt 4 Möglichkeiten, wie man CSS mit HTML verbinden kann. Das Link
Element um auf ein externes Style Sheet zu verweisen, ein Style
Element innerhalb des Head
Elementes, ein importiertes
Style Sheet, mit der @import
Notation und ein Style
Attribut im Body
.
Die Style Sheets
die mit Link
referenziert wurden, sind optionale, vom Benutzer
auswählbare Style Sheets, während die mit @import
importierten
Style Sheets auf jeden Fall in das Dokument implementiert werden.
Das Style Element dient zur lokalen Deklaration von CSS Regeln. Hier sollte man alles Seitenspezifische deklarieren, um speziellen Elementen ein besonderes Aussehen zu verleihen.
Da ältere Browser
das Style
Element nicht kennen, kann man den Inhalt mit
Kommentaren verstecken, damit diese Browser den Inhalt nicht als Text
anzeigen.
<STYLE TYPE="text/css"><!-- H1 { color: green } --></STYLE>
Mit dem Style Attrbut kann man dann jedes Einzelne HTML Element (außer BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE und TITLE) ein bestimmtes Aussehen zuweisen. Diese Eigenschaften gelten dann nur für dieses eine auftauchen des Elements und andere, gleiche Elemente ohne Style Attribut werden normal angezeigt.
Gruppieren der Styles
Um Styles Sheets möglichst klein zu halten, kann man Selektoren in Gruppen zusammenfasen, indem man sie mit mit Kommata vor der Deklaration trennt:
H1, H2, H3, DIV { font-family: Arial }
Ähnlich kann man auch mehrere Eigenschaften zusammenfassen:
H1 { font-weight: bold; font-size: 12px; line-height: 14px; font-family: helvetica; }
Zusätzlich haben einige Eigenschaften ihren eigenen Gruppierungssyntax:
H1 { font: bold 12px/14px helvetica }
Das Beispiel ist mit dem oberen identisch.
Vererbung
Im ersten Beispiel
wurde die Farbe des Elements H1
auf die Farbe Rot gesetzt.
Mal angenommen in dem Element H1
taucht nun ein mit EM
hervorgehobenes Wort auf z.B.
<H1>Dieses Wort <EM>ist</EM> wichtig</H1>
Wenn EM
keine Farbe zugewiesen wurde, so erbt dieses Element von ihrem übergeordnetem
Element, also die Farbe Rot. Viele andere Eigenschaften wie font-family
oder font-size
werden vergleichbar vererbt.
Um so z.B. für das gesamte Dokument eine einheitliche Schrift zu bestimmen kann man schreiben:
BODY { font-family: Arial; color: blue; background: url(hintergrund.gif); }
Es gibt auch
Eigenschaften die nicht vererbt werden, so z.B. die background
Eigenschaft, wobei es eigentlich egal ist, ob diese Eigenschaft vererbt
wird, oder nicht, da der Hintergrund des übergeordneten Elementes sowieso
durchscheint.
Oftmals ist es auch sinnvoll eine Eigenschaft als Prozentangabe anzugeben, die sich dann auf eine andere Eigenschaft bezieht, z.B.:
P { font-size: 10pt } P { line-height: 120% } /* relativ zur 'font-size', also 12pt */
Wenn nun Elemente
diesem P
untergeordnet werden, dann übernehmen diese den
absoluten line-height
Wert (also 12pt) und nicht den relativen
von 120%.
Attribut 'Class' als Selektor
Um den Einsatz
von Styles möglichst flexibel zu gestalten, gibt es das Html Attribut
Class
. Für alle Elemente innerhalb von Body
kann das Attribut definiert werden, und die Klasse (Class) kann im Style
Sheet deklariert werden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <HTML> <HEAD> <TITLE>Titel</TITLE> <STYLE TYPE="text/css"> H1.green { color: green } </STYLE> </HEAD> <BODY> <H1 CLASS="green">Eine grüne Überschrift</H1> <H1>Eine Normale Überschrift</H1> </BODY> </HTML>
Für Class-Selektoren
gelten die gleichen Vererbungsregeln, d.h. ein mit EM
hervorgehobener
Teil innerhalb von <H1 Class="green"> wird ebenfalls grün.
Man kann die Klassen auch für alle Elemente deklarieren:
.green { color: green } /* Für alle Elemente mit CLASS=green */
Attribut 'Id' als Selektor
Das HTML Attribut 'Id' kann ebenfalls als Selektor verwand werden. Der Unterschied zu 'Class' besteht darin, das ein 'Id' ein Unikat in dem Dokument sein muss, also jeder Wert für 'Id' darf nur einmal auftauchen. Ihnen bekommt daher eine besondere Bedeutung zu. Deklariert werden 'Id' Selektoren mit einem vorangestelltem '#'
#Wide { letter-spacing: 0.3em } H1#Wide { letter-spacing: 0.5em }
Im ersten Beispiel
bekommt z.B. ein <P ID="Wide">Wide Text</P> ein letter-spacing
von 0.3em. Im zweiten Beispiel gilt es nur für ein H1
Element
mit dem Atrribut 'Id=Wide', daß dann ein letter-spacing
von 0.5em bekommt.
Kontextabhängige Selektoren
Die Vererbung
von Eigenschaften erspart einem viel Tipparbeit. Man definiert Standardeigenschaften
und behandelt Ausnahmen separat. Wenn man z.B. dem Element EM
innerhalb von H1
ein besonderes Aussehen verliehen will,
kann man schreiben:
H1 { color: blue } EM { color: red }
Jetzt wird das
Element EM
innerhalb von H1
wie gewollt rot
dargestellt, aber überall sonst im Dokument auch. Um das zu verhindern
kann man die Styles abhängig von ihrem Auftauchen deklarieren.
H1 EM { color: red }
Wenn jetzt der
Hierarchie entsprechend ein EM
innerhalb von H1
gefunden wird, so wird das rot dargestellt, sonst nicht.
Das ganze kann man dann auch noch weiter verschachteln, z.B.:
DIV H1 EM { color: #ff00ff }
Kontextabhängige
Selektoren können von Elementen, Class
Attributen, Id
Attributen oder Kombinationen daraus abhängig gemacht werden, z.B.:
DIV P { font: small sans-serif } .green H1 { color: blue } #x78y CODE { background: blue } DIV.sidenote H1 { font-size: large }
Bedeutet soviel wie: P in DIV bekommt kleine sans-serif Schrift; H1 innerhalb von Class=green wird blau gefärbt; CODE innerhalb von ID="#x78y" bekommt blauen Hintergrund; H1 innerhalb von DIV mit Class=sidenote wird groß dargestellt.
Ebenso wie auch normale Selektoren, können kontextabhängige Selektoren gruppiert werden:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Was dasselbe ist, wie:
H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red }
Kommentare
Kommentare in CSS sind denen in Programmiersprachen wie C sehr ähnlich:
A { color: green } /* Linkfarbe ist grün */
CSS Kommenatare können nicht ineinander verschachtelt werden, und Kommentare wie man sie von JavaScript her kennt ala '// Kommentar' sind auch nicht zulässig.
Design by KrisKaos und Lobi