So legen Sie ein Hintergrundbild in CSS fest
Das Erstellen einer Website ist eine großartige Möglichkeit, sich auszudrücken. Obwohl es viele Tools zum Erstellen von Websites gibt, ist das Schreiben selbst eine unterhaltsame Möglichkeit, mehr über die Funktionsweise von Websites hinter den Kulissen zu erfahren. Ein gutes Anfängerprojekt besteht darin, eine Website zu erstellen und ein Hintergrundbild mit CSS hinzuzufügen. Dieses Projekt bringt Sie sowohl mit HTML als auch mit CSS zum Laufen.
Was ist CSS?
CSS steht für Cascading Style Sheet. Es ist eine Programmiersprache, mit der Sie Markup-Sprachen formatieren können. Eine solche Auszeichnungssprache ist HTML oder Hyper-Text-Auszeichnungssprache. HTML wird zum Erstellen von Websites verwendet. Obwohl Sie einen Teil des Stils der Website mithilfe von HTML steuern können, bietet CSS wesentlich mehr Steuerungs- und Gestaltungsoptionen.
Erstellen einer einfachen Website mit HTML
Da CSS nur eine Stilsprache ist, benötigen wir zunächst etwas zum Stylen. Eine sehr einfache Website wird ausreichen, um mit CSS zu spielen. Auf unserer Seite wird "Hallo Welt" angezeigt.
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>Wenn Sie mit HTML nicht vertraut sind, gehen wir kurz auf alle Elemente ein. Wie bereits erwähnt, ist HTML eine Auszeichnungssprache, dh es werden Tags verwendet, um den Text zu markieren. Immer wenn Sie ein Wort sehen, das von <> umgeben ist , ist es ein Tag. Es gibt zwei Arten von Tags: ein Tag, das den Anfang eines Abschnitts mit <> markiert, und eines, das das Ende eines Abschnitts mit </> markiert. Der Text innerhalb eines Abschnitts soll diese Unterscheidung auch leichter verständlich machen.
In unserem Beispiel haben wir vier Tags. Das HTML- Tag gibt an, welche Elemente Teil der Website sind. Das Head- Tag enthält die Header-Informationen, die nicht auf der Seite angezeigt werden, sondern zum Erstellen der Seite benötigt werden. Alle angezeigten Elemente befinden sich zwischen den Body- Tags. Wir haben nur ein angezeigtes Element, das p- Tag. Es teilt dem Webbrowser mit, dass der Text ein Absatz ist.
Hinzufügen von CSS zu HTML
Nachdem wir eine einfache Seite haben, können wir den Stil mit CSS anpassen. Unsere Seite ist momentan ziemlich einfach, und wir können nicht viel tun. Beginnen wir jedoch damit, unseren Absatz hervorzuheben, damit wir ihn durch Hinzufügen eines Rahmens vom Hintergrund unterscheiden können.
<html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>
Jetzt wird unser Absatz von einem schwarzen Rand umgeben sein. Durch Hinzufügen einer Stilbeschreibung in CSS zu unserem Absatz-Tag wurde der Website mitgeteilt, wie der Absatz formatiert werden soll. Wir können weitere Beschreibungen hinzufügen. Lassen Sie uns den Leerraum oder den Abstand um unseren Absatz vergrößern und unseren Text zentrieren.
<html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>
Unsere Website sieht besser aus, aber unser HTML-Code sieht mit all diesen Beschreibungen im Absatz-Tag unordentlich aus. Wir können diese Informationen in unseren Header verschieben. Unser Header enthält Informationen, die wir benötigen, um die Website korrekt anzuzeigen.
<html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Jetzt ist unser HTML leichter zu lesen. Sie werden feststellen, dass wir einige Dinge ändern mussten. Das Style-Tag informiert den Webbrowser über Stilinformationen, aber auch darüber, was zu stylen ist. In unserem Beispiel haben wir zwei verschiedene Methoden verwendet, um zu bestimmen, was zu stylen ist. Das p im Stil-Tag weist den Webbrowser an, diesen Stil auf alle Absatz-Tags anzuwenden. Der Abschnitt #ourParagraph weist an, nur Elemente mit der ID ourParagraph zu formatieren . Beachten Sie, dass dem p-Tag in unserem Körper ID- Informationen hinzugefügt wurden.
Importieren einer CSS-Datei in Ihre Website
Das Hinzufügen der Stilinformationen zum Header erleichtert das Lesen unseres Codes erheblich. Wenn wir jedoch viele verschiedene Seiten auf die gleiche Weise gestalten möchten, müssen wir diesen Text oben auf jeder Seite hinzufügen. Das scheint nicht viel Arbeit zu sein, Sie können es schließlich kopieren und einfügen, aber es verursacht viel Arbeit, wenn Sie ein Element später ändern möchten.
Stattdessen werden wir die CSS-Informationen in einer separaten Datei speichern und die Datei importieren, um die Seite zu formatieren. Kopieren Sie die Informationen zwischen den Stil-Tags und fügen Sie sie in eine neue CSS-Datei ourCSSfile.css ein .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Importieren Sie dann die Datei in die HTML-Datei.
<html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Hinzufügen eines Hintergrundbilds mit CSS
Nachdem Sie eine solide Basis in HTML und CSS haben, ist das Hinzufügen eines Hintergrundbilds ein Kinderspiel. Identifizieren Sie zunächst, welchem Element Sie ein Hintergrundbild geben möchten. In unserem Beispiel fügen wir der gesamten Seite einen Hintergrund hinzu. Dies bedeutet, dass wir den Stil des Körpers ändern wollen. Denken Sie daran, dass die Body-Tags alle sichtbaren Elemente enthalten.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Verwenden Sie zuerst das Schlüsselwort body, um den Body-Stil in CSS zu ändern. Fügen Sie dann wie zuvor geschweifte Klammern hinzu {}. Alle Stilinformationen für den Körper müssen sich zwischen den geschweiften Klammern befinden. Das Stilattribut, das wir ändern möchten, ist Hintergrundbild . Es gibt viele Stilattribute. Erwarten Sie nicht, sie alle auswendig zu lernen. Setzen Sie ein Lesezeichen für einen CSS-Eigenschaften-Spickzettel mit Attributen, an die Sie sich erinnern möchten.
Verwenden Sie nach dem Attribut einen Doppelpunkt, um anzugeben, wie Sie das Attribut ändern. Verwenden Sie url (), um ein Bild zu importieren. Es zeigt an, dass Sie einen Link verwenden, um auf das Bild zu verweisen. Platzieren Sie den Speicherort der Datei in den Klammern zwischen Anführungszeichen. Beenden Sie die Zeile mit einem Semikolon. Obwohl Leerzeichen in CSS keine Bedeutung haben, verwenden Sie Einrückungen, um das Lesen des CSS zu erleichtern.
Unser Beispiel sieht so aus:
Wenn Ihr Bild aufgrund der Größe des Bildes nicht richtig angezeigt wird, können Sie das Bild direkt ändern. Es gibt jedoch Hintergrundstilattribute in CSS, mit denen Sie den Hintergrund ändern können. Bilder, die kleiner als der Hintergrund sind, werden automatisch im Hintergrund wiederholt. Um dies auszuschalten, fügen Sie Hintergrundwiederholung hinzu : keine Wiederholung ; zu deinem Element.
Es gibt auch zwei Möglichkeiten, ein Bild so zu gestalten, dass es den gesamten Hintergrund abdeckt. Zunächst können Sie die Hintergrundgröße auf die Größe des Bildschirms mit der Hintergrundgröße einstellen : 100% 100%; Dies wird jedoch das Bild dehnen und das Bild möglicherweise zu stark verzerren. Wenn Sie nicht möchten, dass die Proportionen des Bildes geändert werden, können Sie auch die Hintergrundgröße so einstellen, dass sie abdeckt . Durch das Cover wird das Hintergrundbild den Hintergrund abdecken, das Bild jedoch nicht verzerren.
Ändern der Hintergrundfarbe
Lassen Sie uns eine letzte Sache ändern. Jetzt, da wir einen Hintergrund haben, ist unser Absatz schwer zu lesen. Lassen Sie uns den Hintergrund weiß machen. Der Prozess ist ähnlich. Das Element, das wir ändern möchten, ist #ourParagraph. Das # gibt an, dass "ourParagraph" ein ID-Name ist. Als nächstes wollen wir das Hintergrundfarbenattribut auf Weiß setzen.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}
Viel besser.
Weiteres Entwerfen Ihrer Website mit CSS
Jetzt, da Sie wissen, wie Sie den Stil verschiedener HTML-Elemente ändern können, ist der Himmel die Grenze! Die grundlegende Methode zum Ändern von Stilattributen ist dieselbe. Identifizieren Sie das Element, das Sie ändern möchten, und beschreiben Sie, wie Sie das Attribut ändern. Der beste Weg, mehr zu lernen, besteht darin, mit verschiedenen Attributen herumzuspielen. Fordern Sie sich heraus, als nächstes die Farbe Ihres Textes zu ändern.