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
So zeichnen Sie eine Schaltfläche in XAML als Kreis neu
Beim Verwenden des XAML-Layouts müssen manchmal ei...
Detaillierter Prozess zum Dekomprimieren und Installieren von mysql5.7.17 zip
1. Adresse herunterladen https://dev.mysql.com/do...
Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7
Da die in der MySQL-Datenbank gespeicherten Daten...
Analyse des Funktionsprinzips und des Implementierungsprozesses von Docker Hub
Ähnlich wie der von GitHub bereitgestellte Code-H...
Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token
Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...
Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
Einführung in die Verwendung von Requisiten in Vue
Vorwort: In Vue können Props verwendet werden, um...
js, css, html bestimmen die verschiedenen Versionen des Browsers
Verwenden Sie reguläre Ausdrücke, um die IE-Browse...
Verschiedene Arten von MySQL-Indizes
Was ist ein Index? Ein Index ist eine Datenstrukt...
Containerisierungstransformation für Docker-Großprojekte
Virtualisierung und Containerisierung sind zwei u...
Durch reines CSS können untergeordnete Elemente die Breitenbeschränkung übergeordneter Elemente durchbrechen.
In Schreibstilen können wir diese Situation oft s...
Zusammenfassung zum Erstellen und Verwenden von Array-Methoden in Bash-Skripten
Definieren eines Arrays in Bash Es gibt zwei Mögl...
MySQL-Datenbankindizes und -Transaktionen
Inhaltsverzeichnis 1. Inhaltsverzeichnis 1.1 Konz...
Detaillierte Schritte zum Herunterladen und Installieren von Tomcat unter Linux
Wenn Sie gerade erst mit Linux in Berührung gekom...
Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen
VMWare (Virtual Machine Ware) ist ein Softwareunt...