13 - CSS: Einstieg (Syntax, Definition, Selektoren)CSS steht für "
Cascading Style Sheets" und gehört nicht direkt zu HTML. Es ist eine Formatierungssprache, die HTML
ergänzt.
Der Sinn von Stylesheets ist, den Inhalt einer Webseite vom Design zu trennen: das ermöglicht mehr
Gestaltungsmöglichkeiten, eine bessere Angepasstheit an Suchmaschinen, einen schlanken Quelltext und – besonders für
Webdesigner vorteilhaft – mit wenigen Handgriffen kann das komplette Design einer Website überarbeitet und verändert werden.
Ein weiterer
Vorteil besteht darin, dass wiederkehrende Elemente (z.B. Schriftarten, Überschriftenformatierung usw.)
zentral
definiert werden – so entfallen die ganzen <font>-Tags usw. im HTML.
Desweiteren ist es mit CSS möglich, für
verschiedene Ausgabemedien (Monitor, Beamer, Drucker, PDA etc.) unterschiedliche
Darstellungen vorzugeben – besonders interessant ist hier die Ausgabe für den Drucker (Header, Navigationen usw. sollen ja
schließlich nicht mitgedruckt werden – dazu gibt es später ein Einzel-Tutorial).
Zusammenfassend kann man also sagen: mit CSS kann man HTML-Elemente (Tabellen, Absätze, Container, Listen etc. pp)
Aussehen verleihen (Hintergrund, Farben, Rahmen, Position, Überlappung, Abstand...). Dieses Aussehen wird z.B. in einer zentralen
Datei definiert und kann so auf beliebig viele HTML-Seiten angewendet werden.
Syntax von CSSDer grundlegende
Aufbau einer CSS-Anweisung unterscheidet sich vom Aufbau eines HTML-Tags:
- Code:
-
selektor { attribut: wert; }
Der "Selektor" wählt das gewünschte Element aus (-> er "selektiert"), das bearbeitet werden soll (z.B. alle h1-Überschriften). Einem
Attribut (z.B. font-size) wird dann ein Wert zugewiesen (bei font-size z.B. "10pt").
Natürlich kann ein Element/Selektor mehrere Attribute und Werte haben. Sie werden durch das Semikolon getrennt.
Um in einer CSS-Datei nicht den Überblick zu verlieren, schreibt man die Anweisungen untereinander:
- Code:
-
selektor {
attribut: wert;
attribut: wert;
attribut: wert;
}
Definieren von StylesheetsStylesheets können an
verschiedenen Positionen in einem Dokument stehen:
- in einer externen Datei
- im <head>-Bereich der HTML-Datei
- direkt in einem einzelnen HTML-Tag
Ich persönlich nutze für Layouts immer
Variante 1: das CSS wird in eine externe Datei ausgelagert. Diese besteht aus einer
normalen Textdatei mit der Endung .css und darf nur CSS-Anweisungen und keine HTML-Befehle enthalten. Diese Datei wird über
folgenden Code, der im <head>-Bereich der HTML-Datei eingefügt wird, eingebunden:
- Code:
-
<link rel="stylesheet" type="text/css" href="style.css">
"style.css" ist der Dateiname der externen CSS-Datei und kann natürlich benannt werden wie ihr wollt ;-) Dieser Code muss in jeder
HTML-Datei stehen, die durch das CSS "gestylt" werden soll.
Variante 2: das CSS wird in den <head>-Bereich eines Dokuments geschrieben und gilt deshalb auch nur für dieses eine
Dokument.
Dafür wird im <head> ein Style-Bereich definiert, in dem dann die CSS-Anweisungen stehen:
- Code:
-
<style type="text/css">
<!--
hier stehen die CSS-Anweisungen
-->
</style>
<!-- Text --> ist übrigens ein HTML-Kommentar, der verhindert, dass ältere Browser, die CSS nicht verstehen, die Anweisungen in
der HTML-Seite ausgeben.
Variante 3: mit dem HTML-Attribut
style="..." können
HTML-Elemente direkt mit CSS definiert werden, hier ein
Beispiel:
- Code:
-
<p>das ist ein ganz normaler Absatz</p>
<p style="font-size: 10px;">dieser Absatz hat dank CSS eine Schriftgröße von 10 Pixeln</p>
Arten von SelektorenGrundsätzlich gibt es 4 verschiedene Arten von Selektoren, wobei einige erweiterbar sind.
ElementselektorenHier stehen euch alle bekannten
HTML-Elemente zur Verfügung: h1, body, td... Der definierte Style gilt dann genau für dieses
Element.
Beispiel:
- Code:
-
p { color: black; }
Setzt die Schriftfarbe aller p-Elemente (Absatz) auf schwarz.
- Code:
-
body { font-family: arial; }
Definiert alle Schriften im Dokument als Schriftart Arial.
Es ist möglich,
mehrere Elemente nacheinander zu schreiben (durch ein Komma getrennt), wenn für sie gemeinsame
Eigenschaften gelten sollen.
Beispiel:
- Code:
-
h1, h2, h3 { color: red; }
Die Überschriften h1-h3 werden nun in roter Schrift angezeigt.
KlassenselektorenDie Definition eine Klasse beginnt mit einem
Punkt, dem ein
frei vergebbarer Name folgt (ohne Leerzeichen, keine Ziffer
zu Beginn, Zeichen a-z, Unter- & Bindestriche). Außerdem gibt es auch die Möglichkeit, Klassen nur speziellen HTML-Elementen
zuzuordnen.
Dem Element im HTML wird mit dem
Attribut class="klassenname" eine bestimmte Klasse zugewiesen. Hier kommt das
HTML-Element <span> häufig zum Einsatz, dem eine Klasse zugewiesen wird.
Beispiele:
- Code:
-
.zitat { font-style: italic; }
Jedes beliebige HTML-Element, dem die Klasse "zitat" zugewiesen wird, erscheint so kursiv, z.B.:
- Code:
-
Das ist ein <span class="zitat">lehrreiches Zitat</span> von Schiller.
-> "lehrreiches Zitat" wird kursiv angezeigt.
- Code:
-
h1.wichtig {color: red; }
Hat man schon eine allgemeine Stylezuweisung für Überschriften getätigt, braucht aber für eine bestimmte Überschrift eine
Extra-Zuweisung, vergibt man dieser einfach eine passende Klasse:
- Code:
-
<h1 class="wichtig">sehr wichtige Überschrift</h1>
Diese Klasse kann nur an h1-Elemente vergeben werden.
Ein Element kann auch
mehrere Klassen bekommen, es nimmt dann die Formatierung von beiden Klassen an:
- Code:
-
<h1 class="zitat wichtig">Wichtige und zitierte Überschrift</h1>
ID-SelektorenWerden am häufigsten zum
Layouten mit DIVs benutzt. Ein Div ist ein HTML-Element.
ID-Selektoren beginnen mit einer
Raute (#), der ein
frei vergebbarer Name folgt. Es ist wichtig, dass dieser Name
einzigartig im Dokument ist. Im HTML erhält dann das gewünschte Element das Attribut id="
name" (ohne #).
Beispiel:
- Code:
-
#navigation { background-color: red; }
(im HTML:)
- Code:
-
<div id="navigation">dies ist eine Navigation</div>
Erzeugt bei dem DIV-Element #navigation einen roten Hintergrund. Hier werden dann beim Layouten Position usw. angegeben.
PseudoformatePseudoformate sind eine Sonderform der Stylesheet-Angabe. Mit ihnen können
Links und ihre Zustände gestyled werden.
Folgende Möglichkeiten gibt es, wobei die
Reihenfolge wichtig ist:
- Code:
-
a:link { color: blue; }
a:visited { color: red; }
a:hover { color: green; }
a:active { color: yellow; }
a:link ist der Grundzustand eines Links, a:visited ist ein besuchter Link, a:hover ein Link, wenn man mit der Maus drüber fährt,
a:active ist ein Link, der gerade angeklickt wird.
Zusätzlich gibt es die
Kontextbezogenen Selektoren. Sie definieren
einzelne Elemente innerhalb eines Selektors.
Beispiele:
- Code:
-
h2 a { color: blue; }
Definiert alle Links innerhalb eines h2-Elements blau.
- Code:
-
#content a { color: green; }
Gibt allen Links im DIV-Container mit der id "content" eine grüne Schriftfarbe.
- Code:
-
.zitat a { color: grey; }
Setzt die Schriftfarbe aller Links, die in einem Element mit der Klasse "zitat" stehen, auf grau.
Praktischerweise können
IDs und Klassen miteinander kombiniert werden. Das macht sich besonders bei wechselnden
Bildern, die aber an der gleichen Stelle stehen, gut – z.B. Headerbilder, die von Unterseite zu Unterseite wechseln.
Das sieht dann so aus:
CSS:
- Code:
-
.startseite { color: red; }
.kontakt { color: green; }
HTML:
- Code:
-
<div id="header" class="startseite">der Headertext der Startseite ist rot</div>
<div id="header" class="kontakt">der Headertext der Kontaktseite ist grün</div>
~~~
So, damit wäre die Einleitung ins große Thema "CSS" geschafft. Ich hoffe, ich habe in diesem Kapitel nicht zu viel abgearbeitet - das
Ganze ist doch recht umfangreich.
Wie immer gilt: wer Fragen hat, kann mich jederzeit per eMail, Kontaktformular oder direkt hier im Forum kontaktieren.
Nächste Woche geht es dann weiter mit Attributen und Werten in CSS.
Startseite Otaku-Welt.de 
