CSS: Wertigkeiten und Inline-Referenz

von

Sie kennen sicherlich diese Möglichkeit, definiert im Body der HTML-Seite, den Standard-Text der Webseite zu bestimmen:

Erscheint dieser Text in rot?

 

<body text=”#FFFFFF” >
 </body>

 

Erscheint der Text rot? Nein, denn hier wird im Body text=“#FFFFFF“ angegeben. Und der Code „#FFFFFF“ ist weiß. Mit einer Textdefinition im Body-Tag erreichen Sie, dass der gesamte Text auf der Webseite betroffen ist.

<p><font color="#FF0000">Erscheint der Text in Rot?</font></p>

Erscheint der Text in Rot?

<p><span style="color:red;">Erscheint dieser Text in rot?</span></p>

Erscheint dieser Text in rot?

Das Gleiche erreichen Sie mit folgendem Beispiel, jedoch auf Basis von CSS:

body {
  color:red;
}

Erscheint dieser Text in rot?

In diesem Fall erscheint der Text in rot. Was würde passieren, wenn wir beides kombinieren? Wenn wir also im Body die Farbe Weiss für den Text definieren, innerhalb von CSS jedoch rot?

body { color:red; }

Erscheint dieser Text in rot?

Die Ergebnisse können von Browser zu Browser unterschiedlich sein. Normalerweise müsste der Text jedoch in Rot erscheinen, da die CCS-Eigenschaft eine höhere Priorität geniest. Was passiert, wenn Sie einem Element trotz aller Definitionen einen direkten Style verpassen? Diese Vorgehensweise, auch Inline-Referenz genannt, würde folgendermaßen aussehen:

body { color:red; }
<span style="color: green;">Erscheint dieser Text in rot?</span>

Erscheint dieser Text in rot?

Erscheint dieser Text in rot? Überrascht Sie das Ergebnis? Eine Inline-Referenz geniest die höchste Priorität.

Aber Achtung: Solche Konflikte können in der Praxis zu großen Problemen führen und sind der Grund für stundenlanges Fehlersuchen.


UPDATE Inline-Referenz: ANZEIGEART display

Sie können via CSS über „display“ festlegen, ob ein Element angezeigt werden soll, oder nicht. Das einfachste Beispiel sehen sie wie folgt:

<p>Diese Zeile ist wird angezeit</p>
 <p style="display:none">Diese Zeile nicht</p>
 <p>Diese Zeile ist wird angezeigt</p>
 <p style="display:none">Diese Zeile nicht</p>

 

Mit „Inline“ können Sie jedoch noch weitere interessante Effekte erzeugen:

 

<h1 style="display:inline">Diese Überschrift erzeugt keinen Absatz</h1> Dieser Text gehört nicht mehr zu H1, es erfolgt jedoch keine Zeilenumbruch beim Wechsel zu H1
 <p>Hier folgt der neue Absatz</p>
 <h1 style="display:inline">Diese Überschrift erzeugt keinen Absatz</h1> Dieser Text gehört nicht mehr zu H1, es erfolgt jedoch keine Zeilenumbruch beim Wechsel zu H1
 <p>Hier folgt der neue Absatz</p>

Diese Überschrift erzeugt keinen Absatz

Dieser Text gehört nicht mehr zu H1, es erfolgt jedoch keine Zeilenumbruch beim Wechsel zu H1

Hier folgt der neue Absatz

Schreibe einen Kommentar