Verschachtelung
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-weight:normal; }
//-->
</style>

Überschrift h1 Überschrift h1 italic

Standardtext normales Italic

In diesem Beispiel wird i für italic, wie üblich kursiv dargestellt. Nur wenn es in Überschriften erster Ordnung vorkommt, wird es blau und nicht fett (font-weight:normal). Durch die Verschachtelung (h1 i) in der Stylesheet Definition wird diese Darstellung erreicht.


Verschachtelung & Unterklasse

table.finfo {
background-color: #996600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
table.finfo td {
background-color: #F5F5F5;
margin: 5px;
padding: 5px;
}
table.finfo th {
background-color: #EDE7F1;
margin: 5px;
padding: 5px;
font-size: 12px;
}


table.finfo caption {
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: left;
vertical-align: top;
padding-bottom: 5px;
}

Man kann Unterklassen und Verschachtelung auch kombinieren, wie man an diesem Beispiel sieht. So braucht man die Unterklasse nur einmal der Tabelle zuzuweisen und alle Elemente der Tabelle werden entsprechen formatiert. Der Tabelle sollten keine Eigenschaften in Html zugewiesen werden wie: border="0" cellspacing="0" cellpadding="5"

<table class="finfo">

Beschriftung der Tabelle mit caption
Überschrift th Überschrift th Überschrift th
td Tag mit Text td Tag mit Text td Tag mit Text
td Tag mit Text td Tag mit Text td Tag mit Text

 


Startseite nächste Seite