Partner & Ads


media-products.de Partner-Banner
de.creativecommons.org Partner-Banner

Codeschnipsel

Zurück zur Übersicht

Formatierung mit CSS

Fragen oder Anmerkungen zum diesem Codeschnipsel?
Im zugehörigen Diskussionsthema im Support-Forum wird Ihnen weitergeholfen!

Der Einsatz von Cascading Style Sheets ermöglicht die Trennung von Inhalt und Gestaltung. CSS ist eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente.

Cascading Style Sheets
Grundidee beim Entwurf von CSS war es, mittels HTML oder XML nur die inhaltliche Untergliederung eines Dokumentes und die Bedeutung seiner Teile zu beschreiben, während mittels CSS weitgehend unabhängig davon die konkrete Darstellung (Farben, Layout, Schrifteigenschaften usw.) der Teile festgelegt wird. Elemente eines Dokumentes können z. B. aufgrund ihres Elementnamens (z. B. alle Link-Elemente), ihrer ID oder auch aufgrund ihrer Position in diesem Dokument (z. B. alle Bildelemente innerhalb von Linkelementen) identifiziert werden.

Dies ist ein Auszug aus dem Artikel Cascading Style Sheets aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. In der Wikipedia ist eine Liste der Autoren verfügbar.

Normalerweise werden CSS-Eigenschaften in einer externen Datei definiert, welche dann in die HTML-Dateien eingebunden wird. Dies hat den Vorteil, dass man durch das Ändern einer Datei das Aussehen aller Anderen ebenfalls beeinflusst.
Die externe Datei wird mit folgendem Code im -Bereich des HTML-Dokuments eingebunden:

<head> 
<link rel="stylesheet" media="all" href="style.css" type="text/css" />
<!-- style.css gibt den Namen der Datei an, in welcher die Eigenschaften definiert werden --> 
</head>

Nun muss die Datei style.css mit einem Editor erstellt werden.

jsFiddle

Die folgende Demonstration können Sie auch direkt online ausprobieren und die verschiedenen CSS-Parameter verändern:
jsFiddle aufrufen
Es öffnet sich ein neues Browserfenster mit vier Boxen. Die Box oben links enthält den HTML-Code, die Box oben rechts den CSS-Code. Ein Klick auf den Run-Button oben links zeigt in der Box unten rechts das jeweilige Ergebnis an.
Alle Änderungen, die Sie am HTML- oder CSS-Code vornehmen, können Sie so direkt in der Box unten rechts immer betrachten.
Eine entsprechende Demonstration zum selber testen ist auch am Ende dieses Codeschnipsels eingebunden.

In dieser kurzen Demonstration wollen wir darin das Aussehen von Überschriften erster Ordnung (h1) beeinflussen und verwenden dazu folgenden CSS-Code:

h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color:#FF0000
}

Das sorgt dafür, dass alle h1-Überschriften unserer Seite mit einer Schriftgröße von 20px in Verdana und in roter Farbe dargestellt werden.
Gleiches kann auch für die Überschriften h2, h3, etc. und für alle anderen HTML-tags (z.B. b, i, a etc.) gemacht werden:

h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color:#00FF00
}

Wie schon gesagt können mit CSS beliebige HTML-Elemente gestaltet werden. Dazu zählen auch Links () in verschiedenen Zuständen:

/* Links */
a:link {
    color:#000099;
    font-weight: bold;
    text-decoration:underline;
}
/* bereits besuchte Links */
a:visited {
    color:#0000FF;
    font-weight: bold;
    text-decoration:none;
}
/* Links beim darüberfahren mit der Maus */
a:hover {
    color:#FF0000;
    text-decoration:none;
}
/* aktive Links */
a:active {
    color:#000000;
    text-decoration:none;
}

Eine weitere Möglichkeit ist der Einsatz von sog. Klassen. Dadurch ist es möglich Eigenschaften unabhängig von einem bestimmten HTML-Element zu definieren, sondern die Eigenschaften werden auf alle Elemente jeden Typs angewendet, die der entsprechenden Klasse zugewiesen wurden. Ein Beispiel:

<p>Ein <i class="klasse1">Text</i> mit <b class="klasse1">verschiedenen</b> <span class="klasse1">Auszeichnungselementen</span></p>
.klasse1 {
    text-decoration: underline;
}

Alle Elemente, die in ihrem HTML-Tag die Klasse klasse1 erhalten haben, werden nun unterstrichen dargestellt. Die übrigen Eigenschaften der Elemente (z.B. Fett für den b-Tag oder italic für i) bleiben davon unberührt.
Es gibt allerdings auch die Möglichkeit nur bestimmte HTML-Tags mit einer bestimmten Klasse anzusprechen:

span.klasse2 {
    text-decoration: overline;
}

Die Eigenschaft overline hat nun nur Auswirkungen auf das HTML-Element span mit der Klasse klasse2. Alle anderen Elemente bleiben davon unberührt (s. Demo).

Online-Demo

Probieren Sie es aus und verändern Sie die CSS-Parameter oder fügen Sie weitere hinzu:

Weiterführende Informationen

Zurück zur Übersicht

Zum Diskussionsthema
Download
Demo
Git

Dieser Beitrag ist unter der Creative Commons Namensnennung 3.0 Deutschland lizensiert.
Bearbeitung, Nutzung & Verbreitung ist ausdrücklich gestattet.