Heim >Web-Frontend >CSS-Tutorial >Wie füge ich einen CSS-Stil zu HTML hinzu? Vor- und Nachteile von Inline, Embedded und External
Wie füge ich einen CSS-Stil zu HTML hinzu? Vor- und Nachteile von Inline, Embedded und External
- 青灯夜游Original
- 2018-11-02 14:32:3116106Durchsuche
Wie füge ich einen CSS-Stil zu HTML hinzu? In diesem Artikel werden drei Methoden zum Hinzufügen von CSS-Stilen zu HTML vorgestellt: die Vor- und Nachteile von Inline-, eingebetteten und externen Stilen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Zunächst müssen wir verstehen, welche drei Methoden es gibt, um CSS-Stile zu HTML hinzuzufügen. Sie sind:
1. Verwenden Sie Inline-CSS, um Regeln für bestimmte Elemente anzuwenden, das heißt: Inline
2. Verwenden Sie internes CSS und im Abschnitt 93f0f5c25f18dab9d176bd4f6de5d30e CSS-Regeln, das heißt: inline
3. Link zu einer externen Datei (.css-Datei), die alle CSS-Regeln enthält, das heißt: extern
Lassen Sie es uns unten im Detail vorstellen. Lassen Sie uns darüber sprechen Implementierung sowie Vor- und Nachteile von Inline-, Embedded- und externen Methoden.
1. Inline
Inline-CSS sollte innerhalb bestimmter HTML-Tags verwendet werden. Das Attribut c9ccee2e6ea535a969eb3f532ad9fe89 wird verwendet, um den Stil eines bestimmten HTML-Tags festzulegen. Es wird empfohlen, kein Inline-CSS zu verwenden, da jedes HTML-Tag individuell gestaltet werden muss und die Verwaltung Ihrer Website sehr schwierig werden kann, wenn Sie nur Inline-CSS verwenden. In bestimmten Situationen kann es jedoch nützlich sein. Beispielsweise in Situationen, in denen Sie keinen Zugriff auf CSS-Dateien haben oder Stile nur auf ein einzelnes Element anwenden müssen. Ein Beispiel für eine HTML-Seite mit Inline-CSS sieht so aus:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>Vorteile von Inline-CSS:
1. Sehr nützlich, wenn Sie Änderungen testen und in der Vorschau anzeigen möchten funktioniert.
2. Sehr nützlich für eine schnelle Reparatur.
3. Reduzieren Sie HTTP-Anfragen.
Nachteile von Inline-CSS:
Inline-CSS muss auf jedes Element angewendet werden.
2. Inline
Der Inline-CSS-Stil dient dazu, den CSS-Code im 93f0f5c25f18dab9d176bd4f6de5d30e-Bereich zu platzieren. Klassen und IDs können zum Referenzieren von CSS-Code verwendet werden, sie sind jedoch nur auf dieser bestimmten Seite aktiv. Auf diese Weise eingebettete CSS-Stile werden jedes Mal heruntergeladen, wenn die Seite geladen wird, was die Ladegeschwindigkeit verbessern kann. Die Verwendung von Inline-Stylesheets ist in manchen Situationen nützlich, beispielsweise beim Versenden einer Seitenvorlage. Es ist viel einfacher, eine Vorschau anzuzeigen, da sich alles auf einer Seite befindet. Inline-CSS sollte zwischen den c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927-Tags platziert werden. Ein Beispiel für ein internes Stylesheet:
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>Vorteile von eingebettetem CSS:
1. Das Stylesheet betrifft nur eine Seite.
2. Interne Stylesheets können Klassen und IDs verwenden.
3. Es ist nicht erforderlich, mehrere Dateien hochzuladen. HTML und CSS können in derselben Datei sein.
Nachteile von eingebettetem CSS:
1. Erhöhen Sie die Ladezeit der Seite.
2. Es betrifft nur eine Seite – nutzlos, wenn Sie dasselbe CSS in mehreren Dokumenten verwenden möchten.
3. Externe Links
Der vielleicht bequemste Weg, CSS zu einer HTML-Seite hinzuzufügen, besteht darin, sie mit einer externen Datei zu verknüpfen (. CSS-Datei). Auf diese Weise werden alle Änderungen, die Sie an den externen CSS-Dateien vornehmen, auf Ihrer Website widergespiegelt. Verweise auf externe CSS-Dateien sollten im Abschnitt 93f0f5c25f18dab9d176bd4f6de5d30e platziert werden, zum Beispiel:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
und style.css enthält alle Stilregeln. Zum Beispiel:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}Vorteile von externem CSS:
1. Die Größe der HTML-Seite ist kleiner und die Struktur ist klarer.
2. Schnellere Ladegeschwindigkeit.
3. Dieselbe CSS-Datei kann auf mehreren Seiten verwendet werden.
Nachteile von externem CSS:
1. Die Seite wird möglicherweise nicht korrekt gerendert, bevor das externe CSS geladen wird.
Fazit
Das Obige ist der gesamte Inhalt dieses Artikels, der Ihnen verschiedene Methoden zum Hinzufügen von CSS zu HTML-Seiten vorstellt . Und verstehen Sie die Unterschiede zwischen Inline-, externen und internen Stylesheets. Sie können verschiedene Methoden zum Hinzufügen von CSS-Stilen verwenden. Ich hoffe, dass dies für Ihr Lernen hilfreich ist. [Empfohlenes Video-Lernen: CSS-Tutorial]
Das obige ist der detaillierte Inhalt vonWie füge ich einen CSS-Stil zu HTML hinzu? Vor- und Nachteile von Inline, Embedded und External. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!