Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)

Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)

1. Inline-Referenz: Wird direkt auf dem Etikett verwendet, der Wartungsaufwand ist jedoch hoch

Stil = 'Schriftgröße: 16px; Farbe: #000000'

2. Externe Linkreferenz: CSS-Code ist vom HTML-Code getrennt, was für die Wiederverwendung von Code praktisch ist

<link href="css/style.css" type="text/css" rel="stylesheet" />

Der Inhalt der Datei style.css ist wie folgt:

.font{color:blue;font-size:12px;}

3. Interne Referenz: Die Seite ist übersichtlicher, kann aber nicht von anderen Seiten verwendet werden

<Stiltyp='text/css'>
    .font{color:blue;font-size:12px;}
</Stil>

4. Externer Import: Sie können mehrere Stylesheets in eine HTML-Datei importieren. Ähnlich wie bei der externen Linkreferenz

Fügen Sie dies dem Head-Tag in der HTML-Datei hinzu

<Stiltyp='text/css'>
    @import url('./style/style.css');
</Stil>

Die obige Zusammenfassung (Freigabe) der vier Möglichkeiten zur Einführung von CSS ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

<<:  Detaillierte Erklärung des Json-Formats

>>:  Erläuterung der HTML-Tags

Artikel empfehlen

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Float wird häufig im Layout von Webseiten verwend...

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Problemhintergrund: Wenn Sie Docker zum Bereitste...

Warum gibt es das in JS?

Inhaltsverzeichnis 1. Nachfrage 2. Lösung 3. Die ...

Detaillierte Erklärung der Stile in uni-app

Inhaltsverzeichnis Stile in uni-app Zusammenfasse...

Node+Socket realisiert einfache Chatroom-Funktion

In diesem Artikel wird der spezifische Code von N...

Erste Schritte mit Nginx Reverse Proxy

Inhaltsverzeichnis Überblick Die Rolle des Revers...

Code zur Änderung des CSS-Bildlaufleistenstils

Code zur Änderung des CSS-Bildlaufleistenstils .s...

CSS-Code zum Erstellen von 10 modernen Layouts

Vorwort Ich habe mir am Sonntag zu Hause das drei...

Implementierung eines Redis Master-Slave-Clusters basierend auf Docker

Inhaltsverzeichnis 1. Ziehen Sie das Redis-Image ...

Best Practices für die Entwicklung von Amap-Anwendungen mit Vue

Inhaltsverzeichnis Vorwort Asynchrones Laden Pake...

Gründe und Lösungen für das Versagen des React-Ereignisdrosselungseffekts

Inhaltsverzeichnis Das Problem hierbei ist: Lösun...