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.
Hallo Welt
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. Wann immer Sie ein Wort sehen, das von umgeben ist <> Es ist ein Tag. Es gibt zwei Arten von Tags: ein Tag, das den Beginn eines Abschnitts mit <> markiert, und eines, das das Ende eines Abschnitts mit <> markiert
In unserem Beispiel haben wir vier Tags. Das html Tag gibt an, welche Elemente Teil der Website sind. Das Kopf Das Tag enthält die Header-Informationen, die nicht auf der Seite angezeigt werden, aber zum Erstellen der Seite benötigt werden. Alle angezeigten Elemente befinden sich zwischen dem Körper Stichworte. Wir haben nur ein angezeigtes Element, das p Etikett. Es teilt dem Webbrowser mit, dass der Text ein Absatz ist.
Verbunden: 10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können
Möchten Sie mehr über die Verwendung von CSS erfahren? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.
Hinzufügen von CSS zu HTML
Nachdem wir nun 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.
Hallo Welt
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.
Hallo Welt
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.
Hallo Welt
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 style-Tag weist den Webbrowser an, diesen Stil auf alle Absatz-Tags anzuwenden. Das #ourParagraph Abschnitt weist es an, nur Elemente mit der ID zu formatieren unser Absatz. Beachte das Ich würde Informationen wurden dem p-Tag in unserem Körper hinzugefügt.
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 ein ourCSSfile.css.
p {
Textausrichtung: Mitte
}
#ourParagraph {
Randstil: fest;
Polsterung: 30px;
}Importieren Sie dann die Datei in die HTML-Datei.
Hallo Welt
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 ändern möchten Körper. Denken Sie daran, dass die Body-Tags alle sichtbaren Elemente enthalten.
Körper{
Hintergrundbild: URL ("sky.jpg");
}
p {
Textausrichtung: Mitte
}
#ourParagraph {
Randstil: fest;
Polsterung: 30px;
}Verwenden Sie zuerst die Option, um den Körperstil in CSS zu ändern Körper Stichwort. 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. Lesezeichen a CSS Eigenschaften Spickzettel mit Attributen, an die Sie sich erinnern möchten.
Verbunden: 8 coole HTML-Effekte, die jeder seiner Website hinzufügen kann
Verwenden Sie nach dem Attribut einen Doppelpunkt, um anzugeben, wie Sie das Attribut ändern. Verwenden Sie zum Importieren eines Bildes url (). 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 das auszuschalten, fügen Sie hinzu Hintergrund Wiederholung: 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 einstellen Hintergrundgröße: 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 auf einstellen Startseite. 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 einstellen Hintergrundfarbe Attribut zu weiß.
Körper{
Hintergrundbild: URL ("sky.jpg");
}
p {
Textausrichtung: Mitte
}
#ourParagraph {
Hintergrundfarbe: weiß;
Randstil: fest;
Polsterung: 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.
Möchten Sie HTML lernen, um Ihre eigenen Websites und Apps zu codieren? Verwenden Sie diese Webseitenbeispiele und den Quellcode, um sich HTML und CSS beizubringen.
- Programmierung
- HTML
- Web-Design
- CSS
J. J. Seaton ist ein Wissenschaftsjournalist, der sich auf die Aufschlüsselung komplexer Themen spezialisiert hat. Sie hat einen Doktortitel von der University of Saskatchewan; Ihre Forschung konzentrierte sich auf die Nutzung des spielbasierten Lernens, um das Engagement der Schüler online zu steigern. Wenn sie nicht arbeitet, finden Sie sie beim Lesen, Spielen von Videospielen oder Gartenarbeit.
Abonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Noch ein Schritt…!
Bitte bestätigen Sie Ihre E-Mail-Adresse in der E-Mail, die wir Ihnen gerade gesendet haben.