Eine Zusammenfassung detaillierter Einblicke in den Import von CSS
|
Auf die Entwicklungsgeschichte von CSS wird hier nicht näher eingegangen. Einer der Gründe, warum ich einen Blog schreibe, ist, dass ich Partnern helfen möchte, die neu im Frontend sind und sich wie ich gerne abmühen. Ich hoffe, dass die Beiträge, die ich schreibe, meinen Partnern eine Hilfe sein können; der zweite Grund ist, dass diese Beiträge auch als Zusammenfassung meines eigenen Wissens angesehen werden können. Es gibt jetzt keine bestimmte Reihenfolge, der Sie folgen müssen, aber versuchen Sie, beginnend mit CSS, der Reihe nach zu schreiben. 1. CSS-Initiale Konzept: CSS wird auch als Cascading Style Sheets oder Cascading Style Sheets bezeichnet. Stile definieren, wie ein HTML-Element angezeigt wird. Stile werden normalerweise in Stylesheets gespeichert. Funktion: CSS basiert auf HTML, bietet umfangreiche Funktionen und kann auch unterschiedliche Stile für unterschiedliche Browser festlegen. CSS wird hauptsächlich verwendet, um den Textinhalt (Schriftart, Größe, Ausrichtung usw.) auf HTML-Seiten, das Erscheinungsbild von Bildern (Breite und Höhe, Rahmenstil, Ränder usw.) sowie das Layout und den Anzeigestil der Seite festzulegen. 2. CSS-Syntax Die CSS-Syntax besteht aus zwei Hauptteilen: einem Selektor und einer oder mehreren Deklarationen. Jede Deklaration besteht aus einem Attribut und einem Attributwert. Einfach ausgedrückt besteht eine Stilsyntax aus drei Teilen: Selektor, Attribut und Attributwert. Zum Beispiel:
Selektor: Der Selektor teilt dem Browser mit, auf welche Objekte auf der Seite der Stil angewendet wird. Diese Objekte können ein bestimmtes Tag, alle Webseitenobjekte, angegebene Klassen- oder ID-Werte usw. sein. Wenn der Browser diesen Stil analysiert, rendert er das Anzeigeergebnis des Objekts entsprechend dem Selektor. Das heißt, der Selektor ist normalerweise das HTML-Element, dessen Stil Sie ändern möchten, und der Selektor ist eine Möglichkeit, das Tag auszuwählen, dessen Stil Sie festlegen möchten. Erst nachdem Sie dieses Tag ausgewählt haben, können Sie den CSS-Stil dafür festlegen. Deklaration: Eine Deklaration kann eine oder mehrere sein, die dem Browser mitteilen, wie das vom Selektor angegebene Objekt gerendert werden soll. Eine Deklaration besteht aus Attributen und Attributwerten. Das Ende einer Deklaration wird mit einem Semikolon markiert. In einem Stil kann das Semikolon für die letzte Deklaration weggelassen werden. Alle Deklarationen werden in ein Paar geschweifter Klammern gesetzt, die auf den Selektor folgen. Nachdem wir nun wissen, wofür CSS verwendet wird und dass die CSS-Syntax aus mehreren Teilen besteht, stellt sich die Frage, wie wir CSS verwenden und wo wir CSS-Stile schreiben. Als nächstes müssen wir darüber sprechen, wo CSS geschrieben werden soll. 3. So führen Sie CSS ein Es gibt drei Möglichkeiten, CSS-Stile in HTML einzuführen: Inline-Stylesheets, interne Stylesheets und externe Stylesheets. 3.1 Inline-Stylesheets Inline-Stylesheets werden auch Inline-Stylesheets oder Inline-Stylesheets genannt. Inline-Stylesheets platzieren CSS-Code und HTML-Code in derselben Datei. Wenn Sie Inline-Stile verwenden möchten, müssen Sie das Style-Attribut im entsprechenden Tag verwenden. Die Style-Eigenschaft kann beliebige CSS-Eigenschaften enthalten. Syntax: <tag name style="attribute 1: Attributwert 1; Attribut 2: Attributwert 2; Attribut 3: Attributwert 3; ">Inhalt</tag name> Zum Beispiel:
<!DOCTYPE html>
<html>
<Kopf>
<title>Inline-Stylesheet</title>
</Kopf>
<Text>
<h1 style="color:red;">Ich bin ein Inline-Stylesheet, Sie können mich auch Inline-Stylesheet oder Inline-Stylesheet nennen</h1>
</body>
</html>Wie aus dem obigen Code ersichtlich ist, haben wir dem Tag <h1> ein Stilattribut hinzugefügt. Das für das Stilattribut festgelegte CSS-Attribut ist das Farbattribut und der Attributwert ist rot. Der Anzeigeeffekt ist wie folgt:
Inline-Stylesheets sind bequem zu verwenden und leicht zu verstehen. Tatsächlich verfügt jeder HTML-Tag über ein Style-Attribut, mit dem der Inline-Stil festgelegt wird . Bei der Verwendung von Inline sind folgende Punkte zu beachten: (1) Der Stil ist eigentlich ein Attribut des Tags; (2) Verwenden Sie zwischen Stilattributen und Attributwerten ein ";", was im Englischen dem Semikolon entspricht. (3) Mehrere Attributwerte werden im Englischen durch Semikolon „;“ getrennt. (4) Der Inline-Stil kann nur das aktuelle Tag und die darin verschachtelten Untertags steuern, was leicht zu Code-Redundanz führen kann. Inline-Stile werden innerhalb eines einzelnen Tags definiert. Auf Websites gibt es eine Menge redundanten Codes, und aufgrund dieser großen Menge an redundanten Codes muss bei jeder Änderung des CSS-Stils dieser im jeweiligen Tag geändert werden, was die Wartbarkeit der Website erheblich beeinträchtigt. Darüber hinaus trennt der Inline-Stil den Stil nicht von der Struktur. 3.2. Interne Stylesheets Ein internes Stylesheet wird auch als eingebettetes Stylesheet bezeichnet. Es handelt sich dabei um einen CSS-Code, der in das Head-Tag eines HTML-Dokuments geschrieben und mit einem Style-Tag definiert wird. Grammatik:
<!DOCTYPE html>
<html>
<Kopf>
<title>Internes Stylesheet</title>
<Stil>
Wähler{
Attribut 1: Attributwert 1;
Attribut 2: Attributwert 2;
}
</Stil>
</Kopf>
<Text>
</body>
</html>Zum Beispiel:
<!DOCTYPE html>
<html>
<Kopf>
<title>Internes Stylesheet</title>
<Stil>
P{
Farbe: rosa;
}
</Stil>
</Kopf>
<Text>
<p>Ich bin ein internes Stylesheet, auch eingebettetes Stylesheet genannt</p>
</body>
</html>Wie aus dem obigen Code ersichtlich ist, wird das interne Stylesheet für das p-Tag verwendet und die hinzugefügte Schriftfarbe ist Pink. Der Anzeigeeffekt ist wie folgt:
Es ist zu beachten, dass im internen Stylesheet das Style-Tag ein Typattribut hat, dessen Wert text/css ist, also: type="text/css", was in HTML5 weggelassen werden kann. Die Verwendung interner Stylesheets hat zwei Nachteile: Erstens kann das interne Stylesheet nur die aktuelle Seite steuern. Zweitens trennt das interne Stylesheet Struktur und Stil nicht. 3.3. Externe Stylesheets Externe Stylesheets werden auch als verknüpft oder extern verknüpft bezeichnet. Das sogenannte externe Stylesheet besteht darin, den CSS-Code und den HTML-Code separat in verschiedenen Dateien abzulegen und dann im HTML-Dokument über das Link-Tag oder @import auf das CSS-Stylesheet zu verweisen. Die Dateierweiterung eines externen Stylesheets ist .css und die Datei darf keine HTML-Tags enthalten. Es gibt zwei Fälle, in denen externe Stylesheets eingeführt werden müssen: Der erste Fall wird im Link-Tag innerhalb des Head-Tags platziert. Die Syntax lautet: <head><link rel="stylesheet" type="text/css" href="1.css"></head> Zum Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<Titel></Titel>
<!--Referenzieren Sie die CSS-Datei mit dem Namen „index“ auf der HTML-Seite-->
<link href="index.css" rel="stylesheet" type="text/css" />
</Kopf>
<Text>
<div></div>
</body>
</html>Der zweite Fall besteht darin, es im Style-Tag innerhalb des Head-Tags zu platzieren oder es direkt in das Stylesheet zu schreiben. Die Syntax lautet:
<Stil>
@import 1.css;
@import '1.css';
@import "1.css";
@import url(1.css);
@import url('1.css);
@import url("1.css");
</Stil>Hinweis: In der obigen Syntax gibt es sechs Formen von „1.css“. Das bedeutet, dass es sechs Möglichkeiten gibt, den Befehl @import zum Importieren externer Stylesheets zu verwenden. Zum Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<Titel></Titel>
<Stil>
@import url("index.css");
</Stil>
</Kopf>
<Text>
<div></div>
</body>
</html>Sie sind sich möglicherweise nicht sicher, ob Sie zum Einführen externer Stylesheets das Link-Tag oder @import verwenden sollen. Der Unterschied zwischen dem Link-Tag und @import ist wie folgt: Unterschied 1: In Bezug auf untergeordnete Beziehungen ist das Link-Tag ein HTML-Tag, das neben dem Laden von CSS-Dateien noch viele andere Dinge tun kann, z. B. RSS definieren, Rel-Verbindungsattribute definieren usw.; während @import eine von CSS bereitgestellte Methode ist und nur zum Laden von CSS-Dateien verwendet werden kann. Unterschied 2: In Bezug auf die Ladereihenfolge wird beim Laden der Seite die durch das Link-Tag eingeführte CSS-Datei gleichzeitig geladen, während das durch @import eingeführte CSS nach dem Laden der Seite geladen wird. Unterschied 3: In Bezug auf die Kompatibilität ist das Link-Tag ein HTML-Tag und weist keine Kompatibilitätsprobleme auf; @import hingegen ist eine von CSS2.1 bereitgestellte Syntax und wird von Browsern vor IE5 nicht unterstützt. Unterschied 4: In Bezug auf die DOM-Steuerbarkeit können Sie, wenn Sie JavaScript zur Steuerung des DOM zum Ändern des Stils verwenden, nur das Link-Tag verwenden und nicht die @import-Methode. Unterschied 5: In Bezug auf das Gewicht sind die durch Link eingeführten Stile wichtiger als die durch @import eingeführten. (PS: Das Wissen zu Gewichten wird hier nicht im Detail erläutert, sondern später ausführlich erläutert.) 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. |
<<: Vergleich der Verwendung von EXISTS und IN in MySQL
>>: Docker View JVM-Speichernutzung
Artikel empfehlen
CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt
Der Anwendungsbereich von CSS ist global. Wenn da...
Erläuterung des Problems bei der Auswahl des MySQL-Speicherzeittyps
Der datetime-Typ wird normalerweise zum Speichern...
Detaillierte Erklärung des MySQL-Datenbankindex
Inhaltsverzeichnis 1. Einführung in den MySQL-Ind...
HTML-Tabellen-Markup-Tutorial (40): Dunkles Rahmenfarbattribut der Kopfzeile BORDERCOLORDARK
Im Tabellenkopf können Sie die dunkle Rahmenfarbe...
Beispiele für dl-, dt- und dd-Listenbezeichnungen
Die Tags dd und dt werden für Listen verwendet. N...
Zusammenfassung der Vorteile von Vue3 gegenüber Vue2
Inhaltsverzeichnis 1. Warum brauchen wir vue3? 2....
So verhindern Sie eine Verlangsamung des Computers, wenn unter WIN10 mehrere Datenbanken installiert sind
Aktivieren Sie den Dienst, wenn Sie ihn benötigen...
So aktivieren Sie den Fernzugriff in Docker
Docker-Daemon-Socket Der Docker-Daemon kann über ...
Detaillierte Erklärung zur Konfiguration der OpenGauss-Datenbank im Docker
Für Windows-Benutzer Verwenden von openGauss in D...
Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung
Ziehen Sie das Bild Docker-Pull MySQL Sehen Sie s...
Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server
Linux: Linux-Version 3.10.0-123.9.3.el7.x86_64 Ng...
Implementierungscodebeispiel für die lokale Verzeichniszuordnung von Nginx
Manchmal müssen Sie auf einige statische Ressourc...
Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte
Webdesign ist eine aufstrebende Randbranche, die n...
HTML Gewichtsverlust Optimieren Sie HTML-Tags zum Erstellen von Webseiten
HTML 4 HTML (nicht XHTML), MIME-Typ ist text/html...
Beispiel für utf8mb4-Sortierung in MySQL
Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...