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
Lösung für das Fehlen der my.ini-Datei in MySQL 5.7
Was ist my.ini? my.ini ist die in der MySQL-Daten...
Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen
Plötzlich musste ich einen privaten Dienst für di...
Detaillierte Erläuterung der gespeicherten Prozedur „MySql View Trigger“
Sicht: Wenn eine temporäre Tabelle wiederholt ver...
So ändern Sie die Ubuntu-Quellliste (Quellliste) - detaillierte Erklärung
Einführung Die Standardquelle von Ubuntu ist kein...
Linux (CentOS7) installiert Tomcat und legt Tomcat als Startobjekt fest (am Beispiel von Tomcat8).
Inhaltsverzeichnis Installieren Sie Tomcat Laden ...
Detaillierte Erläuterung der grundlegenden Docker-Netzwerkkonfiguration
Externer Zugriff Ports nach dem Zufallsprinzip zu...
Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können
Inhaltsverzeichnis DOM-Verarbeitung Arrays Verfah...
So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung
1. Laden Sie MySQL Community Server 5.7.16 herunt...
Ein Beispiel zum Abfragen von Daten in MySQL und zum Aktualisieren dieser Daten in eine andere Tabelle basierend auf Bedingungen
Dieser Artikel beschreibt anhand eines Beispiels,...
Implementierung des Vue-Zählers
Inhaltsverzeichnis 1. Implementierung des Zählers...
Lösen Sie das Problem, dass VMWare nach der Installation des Mac-Systems nicht im Vollbildmodus angezeigt werden kann
System: VMTOOLs-Download: Verknüpfung: https://pa...
So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3
Experimentelle Umgebung Eine minimal installierte...
Detaillierte Schritte zum Aktivieren der SourceGuardian (sg11)-Verschlüsselungskomponente auf virtuellen Linux-Hosts
Hinweis: sg11 Unser Unternehmen unterstützt nur d...
Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)
Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...
Nginx konfiguriert denselben Domänennamen, um sowohl den http- als auch den https-Zugriff zu unterstützen
Nginx ist mit demselben Domänennamen konfiguriert...