Einführung in verschiedene Möglichkeiten zur Einführung von CSS in HTML

Einführung in verschiedene Möglichkeiten zur Einführung von CSS in HTML

Durch die Verwendung unterschiedlicher Methoden zum Verweisen auf CSS-Stylesheets erzielen Sie letztendlich den gleichen Effekt. Die Verwendung unterschiedlicher Methoden zum Anwenden von CSS-Dateien wirkt sich jedoch auf die SEO sowie die Geschwindigkeit und Effizienz beim Öffnen von Webseiten aus.

Die HTML-Referenz-CSS-Methode lautet wie folgt

Als nächstes erklären wir die Beispiele für HTML-Referenzen zu CSS-Methoden nacheinander

1. CSS-Stile direkt in HTML-Tag-Elemente einbetten

Zum Beispiel <div style="font-size:14px; color:#FF0000;">Ich bin div CSS-Testinhalt - www.jb51.net-Unterstützung</div> Der Effekt ist wie folgt

2. Stildeklaration im Head-Bereich von HTML

Der Einfügungscode lautet wie folgt:

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*Hier ist der Inhalt im CSS-Stil*/ 
--> 
</Stil>

Die konkrete Methode ist wie folgt:

3. Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen

<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title>123WORDPRESS.COM-Test</title>
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*Hier ist der von @import referenzierte CSS-Style-Inhalt*/ 
--> 
</Stil> 
</Kopf>
<Text>
<div class="ceshi">Ich unterstütze den Div-CSS-Testinhalt - www.jb51.net</div>
</body>
</html>

Code in der Datei Wcss.css.ceshi {font-size:14px; color:#FF0000;}

Die Wirkung ist wie folgt:

Es ist ersichtlich, dass die Verwendung dieser Methode der Verwendung der integrierten CSS-Stylesheet-Methode ähnelt. Beide erfordern die Verwendung des Style-Tags im HTML-Kopf, um auf externes CSS zu verweisen.

4. Verwenden Sie den Link, um externe CSS-Dateien aufzurufen

Platzieren Sie <link rel="stylesheet" href="wcss.css" type="text/css" /> im Kopf, um die externe wcss.css-Datei aufzurufen und die HTML-Referenz-CSS-Datei zu implementieren.

Einzelheiten wie unten gezeigt

Diese Methode erfordert kein Style-Tag, sondern verweist direkt auf einen externen Style, indem ein Style verknüpft wird. Es wird generell empfohlen, Links zu verwenden, um auf externe CSS-Style-Methoden zu verweisen.

Vorteile der Verwendung von Links zum Verweisen auf externes CSS

1. Es ist vorteilhaft für SEO. Wenn Sie mit dieser Methode auf externe CSS-Dateien verweisen, wird der Quellcode der HTML-Seite viel kleiner, als wenn Sie CSS-Stile direkt hinzufügen. Da Suchmaschinen-Spider beim Crawlen von Webseiten keine CSS-Dateien crawlen, wird der HTML-Quellcode dadurch sehr klein, sodass Spider schneller crawlen und weniger verarbeiten können, was das Gewicht dieser Webseite erhöht, was sich positiv auf das Ranking auswirkt.
2. Durch das Speichern von HTML kann der Browser Webseiten in separaten Threads herunterladen, genau wie das Laden und Öffnen einer Seite in zwei Threads gleichzeitig, wodurch die Webseite sehr schnell geöffnet wird. (Wenn Benutzer diese Webseite durchsuchen, werden der HTML-Quellcode und die CSS-Dateien gleichzeitig heruntergeladen, was den Vorgang beschleunigt.)
3. Es ist praktisch, den Stil einer Webseite zu ändern. Sie müssen nur den CSS-Stil ändern, um den Grafikstil der Webseite zu ändern. Wenn diese Methode in einem Website-Projekt verwendet wird, ist es schnell und bequem, den Stil der gesamten Site zu ändern, da die gesamte Site einen gemeinsamen CSS-Grundstil anwendet.

Hier sind einige zusätzliche

In HTML gibt es drei Hauptmöglichkeiten, CSS einzuführen: Inline, eingebettet, importiert und verknüpft.
Inline-Stil: Das heißt, der CSS-Stil wird im Style-Attribut des Tags festgelegt. Diese Methode spiegelt nicht unbedingt die Vorteile von CSS wider und wird daher nicht empfohlen.

Beispiel:

<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Textdemo</title>
</Kopf>
<Text>
<h1 Stil=Farbe:weiß;Hintergrundfarbe=blau;>
Dies ist eine Textzeile.
</h1>
</body>
</html>

Embedded: Embedded schreibt die Einstellungen verschiedener Elemente auf der Seite zwischen <head> und </head>. Diese Methode ist für eine einzelne Webseite sehr praktisch. Wenn jedoch bei einer Website mit vielen Seiten jede Seite ihren eigenen Stil eingebettet festlegt, gehen die großen Vorteile von CSS verloren. Daher schreibt eine Website normalerweise eine unabhängige CSS-Stylesheet-Datei und führt sie mit einer der folgenden beiden Methoden in das HTML-Dokument ein.
Beispiel:

<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Textdemo</title>
<style type="text/css">
h1{
       Farbe: weiß;
       Hintergrundfarbe: braun;
       }
</Stil>
       </Kopf>
       <Text>
<h1>Dies ist eine Textzeile.</h1>
<h1>Dies ist eine weitere Textzeile.</h1>
       </body>
       </html>

Importieren und Verknüpfen: Der Zweck von Importieren und Verknüpfen besteht darin, eine unabhängige CSS-Datei in die HTML-Datei einzuführen, und es gibt entsprechende Unterschiede zwischen den beiden.
Tatsächlich besteht der größte Unterschied zwischen den beiden darin, dass die Linkmethode HTML-Tags verwendet, um externe CSS-Dateien einzuführen, während die Importmethode CSS-Regeln verwendet, um externe CSS-Dateien einzuführen. Daher ist auch ihre Syntax unterschiedlich.
Wenn Sie den Linkstil verwenden, müssen Sie die folgende Anweisung verwenden, um die externe CSS-Datei zu importieren.

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

Wenn Sie die Importmethode verwenden, müssen Sie die folgende Anweisung verwenden.

<style type="text/css">
@import "meinstyle.css";
</Stil>

Darüber hinaus sind die Anzeigeeffekte nach der Verwendung dieser beiden Methoden leicht unterschiedlich. Bei Verwendung der Link-Methode wird die CSS-Datei vor dem Hauptteil der Geräteseite geladen, sodass die angezeigte Webseite von Anfang an einen Stileffekt aufweist. Bei Verwendung der Importmethode wird die CSS-Datei geladen, nachdem die gesamte Seite geladen wurde. Bei einigen Browsern wird in einigen Fällen, wenn die Webseitendatei groß ist, zuerst die nicht formatierte Seite angezeigt und dann wird der Stileinstellungseffekt nach dem Blinken angezeigt. Aus Sicht des Betrachters ist dies ein Nachteil der Verwendung der Importmethode. Bei einigen größeren Websites möchten Sie möglicherweise alle CSS-Stile zur einfacheren Wartung in mehrere CSS-Dateien kategorisieren. Wenn Sie in diesem Fall den Link-Style-Import verwenden, benötigen Sie mehrere Anweisungen, um die CSS-Dateien separat zu importieren. Wenn Sie die Klassifizierung der CSS-Datei anpassen möchten, müssen Sie gleichzeitig die HTML-Datei anpassen. Dies ist bei Wartungsarbeiten von Nachteil. Wenn Sie die Importmethode verwenden, können Sie nur eine Haupt-CSS-Datei einführen und dann andere unabhängige CSS-Dateien in diese Datei importieren; die Linkmethode verfügt nicht über diese Funktion.

Daher schlage ich vor, dass Sie die Link-Methode verwenden, wenn Sie eine CSS-Datei importieren müssen. Wenn Sie mehrere CSS-Dateien importieren müssen, verwenden Sie zuerst die Link-Methode, um eine „Verzeichnis“-CSS-Datei zu importieren, und verwenden Sie dann die Importmethode, um andere CSS-Dateien in diese „Verzeichnis“-CSS-Datei zu importieren.

Wenn Sie JavaScript verwenden möchten, um dynamisch zu entscheiden, welche CSS-Datei importiert werden soll, müssen Sie hierzu die Link-Methode verwenden.

<<:  Beispiel einer langsamen MySQL-Abfrage

>>:  Docker benennt den Imagenamen und die TAG-Operation um

Artikel empfehlen

Beispielcode zur Implementierung einer Sternenhimmelanimation mit CSS3 Advanced LESS

In diesem Artikel wird der Beispielcode für erwei...

Zusammenfassung von sieben in JavaScript implementierten Sortieralgorithmen (empfohlen!)

Inhaltsverzeichnis Vorwort Blasensortierung Grund...

So rufen Sie einen HTML-Code auf mehreren HTML-Seiten gemeinsam auf

Methode 1: Skriptmethode verwenden: Erstellen Sie...

Implementierungsbeispiel für den Linux-Befehl „tac“

1. Befehlseinführung Der Befehl tac (umgekehrte R...

Implementierungscode zur Verwendung der MongoDB-Datenbank in Docker

Holen Sie sich das Mongo-Image sudo docker pull m...

Grafisches Tutorial zur Installation und Konfiguration der grünen Version von MySQL 5.7.21 winx64

Dieser Artikel beschreibt die Installations- und ...

Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen

Cooper sprach über den visuellen Pfad des Benutze...

So bedienen Sie JSON-Felder in MySQL

MySQL 5.7.8 führte das JSON-Feld ein. Dieser Feld...

Detaillierte Erläuterung des Apache SkyWalking-Alarmkonfigurationshandbuchs

Apache SkyWalking Apache SkyWalking ist ein Tool ...

Das Festlegen der Z-Index-Eigenschaft für die Flash-Overlay-Popup-Ebene im Webdesign funktioniert nicht

Standardmäßig wird Flash immer auf der obersten Eb...

Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage

Inhaltsverzeichnis Hintergrund Problembeschreibun...

Detaillierte Erläuterung mehrerer Methoden zur Deduplizierung im Javascript-Array

Inhaltsverzeichnis Array-Deduplizierung 1 Doppels...

Zabbix überwacht den Prozess der Linux-Systemdienste

Zabbix erkennt automatisch Regeln zur Überwachung...

Detaillierte Erläuterung der Vue-Lebenszyklusfunktionen

Inhaltsverzeichnis Lebenszyklusfunktionen Allgeme...

Eine kurze Diskussion über das Prinzip des bidirektionalen Ereignisbindungs-V-Modells von Vue

Inhaltsverzeichnis erklären: Zusammenfassen Auffü...