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:
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