Florian 'Spitzohr' König-Heidinger

Leider hatte ich den Fehler gemacht und den <code>-Tag über CSS in ein Block-Element (wie z.B. <p>, <div>…) umgewandelt. Blöde Idee.
Um den <code>-Tag jetzt sinnvoll in meinem Beispielen zu verwenden, muß ich diesen über den Selector p code {display: inline;} wieder zurückverwandeln.
Das eigentlich Problem ist aber die Darstellung ohne CSS! Zwar habe ich im vorhergehenden Blog <strong> statt <code> verwendet (da ich erst jetzt den p code-Stylesheet eingebaut habe), aber der “Block-<code>” wird ohne CSS nur als “Inline-<code>” dargestellt. Das könnte blöd ausschauen.
Empfehlung für Webmaster: Daher schlage ich vor, dass bei der Erstellung einer neuen Website die CSS-Datei erstmal nicht verwendet wird! So könnt ihr in Ruhe einen logischen HTML-Code aufbauen und ohne CSS den logischen Aufbau auch überprüfen. Wenn der HTML-Code soweit paßt, kann man die CSS-Datei erstellen. Und eventuell für die Darstellung Hilfsstrukturen (<div>s) in den HTML-Code einbinden.

Wer verwendet heute noch den <font>-Tag? Hoffentlich keiner. Aber warum eigentlich?
Mit diesem Tag konnte man Texte in HTML doch so schön formatieren? Auch <b> für fett (bold), <i> für kursiv (italic) und <u> für unterstrichen sind schön kurz.
Design und Inhalt sollte getrennt sein. Design sollte mit Hilfe von Stylesheets definiert werden. Und im HTML sollte nur ein logisch strukturierter Inhalt zu finden sein. Ist auch besser für Suchmaschinen.
Also statt

<font color="#ff0000">roter Text</font>

könnte man doch auf

<span class="roter_text">roter Text</span>

umsteigen.
Ist doch gleich viel schöner. Und es sind keine Formatierungen im Inhalt vorhanden. Sind wirklich keine vorhanden? Der Klassenname “roter_text” scheint sich aber sehr auf eine Formatierung zu beziehen. Und wenn ich den Text mal grün haben will? Schreibe ich dann in der CSS:

.roter_text { color: #00ff00; }

Okay, so eine Klassenbezeichnung ist unsinnig! Da habt ihr Recht.
Vielleicht sollte man noch einen Schritt zurückgehen und sich überlegen, warum der Text rot bzw. anders dargestellt werden soll.
Ach, das ist ein wichtiger Text? Dann sollten wir vielleicht lieber Tags wie <em> oder <strong> verwenden.
Gibt es vielleicht noch weiteren wichtigen Text, der so dargestellt werden soll? Ah, jeder wichtige Text innerhalb eines Absatzes (<p>). Das ist aber schön.
Dann machen wir doch einfach in unserem HTML:

<p>Irgendein <strong>wichtiger</strong> Text steht hier</p>

und im CSS:

p strong { font-weight: normal; color: #ff0000; }

Dann haben wir nämlich auch das C von CSS (Cascading Stylesheets) genutzt.
Wenn als Selektor

p strong

angegeben wird, werden jeder mit <strong> gekennzeichnete Inhalte innerhalb eines <p> entsprechend formatiert.
Das ganze funktioniert auch für Klassen und IDs. Auch der Platzhalter (*) kann hier verwendet werden.
Aber: bei

p strong

würde auch der Text eines <strong>-Tags innerhalb eines <a>-Tags, welches in einem <p> zu finden ist so formatiert. Beispiel:

<p>Das ist <a href="#">ein <strong>wichtiger</strong> Text</a>.</p>

Vielleicht will man das nicht.
Das kann man dann mit

p a strong { font-weight: bold; color: #0000ff; }

entsprechend ändern. Da der Selektor aus drei Tags besteht wird die Formatierung des anderen Selektors (mit nur zwei Tags) überschrieben.

Wenn ich aber innerhalb eines <div>s nur die direkten “Nachkommen” formatieren will? Dann kann man die Formatierung mit dem Platzhalter für alle Kindeskinder wieder aufheben.
Beispiel:

p strong { color: #ff0000; } p * strong {color: #000000; }

Wer sich genauer über Kaskadierung, Sortierung, Priorität etc. bei CSS informieren will, wird bei SelfHTML: Kaskade – Anwendung von Styleseehts auf Dokumente sicherlich fündig.
Ist auch viel besser beschrieben als in meinem Weblog ;-)