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.

Gedanken- und Erfahrungsaustausch zum interaktiven Design von Leselisten für Informationsprodukte

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

Gedanken- und Erfahrungsaustausch zum interaktiven Design von Leselisten für Informationsprodukte

Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)

JavaScript implementiert Countdown auf Front-End-Webseite

mysql 5.7.18 winx64 Passwort ändern

CSS-Ansichtsfenstereinheiten für schnelles Layout

Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild

Mysql Sql-Anweisungsübungen (50 Fragen)

MYSQL Performance Analyzer EXPLAIN Anwendungsbeispielanalyse

So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen

Vue2.x - Beispiel für die Verwendung von Anti-Shake und Throttling

Artikel empfehlen

Beispiel für die Verwendung von MRG_MyISAM (MERGE) zur Implementierung einer Abfrage nach der Partitionierung in MySQL

So verwenden Sie JSONP in Vue

MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)

MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten

MySQL Series II-Konfiguration für mehrere Instanzen

Tutorial zur Installation von phpMyAdmin unter Linux centos7

Verstehen Sie den aktuellen Status der HTML5-Entwicklung in der mobilen Entwicklung genau

Drei Möglichkeiten zum Erstellen eines Graueffekts auf Website-Bildern

Beispielcode zur Trennung von Front-End und Back-End mit FastApi+Vue+LayUI

Detaillierte Beschreibung von Shallow Copy und Deep Copy in js

Mysql-Timeline-Daten, um die ersten drei Daten desselben Tages zu erhalten

So verwenden Sie das Realip-Modul im Nginx-Grundlagenlernen

Detaillierte Erläuterung der TCPdump-Befehlsbeispiele in Linux

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung