Hilfreiche Ratschläge

Farbe und Hintergrund

Als Hintergrund können Sie jedes dafür geeignete Bild verwenden. Der Hintergrund sollte die Aufmerksamkeit nicht vom Text ablenken. Er sollte gut mit dem Farbschema der Webseite kombiniert sein und klein sein, um schnell geladen zu werden. Wenn Sie nach dem oben Gesagten der Seite noch ein Hintergrundbild hinzufügen möchten, sollten Sie das Hintergrundattribut des Tags verwenden.

Beispiel 2. Hintergrundbild hinzufügen

Wenn das Bild kleiner als der Bildschirm ist, wird es horizontal und vertikal multipliziert.

Da das Hintergrundbild langsamer geladen wird als die Hintergrundfarbe, kann es vorkommen, dass der Text einige Zeit lang nicht gelesen wird, bis die Bilder geladen sind. Dasselbe kann passieren, wenn Zeichnungen im Browser deaktiviert sind. Daher wird empfohlen, die Hintergrundfarbe immer zusammen mit dem Hintergrundmuster festzulegen (Beispiel 3).

Beispiel 3. Verwenden der Hintergrund- und Hintergrundfarbe

Fester Hintergrund

Wenn Sie die Bildlaufleiste verwenden, wird das Hintergrundbild standardmäßig zusammen mit dem Inhalt der Webseite verschoben. Mit Internet Explorer können Sie den Hintergrund mit dem Tag-Attribut bgproperties = "fixed" stationär machen.

Beispiel 4. Einen festen Hintergrund festlegen

Wenn Sie das Attribut bgproperties angeben, wie in Beispiel 4 gezeigt, bleibt das Hintergrundbild auf der Webseite unbeweglich, und der Text, die Bilder und andere Elemente werden zusammen mit der Bildlaufleiste verschoben.

Farbname Anzeige

Die einfachste und bequemste Art, eine Farbe anzugeben, ist die Eingabe ihres Namens. Der einzige Nachteil dieser Methode ist, dass es nur 16 sogenannte "Standard" -Farben gibt.

Die folgende Abbildung zeigt 16 Farben, die durch Eingabe ihres Namens verwendet werden können:

Hexadezimale Schreibweise

Sechzehn Farben reichen nicht aus, wenn man bedenkt, dass die meisten Monitore sechzehn Millionen Farben anzeigen können. Aber stellen Sie sich vor, Sie müssten jede der 16 Millionen Farben benennen ...

Glücklicherweise hat CSS mehrere Möglichkeiten, Farben auszuwählen. Der erste Weg ist ein Hexadezimalwert. So sieht der Farbname hexadezimal aus: # FF5A28. Dies ist eine Kombination aus Buchstaben und Zahlen, die Farbe angeben.

Sie sollten immer mit dem Hash-Zeichen (#) beginnen, gefolgt von sechs Buchstaben oder Zahlen von 0 bis 9 und von A bis F.

Diese Buchstaben oder Zahlen arbeiten paarweise. Die ersten beiden Ziffern geben die Menge an Rot an, die nächsten zwei - Grün und die letzten zwei - Blau. Durch Mischen dieser Werte (Rot-Grün-Blau-Komponenten in Farbe) können Sie eine beliebige Farbe erhalten.

Somit ist # 000000 schwarz und #FFFFFF ist weiß.

In einigen Grafikprogrammen wie Photoshop, Gimp und Paint.NET können Sie Farben im Hexadezimalformat angeben.

So können Sie beispielsweise die im Hexadezimalformat angegebene weiße Farbe auf Absätze anwenden:

Gleichzeitig ist ein abgekürzter Datensatz zulässig: Sie können die Farbe mit nur drei Zeichen angeben. Zum Beispiel: # FA3 entspricht # FFAA33.

Rot-Grün-Blau, abgekürzt als „RGB“. Wie im Hexadezimalcode müssen Sie zur Auswahl einer Farbe den Anteil von Rot, Grün und Blau bestimmen.

Dies ist viel praktischer und mit einem einfachen Malprogramm wie Paint können Sie die richtige Farbe finden. Hier sind die Schritte, die Sie ausführen müssen:

  1. Gehen Sie zum Menü "Start", suchen Sie das Paint-Programm und führen Sie es aus.
  2. Gehen Sie zum Abschnitt „Farben bearbeiten“, wie in der folgenden Abbildung gezeigt.
  3. Ein Fenster öffnet sich. Bewegen Sie im Feld rechts die Schieberegler, um die gewünschte Farbe auszuwählen. Angenommen, Sie möchten Überschriften anzeigen

rosa farbe. Wählen Sie im Fenster eine Farbe aus, wie in der folgenden Abbildung dargestellt.

  • Beachten Sie die entsprechenden Rot-Grün-Blau-Werte in der unteren rechten Ecke des Fensters. Geben Sie diese Werte in der gleichen Reihenfolge in CSS ein.
  • Farbwechsel in Farbe

    Farbauswahl in Farbe

    Um die RGB-Methode zu verwenden, müssen Sie rgb (Rot, Grün, Blau) eingeben und "Rot, Grün, Blau" durch die entsprechenden Zahlen im Bereich von 0 bis 255 ersetzen.

    Verwenden Sie die CSS-Eigenschaft background-color, um die Hintergrundfarbe einer HTML-Seite festzulegen. Sie wird wie die color -Eigenschaft verwendet, dh Sie können den Namen der Farbe, den Hexadezimalwert oder RGB eingeben.

    Um die Hintergrundfarbe für eine Webseite festzulegen, müssen Sie mit dem HTML-Tag arbeiten

    Schauen Sie sich das CSS unten an:

    Das Ergebnis dieses Codes, der mit einer einfachen HTML-Seite mit Hintergrund arbeitet:

    Weißer Text auf einem schwarzen Hintergrund.

    CSS und Vererbung

    Wenn Sie in CSS einem Tag einen Stil zuweisen, haben alle darin enthaltenen Tags denselben Stil.

    Wenn ich schwarze Hintergrundfarbe und weiße Textfarbe auf das Tag angewendet habe

    haben alle Überschriften und Absätze auch einen schwarzen Hintergrund und weißen Text ... Dies wird Vererbung genannt: Tags, die sich in einem anderen Tag befinden, „erben“ dessen Eigenschaften.

    Dies wird auch im Namen „CSS“ angezeigt, der als „Cascading Style Sheets“ übersetzt wird. CSS-Eigenschaften werden in Cascade übernommen: Wenn Sie ein Element formatieren, haben alle untergeordneten Elemente denselben Stil.

    Bedeutet das, dass der gesamte Text auf meiner Webseite weiß sein muss?

    Nein, nicht unbedingt. Wenn Sie später angeben, dass die Überschriften rot sein sollen, hat dieser Stil Vorrang und die Überschriften werden rot.

    Vererbung wirkt sich nicht nur auf die Farbe aus. Alle CSS-Eigenschaften werden übernommen. Beispielsweise können Sie dem Tag Fettdruck zuweisen

    , und alle Überschriften und Absätze werden fett angezeigt.

    Beispiel für die Tag-Vererbung

    Viele sind sich sicher, dass sie nur die Hintergrundfarbe einer HTML-Seite ändern können. Dies ist nicht so: Sie können den Hintergrund jedes Elements ändern: Überschriften, Absätze, bestimmte Wörter usw. In diesem Fall werden sie hervorgehoben (als ob sie mit einem Marker markiert wären).

    Zum Beispiel gibt es ein Tag

    Hiermit werden bestimmte Wörter hervorgehoben. Lass es uns hier benutzen:

    Standardmäßig wird Text gelb hinterlegt. Sie können dies mit CSS ändern:

    Rote Hintergrundfarbe auf Tag-Text angewendet

    . Selbst wenn der Hintergrund der HTML-Seite schwarz ist, hat diese CSS-Eigenschaft für das spezifischste Element Vorrang (siehe folgende Abbildung):

    Roter hervorgehobener Text auf schwarzem Hintergrund.

    Das gleiche Prinzip gilt für alle HTML-Tags und CSS-Eigenschaften. Wenn du sagst:

    • Der Text der Absätze wird in einer Schriftgröße von 1.2em angezeigt,
    • Wichtige Texte (

    ) Ich habe eine Schrift mit einer Größe von 1.4 em.

    ... dann könnten Sie denken, dass ein Konflikt entstehen wird. Wenn wichtiger Text Teil eines Absatzes ist, in welcher Schriftgröße soll er angezeigt werden? 1,2 em oder 1,4 em? CSS entscheidet, dass die spezifischste Deklaration Vorrang hat: weil

    Entspricht dies einem bestimmten Element als Absätze, wird der Text in der Schriftgröße 1.4 angezeigt.

    So machen Sie ein Bild zu einem Seitenhintergrund in HTML

    Die Eigenschaft, mit der das Hintergrundbild angegeben wird (in gewissem Sinne kann sie als Hintergrund-Tag der HTML-Seite bezeichnet werden), ist background-image. Der Wert muss als URL angegeben werden ("nom_de_l_image.png"). Zum Beispiel:

    Als Ergebnis erhalten wir:

    Seitenhintergrundbild

    Die Adresse, die den Ort des Hintergrundbilds angibt, kann als absolute Adresse (http: // ...) oder als relative Adresse (fond.png) angegeben werden.

    Seien Sie vorsichtig, wenn Sie relative Adressen in einer CSS-Datei angeben. Die Bildadresse sollte relativ zur CSS-Datei und nicht relativ zur HTML-Datei angegeben werden. Um die Situation zu vereinfachen, empfehle ich Ihnen, das Hintergrundbild im selben Ordner wie die CSS-Datei abzulegen.

    Hintergrund-Anhang: Hintergrund-Anhang

    Die CSS-Eigenschaft für Hintergrundanhänge wird verwendet, um den Hintergrund zu fixieren. Mit dem erzielten Effekt können Sie den Hintergrund zusammen mit dem Text "scrollen" lassen. Es stehen zwei Werte zur Verfügung:

    • fest: das Hintergrundbild bleibt fest,
    • Bildlauf: Das Hintergrundbild wird zusammen mit dem Text verschoben (Standardwert).

    Hintergrundwiederholung: Hintergrundwiederholung

    Standardmäßig wird das Hintergrundbild in Form eines Mosaiks wiederholt (daher erstreckt sich der Hintergrund der HTML-Seite über den gesamten Bildschirm). Sie können dies mit der Eigenschaft background-repeat ändern:

    • no-repeat: Der Hintergrund wird nicht wiederholt. Das Bild wird in einer Kopie auf der Seite platziert.
    • repeat-x: Das Bild wird nur in der ersten Zeile horizontal wiederholt.
    • repeat-y: Das Bild wird nur in der ersten Spalte vertikal wiederholt.
    • Wiederholen: Der Hintergrund wird als Mosaik wiederholt (Standardwert).

    Hintergrundposition: Hintergrundposition

    Sie können die Position des Hintergrundbildes auch über die Hintergrundposition festlegen. Diese Eigenschaft ist nur in Kombination mit background-repeat sinnvoll: no-repeat (Hintergrund, der sich nicht wiederholt).

    Sie müssen zwei Werte in Pixel eingeben, um die Position des Hintergrunds relativ zur oberen linken Ecke der Seite anzugeben (oder Absatz, wenn Sie den Hintergrund auf den Absatz anwenden). Wenn Sie also Folgendes eingeben:

    ... wird der Hintergrund 30 Pixel nach links und 50 Pixel höher verschoben. Sie können auch die folgenden Werte verwenden:

    • oben: oben
    • unten: unten
    • links: links
    • Mitte: in der Mitte,
    • richtig: richtig.

    Sie können kombiniert werden. Wenn Sie beispielsweise ein Hintergrundbild in der oberen rechten Ecke platzieren möchten, geben Sie Folgendes ein:

    Wenn ich die Sonne als Hintergrundbild anzeigen möchte (die folgende Abbildung), nur einmal (keine Wiederholung), immer sichtbar (fest) und in der oberen rechten Ecke (oben rechts), dann sollte ich den folgenden HTML-Seitenhintergrundcode schreiben:

    Sonne als Hintergrundbild in der rechten oberen Ecke

    Kombination von Eigenschaften

    Wenn Sie viele Eigenschaften auf den Hintergrund anwenden, können Sie eine Art „Super-Eigenschaft“ namens Hintergrund verwenden. Sein Wert kann mehrere zuvor berücksichtigte Eigenschaften kombinieren: Hintergrundbild, Hintergrundwiederholung, Hintergrundanhang und Hintergrundposition.

    So können Sie schreiben:

    Dies ist das erste "Super-Eigentum", das ich Ihnen zeige, aber es wird andere geben. Sie sollten Folgendes wissen:

    1. Die Reihenfolge der Werte ist nicht wichtig. Sie können die Werte in beliebiger Reihenfolge kombinieren.
    2. Es müssen nicht alle Werte eingegeben werden. Wenn Sie daher nicht fix eingeben möchten, können Sie es löschen.

    Mehrere Hintergrundbilder

    Ab CSS3 können Sie mehrere Hintergrundbilder für ein Element angeben. Trennen Sie dazu die Deklarationen mit einem Komma:

    Das erste Bild aus dieser Liste wird oben auf den anderen platziert (Abbildung unten). Die Reihenfolge, in der die Bilder deklariert werden, ist wichtig: Wenn Sie im obigen CSS-Code Sonne und Schnee vertauschen, sehen Sie die Sonne nicht mehr.

    Mehrere Hintergrundbilder

    In allen Browsern funktionieren mehrere Hintergrundbilder, mit Ausnahme der älteren Versionen von Internet Explorer, die diese Funktion erst ab Version 9 (IE9) erkennen.

    In allen obigen Beispielen habe ich den Hintergrund auf die gesamte Seite (body) angewendet. Vergessen Sie jedoch nicht, dass Sie den Hintergrund auf jedes Element anwenden können.

    Die Opazitätseigenschaft oder wie der Seitenhintergrund in HTML transparent gemacht wird

    Die Opazitäts-Eigenschaft wird verwendet, um die Opazitätsstufe anzugeben (das Gegenteil von Transparenz).

    • Wenn der Wert auf 1 gesetzt ist, ist das Element vollständig undurchsichtig. Dies ist das Standardverhalten.
    • Wenn der Wert auf 0 gesetzt ist, ist das Element vollständig transparent.

    Sie müssen einen Wert zwischen 0 und 1 auswählen. Bei einem Wert von 0,6 ist das Element zu 60% undurchsichtig, und Sie können es durchschauen!

    So verwenden Sie es:

    Hier ist ein Beispiel, das einen Eindruck von Transparenz vermittelt.

    Transparenter Absatz

    Transparenz funktioniert in allen Browsern, einschließlich Internet Explorer, ab Version IE9.

    Wenn Sie die Opazitätseigenschaft auf ein Element einer Webseite anwenden, wird der gesamte Inhalt dieses Elements transparent. Wenn Sie die Hintergrundfarbe transparent machen möchten, verwenden Sie am besten RGBa.

    RGBa-Modell

    CSS3 bietet eine andere Möglichkeit, die Transparenz zu ändern: das RGBa-Modell. Dies ist RGB, das wir zuvor untersucht haben, aber mit einem vierten Parameter: Transparenzstufe (Alpha-Kanal). Bei der Einstellung 1 ist der Hintergrund vollständig undurchsichtig. Wenn der Wert kleiner als 1 ist, wird er transparent.

    Diese Bezeichnung wird von allen modernen Browsern erkannt, einschließlich Internet Explorer (ab Version IE9). Für ältere Browser wird empfohlen, zusätzlich zu RGBa den Standard-RGB-Code anzugeben.

    Fazit

    Wir ändern die Textfarbe mit der Farbeigenschaft und die Hintergrundfarbe mit der Hintergrundfarbe. Es kann auch verwendet werden, um den Hintergrund über die gesamte HTML-Seite zu strecken.

    Sie können eine Farbe angeben, indem Sie ihren Namen (z. B. schwarz), einen Wert im Hexadezimalformat (# FFC8D3) oder einen RGB-Code (rgb (250, 25, 118)) eingeben.

    Sie können auch ein Hintergrundbild mit der Eigenschaft background-image hinzufügen, das Hintergrundbild anheften, es als Mosaik anzeigen und es sogar an einer beliebigen Stelle auf der Webseite platzieren.

    Sie können einen Teil einer Webseite auch transparent machen, indem Sie die Eigenschaft opacity verwenden oder RGBa angeben.

    Diese Publikation ist eine Übersetzung des Artikels „Farbe und Hintergrund“, der vom freundlichen Team des Internet technology.ru-Projekts erstellt wurde

    Programmierung

    Um den Farbhintergrund der Seite zu ändern, wird ein Tag angewendet. bgcolor = "# color". Anstelle der Wortfarbe werden die HTML-Farben des RGB-Modells eingefügt, von den 3 Grundfarben sind Rot, Grün, Blau. Jede Farbe besteht aus 2 Zeichen von 0 bis 9 oder Buchstaben von A bis F.

    Ein Beispiel für einen schwarzen Datensatz ist "# 000000".
    weiß - "#FFFFFF",
    rot - "# FF0000",
    grün - "# 33CC00",
    gelb - "# FFFF00".

    Um die Hintergrundfarbe der gesamten Seite festzulegen, schreiben wir: (Reihenfolge: rot / grün / blau). Das Tag bgcolor wird auch in das Tag eingefügt, das Sie ändern möchten. Zum Beispiel
    oder .

    Sie können ein Bild oder Foto als Hintergrund festlegen. Um die Farbe des Texts auf der gesamten Seite zu ändern, wird die Option - text verwendet. Es muss in das Tag eingefügt werden . Wenn Sie die Farbe eines bestimmten Textabschnitts ändern müssen, müssen Sie das Tag anwenden . Dies wird noch geschrieben text

    Wenn Sie die Farbe von Hyperlinks ändern möchten, lautet der folgende Parameter:
    .Sie können auch die Farbe des aktiven Links und des übergebenen Links festlegen

    HTML-Primärfarbendiagramm

    aliceblue# F0F8FF& nbsp altweiß# FAEBD7& nbsp Aquamarin# 7FFFD4& nbsp azurblau# F0FFFF& nbsp beige# F5F5DC& nbsp Biskuit# FFE4C4& nbsp schwarz#000000& nbsp blanchedalmond#FFEBCD& nbsp blau# 0000FF& nbsp Blueviolet# 8A2BE2& nbsp braun# A52A2A& nbsp Burlywood# DEB887& nbsp Cadetblue# 5F9EA0& nbsp Chartreuse# 7FFF00& nbsp schokolade# D2691E& nbsp Koralle# FF7F50& nbsp Kornblumenblau# 6495ED& nbsp Maisseide# FFF8DC& nbsp Purpur# Dc143c& nbsp cyan# 00FFFF& nbsp dunkelblau# 00008B& nbsp Darkcyan# 008B8B& nbsp Dunkelgoldenrute# B8860B& nbsp dunkelgrau# A9A9A9& nbsp dunkelgrün#006400& nbsp Darkkhaki# BDB76B& nbsp darkmagenta# 8B008B& nbsp dunkelolivgrün# 556B2F& nbsp Dunkelorange# FF8C00& nbsp Darkorchid# 9932CC& nbsp dunkelrot# 8B0000& nbsp dunkler Lachs# E9967A& nbsp dunkelseegrün# 8FBC8F& nbsp darkslateblue# 483D8B& nbsp Darkslategray# 2F4F4F& nbsp darkturquoise# 00CED1& nbsp dunkelviolett# 9400D3& nbsp Deeppink# Ff1493& nbsp deepskyblue# 00BFFF& nbsp dunkelgrau#696969& nbsp dodgerblue# 1E90FF& nbsp Schamottestein# B22222& nbsp floralweiß# FFFAF0& nbsp waldgrün# 228B22& nbsp Fuchsie# FF00FF& nbsp Gainsboro#DCDCDC& nbsp ghostwhite# F8F8FF& nbsp Gold# FFD700& nbsp Goldrute# DAA520& nbsp grau#808080& nbsp grün#008000& nbsp grüngelb# ADFF2F& nbsp Honigtau# F0FFF0& nbsp hotpink# FF69B4& nbsp indianred# CD5C5C& nbsp Indigo# 4B0082& nbsp Elfenbein# FFFFF0& nbsp Khaki# F0E68C& nbsp Lavendel# E6E6FA& nbsp lavendelrot# FFF0F5& nbsp lawngreen# 7cfc00& nbsp Zitronenchiffon#FFFACD& nbsp hellblau# ADD8E6& nbsp Lichtkoralle# F08080& nbsp Lightcyan# E0FFFF& nbsp hellgoldenrodyellow# FAFAD2& nbsp hellgrün# 90EE90& nbsp hellgrau# D3D3D3& nbsp hellrosa# FFB6C1& nbsp Lichtlachs# FFA07A& nbsp hellgrün# 20B2AA& nbsp lichthellblau# 87CEFA& nbsp Lichtstrahl#778899& nbsp hellstahlblau# B0C4DE& nbsp hellgelb# FFFFE0& nbsp Kalk# 00FF00& nbsp limegreen# 32CD32& nbsp Leinen# FAF0E6& nbsp Magenta# FF00FF& nbsp kastanienbraun#800000& nbsp Mediumaquamarin# 66CDAA& nbsp mittelblau# 0000CD& nbsp mediumorchid# BA55D3& nbsp mittelviolett# 9370DB& nbsp mittelgrün# 3CB371& nbsp mittelblau# 7B68EE& nbsp mittelgrün# 00FA9A& nbsp Mitteltürkis# 48D1CC& nbsp mittelvioletriert# C71585& nbsp mitternachtsblau#191970& nbsp Minzcreme# F5FFFA& nbsp Mistyrose# FFE4E1& nbsp Mokassin# FFE4B5& nbsp navajoweiß#FFDEAD& nbsp Marine#000080& nbsp oldlace# FDF5E6& nbsp olive#808000& nbsp olivedrab# 6B8E23& nbsp orange# FFA500& nbsp orangered# Ff4500& nbsp Orchidee# DA70D6& nbsp Palegoldenrute# EEE8AA& nbsp hellgrün# 98FB98& nbsp paleturquoise#AFEEEE& nbsp palevioletriert# Db7093& nbsp Papayawhip# FFEFD5& nbsp Pfirsichquaste# FFDAB9& nbsp Peru# Cd853f& nbsp pink# FFC0CB& nbsp Pflaume# DDA0DD& nbsp puderblau# B0E0E6& nbsp lila#800080& nbsp rot# Ff0000& nbsp rosigbraun# BC8F8F& nbsp königsblau# 4169E1& nbsp sattelbraun# 8B4513& nbsp Lachs# FA8072& nbsp sandbraun# F4A460& nbsp Seegrün# 2E8B57& nbsp Muschel# FFF5EE& nbsp Siena# A0522D& nbsp Silber# C0C0C0& nbsp himmelblau# 87CEEB& nbsp schieferblau# 6A5ACD& nbsp Slategray#708090& nbsp schnee#FFFAFA& nbsp frühlingsgrün# 00FF7F& nbsp Stahlblau# 4682B4& nbsp tan# D2B48C& nbsp blaugrün#008080& nbsp Distel# D8BFD8& nbsp Tomate# FF6347& nbsp türkis# 40E0D0& nbsp violett# EE82EE& nbsp weizen# F5DEB3& nbsp weiß#FFFFFF& nbsp Weißrauch# F5F5F5& nbsp gelb# FFFF00& nbsp gelbgrün# 9ACD32& nbsp
    Elemente für die Website.

    Zum Erstellen einer Website benötigen Sie einen Texteditor. Als letzte Möglichkeit können Sie Notepad aus Standard-Windows-Programmen verwenden. Es ist jedoch besser, sofort einen Texteditor herunterzuladen, mit dem beispielsweise Websites erstellt werden können Notizblock


    Die Hauptbrowser Internet Explorer, Opera, Google, Firefox müssen auf Ihrem Computer installiert sein, ein Grafikeditor muss installiert sein, um Grafiken beispielsweise kostenlos verarbeiten zu können Photoscape

    Um Dateien Ihrer Site auf das Hosting hochzuladen, laden Sie sich beispielsweise kostenlos einen FTP-Client herunter und installieren Sie ihn Filezilla


    Installieren Sie auch ein einfaches Animationsprogramm.

    Es lohnt sich, auf die Sicherheit Ihres Computers zu achten. Das Vorhandensein Ihrer Website erfordert die häufige Verwendung von E-Mails auf der Website, eingehende Briefe an Ihren Posteingang, den Besuch verschiedener Ressourcen im Internet und die ständige Aktualisierung von Antivirenprogrammen.

    Bereinigen und defragmentieren Sie Ihre Festplatten häufiger. Überprüfen und korrigieren Sie einmal im Monat Registrierungsfehler.

    Sehen Sie sich das Video an: Photoshop - Freistellen: Farben von Motiv und Hintergrund anpassen (Oktober 2019).