Prioritäten und !important-Regel - Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Priorit&auml;ten und !important-Regel - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. Priorit&auml;ten und !important-Regel." />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  h1 {
     color: blue;
  }

  h1 {
     color: red;
  }

  p.absatz1 {
     color: green !important;
  }

  p.absatz1 {
     color: red;
  }

  p#absatz2 {
     color: blue;
  }

  p.absatz1 {
     color: red;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Prioritäten und !important-Regel - Cascading Style Sheets</h2>

<p>Eine Stilvorlage könnte durchaus sich
wiedersprechende Regeln enthalten. Das kann sowohl die
Stilvorlage des Autors betreffen als auch die Definitionen
der Stilvorlage des Browsers oder des Benutzers.</p>

<p>Bei der Auswahl von Mehrfachdefinitionen werden drei
Kriterien herangezogen:</p>

<ol>
 <li>die Prioriät der Stilvorlage,</li>
 <li>die Gewichtung der Selektoren,</li>
 <li>die Reihenfolge des Vorkommens.</li>
</ol>

<p class="absatz1">Dieser Absatz wird grün und nicht rot
geschrieben, weil die Definition<br />
&nbsp;&nbsp;&nbsp; color: #00ff00 !important<br />
gegenüber color: red eine höhere Priorität besitzt.</p>

<p class="absatz2" id="absatz2">Dieser Absatz wird blau
und nicht rot geschrieben, weil ein Id-Selektor immer
eine höhere Priorität als ein Klassenselektor besitzt.</p>

<p>Die Überschrift wird rot und nicht blau geschrieben,
weil diese Definition die zuletzt notierte ist.</p>

</body>
</html>