Detaillierte Erläuterung der drei Möglichkeiten zum Importieren von CSS-Dateien
|
Es gibt drei Möglichkeiten, CSS einzuführen: Inline-Styles, interne Stylesheets und externe Stylesheets. 1. Inline-Stile Verwenden Sie das Style-Attribut, um CSS-Stile einzuführen. Beispiel: <h1 style="color:red;">Anwendung des Style-Attributs</h1> <p style="font-size:14px;color:green;">Stil direkt in HTML-Tags festlegen</p> Die Verwendung beim Schreiben von Seiten wird nicht empfohlen, beim Testen kann es jedoch verwendet werden. Zum Beispiel:
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Inline-Stil</title>
</Kopf>
<Text>
<!--Verwenden Sie Inline-Styles, um CSS einzuführen-->
<h1 style="color:red;">Über das Wasser springen</h1>
<p style="color:red;font-size:30px;">Ich bin ein P-Tag</p>
</body>
</html>2. Interne Stylesheets Schreiben Sie CSS-Code in das Style-Tag. Der Style-Tag wird in den Head-Tag geschrieben. Beispiel:
<Kopf>
<style type="text/css">
h3{
Farbe: rot;
}
</Stil>
</Kopf>
Zum Beispiel:
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Internes Stylesheet</title>
<!--Verwenden Sie ein internes Stylesheet, um CSS einzuführen-->
<style type="text/css">
div{
Hintergrund: grün;
}
</Stil>
</Kopf>
<Text>
<div>Ich bin ein DIV</div>
</body>
</html>3. Externe Stylesheets CSS-Code wird in einem Stylesheet mit der Erweiterung .css gespeichert Es gibt zwei Möglichkeiten, wie HTML-Dateien auf Stylesheets mit der Erweiterung .css verweisen können: Verknüpfen und Importieren. Grammatik: 1. Verlinkt <link type="text/css" rel="styleSheet" href="CSS-Dateipfad" /> 2. Import
<style type="text/css">
@import url("CSS-Dateipfad");
</Stil>
Zum Beispiel:
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Externes Stylesheet</title>
<!--Link: Empfohlen-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Importieren-->
<style type="text/css">
@import url("css/style.css");
</Stil>
</Kopf>
<Text>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>Der Unterschied zwischen Link und Import <Verknüpfung> 1. Gehört zu XHTML 2. Priorisieren Sie das Laden von CSS-Dateien auf die Seite @Import 1. Gehört zu CSS2.1 2. Laden Sie zuerst die HTML-Struktur und dann die CSS-Datei. IV. Priorität in CSS 1. Stilpriorität Inline-Stil > interner Stil > externer Stil (die beiden letzteren basieren auf dem Prinzip der Nähe) Zum Beispiel: Inline-Styles und interne Styles haben eine höhere Priorität:
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Priorität von Inline-Styles und internen Stylesheets</title>
<!--Internes Stylesheet-->
<style type="text/css">
P{
Farbe: blau;
}
</Stil>
</Kopf>
<Text>
<!--Inline-Stil-->
<p style="color: red;">Ich bin p Absatz</p>
</html>Browser-Auswirkungen:
Fazit: Inline-Styles haben Vorrang vor internen Stylesheets. Interne Stylesheets und externe Stylesheets haben eine höhere Priorität: a. Interne Stylesheets stehen über externen Stylesheets
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Priorität zwischen internen Stylesheets und externen Stylesheets</title>
<!--Internes Stylesheet-->
<style type="text/css">
P{
Farbe: blau;
}
</Stil>
<!--Externes Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</Kopf>
<Text>
<p>Ich bin Absatz p</p>
<div>Ich bin div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>Browser-Auswirkungen:
b. Externe Stylesheets stehen über internen Stylesheets
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Priorität zwischen internen Stylesheets und externen Stylesheets</title>
<!--Externes Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Internes Stylesheet-->
<style type="text/css">
P{
Farbe: blau;
}
</Stil>
</Kopf>
<Text>
<p>Ich bin Absatz p</p>
<div>Ich bin div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>Browser-Auswirkungen:
Fazit: Für interne und externe Stylesheets gilt das Prinzip der Nähe, d. h., was unten steht, hat Vorrang. Hinweis: Auch die Priorität der Import- und Linktypen erfolgt nach dem Näheprinzip. 2. Selektorpriorität Priorität: ID-Selektor > Klassenselektor > Tag-Selektor
<!DOCTYPE>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Selektorpriorität</title>
<style type="text/css">
#A{
Farbe: grün;
}
.B{
Farbe: gelb;
}
h2{
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<h2>111</h2> <!--Rot-->
<h2 id="a" class="b">222</h2> <!--Grün-->
<h2 class="b">333</h2><!--Gelb-->
</html>Browser-Auswirkungen:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Ein gründliches Verständnis des JS-nativen Syntaxprototyps, des __proto__ und des Konstruktors
>>: MySQL-Lösung zum Erstellen eines horizontalen Histogramms
Artikel empfehlen
Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken
Mit den MySQL-Funktionen CAST() und CONVERT() kön...
Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4
Inhaltsverzeichnis 1. Installieren und erstellen ...
Vergessen Sie nicht, den HTML-Tag zu schließen
Das Erstellen von Webseiten, die Webstandards ents...
Detaillierter Prozess zur Verwendung von Nginx zum Erstellen eines WebDAV-Dateiservers in Ubuntu
Installieren Sie nginx Beachten Sie, dass Sie ngi...
Detaillierte Bereitstellung von Docker+Gitlab+Gitlab-Runner
Umfeld Server: centos7 Kunde: Fenster Stellen Sie...
Detaillierte Einführung in die Mysql-Datumsabfrage
Abfrage des aktuellen Datums AKTUELLES DATUM AUSW...
Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design
Diese Sammlung zeigt eine Reihe herausragender und...
Wie lädt Vue Dateien mit unterschiedlichem Ursprung basierend auf der URL herunter?
Im Allgemeinen können wir beim Herunterladen von ...
Erläuterung der Überwachungsparameter in Leistung und Systemschema in MySQL 5.7 (empfohlen)
1. Leistungsschema: Einführung In MySQL 5.7 wurde...
Analyse des Prozesses zum Veröffentlichen und Bereitstellen von Spring Boot-Anwendungen über Docker
Inhaltsverzeichnis Manuelle Bereitstellung 1. Ers...
Vue implementiert den Anruf der PC-Kamera, um Fotos in Echtzeit aufzunehmen
Vue ruft die PC-Kamera auf, um Bilder in Echtzeit...
Lösung für das Problem, dass Vue-Binding-Objekte und Array-Variablen nach der Änderung nicht gerendert werden können
Projektszenario: Auf der Seitenanzeige befindet s...
Vue.js implementiert eine Timeline-Funktion
In diesem Artikel wird der spezifische Code von V...
Lösung zum Verbergen der Versionsnummer und der Webserverinformationen von Nginx
Nginx kann nicht nur Versionsinformationen verber...
Schritte zum Upgrade von CentOS6 auf Glibc
Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...