Vordergrundfarben sind ein Schlag in die Philosophie des CSS-Normer. Aber nicht in diejenige des gesunden Menschenverstandes. Weil, es gibt keine Vordergründe in CSS, wohl aber im Vordergrund sitzende Elemente. Und die können natürlich gefärbt werden. Damit wir soviel Farbe wie möglich loswerden, wüßten wir gerne im Überblick, welche das sind. Damit ist man an sich schnell fertig: Texte aller Art sowie borders (altdeutsch Grenzen) von jeglichem Element.
Aus praktischen Gründen werden hier die wichtigsten Farboptionen für Vordergründe gesammelt, auch wenn sie bei verschiedenen, getrennt zu besprechenden Elementen (wie etwa Tabellen) erneut auftauchen werden.
| CSS-Attribut | Bedeutung | Code-Beispiel |
|---|---|---|
| color | legt die Farbe angeblich aller Elemente fest. Da color immer zusammen mit background-color vergeben werden sollte, und man bei den meisten Elementen nur letztere sieht, ist eigentlich nur bei Text der Einsatz sinnvoll. Entgegen der Erwartung wird von meinen untersuchten Browsern für <hr> die Vordergrundfarbe für eine 1-Pixel Kante auf Schwarz fixiert, was nach der CSS-Spezifikation nicht so sein sollte. | Die Color-Eigenschaft ist hier der Tabellenzelle verliehen, nicht wie man eigentlich verlangen sollte, einem Textattribut. Das funktioniert, weil die Festlegung für das Containerelement auch für die sog. Kinderelemente gilt. Hier ist benutzt: <td style="color:#FF4203">, Das geht aber auch mit <span style="color:#24B101";> Die spätere Deklaration überschreibt ("kaskadiert") die übergeordnete der Tabellenzelle. Hier eine Testlinie mit roter Vordergrund- und weißer Hintergrundfarbe, vielleicht wird es ja irgendwann! |
| border-color | Da jedes Elemet einen Grenze besitzen kann, ist border-color praktisch überall möglich, wenn auch nicht immer sinnvoll. Die Wirkung der so zugeordneten Farbe hängt von den übrigen Eigenschaften der Grenze ab. So kann man bei Tabellen mit einem Farbwert gleich zwei Farben festlegen (mit border-style). | Hier ist zur Illustration eingetragen - der Code feierlicherweise in einem "beborderten" div-Container: <td style="border-color: #1515FF; border-style: groove; border-width: 6px"> Warum das "bebordern" nicht immer sinnvoll ist, zeigt, so hoffe ich, das zweite Beispiel, vergeben zu span, einem Inline-Element, das seine Grenzen eng ziehen muß. Die bessere Alternative bietet der auf fast gleiche Weise gestylte Paragraph. Das Aussehen wurde aber mit einem ordentlichen padding verbessert. Hier noch ein ganz spezieller Versuch: |
| background-color | Die ultimative Möglichkeit zur Gestaltung von "Vordergründen": Hintergründe nachgeordneter Seitenelemente | Text muß nicht sein. Stört evtl. nur. Hier verdanken wir den Rahmen einem div, die beiden farbigen Felder sind p-Bereiche |