Definition des Syntaxschemas
Eine CSS-Regel hat folgendes Aussehen:
Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B
}
/* Kommentar */
Ein Stylesheet darf beliebig viele solcher Regeln enthalten.
Beispiel
p.note {
position: relative;
left: 15%;
width: 70%;
padding: 30px;
padding-bottom: 45px;
border: 1px solid black;
line-height: 1.5em;
color: black;
font-weight: bold;
text-align: justify;
background-color: #eeeeee
}
Ein mit dem p-Tag umgebener Absatz der Klasse „note“ wird dadurch von einem CSS-kompatiblen Browser wie folgt dargestellt:
Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.
Kombination mit HTML
Die am häufigsten vorkommende Kombination, nämlich mit HTML oder XHTML, kann an mehreren Orten geschehen, hier einige Beispiele:
- Als externes Stylesheet für eine (X)HTML-Datei (
link-Element) <link rel="stylesheet" type="text/css" href="beispiel.css" />- Als externes Stylesheet für eine XHTML-Datei (xml-stylesheet-Verarbeitungsanweisung)
<?xml-stylesheet type="text/css" href="beispiel.css" ?>- Als internes Stylesheet in einer (X)HTML-Datei (
style-Element) <head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>- Innerhalb von (X)HTML-Tags (
style-Attribut) <span style="font-size: small;">Text</span>
Die Einbindung als externes Stylesheet ist dabei die am häufigsten verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die denselben Regelsatz benutzen, das Stylesheet nur einmal heruntergeladen werden muss. Auch vermeidet man so sich wiederholenden Code.
|
