 Hintergrundfarben mit CSS
Die Definition von CSS-Unterklassen für verschiedene Hintergrundfarben schafft eine gute Hilfe und Zeitersparnis. So können sie farbliche Bereiche für Tabbellenzellen, Textpassagen oder Umrandungen ganz global, wenig arbeitsintensiv und einheitlich festlegen. Besonders dann, wenn Sie die CSS-Befehle in einer Datei extern auslagern.
Vorteil:
Wenn sie diesen kleinen Trick anwenden und ihre Seite konsequent mittels Farb-Unterklassen gestalten, reichen nur wenige Änderungen in ihrer CSS-Datei und ihre Seite erscheint in völlig neuen Farben. Für mein Beispiel hier würde das bedeuten: Durch Änderung von 5 Farbwerten könnten alle ihre Seiten statt in 'Flieder' dann in 'Marine' erscheinen.  kuckst du hier
Um sich die Arbeit zu erleichtern sollten Sie mehrere Farbnuancen, passend zum Layout festlegen und dann in den CSS-Anweisungen als Unterklasse notieren!
 Farbabstufungen - so gehts ganz einfach
Farbwerte festlegen (Thema Flieder):
| Bereich |
CSS-Anweisung |
Farbe |
Wert |
Anwendung |
| Seiten-Hintergrundfarbe |
.grund |
Farbe |
#FFFFFF |
wie Grundfarbe |
| Texthintergrund |
.liste |
Farbe |
#F0DDFF |
Aufzählungen |
| Unterklasse 0 |
.bgcolor0 |
Farbe |
#CCBBEE |
Hintergrund |
| Unterklasse 1 |
.bgcolor1 |
Farbe |
#BBAAEE |
Hervorhebung |
| Unterklasse 2 |
.bgcolor2 |
Farbe |
#9988EE |
Tabellenkopf |
| Unterklasse 3 |
.bgcolor3 |
Farbe |
#6644AA |
Ränder |
|
Anwendungsbeispiel
|
|
Aufzählung
|
| Aufzählung |
Aufzählung
|
| Aufzählung |
Aufzählung
|
|
Einbindung in die Tabellenzelle
<tr><td class="bgcolor3">Text</td></tr>
Vorgehensweise
1) Für die gewünschten Hintergrundfarben CSS Unterklassen festlegen
<style type="text/css">
<!--
body {
font-family : verdana,arial,helvetica;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #F9F9F9;
}
.grund {background-color: #F0DDFF;}
.liste {background-color: #CCBBEE;}
.bgcolor0 {background-color: #CCBBEE;}
.bgcolor1 {background-color: #BBAAEE;}
.bgcolor2 {background-color: #9988EE;}
.bgcolor3 {background-color: #6644AA;}
-->
</style>
Class-Befehle einbinden
<td class="bgcolor2"> ... </td>
<p class="bgcolor3"> Text </p>
<span class="bgcolor3"> Text </span>
Designänderung / Farbwandlung mit wenigen Klicks
Neue Farbwerte werden eingetragen
Mit nur 5 Klicks im Editor zur Änderung der Farbwerte in der CSS-Datei, erscheinen nun alle Seiten in Blautönen.
|
|
Aufzählung
|
| Aufzählung |
Aufzählung
|
| Aufzählung |
Aufzählung
|
|
 zurück NACH OBEN
Das gleiche Thema behandle ich in der Rubrik 'TIPPS' . Dort gibts auch die Möglichkeit zum Download einer vollständigen CSS-Datei zum Thema Hintergrundfarben.
Hintergrundfarbe CSS
|
HOME
DOWNLOAD 
BEISPIEL 
ZURÜCK