- Offizieller Beitrag
Aufbau einer CSS-Definition
CSS-Anweisungen stehen immer zwischen den Abschnitten [tt=html]<style type="text/css">[/tt] und [tt=html]</style>[/tt].
Kommentare
Kommentare werden in /* */ eingebunden.
/* Kommentar
weiterer Kommentar */Regelsätze
Regelsätze beschreiben den Bereich (Selektor) für welche die Formatierung gelten soll. Darin werden die Eigenschaften festgelegt.
Sektoren können den Namen eine HTML-Tags oder einen Namenswert innerhalb eines HTML-Tags beinhalten.
Ein Regelsatz besteht somit aus Sektornamen und der Deklaration (Eigenschaft + Wert).
/* ein Selektor */
Selektor {
Eigenschaft: Wert;
}
/* Beispiel */
h1 {
color: red;
}
/* mehrere Selektoren gleichzeitig */
Selektor1, Selektor2 {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
}
/* Beispiel */
h2, h3 {
color: blue;
}Nicht nur Tags (wie h1, oder h2) können formatiert werden sondern auch eigene Selektoren die sogenannten Klassen definiert werden. Diese können in Tags wie einem div-Tag verwendet werden.
<!DOCTYPE html>
<html lang="de-DE">
<head>
<style type="text/css">
/* Regelsatz ueberschrift definieren */
#ueberschrift {
color: red;
}
.ueberschrift_wichtig {
font-weight: bold;
}
</style>
</head>
<body>
<div id="ueberschrift">
<p class="ueberschrift_wichtig"></div>
</div>
</body>
</html>Container mit div-Tags
Mit div-Tags können Bereiche definiert werden in denen definierte Formatierungen gelten. So kann ein übergeordneter Container definiert werden in dem mehrere Untercontainer enthalten sind. Die wird mit # oder . Regelsätzen definiert.
- . - Elemente werden mit id angesprochen und gelten für einen Tag)
- # - Elemente werden mit class für mehreren Elemente
@-Regeln
Neben den Bereichen gibt es auch die @-Regeln. Mit diesen können zum Beispiel unterschiedliche Ausgabemedien angesprochen werden.
@-Regel {
Eigenschaft1: Wert;
Eigenschaft2: Wert;
}
@-Regel Eins, @-Regel Zwei {
Eigenschaft: Wert;
}Werte der Eigenschaften
Nach dem Eigenschaftsname folgt ein Doppelpunkt, danach wird der Eigenschaftswert angegeben. Leerzeichen und Zeilenumbrüche können zur besseren Lesbarkeit verwendet werden.
Außnahmen sind die Masseinheiten, sie dürfen von dem Wert getrennt werden (200%, 2.5em, ...). Ebenso dürfen Eigenschaftsnamen nicht getrennt werden (font-size, text-align, ...).
Bereich {
Schrift-Größe: 200%;
Schrift-Stil: kursiv;
}
Bereich {
Schrift: 200% kursiv;
}
h1 {
font-size: 2.5em;
text-align: center;
}
h1 { font-size:2.5em;text-align:center; }