CSS: Unterschied zwischen den Versionen
(type="text/css" (nicht text/javascript)) |
K |
||
| Zeile 10: | Zeile 10: | ||
Das kann so aussehen: | Das kann so aussehen: | ||
<code> | <code> | ||
<link rel="stylesheet" href="/style.css"> | <link rel="stylesheet" type="text/css" href="/style.css"> | ||
</code> | </code> | ||
| Zeile 16: | Zeile 16: | ||
<code> | <code> | ||
<style type="text/css"> | <style type="text/css"> | ||
body{ | body { | ||
background-color:#ff6600; /*Hintergrundfarbe: orange*/ | background-color: #ff6600; /* Hintergrundfarbe: orange */ | ||
color:#00ffff; /*Textfarbe: türkis*/ | color: #00ffff; /* Textfarbe: türkis */ | ||
text-align:center; /*Ausrichtung: Zentriert*/ | text-align: center; /* Ausrichtung: Zentriert */ | ||
} | } | ||
</style> | </style> | ||
| Zeile 26: | Zeile 26: | ||
oder das style-Attribut direkt im betroffenen HTML-Tag. | oder das style-Attribut direkt im betroffenen HTML-Tag. | ||
<code> | <code> | ||
<body style="background-color:#ff6600;color:#00ffff;text-align:center;"> | <body style="background-color: #ff6600; color: #00ffff; text-align: center;"> | ||
</code> | </code> | ||
| Zeile 35: | Zeile 35: | ||
Selbst können Admins beispielsweise Stylesheets in der [[Ankündigung]] einsetzen um das Hintergrundbild zu fixieren: | Selbst können Admins beispielsweise Stylesheets in der [[Ankündigung]] einsetzen um das Hintergrundbild zu fixieren: | ||
<code> | <code> | ||
<style type="text/css">body{background-attachment:fixed;}</style> | <style type="text/css">body{background-attachment: fixed;}</style> | ||
</code> | </code> | ||
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]] | 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 == | == 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 | ||
Version vom 4. Juli 2007, 18:50 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