Einführung in CSS-Stileinführungsmethoden und ihre Vor- und Nachteile
|
Drei Möglichkeiten, CSS einzuführen 1. Inline-Stile Vorteile: leicht zu schreiben, hohes Gewicht Nachteile: keine Trennung von Struktur und Stil
2. Interner Stil Vorteile: Strukturmuster Phasentrennung Nachteile: Unvollständige Trennung
<Stil>
div {
Farbe: violett;
Schriftgröße: 16px;
}
</Stil>3. Äußerer Stil Vorteile: Vollständige Trennung von Struktur und Stil Nachteile: Notwendigkeit der Einführung
<!-- CSS-Initialisierungsdatei importieren-->
<link rel="stylesheet" href="css/normalize.css" />
<!-- Öffentliche Stile importieren -->
<link rel="stylesheet" href="css/baes.css">
<!-- Homepage-Stil importieren-->
<link rel="stylesheet" href="css/index.css">Ergänzung: Vier Möglichkeiten, CSS-Stile einzuführen Vorbereiten 1. Bereiten Sie zunächst eine HTML-Datei vor: test.html. Es wird nicht empfohlen, Notepad zum Erstellen von Dateien zu verwenden. Es wird empfohlen, Notepad++ zum Erstellen und Bearbeiten von Dateien zu verwenden. Beachten Sie, dass das Kodierungsformat lautet: UTF-8 ohne BOM-Format, da sonst chinesische verstümmelte Zeichen erscheinen. Der Inhalt ist wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html;charset=UTF-8">
<title>Vier Möglichkeiten, CSS-Stile einzuführen</title>
<style type="text/css">
</Stil>
</Kopf>
<Text>
Hallo
</body>
</html>2. Speichern Sie die Datei auf dem Desktop, klicken Sie mit der rechten Maustaste und wählen Sie Google Chrome (oder einen anderen Browser zum Öffnen). Auf der Seite werden die englischen Buchstaben „Hallo“ angezeigt.
Vier Möglichkeiten zur Einführung Im Einklang Dies wird durch das HTML-Attribut style erreicht, wie unten gezeigt //Schreiben Sie in den Body-Tag <span style="color:red;">Inline-Stil</span> Eingebettet Schreiben Sie den CSS-Stil in das Style-Tag und verweisen Sie im Body darauf
//CSS-Stil, der im Style-Tag p{ geschrieben ist
Farbe: blau;
}
-----------------------------------------------------------------
//Schreiben Sie in den Body-Tag <p>Embedded</p>Link 1. Im Allgemeinen wird diese Methode verwendet, um eine neue CSS-Datei auf dem Desktop zu erstellen: test.css, mit einem CSS-Stil
//Schreibe in das test.css-Filediv{
Farbe: gelb;
}
2. Importieren Sie die Datei test.css in test.html //Schreiben Sie in das Head-Tag, um die CSS-Datei einzuführen. Das href-Attribut ist der absolute Pfad, derzeit im selben Verzeichnis <link href="test.css" type="text/css" rel="stylesheet" /> ------------------------------------------------------------------------ //Schreiben Sie in den Body-Tag <div> Link-Stil</div> Import
1. Wird grundsätzlich nicht verwendet, da die Seite zuerst HTML und dann CSS lädt, was zu einer Verzögerung im Seitenstil führt. 2. Erstellen Sie eine demo.css-Datei und schreiben Sie einen CSS-Stil
//Schreibe in die Datei demo.css h2{
Farbe: grün;
}3. Verwenden Sie @import, um die Datei demo.css zu importieren //Nach einigen Tests muss es separat in einem Stil geschrieben werden. <Stil> @import url(demo.css) </Stil> ---------------------------------------------------------------------------- //Schreiben Sie in den Body-Tag <h2>Wichtig</h2> HTML-Seitencode
Seitendarstellungen
Anzeigepriorität der ersten drei Stile Näherungsprinzip, d.h. inline > eingebettet > eingebettet Zusammenfassen Dies ist das Ende dieses Artikels über die Einführung von CSS-Stilen und ihre Vor- und Nachteile. Weitere relevante Inhalte zur Einführung von CSS-Stilen und ihren Vor- und Nachteilen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Eine kurze Analyse des Unterschieds zwischen und und wo in der MySQL-Verbindungsabfrage
>>: Sprechen Sie darüber, wie HTML-Escapezeichen durch Code identifiziert werden können.
Artikel empfehlen
MySQL5.7.03 Ersatz der höheren Version durch MySQL 5.7.17 Installationsprozess und Lösungen für gefundene Probleme
1. Wie installiert man? 1. [Ausführen] -> [cmd...
MySQL-Reihe: Datenbankdesign, drei Paradigmen, Tutorial-Beispiele
Inhaltsverzeichnis 1. Wissensbeschreibung der dre...
So erstellen Sie ein Dateisystem in einer Linux-Partition oder einem logischen Volume
Vorwort Erfahren Sie, wie Sie auf Ihrem System ei...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18
In diesem Artikel wird das grafische Tutorial zur...
5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten
1. CSS alphabetisch ordnen Nicht in alphabetischer...
Der grundlegendste Code für Webseiten
◆Zu Favoriten hinzufügen veranschaulichen Klicken...
Die v-for-Direktive in Vue vervollständigt die Listendarstellung
Inhaltsverzeichnis 1. Listendurchlauf 2. Die Roll...
Einführung in die Leistungsoptimierung von MySQL-Datenbanken
Inhaltsverzeichnis Warum optimieren? ? Wo soll ic...
CocosCreator ScrollView-Optimierungsreihe: Frame-Laden
Inhaltsverzeichnis 1. Einleitung 2. Analyse des f...
Wird CSS3 SCSS wirklich ersetzen?
Beim Styling unserer Webseiten haben wir die Wahl...
Zabbix kombiniert mit Bat-Skript, um eine Methode zur Überwachung des Anwendungsstatus mehrerer Anwendungen zu erreichen
Szenariosimulation: Einige inländische Unternehme...
Tutorial zur Installation von MySQL 5.6 auf CentOS 6.5
1. Laden Sie das RPM-Paket für Linux herunter htt...
Implementierungscode von Nginx Anti-Hotlink und Optimierung in Linux
Versionsnummer verbergen Die Versionsnummer wird ...
Detailliertes Installationstutorial für Windows 10 + MySQL 8.0.11 Zip
Vorbereiten: Downloadadresse für das MySQL 8.0 Wi...
Detaillierte Erklärung der MySQL-Zeichenfolgenverkettungsfunktion GROUP_CONCAT
Im vorherigen Artikel habe ich ein tabellenübergr...