Heim >Web-Frontend >CSS-Tutorial >Wie bette ich CSS in HTML ein?
Wie bette ich CSS in HTML ein?
- 青灯夜游Original
- 2019-05-18 16:38:107804Durchsuche
Es gibt drei Hauptmöglichkeiten, CSS-Stile in HTML einzubetten:
1. Legen Sie das -Attribut des Tags fest Das sogenannte
2. Verwenden Sie das Tag 93f0f5c25f18dab9d176bd4f6de5d30e, das als eingebetteter Stil bezeichnet wird wird als eingebetteter Stil externes Stylesheet bezeichnet.
Einfache Stylesheets ändern normalerweise das Erscheinungsbild von HTML-Tags wie 6c04bd5ca3fcae76e30b72ad730ca86d. Bei der Verwendung von CSS-Dateien oder Stylesheets in Header-Dateien können wir auch Stilklassen definieren und diese mithilfe des Attributs
auf jedes Element anwenden. Dies würde jedoch den Rahmen dieser einfachen Anleitung sprengen.class="?"
Funktionen:
1), der Inline-Stil wird im HTML-Element im Code platziert.
2) Bei Verwendung von Inline-Stilen wirken sich die Stile nur auf die von Ihnen ausgewählten Elemente aus.
3), Inline-Stile haben keine Selektoren
Hinweis: In HTML definierte Inline-Stile gelten nur für die Tags, denen sie hinzugefügt werden.
<p style="color:red;">Some red text</p>
Vorteile:
1. Sehr nützlich, wenn Sie Änderungen testen und in der Vorschau anzeigen möchten.
2. Sehr nützlich für eine schnelle Reparatur.
3. Reduzieren Sie HTTP-Anfragen.
Nachteile:
Inline-CSS muss auf jedes Element angewendet werden.
Eingebetteter StilFunktionen:
1), platziert im Style-Tag687c2c06e5a4995392a66a2c50c231d2 style> im Kopfbereich der Webseite geschrieben.
2), der geschriebene Stil wird nur auf der Webseite verwendet, auf der Sie ihn verwenden.
3), eingebettete Stile werden auch „interne Stile“ genannt
Die im Header definierten Stile werden auf die gesamte Seite angewendet. Das folgende Beispiel sorgt dafür, dass alle h1-Tags auf der Seite den Titel in Rot anzeigen.
<head>
<style type="text/css">
h1 { color: red; }
</style>
</head>Vorteile:
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:
1. Längere Ladezeit der Seite.
2. Es betrifft nur eine Seite – nutzlos, wenn Sie dasselbe CSS in mehreren Dokumenten verwenden möchten.
CSS-Dateien sind wie HTML-Dateien reiner Text und haben normalerweise die Dateierweiterung .css; sie können über bestimmte Tags in die HTML-Datei eingebunden werden .
Funktionen:
1), in einem separaten Dokument geschrieben und dann an verschiedene Webdokumente angehängt
2), eine Änderung kann sich auf alle Seiten auswirken, die Sie aufrufen
3), einfach zu ändern
Zum Beispiel kann der Inhalt der style.css-Datei wie folgt aussehen:
body { background-color: beige; color: #000080;}
h1 { color: red;}Dann können Sie 65e7e439d181c1f8e0ffc739a218a66f Der Header wird eingeführt, um wirksam zu werden.
<head> <link rel="stylesheet" type="text/css" href="style.css" title="style"> </head>
Vorteile:
1. Die Größe der HTML-Seite ist kleiner und die Struktur klarer.
2. Schnellere Ladegeschwindigkeit.
3. Dieselbe CSS-Datei kann auf mehreren Seiten verwendet werden.
Nachteile:
Die Seite wird möglicherweise nicht korrekt gerendert, bis externes CSS geladen wird.
Das obige ist der detaillierte Inhalt vonWie bette ich CSS in HTML ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!