Einstieg in CSS

Einstieg in CSS CSS ist nunmehr auch schon etwas älter. CSS läuft jedem
Surfer täglich über den Weg. In dieser CSS Einführung
wollen wir Sie ein wenig in die Technik, bzw. die Arbeitsweise mit
CSS einführen.

CSS steht für Cascading Style Sheets, und sollen das Leben
eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird
von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt.
CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt.
Der IE 6 hängt noch ein wenig nach.
Über CSS kann man das Aussehen von bestimmten HTML Elementen
definieren.

Ein einfaches Beispiel:

<p><font color="#ff0000">Ein Text</font></p>

Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden,
z.B. in einem Menü, oder einem anderen Element. Möchten
Sie nun, das der Text blau dargestellt wird, dann müssten Sie
in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
Dies ist schon viel Aufwand, doch stellen Sie sich das einmal
bei 100, 200 oder gar 300 Unterseiten vor?

Die Lösung bringt CSS mit sich. Über CSS kann man, wie
bereits erwähnt das Aussehen, also die Formatierung von Elementen
definieren. Folgende CSS Anweisung würde das oben beschriebene
Problem lösen:

p
{color: #0000ff }

Diese CSS Anweisung wird in einer Datei *.css gespeichert,
und in die jeweiligen HTML Dateien über eine Anweisung im <head>
Bereich (siehe unten) eingebunden. Sie definiert, das alle <p>
Tags blau dargestellt werden.

Stylesheets einbinden

Eine CSS Style Definition kann auf zwei Möglichkeiten in eine
HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das
die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen,
oder, das die Styleanweisungen im <head> Bereich jeder
Seite definiert werden.
Eine weitere Möglichkeit, ist die Verwendung des style-Attributes
bei HTML Tags, die auf diese Weise direkt formatiert werden.

1. Einbindung einer ausgelagerten CSS Datei:
<link rel="stylesheet" href="style.css"
type="text/css">

Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die
die Style-Definitionen verwenden soll. Über das href-Attribut
wird auf die Adresse der Stylesheet Datei verwiesen.

2. Styledefinition im head-Bereich
Die Styledefinitionen im <head> Bereich werden durch den <style>
Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden
werden:

<style type="text/css">
p
{color: #0000ff}

</style>

Hierbei steht man natürlich wiederum vor der Problematik, dass
das Stylesheet bei einer Änderung in jeder Datei geändert
werden muss.

3. Styledefinitionen bei einem Element
Man kann CSS Style, durch das style-Attribut direkt bei einem Element
definieren. Das obere Beispiel würde wie folgt aussehen:
<p style="color: #0000ff">Der Text</p>

Elemente und Klassen

Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können
Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren.
So definiert folgende CSS Anweisung, das alle Überschriften
(<h1>) Rot sein sollen.

h1
{ color: #ff0000 }


Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften
definieren möchten. So soll z.B. eine Überschrift grün,
die andere Rot sein.
Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen
definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie
gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen
werden, wenn dieses Element über die jeweilige Klasse definiert
werden soll.

Ein Beispiel veranschaulicht dies:

style.css

.rot
{color: #ff0000}

.gruen
{color: #00ff00}


css_1.html

<html><head>
<title>
CSS - Beispiel 2
</title>
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>
<h1 class="rot">Rote Ueberschrift</h1>
<h1 class="gruen">Gruene Ueberschrift</h1>
</body>
</html>

Das Ergebnis im Browser (kann man sich schon vorstellen):
CSS Klassen anwenden

CSS Klassen anwenden

Über die class-Attribute muss also auf die Klassendefinition
in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt
mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.

Was ist nun eine Klasse erster Ebene?

Eine Klasse erster Ebene ist für alle HTML Tags, die sich im
<body> Bereich befinden, anwendbar.
Man kann auch Klassen definieren, die sich nur auf einen HTML Tag
beschränken. Die Klasse kann dann von anderen Tags nicht mehr
aufgerufen werden.
Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen.
Dabei müssen Sie die Klassendefinitonen wie folgt verändern.

style.css
h1.rot
{color: #ff0000}

h1.gruen
{color: #00ff00}

Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese
Klassen können jedoch nur von <h1> Tags aufgerufen werden.
Ein Aufruf z.B. über <p class="rot">
würde nicht "funktionieren".

Mehrere HTML Befehle "gleichzeitig" definieren

Man kann auch mehrere HTML Befehle "in einem" über
CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein
für Überschriften. Folgende CSS Definition definiert,
das die h1-h6 Tags alle Grün dargestellt werden sollen.

h1, h2, h3, h4, h5, h6
{color: #00ff00 }

Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren
möchte, z.B. die Schriftart, dann kann man diese Definition
einfach darunter setzten.

style.css

h1, h2, h3, h4, h5, h6
{color: #00ff00 }

h2
{font-family: Arial}


css_2.html

<html><head>
<title>
CSS - Beispiel 3
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h1>
</body>
</html>

Das Ergebnis sieht im Browser wie folgt aus:

Verschachtelte CSS Anweisungen

Verschachtelte CSS Anweisungen

Zunächst werden alle Überschriften so definiert, das die
Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell
die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart
Arial sein soll.

Kommentare in CSS

Ja, innerhalb einer Styledefinition können Sie Kommentare
verwenden, diese dienen dem besseren Verständnis des CSS Codes.
Kommentare werden vom Browser, der den CSS Code interpretiert einfach
übersehen.

h1
{ color: #ff0000 }
/* dies ist ein Kommentar */

So, jetzt haben Sie einen Einblick in die Arbeit mit CSS bekommen.
Mit unserer CSS Referenz können Sie bestimmt bald CSS richtig
anwenden.

This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *