CSS. Wie ändert man die Farben

Dieses Tutorial zeigt Ihnen wie man die Farben in einem HTML-basierten Template mit CSS-Eigenschaften verandern kann.

Es gibt 2 Moglichkeiten die Seiten einzufarben: Farbcodes oder Bilder. Zuerst offnen Sie Ihre Webseite im Browser. Dort offnen Sie das Entwicklertool fur Browser mit dem Druck auf die Taste F12.
Mit Hilfe von diesem Tool finden Sie die Style-Eigenschaften jedes Elements auf der Seite. Falls Sie keine Erfahrung mit den Entwicklertools fur Browser haben, lesen Sie bitte diesen Artikel.
Zum Beispiel gibt es den folgenden Stil:

 
.button {
    background: -moz-linear-gradient(#FF8E00, #FF7F00) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    color: #FFFEFE;
    display: inline-block;
    font-family: 'PT Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 20px 27px 19px;
    text-transform: uppercase;
}
 

In den oberen Style-Eigenschaften finden Sie verschieden Farbcodes: #FF8E00, #FF7F00, #FFFEFE usw. Jeder definiert seine eigene Farbe. Sie finden diese Farbcodes in einer Bildbearbeitungssoftware.

Platzieren diesen Code in Ihre CSS Datei und speichern Sie die. Danach aktualisieren Sie die Seite im Browser, damit Sie die Anderungen ansehen.

Wenn Sie die Hintergrund aus Bildern erstellt haben, andern Sie die Bilddatei oder ersetzen Sie das Hintergrundbild durch die gewunschte Farbe.

Sie haben zum Beispiel das folgende Style:

 
.box-red {
    background: url("../images/box-red.gif") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #E8837E;
    border-radius: 9px 9px 9px 9px;
    border-right: 1px solid #E8837E;
    border-top: 1px solid #E8837E;
    color: #FFFFFF;
    position: relative;
    width: 315px;
}

Hier wird die Hintergrund aus das Bild erstellt:

 background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

Im Bildordner ersetzen Sie die box-red.gif Datei durch Ihr Hintergrundbild oder ersetzen Sie einfach die Bildhintergrund durch eine Farbe

Ersetzen Sie:

background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

durch

background: #E8837E;

Sehen Sie jetzt das ausfuhrliche Video-Tutorial an: