So ändern Sie den Hintergrund von Webseiten. So setzen Sie die Farbe des Hintergrunds und des Textes auf der Webseite

Mittels CSS-Farbe und Hintergrund Sie können fast alle Elemente einer Webseite angeben, das Hintergrundbild frei steuern, es ist wiederholt horizontal und vertikal. Neben, cSS-Tools. Sie können das Hintergrundbild mit der Positionierung in einem beliebigen Punktbildschirm platzieren. Wir werden noch nicht weit gehen, lass uns in Ordnung gehen.

Farbeigenschaft

Diese Eigenschaft setzt die Farbe des Elements oder eher die Farbe des Textes innerhalb des Elements. Der Wert wird von einer der möglichen Formulare angegeben:

  • farbname (grün, schwarz, rot ...);
  • sandsteinfarbcode (008000, 000000, FF0000 ...);
  • dezimalfarbcode in RGB (Farbe: RGB (40, 175, 250));

Die Farbeigenschaft wird vererbt, und mit einem nicht angegebenen Wert für jedes Element wird der Wert von seinem Vorfahren vererbt. Es kann sich jedoch herausstellen, dass für den Vorfahren nicht angegeben wird - dann wird die Browser-Stile-Tabelle mit den Standardwerten angewendet. Die Farbe des Elements in diesem Fall ist höchstwahrscheinlich schwarz.

Wie ich bereits erwähnt habe, können Sie die Farbe auf fast alle Elemente einstellen, es kann (H1 ... H6), (stark, em) und sogar ganz (p) und sogar die Grenzen der Tische, aber dies später sein.

Wir sehen ein Beispiel für eine Textfarbaufgabe, wenn cSS-Hilfe:

h1 (Farbe: blau)

In diesem Beispiel sind alle Schlagzeilen der ersten Ebene der Webseite blau:

stark (Farbe: rot)

In diesem Fall werden alle, die im Text der Seite der Seite von einem Tag hervorgehoben werden stark.Es wird in eine rote Farbe.

Sie können so schreiben:

h1, P, stark (Farbe: Grün)

Dann sind die Schlagzeilen der ersten Ebene, alle Absätze und alles, was von dem Tag hervorgehoben wird, grün.

Wenn es erforderlich ist, Schlagzeilen mit unterschiedlichen Farben hervorzuheben, werden die Klassenwelzgeräte verwendet. Ein Attribut wird verwendet, um eine Klasse in HTML zu definieren klassewas auf irgendwelche Elemente angewendet werden kann. In HTML-Code muss der Code schreiben:

klasse \u003d "blau"\u003e Die Farbe der Header dieser Klasse ist blau

In der Tabelle der Stile CSS schreiben wir in diesem Fall die Regel, in der der Wähler das H1-Element ist, und durch den Punkt ( . ) Klassenname:

h1.Blue (Farbe: blau)

In HTML-Dokumenten werden auch die Identifiziererselektoren verwendet, sie werden vom Attribut bestimmt. ich würde. Die Kennung ist ein wichtigeres oder vorrangiges Merkmal als eine Klasse. Wenn ein Klassen- und Kennung auch im HTML-Code für das Element angegeben wird, gilt der Identifier-Stil. Bezeichnet den Kennung des Gitterzeichens ( # ). Um in HTML-Identifizierer-Code zu verwenden, müssen Sie schreiben:

iD \u003d "blau"\u003e Die Farbe der Titel dieser Kennung ist blau

Im Stilblatt wiederum:

h1 # Blau (Farbe: blau)

HINTERGRUNDFARBE

Mit dieser Eigenschaft können Sie die Hintergrundfarbe für die gesamte Seite, Absatz, Links, im Allgemeinen für jedes HTML-Element einstellen. Dazu gibt der Eigenschaftswert die Farbe oder den Wert an transparent(transparent). Der Code für die Hintergrundseite ist geschrieben:

körper (Hintergrundfarbe: Aqua)

In diesem Fall wird der Hintergrund der Seite türkis sein und den Header-Hintergrund geben:

h1 (Hintergrundfarbe: gelb)

Wir bekommen einen gelben ersten Header-Hintergrund der ersten Ebene.

Farbe und Hintergrund in CSS

Hintergrundwiederholungseigenschaft

Diese Eigenschaft wird angewendet, wenn Sie festlegen, ob er horizontal und vertikal wiederholt wird. Gültige Werte:

  • wiederholen. - Das Bild wird vertikal und horizontal wiederholt;
  • wiederholen - Das Bild wird nur horizontal wiederholt;
  • wiederholen - Das Bild wird nur von senkrecht wiederholt;
  • no-Repeat - Das Bild wird nicht wiederholt.

Der Code ist so geschrieben:

p (
background-Image: URL ( bilddatei mit Bild) ;
hintergrund-Wiederholung: Wiederholen
}

Der Text dieses Absatzes liegt auf dem Hintergrundbild, das horizontal ist.

Grundstücksansatzeigenschaft

Diese Eigenschaft wird anwendet, um den Browser anzugeben, falls das Hintergrundbild der Seite mit dem Text blättern ( scrollen) oder beheben bleiben ( fest).

körper (
background-Image: URL ( bilddatei mit Bild) ;
hintergrund-Wiederholung: Wiederholen-x;
hintergrundbefestigung: Fixiert
}

In diesem Fall bleibt das Hintergrundbild unbeweglich.

Hintergrundpositionseigenschaft

Diese Eigenschaft wird verwendet, um das Bild relativ zu lokalisieren. Die Werte sind als Prozentsatz (%), in Länge (cm, px), Schlüsselwörter:

  • Vertikal:
    • oben. - Die Oberseite des Bildes ist an der oberen Kante der Seite oder des Blocks ausgerichtet;
    • center
    • unterseite - Der Boden des Bildes ist an der Unterkante der Seite oder des Blocks ausgerichtet.
  • Waagerecht:
    • links. - Der linke Rand des Bildes ist an der linken Kante der Seite oder des Blocks ausgerichtet;
    • center - Die Mitte des Bildes ist in der Mitte der Seite oder des Blocks nivelliert.
    • recht - Der rechte Rand des Bildes wird am rechten Rand der Seite oder des Blocks nivelliert.

Wir schreiben einen Beispielcode in Prozent, Längeneinheiten und Schlüsselwörter:

körper (
background-Image: URL ( bilddatei mit Bild) ;
hintergrundposition: 0% 0%
}

Körper (
background-Image: URL ( bilddatei mit Bild) ;
hintergrundposition: 10px 25 cm
}

Körper (
background-Image: URL ( bilddatei mit Bild) ;
hintergrundposition: Top Center
}

Set Hintergrundfarbe und / oder ein Bild für eine Seite oder ein separater Artikel ist einfach genug. Die Hauptsache ist zu wissen, wo und wie es getan werden kann, sowie einen Farbcode und / oder ein Hintergrundbild. Es ist möglich, dass Sie aus diesem Artikel viele neue Dinge lernen, aber ich habe es speziell für Anfänger geschaffen. Daher wird alles so kurz wie möglich und im Detail gleichzeitig detailliert sein. Die Hauptsache ist, dass Sie nicht nur die Gesamtpräsentation und einwandfreie Beispiele erhalten, sondern auch das Verständnis des Verständnisses, wie man einen Hintergrund in HTML erstellt.

Um den Hintergrund in HTML einzustellen, verwenden Sie die Zwischen-Doctype

Und ich werde mit der Tatsache beginnen, dass HTML5. Keine Gelegenheit zu fragen. Diese Funktion wurde beschlossen, in CSS zu ertragen. Wenn Sie nachfolgend einen gültigen (korrekten) Code verwenden möchten, müssen Sie daher einen gültigen (korrekten) Code abrufen, um bei der Übergangsart des Dokuments zu bleiben. Dazu soll Ihre Webseite mit der folgenden Zeile beginnen:

Übergang// de "" http://www.w3.org/tr/html4/loose.dtd "\u003e

Wenn Sie es herausgefunden haben, lassen Sie uns verstehen, wie der Hintergrund erstellt wird. Und das erste, was hier hier ist - das ist der Unterschied zwischen hintergrundfarbe und hintergrundbild. Am Anfang geht hintergrundfarbedie den gesamten verfügbaren Seitenraum oder sein Element überflutet. Das wiederholte oben drauf hintergrundbild. Visuell kann dies wie folgt dargestellt werden:

Hintergrund des HTML-Dokuments und seiner Elemente

Das zweite, was Sie wissen müssen, ist der Unterschied zwischen leiche des Dokuments und element des Dokuments. Leiche des Dokuments Es wird im HTML-Code der Webseite des Body-Tags angezeigt, der den gesamten Inhalt der Webseite enthält. Natürlich kann der Hintergrund des Dokuments des Dokuments nicht transparent sein. Wenn der Hintergrund des Körpers des Dokuments nicht angegeben ist, wird der in den Browsereinstellungen angegebene Standardwert verwendet.

Seitenelemente sind im Körper-Tag. Es ist bemerkenswert, dass Sie das Farb- und / oder Hintergrundbild mit HTML an alle Elemente des Dokuments einstellen können. Zum Beispiel kann das Hintergrundbild nur für Tabellen angegeben werden. Standardmäßig haben sie normalerweise einen transparenten Hintergrund.

Attribut BGColor, um Hintergrundfarbe zu erstellen

Um zu fragen hintergrundfarbe Das Dokument oder seine Elemente werden vom BGColor-Attribut verwendet, beispielsweise:



In diesem Fall setzen wir die Hintergrundfarbe für die gesamte Seite als Ganzes. Aber ein Beispiel, wie man die Hintergrundfarbe für den Tisch in Tabelle einstellt:





Text mit Hintergrund.

Es ist bemerkenswert, dass die Hintergrundfarbe in der Tabelle auch für Zeilen im TR-Tag und für ihre Zellen im TD-Tag angegeben werden kann.

Wie erfahren Sie den Farbcode?

Sie haben wahrscheinlich bereits bemerkt, dass die Farbe in HTML auf Special eingestellt ist codeZum Beispiel: # EC008C. Um den Code herauszufinden, benötigen Sie die Farbe, die Sie mit einem der Grafikeditoren verwenden können. Zum Beispiel können Sie in Photoshop verwenden " Pipette."(Pipette), um eine Farbe von einem Punkt auf dem Bild zu erhalten. Sie müssen dann auf die resultierende Farbe in der Symbolleiste klicken, und in dem öffnenden Fenster " Farbwähler(Wählen Sie Farbe) Kopieren Sie den Farbcode.

Ich ziehe Ihre Aufmerksamkeit auf die Tatsache, dass dieser Code zu Beginn ohne Gitterzeichen (#) sein wird, muss dieses Zeichen manuell hinzugefügt werden.

Sie können auch zahlreiche verwenden online Dienste, z.B:

  • usw.

Ihr Arbeitsprinzip ist noch einfacher - klicken Sie auf die gewünschte Farbe und erhalten Sie den Code.

Attribut-Hintergrund, um ein Hintergrundbild zu erstellen

Sowie im Falle der Hintergrundfarbe und im Fall von hintergrundbildSie müssen ein spezielles Attribut verwenden, nämlich Hintergrund, zum Beispiel:



In diesem Fall fragen wir den Hintergrundbild für die Seite als Ganzes. Es ist bemerkenswert, dass es aufgrund der Einschränkungen der Größe des Bildes wiederholt wird, zum Beispiel:

Wenn Sie sehen, wenn Sie sich wiederholen, ist der Übergang zwischen den Bildern spürbar. Daher werden spezielle Bilder häufig verwendet, in denen dieser Moment berücksichtigt wird.

Aber ein Beispiel dafür, wie ein Hintergrundbild für einen Tisch eingestellt wird, in Table-Tag:





Text mit Hintergrund.

Es ist bemerkenswert, dass das Hintergrundbild nur für den Tisch als Ganzes und / oder seine separate Zelle eingestellt werden kann. Für eine Zeichenfolge funktioniert es nicht.

Absoluter und relativer Pfad zum Hintergrundbild

Es ist separat wert, aufmerksam zu sein adressierendes hintergrund bild.. In diesem Fall wird der relative Pfad zum Bild verwendet, d. H. Die Adresse ist an dem Speicherort der Bilddatei in die Webseitendatei angegeben. Diese Option kann nicht besonders erfolgreich bezeichnet werden. Es ist am besten, den absoluten Pfad zum Bild zu verwenden, d. H. seine volle URL., z.B:



In diesem Fall haben Sie keine gleichberechtigten Probleme. Für mehr darüber können Sie lesen.

Lass uns zusammenfassen

Die Verwendung der Attribute BGColor und der Hintergrund ist moralisch veraltet, denn für die Gültigkeit des HTML-Codes müssen Sie den Übergangsdoktyp verwenden. Um die Hintergrundfarbe in HTML einzustellen, verwendet spezielle Codes, die Sie in einem Grafik-Editor erfahren oder spezielle Online-Dienste verwenden. Das Hintergrundbild ist in den Schwänzen des zugeteilten Gebiets dupliziert und liegt auf der Hintergrundfarbe. Um ein Hintergrundbild anzugeben, ist es besser, seine volle URL zu verwenden. Ich habe alles dabei. Vielen Dank für Ihre Aufmerksamkeit. Viel Glück!

um 22:37. Nachricht bearbeiten

Guten Tag an alle, um etwas Neues zu lernen und lernen! Haben Sie jemals aufmerksam gemacht? aussehen Bei der Entwicklung, in der die Schöpfer faul waren, um einen Hintergrund von Seiten auszustellen? Und ich drehte mich um. Es sieht Schlachtung aus. Oft aufgrund des fehlens üblichen Trennungen zwischen verschiedene Arten Die Informationen, die sie gemischt ist, verschwindet einfach den Wunsch, eine solche Webressource weiter anzusehen.

Damit sich solche Probleme nicht passieren, entschied ich mich, einen Artikel zum Thema zu schreiben: "Wie man einen Hintergrund von Seiten in HTML erstellt." Nach dem Lesen der Publikation lernen Sie, mit welchen Werkzeugen, mit welchen Werkzeugen Sie den Hintergrunddesign einstellen können, wie Sie einen Hintergrund festlegen oder viel mehr ändern können, was dazu beitragen, Ihre Website attraktiv zu gestalten. Lass uns jetzt anfangen!

Grundlegende Tools zum Festlegen der Hintergrund-Webseiten

Um das Hintergrundbild einzustellen, haben Web-Sprache-Entwickler einen Attributhintergrund bereitgestellt. Es ist sowohl in als auch in CSS erhältlich.

In der MarkUp-Sprache ist dies ein Attribut des Body-Tags, und in den Stiltabellen - ein universelles Eigenschaft, mit dem Sie bis zu 5 die Eigenschaften des hinteren Planes gleichzeitig einstellen können. Hintergrund ist ein ziemlich flexibles Element, mit dem der Hintergrund als Farb-, Farbbild oder sogar Animation als Farb-, Farbbild vorhanden ist.

So installieren Sie ein Hintergrundbild über eine HTML-Einheit Genug, um diesen Code zu schreiben: ... Und anstelle der Wörter "Dateiadresse" einfügen den Pfad zum Bild.

HINWEIS! Wenn Sie in Form des Hintergrunds eine von der Farbpalette angegebene Monochon-Leinwand sehen möchten, erfolgt dies mit dem BGColor-Attribut.

Beispielsweise, ...Wir haben einen schwarzen Hintergrund für unsere Website gefragt.

Farben in CSS und HTML werden entweder von einem englischen Word (z. B. rot) oder einem speziellen Code eingestellt, der aus einem Zeichen # und sechs Zeichen danach besteht (z. B. # FFDAB9).

Bei der Eingabe einer zweiten Option in spezialisierter softwareprodukte Für Entwickler wird die Palette automatisch vor Ihnen angezeigt. Wenn Sie gerade angefangen haben, diese Websprachen zu lernen, kann der Farbcode im Internet gesperrt werden.

Hintergrund als Eigentum in Kaskadenstiltabellen

Es ist eingestellt oder in separate Datei. von cSS-Styles.oder im Element

Erster text

Zweiter Text

hintergrundbefestigung.

Bei der Konfiguration eines jeden Standorts, zusätzlich zur Funktionalität ist das Design sehr wichtig. Dies ist, was Ihren eigenen Stil und Design eines Unternehmens oder einer Person bittet, für die die Site erstellt wird. Fertigen Sie die Hintergrundfarbe an und sein Image ist keine Arbeit, die den Anweisungen in diesem Artikel nicht befolgt werden.

Öffnen Sie Ihre HTML-Datei für Notepad oder andere texteditorZu dem Sie gewöhnt sind. Nehmen Sie zum Beispiel eine primitive Seite der Site mit einem Minimum an Text. Sie können Ihre Datei mit einem beliebigen Browser öffnen.


Um mit dem Anfang zu beginnen, ändern Sie die Farbe Ihres Hintergrunds, wenn Menschen mit langsames Internet Die Verbindung wird nicht sofort das Hintergrundbild der Site sehen. Einige Zeit, bis das Bild geladen ist, können sie nur die Farbe Ihrer Website sehen.
Geben Sie in Tag ein. Der Parameter BGColor \u003d "*****", wobei ***** eine Farbverschlüsselung ist. Sie können Farben für HTML in einem beliebigen Grafikeditor lernen, indem Sie die Option "für Web" oder auf der Website https://colorscheme.ru/color-names auswählen


Sie haben genug, um eine Farbe in der Palette des Kreises zu wählen, und weisen Sie die Intensität innerhalb des Platzes zu. Auf der rechten Seite sehen Sie zwei Codes für HTML. Kopieren Sie sie und fügen Sie sie in das Notebook ein.


Mit der Farbe und in den Einfügen in den Code finden Sie unter, ob Sie alles richtig gemacht haben, und sehen Sie die empfangene Webseite aus dem Browser an.


Jetzt können Sie mit dem Einfügen des Hintergrundbildes fortfahren. Legen Sie das gewünschte Bild in den Code-Ordner, um mehr Komfort zu erhalten. Fragen Sie ihn den Namen lateinische Buchstaben.


Finden Sie nun den Speicherort der Datei heraus, indem Sie darauf klicken. rechtsklick Mäuse, wählen Sie "Öffnen mit" Zeichenfolge aus und klicken Sie auf einen beliebigen Browser, der auf Ihrem Computer installiert ist.


Kopieren Sie die Adresse von Ihrer Browser-Suchleiste.


Jetzt im Tag Geben Sie die Zeichenfolge ein:
  • style \u003d "Background-Image: URL ('Datei: /// c: / ussers / pow_file.jpg')"


Speichern Sie Ihre Datei.


Überprüfen Sie Ihre Webseite. Sie werden sehen, dass der Hintergrund unter Ihrem Text substituiert ist.


Bitte beachten Sie, dass Benutzer, die eine höhere Bildschirmauflösung haben, Ihr Bild heruntergefahren und rechts dupliziert. Es wird nicht gut aussehen, wenn das Bild kein Monophon ist. Um diesen Parameter zu korrigieren, gibt es spezielle Befehle.

  • hintergrund-Wiederholung: "Wert". Optionen für Ihren Wert können Folgendes sein: "Repeat-X" - Wiederholt Ihr Hintergrundbild und Ihre horizontal und vertikal. "Repeat-y" - nur vertikal wiederholen. "No-Repeat" - Das Bild ist an der Stelle eingefroren und wird nicht wiederholt. "Space" - Die gesamte Seite wird mit der maximalen Anzahl von Kopien des Bildes gefüllt, das EXTREME lebt. "Runde" - die gleiche Option, aber an den Rändern des Bildes wird ordentlich skaliert;
  • hintergrundbefestigung: "Wert". Wenn Sie anstelle des Worts "Scroll" ersetzen, blättern Sie mit dem Standort mit dem Bild. "Fixed" - beim Scrollen des Hintergrunds bleibt unverändert;
  • hintergrundgröße: Wertewert2. Hier müssen die Werte den Betrag in Pixel annehmen. Zum Beispiel: 100px 200px. Zusätzlich zu Pixeln werden Werte in Prozent akzeptiert. Dies ist der Bildfüllparameter. Zusätzlich zu Nummern können Sie zwei Parameter eingeben: "enthalten" - füllen Sie die Seite in der Seite vom Bild entlang der langen Seite und "Cover" - füllt die Seite mit dem Bild in der Breite.

Wenn Sie die Grundlagen des Füllens des Seitenhintergrunds in HTML kennen, können Sie Ihre erste Site erstellen.

Um die Farbe des Textes zu ändern, den ich geschrieben habe. Ich möchte sagen, dass es nicht immer bequem ist. Hier möchten Sie beispielsweise die Farbe des Textes des Ganzen ändern HTML-Seiten. Zum Beispiel ändert sich der schwarze Textfarbe auf rot. Dazu gibt es ein TEG-Attribut zum Tag . Ich möchte Tag einhaken Da dieses Tag keine Attribute hat, die nicht nur die Farbe des Textes ändern, sondern auch der Hintergrund aller HTML-Seiten. Und jetzt mehr und mit einem Beispiel.
Hier sind die Attribute, die wir jetzt für:

TEXT. - Dieses Attribut legt die Farbe des Textes des gesamten Dokuments fest.
Bgcolor. - Dieses Attribut zeigt die Hintergrundfarbe der HTML-Seite an.
Hintergrund. - Mit diesem Attribut können Sie den Hintergrund der Seitendeite füllen.

Das Textattribut wird im Tag verschrieben . Die Farbe wird im digitalen Code eingestellt:

oder der übliche Farbname:

Codiercode und Farbname für HTML Sie suchen hier.

Hier ist ein Beispiel:

Ergebnis:

Oder so:

Ändern Sie die Textfarbe mit dem Textattribut Textseite, Tische, Bilder, Musik und Video.

Ergebnis:

Mit dem BGColor-Attribut, das auch im Tag aufgestellt ist , Können Sie die Farbe der HTML-Seiten einstellen.

Die Farbe wird im digitalen Code eingestellt:

oder der übliche Farbname:

Hier ist ein Beispiel:

Ändern Sie die Hintergrundfarbe mit dem BGColor-Attribut Textseite, Tische, Bilder, Musik und Video.

Ergebnis:

Oder so:

Seitentitel Textseite, Tische, Bilder, Musik und Video.

Ergebnis:

Das Hintergrundattribut wird auch im Tag aufgestellt . Mit diesem Attribut können Sie einen Bildhintergrund erstellen. Bildformat Nehmen Sie JPG oder GIF. Die Erlaubnis des Bildes kann von 12x12 Pixeln und mehr aufgenommen werden.

Wenn das Hintergrundbild zusammen mit der HTML-Datei gepostet wird, sieht es so aus:

Wenn das Hintergrundbild in den Ordner Bildern veröffentlicht wird, sieht es so aus:

Hier ist ein Beispiel:

Seitentitel Textseite, Tische, Bilder, Musik und Video.

Ergebnis:

Oder so:

Seitentitel Textseite, Tische, Bilder, Musik und Video.

Das ist alles.
Jetzt wissen Sie, wie Sie die Hintergrundfarbe ändern oder einstellen können. Versuchen Sie, eine Lektion zu sichern, ändern Sie den Wert, das Experiment.
. Viel Glück !!!

Fortsetzung des Themas:
W-lan

Zu wissen, warum das Telefon erhitzt wird, kann der Benutzer versuchen, seine Temperatur zu reduzieren. Dies wird dazu beitragen, eines der häufigsten Probleme zu lösen - obwohl er damit konfrontiert ist ...