CSS: Unterschied zwischen den Versionen
K |
|||
| Zeile 41: | Zeile 41: | ||
== Weblinks == | == Weblinks == | ||
http://de.selfhtml.org/css/index.htm ein nützliches Nachschlagewerk für CSS-Befehle | http://de.selfhtml.org/css/index.htm ein nützliches Nachschlagewerk für CSS-Befehle | ||
[[Kategorie:Programmieren und Webdesign]] | |||
Version vom 11. August 2007, 18:39 Uhr
CSS ist die Abkürzung für Cascading Stylesheets. Sie dienen dazu, den Style von HTML-Elementen zu definieren.
Warum CSS?
Es gibt viele Gründe, CSS anstelle von HTML-Styles zu verwenden. Beispielsweise kann man über eine externe CSS-Datei, die man in allen Seiten einer Homepage einbindet, den gesamten Style bestimmen. Will man das Design verändern reicht eine einzige Änderung in dieser Datei. Weiterhin lassen es sich alle CSS-Befehle auf nahezu jedes HTML-Tag anwenden. Während mit reinem HTML beispielsweise die Textfarbe nur in font-Tags angegeben werden kann, ist die CSS-Angabe für fast alle Elemente möglich (Tabellen, Text-Absätze, Buttons, Eingabefelder, usw.).
Wie verwende ich es?
CSS-Codes werden, vergleichbar mit Javascript, entweder in einer externen Datei abgelegt und im Head des Dokuments verlinkt.
Das kann so aussehen:
<link rel="stylesheet" type="text/css" href="/style.css">
Oder sie werden direkt in den HTML-Code eingebunden. Dazu wird entweder ein style-Tag im Head genutzt,
<style type="text/css">
body {
background-color: #ff6600; /* Hintergrundfarbe: orange */
color: #00ffff; /* Textfarbe: türkis */
text-align: center; /* Ausrichtung: Zentriert */
}
</style>
oder das style-Attribut direkt im betroffenen HTML-Tag.
<body style="background-color: #ff6600; color: #00ffff; text-align: center;">
Die beiden Beispiele bewirken das gleiche. Eine Angabe im Head bietet aber mehr Möglichkeiten, z.B. Mouse-Over-Effekte und Bestimmen von CSS-Klassen.
Von Webkicks' Seite wird im Chat auch CSS angewandt. Sowohl für die Nutzer als auch für die Administratoren hat das aber wenig Bedeutung.
Selbst können Admins beispielsweise Stylesheets in der Ankündigung einsetzen um das Hintergrundbild zu fixieren:
<style type="text/css">body{background-attachment: fixed;}</style>
Genaugenommen sind solche Angaben nicht Standardgerecht, da sich die Ankündigung im Body des Dokuments befindet und diese Form der CSS-Angaben in den Head gehört, die Browser tolerieren das jedoch in der Regel ohne Probleme.
Weblinks
http://de.selfhtml.org/css/index.htm ein nützliches Nachschlagewerk für CSS-Befehle