So referenzieren Sie CSS

Bei der Webseitenproduktion ist CSS (Cascading Style Sheets) eine Sprache, die zur Steuerung des Stils und Layouts von Webseiten verwendet wird. Sie kann die Verschönerung und Kompatibilität von Webseiten realisieren, was die Front-End-Entwicklungsarbeit erheblich erleichtert. In diesem Artikel erfahren Sie, wie Sie auf CSS verweisen.

1. Internes Stylesheet

Das interne Stylesheet bettet das CSS-Stylesheet in das HTML-Dokument ein. Mithilfe eines internen Stylesheets müssen wir ein -Tag im -Tag erstellen und den CSS-Code wie folgt darin schreiben:

h1 { color: red; font-size: 36px; } Nach dem Login kopieren Auf diese Weise wird der Text des Das h1-Element wird als Farbe auf Rot und die Schriftgröße auf 36 Pixel eingestellt. Es ist zu beachten, dass diese Methode nur für die aktuelle Seite verwendet werden kann und nicht für mehrere Seiten mit demselben Stil geeignet ist.

2. Externes Stylesheet

Ein externes Stylesheet speichert das CSS-Stylesheet in einer separaten Datei und verweist dann auf die Datei im HTML-Dokument. Um ein externes Stylesheet zu verwenden, müssen wir ein -Tag im -Tag hinzufügen und den Pfad zur CSS-Datei in ihrem href-Attribut wie folgt angeben:

Nach dem Login kopieren in Styles .css In die Datei können wir die CSS-Stile schreiben, die alle Seiten verwenden müssen, zum Beispiel:

h1 { color: red; font-size: 36px; } Nach dem Login kopieren Auf diese Weise wird der h1-Elementtext auf allen Seiten festgelegt, die auf „styles.css“ verweisen auf Rot und die Schriftgröße beträgt 36 Pixel.

3. Inline-Stylesheet

Inline-Stylesheet definiert den CSS-Stil als Attribut des Elements. Mithilfe eines Inline-Stylesheets verwenden wir das Style-Attribut direkt im HTML-Tag, wie unten gezeigt:

Hello World! Nach dem Login kopieren Auf diese Weise wird die Textfarbe des h1-Elements auf Rot und die Schriftgröße auf Rot gesetzt 36 Pixel. Es ist zu beachten, dass eine übermäßige Verwendung von Inline-Stylesheets vermieden werden sollte, da diese umständlich zu verwalten sind und sich nicht dazu eignen, denselben CSS-Stil für mehrere Elemente zu verwenden.

Zusammenfassung:

Für die oben genannten drei Methoden eignen sich interne Stylesheets für Stile, die von einer einzelnen Seite verwendet werden, externe Stylesheets eignen sich für Stile, die von mehreren Seiten gemeinsam genutzt werden, und Inline-Stylesheets Es eignet sich für personalisierte Stileinstellungen. Durch den kompetenten Einsatz dieser Methoden kann die Frontend-Entwicklungsarbeit effizienter und standardisierter gestaltet werden.