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

<div Stil="Breite: 100px" Höhe: 100px></div>

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

@import(url(demo.css))

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.

Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript

Einführung in CSS-Stileinführungsmethoden und ihre Vor- und Nachteile

Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript

Detaillierte Erläuterung der Protokollverarbeitung von Docker-Containern

Lernen Sie, wie Sie in 2 Minuten ein kreisförmiges/fächerförmiges Menü erstellen (Basisversion)

Grafisches Tutorial zur Installation von CentOS7 auf VMware 15.5

Beispielcode zur Implementierung einer Upload-Komponente mit Vue3

Über das WeChat Mini-Programm zur Implementierung von Cloud-Zahlungen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13

Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner

MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen

Vue verwendet Echart, um Beschriftungen und Farben anzupassen

Artikel empfehlen

Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird

So stellen Sie Confluence und Jira-Software in Docker bereit

Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren

Beispielanalyse der Verwendung von GROUP_CONCAT in MySQL

Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?

So verwenden Sie das JQuery-Editor-Plugin tinyMCE

So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue

Prinzip der Ereignisdelegierung in JavaScript

Grafisches Tutorial zur Installation von CentOS7 auf VMware 15.5

Eine andere Art von „Abbrechen“-Button

Analyse von MySQL-Lock-Wait- und Deadlock-Problemen

So verbinden Sie JDBC mit MySQL 5.7

Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).