[[XHTML]] <- [[..:..:Informatik-Buch:]], [[..:Informationsverarbeitung:]], [[Darstellung von Information]] -> [[Binä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: <code html>
<link href="format.css" type="text/css" rel="stylesheet"/>
</code> 

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:

<code CSS>
h3 {
    color : #0000FF;
}

img {
    display : block;
    margin: auto;
}
</code> 
Die Erläuterung:

  * Zunächst kommt der Name des tags, dessen Verhalten geändert werden soll.
  * In geschweifte Klammer eingeschlossen folgen die Attribute mit ihren neuen Werten, getrennt durch Semikolons.
  * Im Beispiel wird die Schriftfarbe der 3.-größten Überschrift auf blau gesetzt. Bilder werden in einer einzelnen Zeile (display:block) zentriert (beide Ränder auf Automatik) dargestellt. 




===== 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:
<code html>
<style type="text/css">
    h3 {
        color : #0000FF;
    }

    img {
        display : block;
        margin: auto;
    }
</style>
</code>
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:
<code html>
<h1 style="color:#00ff00">Hier ist eine grüne Überschrift</h1>
</code>
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 |