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
Index in MySQL
Vorwort Kommen wir gleich zur Sache. Die folgende...
Verschiedene Transformationseffekte beim Umschalten von HTML-Webseiten
<META http-equiv="Seite eingeben" CON...
Warum wird die MySQL-Paging-Funktion bei Verwendung von Limits immer langsamer?
Inhaltsverzeichnis 1. Testexperiment 2. Leistungs...
So erstellen Sie SonarQube mit Docker
Inhaltsverzeichnis 1. Docker installieren 2. Sona...
Warum MySQL das Löschen von Daten nicht empfiehlt
Inhaltsverzeichnis Vorwort InnoDB-Speicherarchite...
WeChat Mini-Programm: Position des Videofeuers zufällig
In diesem Artikel wird der spezifische Code zur z...
Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen
1. Was ist Vue Vue ist ein fortschrittliches Fram...
CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen
Teil des Codes: Code kopieren Der Code lautet wie...
Docker-Netzwerkmodus und Konfigurationsmethode
1. Docker-Netzwerkmodus Wenn Docker Run einen Doc...
Vue3 (Teil 2) Integration von Ant Design Vue
Inhaltsverzeichnis 1. Integrieren Sie Ant Design ...
Wichtige Punkte zum Schreiben von Inhalten für META-Tags in HTML-Webseiten
Das META-Tag ist ein Hilfstag im Kopfbereich der ...
Super detaillierte grundlegende JavaScript-Syntaxregeln
Inhaltsverzeichnis 01 JavaScript (abgekürzt: js) ...
Unabhängige Implementierung der Nginx-Containerkonfigurationsdatei
Erstellen eines Containers [root@server1 ~]# dock...
Der Unterschied zwischen br und br/ in HTML
Antwort von Stackflow: Einfaches <br> genügt...
Allgemeines Startskriptbeispiel für ein Linux-Java-Programm
Allerdings ist die Häufigkeit des Shell-Starts se...