Workshop CSS: Teil 5 - Weitere Möglichkeiten
Mehrfache Deklaration
Selektoren dürfen beliebig oft aufgeführt werden:
In dem folgenden Beispiel werden für vier Überschriften gleiche Formatierungen deklariert:
,
,
,
,
,
,
<style type="text/css">
h1 {color:#000;}
h1 {font-weight:bold;}
h1 {font-size:18px;}
h1 {text-decoration:underline;}
</style>
Einfacher geht es, indem du die Angaben zusammenfasst:
,
,
,
,
,
,
<style type="text/css">
h1
{
color:#000;
font-weight:bold;
font-size:18px;
text-decoration:underline;
}
</style>
Stylesheet-Angaben gruppieren
Stylesheet-Angaben lassen sich gruppieren, sodass du nicht jedes Tag und jeden Selektor einzeln auflisten musst.
In dem folgenden Beispiel werden für drei Überschriftenebenen gleiche Formatierungen deklariert:
,
,
,
,
,
,
<style type="text/css"><!--
h1 {color:#000000; font-weight:bold; font-size:18px;}
h2 {color:#000000; font-weight:bold; font-size:18px;}
h3 {color:#000000; font-weight:bold; font-size:18px;}
//--></style>
Einfacher geht es, indem die drei Tags durch Komma getrennt aufgelistet werden.:
,
,
,
,
,
,
<style type="text/css"><!--
h1, h2, h3 {color:#000000; font-weight:bold; font-size:18px;}
//--></style>
In dem nächsten Beispiel unterscheiden sich die Angaben nur durch die Schriftgröße:
,
,
,
,
,
,
<style type="text/css"><!--
h1 {color:#000000; font-weight:bold; font-size:18px;}
h2 {color:#000000; font-weight:bold; font-size:16px;}
.fett {color:#000000; font-weight:bold; font-size:14px;}
//--></style>
Du könntest also gleiche Angaben zusammenfassen:
,
,
,
,
,
,
<style type="text/css"><!--
h1, h2, .fett {color:#000000; font-weight:bold;}
h1 {font-size:18px;}
h2 {font-size:16px;}
.fett {font-size:14px;}
//--></style>