HTML (aus dem Englischen. HyperText Markup Language (HyperText Markup Language) ist eine standardmäßige Web–Markup-Sprache, die zum Erstellen und Strukturieren von Websiteinhalten verwendet wird. Eines der Hauptelemente, mit dem Sie dem Design der Seite eine einzigartige und individuelle Note verleihen können, ist die Einstellung der Hintergrundfarbe.
Sie können die Hintergrundfarbe einer HTML-Seite mithilfe eines Attributs festlegen bgcolor im Tag body. Dazu müssen Sie einen Farbwert im Hexadezimalformat angeben, z. B. #FF0000 für Rot. Sie können auch Farbnamen wie rot für Rot verwenden. Dadurch würde der HTML-Code ungefähr so aussehen:
Ab HTML5 wird jedoch empfohlen, dieses Attribut durch Stile zu ersetzen. Verwenden Sie die Eigenschaft, um die Hintergrundfarbe einer Seite in HTML5 festzulegen background-color in CSS. Um die Hintergrundfarbe festzulegen, müssen Sie einen Seitenselektor angeben (dies ist normalerweise ein Tag body) und einen Stil mit der background-color-Eigenschaft anwenden, z:
Jetzt kennen Sie zwei Möglichkeiten, die Hintergrundfarbe einer Seite in HTML festzulegen – mit dem bgcolor-Attribut und über CSS mit der background-color-Eigenschaft. Die Auswahl der Methode hängt von der verwendeten HTML-Version ab und davon, ob andere Stilregeln auf der Seite vorhanden sind.
Optionen für farbigen Hintergrund in HTML
In HTML gibt es mehrere Möglichkeiten, die Hintergrundfarbe für eine Seite festzulegen. Hier werden wir uns einige von ihnen ansehen:
- Die Verwendung des style-Attributs für ein Element ist der einfachste Weg, um die Hintergrundfarbe festzulegen. Fügen Sie dem Tag einfach ein style-Attribut hinzu und geben Sie die gewünschte Farbe im CSS-Format an. Zum Beispiel, legt einen roten Hintergrund für die gesamte Seite fest.
- Verwenden eines Stilblocks - für komplexere Hintergrundstile können Sie einen Stilblock innerhalb des Tags verwenden . Erstellen Sie einen neuen Stilblock mit einem Tag
- Verwenden von Klassen - wenn Sie verschiedene Hintergrundfarben für verschiedene Teile der Seite festlegen möchten, können Sie Klassen verwenden. Erstellen Sie einen Stilblock mit einem Tag ÜberschriftInhalt
- Verwenden eines Bildes als Hintergrund - um einen komplexeren Hintergrund zu erstellen, können Sie ein Bild verwenden. Dazu müssen Sie die URL des Bildes mit der Eigenschaft background-image festlegen und andere Hintergrundstile wie Bemaßungen, Wiederholungen und Ausrichtung definieren. Zum Beispiel:
Dies sind nur einige Beispiele für das Festlegen eines farbigen Hintergrunds in HTML. Sie können verschiedene Methoden kombinieren, um das gewünschte Ergebnis zu erzielen. Beachten Sie, dass die Verwendung von Bildern als Hintergrund zusätzliche Kosten für das Laden der Seite verursachen kann. Daher wird empfohlen, die Größe und Qualität der Seiten zu optimieren.
Verwenden des Style-Attributs
Mit dem style-Attribut in HTML können Sie Stile auf Elemente einer Webseite anwenden. Mit dieser Option können Sie die Hintergrundfarbe einer Seite oder deren Fragmente ändern.
Sie können das style-Attribut im Body-Tag verwenden, um die Hintergrundfarbe der Seite zu ändern:
style >
Wo Farbe ist ein Farbwert, der im HEX- oder RGB-Format angegeben wird.
Um beispielsweise die Hintergrundfarbe einer Seite auf Rot zu setzen (Hex-Code #FF0000), verwenden Sie den folgenden Code:
style="background-color: #FF0000;">
Sie können auch Farbnamen verwenden, z. B. um die Hintergrundfarbe einer Seite auf Grün festzulegen:
style="background-color: green;">
Wenn Sie die Farbe nur für einen bestimmten Teil der Seite und nicht für die gesamte Seite festlegen möchten, können Sie ein ähnliches style-Attribut in einem Tag verwenden, das das Segment beschreibt.
Zum Beispiel, um die Hintergrundfarbe nur für ein Element mit dem Tag p festzulegen:
style >
Wo Farbe - dies ist der Farbwert, wie im vorherigen Fall.
Dadurch kann das Style-Attribut die Hintergrundfarbe der Seite oder ihrer Fragmente leicht ändern, wodurch ein interessanter visueller Effekt erzielt und die Lesbarkeit des Inhalts auf der Website verbessert wird.
Verwenden von Klassen
Sie können Klassen verwenden, um einer Seite in HTML einen farbigen Hintergrund hinzuzufügen. Verwenden Sie die folgenden Schritte, um einen farbigen Hintergrund anzuwenden:
-
1. Definieren Sie eine Klasse in CSS, indem Sie die gewünschte Farbe in der background-color-Eigenschaft angeben. Zum Beispiel:
Некоторый текст или контент страницы
Nachdem Sie die Klasse "colorful-bg" auf ein Element angewendet haben, wird der Hintergrund der Seite farbig dargestellt. Sie können diesen Ansatz für jedes andere HTML-Element verwenden, indem Sie die gewünschte Klasse hinzufügen.
Verwenden von Pseudoklassen
In HTML können Sie den Stil von Elementen basierend auf ihrem Zustand oder ihrer Position im Dokument mithilfe von Pseudoklassen ändern. Pseudoklassen werden Selektoren in CSS hinzugefügt und ermöglichen es Ihnen, interessante und dynamische Effekte auf einer Webseite zu erstellen.
Eine der am häufigsten verwendeten Pseudoklassen - :hover, mit dem Sie den Stil eines Elements ändern können, wenn sich der Mauszeiger darüber befindet. Sie können beispielsweise die Hintergrundfarbe einer Schaltfläche ändern, wenn Sie darauf zeigen:
button:hoverEine weitere nützliche Pseudoklasse - :nth-child ermöglicht die Auswahl von Elementen basierend auf ihrer Position im übergeordneten Element. Sie können beispielsweise den Stil jedes zweiten Absatzes auf einer Seite ändern:
p:nth-child(2n)Es gibt auch Pseudoklassen für die Arbeit mit Referenzen. Zum Beispiel eine Pseudoklasse :link gilt für nicht zugeordnete Links, und :visited - zu den Besuchten. Mit diesen Pseudoklassen können Sie beispielsweise die Farbe von Links ändern, wenn Sie sich bewegen oder besuchen:
a:link a:visited a:hoverNeben diesen grundlegenden Pseudoklassen gibt es auch viele andere in CSS, mit denen Sie komplexere Effekte und Animationen erstellen können. Die Verwendung von Pseudoklassen ist ein leistungsfähiges Werkzeug, um interaktive und schöne Webseiten zu erstellen.
Verwenden von Bildern als Hintergrund
In HTML können Sie Bilder als Hintergrund für eine Seite verwenden. Verwenden Sie dazu die CSS-Eigenschaft background-image.
Im folgenden Beispielcode wird veranschaulicht, wie ein Bild als Hintergrund verwendet wird:
body
Hier ist der body ein Selektor, der auf das Element zeigt. Die Eigenschaft background-image gibt den Pfad zur Bilddatei an, der den Hintergrund der Seite angibt.
Sie können die CSS-Eigenschaften background-size und background-repeat hinzufügen, um sicherzustellen, dass das Bild den gesamten verfügbaren Hintergrundbereich einnimmt :
body
In diesem Beispiel background-size: cover weist den Browser an, das Bild so zu skalieren, dass es den Hintergrund vollständig bedeckt, ohne das Seitenverhältnis zu verzerren. Die Eigenschaft background-repeat: no-repeat gibt an, dass das Bild nicht im Hintergrund wiederholt werden soll.
Die Verwendung eines Bildes als Hintergrund kann ein effektives Design für Ihre Webseite erstellen und das Erscheinungsbild der Website verbessern.
