So verbinden Sie HTML mit CSS

HTML und CSS sind wichtige Komponenten der Frontend-Technologie. Ihre Zusammenarbeit kann dazu beitragen, dass die Seite ein besseres Erscheinungsbild und ein besseres interaktives Erlebnis erhält. In diesem Artikel wird erläutert, wie HTML mit CSS verknüpft wird, um die Kontrolle über den Seitenstil zu erreichen.

1. Über HTML und CSS

HTML ist die Grundstruktur einer Webseite. Es kann als das Grundgerüst eines Hauses verstanden werden. Es definiert den Inhalt, das Layout, die Tags und die Links auf der Webseite. CSS ist ein Stylesheet, das als Dekoration eines Hauses verstanden werden kann. Es steuert das Erscheinungsbild, das Layout und die Farbe der Webseite.

2. CSS zu HTML hinzufügen

Es gibt zwei Möglichkeiten, CSS-Stylesheets zu HTML-Dokumenten hinzuzufügen, nämlich interne Stile und externe Stile ;style>-Tag zwischen den -Tags und schreiben Sie dann den CSS-Stilcode in das -Tag. Beispiel:

My Website body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333333; } Welcome to my website This is the home page of my website

Im obigen Code enthält das Tag CSS-Stile, wobei das Tag „body“ die Hintergrundfarbe und Schriftart der Webseite steuert und das Tag „h1“ die Titelfarbe steuert. 2. Externer Stil Der externe Stil besteht darin, den CSS-Code in eine separate CSS-Datei einzufügen und die CSS-Datei dann über das -Tag in das HTML-Dokument zu importieren. Beispiel:

My Website Welcome to my website This is the home page of my website

Im obigen Code verweist das -Tag auf eine CSS-Datei mit dem Namen „style.css“, die der HTML-Code zur Steuerung des Stils der Webseite verwendet.

3. CSS-Selektoren

Um zu verstehen, wie man CSS-Stile erstellt, müssen Sie zunächst CSS-Selektoren verstehen. Selektoren sind eine Möglichkeit, HTML-Elemente anzugeben, die gestaltet werden sollen. Hier sind einige gängige CSS-Selektoren:

1. Element-Selektor

Element-Selektor ist eine Möglichkeit, Tag-Namen als Selektor zu verwenden. Der folgende CSS-Code setzt beispielsweise die Farbe aller Absatzelemente auf Rot:

p { color: red; } 2. Klassenselektor

Klassenselektoren weisen HTML-Elementen Klassennamen zu, um Stile festzulegen. Der folgende CSS-Code setzt beispielsweise alle Elemente mit dem Klassenattribut „my-class“ auf eine rote Hintergrundfarbe und eine Schriftgröße von 16pt:

.my-class { background-color: red; font-size: 16pt; } Im HTML-Code können Sie diesen Stil auf ein Element anwenden, indem Sie das hinzufügen Klassenattribut, Der Weg ist wie folgt:

Hello, this is a paragraph

ID-Selektor

Der ID-Selektor gibt einen eindeutigen ID-Namen für ein HTML-Element an. Durch die Verwendung dieses Namens im Stylesheet kann das ID-Element gestaltet werden. Der folgende CSS-Code setzt beispielsweise ein Element mit dem ID-Attributwert „my-id“ auf einen blauen Hintergrund und eine Schriftgröße von 18pt:

#my-id { background-color: blue; font-size: 18pt; } Im HTML-Code können Sie diesen Stil auf ein Element anwenden, indem Sie die ID hinzufügen Attribut wie folgt: Hello, this is a paragraph

4. Zusammenfassung Das Hinzufügen von CSS-Stylesheets zu HTML kann das Erscheinungsbild und den Stil der Seite leicht steuern, was auf zwei Arten erreicht werden kann: interne und externe Stylesheets. Wenn Sie CSS-Stile schreiben, müssen Sie CSS-Selektoren verstehen, mit denen Sie die HTML-Elemente angeben können, auf die Stile angewendet werden sollen. Durch die Kombination dieser Techniken können Sie schöne und einfach zu verwaltende Seiten erhalten.