HTML und CSS sind die beiden Hauptsprachen, die zum Erstellen von Webseiten verwendet werden. HTML ist für die Struktur und den Inhalt der Seite verantwortlich, und mit CSS können Sie das Aussehen von HTML-Elementen festlegen. Um Stile zu einer Webseite hinzuzufügen, müssen Sie den CSS-Code in den HTML-Code einfügen.
Es gibt mehrere Möglichkeiten, CSS-Code einzufügen. Die erste und gebräuchlichste ist die Verwendung einer externen CSS-Datei. Dazu müssen Sie eine separate Datei mit der Erweiterung erstellen.css und verbinden Sie es mit einer HTML-Seite mit einem Tag . Zum Beispiel:
Die zweite Methode besteht darin, den CSS-Code direkt mit einem Tag in eine HTML-Datei einzufügen. Dies kann nützlich sein, wenn Sie Stile nur auf einen bestimmten Block oder ein bestimmtes Element anwenden müssen. Zum Beispiel:
Darüber hinaus kann CSS-Code direkt in HTML-Elemente mit dem Style-Attribut eingefügt werden. Zum Beispiel:
Wählen Sie je nach Ihren Bedürfnissen und Vorlieben die bequemste Möglichkeit, CSS-Code in HTML einzufügen. Und denken Sie daran, dass sauberer und organisierter Code zu einer besseren Verwaltung und Wartung Ihrer Webseite beiträgt.
Hinzufügen von CSS-Code zu einem HTML-Dokument
Um dem HTML-Dokument CSS-Code hinzuzufügen, müssen Sie ein spezielles Tag verwenden. Innerhalb dieses Tags können Sie Ihren CSS-Code schreiben, der auf HTML-Elemente angewendet wird.
Wenn Sie beispielsweise die Hintergrundfarbe einer Seite ändern möchten, können Sie den folgenden CSS-Code verwenden:
body In diesem Beispiel legen wir die Farbe weiß (#ffffff) für den Seitenhintergrund mithilfe der CSS-Eigenschaft fest background-color. Der gesamte HTML-Code, der sich nach diesem CSS-Code befindet, hat einen hellen Hintergrund.
Sie können auch CSS-Code innerhalb einzelner HTML-Elemente mithilfe eines Attributs hinzufügen style. Um beispielsweise die Farbe des Textes innerhalb eines Absatzes zu ändern, können Sie den folgenden Code verwenden:
Это красный текст
In diesem Beispiel verwenden wir das Attribut style und legen Sie die rote Farbe des Textes mithilfe der CSS-Eigenschaft fest color.
Mit dem Tag oder Attribut style Sie können einen beliebigen CSS-Code zu einem HTML-Dokument hinzufügen und das Aussehen und Layout der Seitenelemente ändern.
Vergessen Sie nicht, das Tag zu schließen , da es sich um eine HTML-Sprachregel handelt. Außerdem können Sie Zeilenumbrüche und Zeilenumbrüche verwenden, um den Code besser zu gestalten.
Innerer Stil
Wenn Sie Stile direkt in Ihren HTML-Code einfügen möchten, können Sie einen internen Stil verwenden. Dafür benötigen Sie ein Tag .
Beispiel für die Verwendung eines internen Stils:
In diesem Code wenden wir Stile auf ein Tag an
. Der Text innerhalb dieses Tags wird in blauer Farbe und einer Schriftgröße von 16px angezeigt.
Sie können Stile auch auf andere Elemente anwenden, z. B. auf Titel, Links oder Tabellen. Um dies zu tun, müssen Sie nur den Selektor innerhalb des Tags ändern .
Der innere Stil kann in Fällen nützlich sein, in denen Sie Stile nur auf eine bestimmte Seite anwenden müssen. Es kann auch für schnelles Prototyping nützlich sein, wenn Sie keine separate CSS-Datei erstellen müssen.
Beachten Sie jedoch, dass die Verwendung eines internen Stils die Wartung und Wartung Ihres Codes erschwert, insbesondere wenn Sie die Stile auf mehreren Seiten ändern müssen.
Externer Stil
| HTML-Code | CSS-Code |
|---|---|
Hallo, Welt! | h1 < color: red; text-align: center; > |
In diesem Beispiel wird ein Verweis auf die Formatvorlagen-Datei erstellt.css , das eine Regel enthält , um den Stil des Titels zu ändern .
Eine externe Stylesheet-Datei ermöglicht die Wiederverwendung von Code auf verschiedenen Seiten der Website und vereinfacht die Wartung und Bearbeitung.
Sie können dem HTML-Dokument auch mithilfe eines Tags Stile direkt hinzufügen. Im Tag werden die Stilregeln angegeben.
| HTML-Code | CSS-Code |
|---|---|
Hallo, Welt! |
Beide Ansätze haben ihre Vor- und Nachteile, und die Auswahl hängt von den Projektanforderungen ab.
Verwenden einer externen Css-Datei
Wenn Sie eine Webseite erstellen, können Sie eine externe CSS-Datei zum Anwenden von Stilen verwenden. Dies ermöglicht die Trennung der HTML-Struktur von der CSS-Darstellung und erleichtert das Ändern von Stilen auf allen Seiten, die diese Datei verwenden.
Um eine externe CSS-Datei zu verwenden, müssen Sie eine separate Datei mit einer Erweiterung erstellen.css. Diese Datei definiert alle erforderlichen Stile, die auf HTML-Dokumente angewendet werden sollen.
Nachdem Sie eine externe CSS-Datei erstellt haben, müssen Sie sie an ein HTML-Dokument anhängen. Dazu wird ein Tag verwendet. Es befindet sich im Abschnitt eines HTML-Dokuments und enthält die Attribute rel, type und href. Das rel-Attribut gibt die Beziehung zwischen dem aktuellen Dokument und der zu verbindenden CSS-Datei an, das type-Attribut gibt den Datentyp der zu verbindenden Datei an (in diesem Fall text/css), und das href-Attribut enthält den Pfad zur externen CSS-Datei.
Beispiel für die Verwendung eines Tags :
Wo "styles.css" ist der Pfad zu einer externen CSS-Datei. Stellen Sie sicher, dass der Pfad korrekt ist.
Nachdem Sie eine externe CSS-Datei angeschlossen haben, werden die darin enthaltenen Stile auf die Elemente des HTML-Dokuments angewendet.
Beachten Sie, dass sie sich im selben Verzeichnis wie das HTML-Dokument befinden muss, um eine externe CSS-Datei richtig verwenden zu können, oder dass Sie im href-Attribut den richtigen Dateipfad angeben muss.
Die Verwendung einer externen CSS-Datei macht es einfach, die Stile auf allen Seiten zu ändern, die diese Datei verwenden. Dieser Ansatz wird auch als eine gute Praxis für die Entwicklung von Websites angesehen.
