Grundlegendes

CSS = Cascading Stylesheets
Stylesheet = Sammlung von Formatvorlagen/ CSS-Regeln
Mit CSS werden gestaltet: Farben und Schriften, Abstände und Ränder, Positionierungen
Aktuelle Version: CSS2
Wichtiger Grundsatz: Trennung von Inhalt und Layout. Das ist erst mit CSS effektiv möglich. Bsp: CSS-Zengarden

Wo können CSS-Regeln definiert werden?

Im HTML-Element:
Beispiel: <p style="color: red;"> text </p>
Im Head des HTML-Dokuments:
Bespiel: <style type="text/css"> css-regeln </style>
In externer CSS-Datei mit Pfadangabe im Head der HTML-Datei:
Pfadangabe: <link href="datei.css" rel="stylesheet" type="text/css" />

Regel: je näher die CSS-Regel am HTML-Element definiert ist, desto wichtiger.

Aufbau einer CSS-Regel:

selektor {

attribut: wert;

}

Mögliche Selektoren

Selektor

Anwendungsbeispiel

Einfache Selektoren

CSS:	h1 {color: black;}
HTML:	<h1> überschrift </h1>

Klassenselektoren
Anwendung: wenn unterschiedliche Ausprägungen eines HTML-Elements gebraucht werden.

gebunden
CSS:	h1.blau {color: blue;}
HTML:	<h1 class="blau" > überschrift </h1>

ungebunden
CSS:	.blau {color: blue;}
HTML:	<h1 class="blau" > überschrift </h1>
	<p class="blau" > absatz </p>

Pseudoklassen-Selektoren
Meist benutzt für Hyperlinks bzw. HTML-Element A. Doppelpunkt bei Definition. Pseudoklassen werden im HTML-Element nicht erwähnt. Reihenfolge einhalten!

CSS:	a:link {color: red;}
	a:visited {color: blue;}
	a:hover {color: yellow;}
	a:active {color: silver;}
HTML:	<a href="http:www.ard.de"> linktext </a>

ID-Selektoren
Dürfen nur einmal auf einer Webseite verwendet werden. Hauptanwendung für Containerdef. im Seitenlayout.

CSS:	#header {color: blue;}
HTML:	<div id="header">
	. . .
	</div>

Universal-Selektor
Wirkt auf alle HTML-Elemente. Wird meist für das Zurücksetzen von Abständen benutzt.

CSS:	* {margin: 0; padding: 0;}

Weitere Regeln:

Zwischen Wert und Maßeinheit kein Leerzeichen.
Kurzschreibweise bei manchen Attributen möglich und sinnvoll.
Beispiel: padding: 10px 20px 30px 40px;

Spezialitäten

HTML-Elemente mit mehreren Klassen möglich.
Beispiel: <p class="blau zentriert fett"> text </p>
Gruppierung von Selektoren möglich.
Beispiel: h1, h2 {color: black;}
Verschachtelung von Selektoren möglich.
Beispiel: #header h1 {color: black;}
Gruppierung von Attributen nicht möglich.
Wichtig: Semantik der HTML-Elemente einhalten!
Kommentar: /* kommentar */
Collapsing margins: bei sich berührenden vertikalen Außenabständen zweier Boxen entfällt der kleinere Wert.

CSS-Boxmodell

Grafik zum Boxmodell

Druckversion herunterladen