Mehrere CSS-Klassen zuweisen

Der Test zeigt, wie CSS-Formate bei der Zuweisung mehrerer Klassen zu einem Element verarbeitet werden. Dazu werden zunächst vier Klassen - c1, c2, c3 und c4 - definiert, wobei die zweite, dritte und viere Klasse eine unterschiedliche Textfarbe bestimmt. Die Zuweisung von Klasse c1 in Verbindung mit c2 oder c3 (4. und 5.) zeigt, dass die Formate additiv wirken, d.h., als ob sie in einer gemeinsamen Klasse definiert werden. Die Zuweisung der Klassen c2 und c3, sowohl in Verbindung mit c1 als auch ohne zeigt, dass die bei den konkurrierenden Formatierungen der Textfarbe immer c3 durchsetzt, egal, in welcher Reihenfolge die Klassen zugewiesen werden. Dies weist darauf hin, dass die Zuweisung konkurierender Formate von der Reihenfolge der Definition der Klassen abhängig ist, wobei sich immer die zuletzt definierte Klasse durchsetzt. Dies wird mit der Klasse c4 verifiziert, welche bei 13. zugewiesen wird. Außerdem wird das Ganze noch mit einer extern definierten Klasse c5 in 14. versucht, was die Zuweisung nach Reihenfolge der Definition bestätigt.

Tests

  1. Ohne Klassen
  2. Klasse c1
  3. Klasse c2
  4. Klasse c3
  5. Klasse c4
  6. Klasse c5
  7. Klasse c1 und c2
  8. Klasse c1 und c3
  9. Klasse c2 und c3
  10. Klasse c3 und c2
  11. Klasse c1, c2 und c3
  12. Klasse c1, c3 und c2
  13. Klasse c3 und c4
  14. Klasse c3 und c5

Quelltext

---- Mehrere_CSS-Klassen_zuweisen.css ----
*.c5
{
    color: gray;
    font-family: Times;
}

---- Mehrere_CSS-Klassen_zuweisen.html ----
...
<style type="text/css">
<!--
    *.c1
    {
        font-size: 20pt;
    }
    *.c2
    {
        color: fuchsia;
        font-style: italic;
    }
    *.c3
    {
        color: lime;
        font-weight: bold;
    }
-->
</style>
<style type="text/css">
<!--
    *.c4
    {
        color: red;
    }
-->
</style>
<link rel="stylesheet" type="text/css" href="Classtest.css"></link>
...
<ol>
    <!-- 01 --> <li>Ohne Klassen</li>
    <!-- 02 --> <li class="c1">Klasse c1</li>
    <!-- 03 --> <li class="c2">Klasse c2</li>
    <!-- 04 --> <li class="c3">Klasse c3</li>
    <!-- 05 --> <li class="c4">Klasse c4</li>
    <!-- 06 --> <li class="c5">Klasse c5</li>
    <!-- 07 --> <li class="c1 c2">Klasse c1 und c2</li>
    <!-- 08 --> <li class="c1 c3">Klasse c1 und c3</li>
    <!-- 09 --> <li class="c2 c3">Klasse c2 und c3</li>
    <!-- 10 --> <li class="c3 c2">Klasse c3 und c2</li>
    <!-- 11 --> <li class="c1 c2 c3">Klasse c1, c2 und c3</li>
    <!-- 12 --> <li class="c1 c3 c2">Klasse c1, c3 und c2</li>
    <!-- 13 --> <li class="c3 c4">Klasse c3 und c4</li>
    <!-- 14 --> <li class="c3 c5">Klasse c3 und c5</li>
</ol>
...

Ihre Erfahrungen und Meinungen

Falls Sie eigene Erfahrungen oder Ihre Meinung zu den geschilderten Tests mitteilen möchten, würde ich mich über eine E-Mail von Ihnen freuen.

Navigation: Zurück zu Tipps & Tricks

©2005 Michael Berthold, letzte Änderung am 10.07.2005