CSS

Im Modul "Design" können Sie Ihr Layout auch direkt in CSS bearbeiten.

Mit dem Stylesheet-Editor kann das CSS des Layouts komfortabel geändert werden. Auch in den Element-Einstellungen kann CSS bearbeitet werden.

Webseiten mit CSS

Im folgenden geben wir Ihnen einen kurzen Überblick über den Aufbau von Webseiten mit CSS. Wie bei Formatvorlagen in Textverarbeitungsprogrammen werden mit CSS (Cascading Style Sheets) Formatierungen für Webseiten zentral festgelegt. Damit können Änderungen, die auf allen Seiten umgesetzt werden sollen, an einer Stelle vorgenommen werden. CSS werden in separaten Dateien mit der Endung .css geschrieben und über einen Verweis im Quelltext einer Webseite verlinkt. Beim Laden der Seite werden alle Informationen aus der CSS-Datei abgefragt. In CSS bestehen Stylesheet-Angaben aus einer Eigenschaft (z.B. color für Schriftfarbe), einem Doppelpunkt, dem Wert (z.B. #000000 - hexadezimaler Wert für die Farbe Schwarz) und einem abschließenden Semikolon. Die CSS-konforme Angabe für schwarze Schrift wäre demnach:

color:#000000;

Selektoren

Cascading Style Sheets arbeiten mit Selektoren, die bestimmte HTML-Elemente einer Webseite auswählen und formatieren. Soll z.B. die Überschrift formatiert werden, sucht ein Selektor beim Laden der Seite nach dem HTML-Tag <h1> und verknüpft ihn mit einer in CSS definierten Formatierung.

Typ-Selektoren

Die einfachsten Selektoren sind Typ-Selektoren. Der Name eines Typ-Selektors entspricht dem HTML-Tag, der formatiert werden soll ohne Spitzklammern. Anhand des Selektornamens wird der HTML-Tag beim Seitenaufbau identifiziert. Die komplette Anweisung wird in CSS wie folgt geschrieben:

Selektor {Eigenschaft:Wert;}

Eine schwarze Überschrift würde mit einem Typ-Selektor in CSS also wie folgt angegeben werden:

h1 {color:#000000;}

Ein Selektor kann eine unbegrenzte Anzahl von Formatangaben beinhalten. Soll die Überschrift z.B. schwarz und 14 Pixel groß sein, wird diese zusätzliche Formatierung wie folgt im Selektor angegeben:

h1 {
color:#000000;
font-size:1px;
}

Class-Selektoren

Zusätzliche Formatierungsmöglichkeiten ergeben sich mit Class-Selektoren. Um mit Class-Selektoren HTML-Tags zu identifizieren, ist vorausgesetzt, dass der HTML-Tag ein Attribut mit dem Namen class besitzt. Sollen auf Seiten z.B. Überschriften wie oben beschrieben mit Typ-Selektoren formatiert werden, und einige davon gerahmt dargestellt werden, würden die HTML-Tags dafür wie folgt aufgebaut werden:

<h1 class="rahmen">

Der Class-Selektor identifiziert einen HTML-Tag über dieses Attribut. Der Selektorname entspricht dabei dem Wert, der dem Attribut class im Tag zugewiesen wird - in unserem Beispiel dem Wert "rahmen". Class-Selektoren werden in CSS mit einem Punkt vor dem Namen geschrieben. Die komplette Angabe für zusätzlich gerahmte Überschriften wäre in CSS:

h1.border {border:1px solid #000000;}

Lässt man die Typ-Selektor Angabe in CSS weg, wird der Class-Selektor auf alle HTML-Elemente angewendet, bei denen das class-Attribut mit dem entsprechenden Wert gefunden wird.

.border {border:1px solid #000000;}

Class-Selektoren haben eine höhere Priorität als Typ-Selektoren.

ID-Selektoren

Auch ID-Selektoren identifizieren HTML-Tags über ein Attribut. Damit ein HTML-Element innerhalb einer Webseite eindeutig ist, darf eine ID nur einmal verwendet werden. ID-Selektoren werden häufig im Zusammenhang mit JavaScript eingesetzt. Sie beginnen mit einer Raute.

div#navigation1

Hier der ID-Selektor im HTML:

<div id="navigation1">

ID-Selektoren haben eine höhere Priorität als Class-Selektoren.

Universal-Selektoren

Der Universal-Selektor wird mit einem Sternchen gesetzt und auf alle HTML-Elemente einer Website angewendet.

* {color:red;}

Der Universal-Selektor wird sehr selten verwendet, da es meistens nicht gewünscht ist, eine Stilregel auf alle HTML-Elemente anzuwenden. Ein denkbares Beispiel wäre das Entfernen von Abständen (padding und margin auf 0 setzen) bei allen HTML-Elementen einer Website.

Vererbung

In einem HTML-Dokument haben HTML-Tags immer ein Eltern-Kind-Verhältnis. Der <title>-Tag zum Beispiel ist immer ein Kind des <head>-Tags - er ist im <head>-Tag platziert.

<head>
	<title>
	</title>
</head>

Kind-Elemente erben die Styles, die für das Eltern-Element definiert wurden. Wird dem <head>-Tag z.B. die Schriftfarbe Grün zugewiesen, wäre auch die Schriftfarbe des <title>-Tags grün, außer, ihm wird explizit eine eigene Farbe zugewiesen.

Boxmodell

Nach den CSS-Regeln hat jedes Element einen rechteckigen Bereich, der in weitere Einzelbereiche eingeteilt ist.

Der Abstand des eigentlichen Inhalts zu einem anderen Element kann zum einen über den Innenabstand(Padding) von Inhalt zu Rahmen festgelegt werden. Zum anderen kann die Breite des Rahmens definiert werden. Als dritte Größe beeinflusst der Außenabstand den Abstand des Inhalts von anderen Elementen. Wenn man in einem HTML-Element also einen Abstand von jeweils 3 Pixel bei den Attributen Padding, Boder und Margin definiert, hätte der Inhalt bei diesem Element einen Gesamtabstand von 9 Pixel vom nächsten angrenzenden Element.

Weitere Informationen

selfhtml.wiki
CSS 4 you
Mediaevent