CSS
Einführung
Im Intrexx Modul
Design können Sie Ihr
Layout auch direkt in CSS bearbeiten. Beachten Sie dabei bitte, dass fehlerhafte Angaben
in CSS zu Fehlern in Ihrem Portal führen. Für
versierte Administratoren bietet Intrexx sehr flexible Möglichkeiten,
kompakte, zeitgemäße Webseiten mit einer hohen
Performance zu gestalten. So steht im Modul
Design auch ein
CSS-Editor zur Verfügung, in dem Sie Änderungen komfortabel
vornehmen können. Auch in den Element-Einstellungen haben Sie die
Möglichkeit, direkt in CSS zu schreiben. 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.rahmen {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.
.rahmen {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.
Auf diesen Webseiten finden Sie weitere allgemeine Informationen zu
diesem Thema:
selfhtml.wiki
CSS 4 you
Mediaevent