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
JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern
Inhaltsverzeichnis 1. Bedienelemente 1.1. Element...
Wie installiert und verbindet man Navicat in MySQL 8.0.20 und worauf muss man achten?
Dinge zu beachten 1. Zunächst müssen Sie im MySQL...
SQL-Implementierung von LeetCode (178. Punkterangliste)
[LeetCode] 178.Ranglistenergebnisse Schreiben Sie...
Detaillierte Erläuterung der Server- und Standortkonfiguration der einfachen Weiterleitungsanforderung von nginx
Lassen Sie uns kurz die Konfiguration von Server ...
Detaillierte Erklärung der Interaktion zwischen React Native und IOS
Inhaltsverzeichnis Voraussetzungen RN übergibt We...
Beispiel einer datenbankübergreifenden Abfrage in MySQL
Vorwort In MySQL werden datenbankübergreifende Ab...
Detaillierte Erläuterung der Gründe für die Trennung von JS WebSocket und des Heartbeat-Mechanismus
1. Grund der Sperrung Es gibt viele Gründe, warum...
Zusammenfassung einiger effizienter magischer Operatoren in JS
JavaScript veröffentlicht mittlerweile jedes Jahr...
Ein Beispiel für die schnelle Bereitstellung von Webanwendungen mit Tomcat in Docker
Nachdem wir die grundlegenden Vorgänge von Docker...
Eine kurze Analyse von Patroni in Docker-Containern
Inhaltsverzeichnis Erstellen eines Images Dateist...
Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist
20200804Nachtrag: Der Artikel könnte falsch sein....
So übermitteln Sie eine reine HTML-Seite, übergeben Parameter und überprüfen die Identität
Da das Projekt einen Fragebogen erfordert, der Kun...
Wie kann man dafür sorgen, dass Leerzeichen in IE und FF die gleiche Breite haben?
body{font-size:12px; font-family:"Schriftart...
Das Erlebnis gestalten: Was auf dem Knopf liegt
<br />Vor Kurzem hat UCDChina eine Artikelse...
Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen
Inhaltsverzeichnis Startoptionen Befehlszeile Lan...