Heldenshop.de Anime Illustion Affiliate werden Affiliate werden
Affiliate werden Affiliate werden Affiliate werden Affiliate werden

Tutorials – Webdesign

Vermischtes, eure Wünsche  |  

13. CSS – Einstieg (Syntax, Definition, Selektoren)

Syntax
Definieren von Stylesheets
Arten von 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 CSS

Der grundlegende Aufbau einer CSS-Anweisung unterscheidet sich vom Aufbau eines HTML-Tags:

CSS-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:

CSS-Code:

selektor {
  attribut: wert;
  attribut: wert;
  attribut: wert;
}



Definieren von Stylesheets

Stylesheets 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:

HTML-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:

HTML-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:

HTML-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 Selektoren

Grundsätzlich gibt es 4 verschiedene Arten von Selektoren, wobei einige erweiterbar sind.


Elementselektoren
Hier stehen euch alle bekannten HTML-Elemente zur Verfügung: h1, body, td... Der definierte Style gilt dann genau für dieses Element.
Beispiel:

CSS-Code:

p { color: black; }

setzt die Schriftfarbe aller p-Elemente (Absatz) auf schwarz.

CSS-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:

CSS-Code:

h1, h2, h3 { color: red; }

Die überschriften h1-h3 werden nun in roter Schrift angezeigt.


Klassenselektoren
Die 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:

CSS-Code:

.zitat { font-style: italic; }

Jedes beliebige HTML-Element, dem die Klasse "zitat" zugewiesen wird, erscheint so kursiv, z.B.:

HTML-Code:

Das ist ein <span class="zitat">lehrreiches Zitat</span> von Schiller.

"lehrreiches Zitat" wird kursiv angezeigt.


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:

CSS-Code:

h1.wichtig {color: red; }

HTML-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:

HTML-Code:

<h1 class="zitat wichtig">Wichtige und zitierte überschrift</h1>


ID-Selektoren
Werden 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:

CSS-Code:

#navigation { background-color: red; }

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.


Pseudoformate
Pseudoformate 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:

CSS-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:

CSS-Code:

h2 a { color: blue; }

Definiert alle Links innerhalb eines h2-Elements blau.

CSS-Code:

#content a { color: green; }

Gibt allen Links im DIV-Container mit der id "content" eine grüne Schriftfarbe.

CSS-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>


nach oben

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
© since 2002 by Otaku-Welt.de