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 ;-)
;-)
