Inhaltsverzeichnis

XHTMLInformatik-Buch, Informationsverarbeitung, Darstellung von InformationBinärsystem

CSS

Im Abschnitt XHTML wird dargestellt, wie man im WWW Informationen darstellen kann. Das Layout der Seiten sollte aus den genannten Gründen mit Hilfe von CSS gestaltet werden. Dazu gibt es grundsätzlich zwei verschiedene Möglichkeiten. Die Entscheidung, welche von beiden vorzuziehen ist, ergibt sich aus der Wiederverwendbarkeit.

CSS für mehrere Seiten

Möchte man ein grundsätzliches Fromat für viele Seiten festlegen, liegt es nah, dass die Formate in einer speziellen CSS-Datei (siehe XHTML) niedergeschrieben werden und von den entsprechenden Seiten durch folgenden Eintrag im head eingebunden wird:

<link href="format.css" type="text/css" rel="stylesheet"/>

Die Datei hat kein umfassendes Grundgerüst, sondern besteht aus einer Auflistung von tags, deren Standardverhalten geändert wird. Wird eine CSS-Datei wie beschrieben in XHTML eingebunden, so wird die Datei beispielsweise wie folgt aufgebaut:

h3 {
    color : #0000FF;
}
 
img {
    display : block;
    margin: auto;
}

Die Erläuterung:

CSS für eine Seite

Für einseitige Homepages oder Spezialanpassungen ist es unnötig eine komplette CSS-Datei anzulegen. Man kann die oben aufgeführten Änderungen am Layout auch innerhalb der HTML-Datei direkt notieren. Der folgende Code wird dann im head eingefügt:

<style type="text/css">
    h3 {
        color : #0000FF;
    }
 
    img {
        display : block;
        margin: auto;
    }
</style>

So definierte Formate müssen dann natürlich für jede Seite einzeln notiert werden.

CSS für einen tag

Manchmal ist es notwendig einem Befehl ein spezielles Format zu verpassen, dass nicht überall gelten soll. Auch hier muss man nicht auf CSS verzichten. Beispielsweise kann eine Überschrift eine eigene Farbe erhalten:

<h1 style="color:#00ff00">Hier ist eine grüne Überschrift</h1>

Mehrere Optionen können in den Anführungszeichen durch Semikolons getrennt werden.

CSS-tags

Befehl Bedeutung weitere mögliche Angaben
Schrift
font-family Schriftart Arial, Times New Roman, etc.
font-size Schriftgröße numerischer Wert in pt(Punkt) mm oder cm
color Schriftfarbe red, green, white usw. oder HTML Farbangabe
font-variant Schriftvariante normal, small-caps
font-weight Schriftgewicht normal, bold, bolder, lighter
font-style Schriftstil normal, oblique, italic
Textgestaltung
text-align Textausrichtung left, right, center, justify (Blocksatz)
line-height Zeilenabstand (Durchschuß) numerischer Wert in pt(Punkt) mm oder cm
text-decoration Textgestaltung underline, overline, line-through, blink
word-spacing Wortabstand numerischer Wert in pt(Punkt) mm oder cm
letter-spacing Zeichenabstand numerischer Wert in pt(Punkt) mm oder cm
text-indent Texteinrückung numerischer Wert in pt(Punkt) mm oder cm
text-transform Textart capitalize, uppercase, lowercase, none
Seitenränder
margin-left absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
margin-right absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
margin-bottom absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
margin-top absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
Links
A:link Link fast alle CSS-Befehle anwendbar
A:visited Besuchter Link fast alle CSS-Befehle anwendbar
A:active Angeklickter Link fast alle CSS-Befehle anwendbar
A:hover Link beim Überfahren mit Maus fast alle CSS-Befehle anwendbar
Bilder
background Hintergrundfarbe red, green, white usw. oder HTML Farbangabe
background-image Hintergrundbild none, URL
background-repeat Kachel repeat, repeat-x, repeat-y, no-repeat
Ränder
border-top-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-bottom-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-left-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-right-width: Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-style Rahmentyp none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color Rahmenfarbe Farbname oder Hex.
padding-top Tabellenabstand oben Prozent oder num. Wert.
padding-bottom Tabellenabstand unten Prozent oder num. Wert.
padding-right Tabellenabstand rechts Prozent oder num. Wert.
padding-left Tabellenabstand links Prozent oder num. Wert.
width Rahmenbreite Auto, Prozent, num. Wert
height Rahmenhöhe Auto, Prozent, num. Wert