Drei Möglichkeiten zur Verwendung von CSS-Inlinestilen, eingebetteten Stilen und externen Referenzstilen

Ein einfaches Beispiel für die Verwendung der drei Methoden ist wie folgt:

Inline-Stile:

<!doctype html>
<html>
<Kopf>
 <meta charset="UTF-8">
 <title>CSS-Inline-Stil</title>
</Kopf>
<Text>
<div Stil="Breite:100px;Höhe:100px;Hintergrund:rot;"></div>>
 
</body>
</html>

Inline-Stile:

<!!Dokumenttyp html>
<html>
<Kopf>
 <meta charset="UTF-8">
 <title>eingebetteter CSS-Stil</title>
</Kopf>
<Text>
<style type="text/css">
#div{Breite:100px;Höhe:100px;Hintergrund:rot;}
</Stil>
<div id="div"></div>>
 
</body>
</html>

Externer Typ:

<!doctype html>
<html>
<Kopf>
 <meta charset="UTF-8">
 <title>eingebetteter CSS-Stil</title>
 <link rel="stylesheet" type="text/css" href="ccss.css">
</Kopf>
<Text>
<div id="div"></div>>
 
</body>
</html>

CSS-Datei

#div{Breite:100px;Höhe:100px;Hintergrund:rot;}

Zusamenfassend:

Inline-Stil: Der Code wird in ein Element auf einer bestimmten Webseite geschrieben, zum Beispiel: <div style="color:#f00"></div>

Inline: schreiben Sie es einfach vor </head>; zum Beispiel: <style type="text/css">.div{color:#F00}</style>

Externer Stil: bezieht sich auf eine externe CSS-Datei; zum Beispiel: <link href="css.css" type="text/css" rel="stylesheet" />

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.

<<: Detailliertes Tutorial zur Installation von CentOS, JDK und Hadoop auf VirtualBox

>>: Neulinge lernen schnell die Schritte zum Erstellen von Website-Symbolen

So ändern Sie die Portzuordnung eines laufenden Docker-Containers

Drei Möglichkeiten zur Verwendung von CSS-Inlinestilen, eingebetteten Stilen und externen Referenzstilen

So ändern Sie die Portzuordnung eines laufenden Docker-Containers

Detaillierte Erläuterung der JDBC-Datenbankverknüpfung und der zugehörigen Methodenkapselung

Probleme bei der Installation von MySQL und mysql.sock unter Linux

So verwenden Sie SVG-Symbole in WeChat-Applets

Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue

Vue-Bindungsobjekt, Array-Daten können nicht dynamisch gerendert werden – detaillierte Erläuterung

Sekundäre Kapselung des Elements el-table table (mit Tischhöhenanpassung)

Zusammenfassung von 10 erstaunlichen Tricks von Element-UI

So benennen Sie in Linux mehrere Dateien gleichzeitig um

So deinstallieren Sie das native OpenJDK von Linux und installieren Sun JDK

Artikel empfehlen

Detaillierte Erläuterung des Binlog-Protokollanalysetools zur Überwachung von MySQL: Canal

Detaillierte Verwendung des Linux-Textsuchbefehls find

Detaillierte Erklärung zur Formatierung von Zahlen in MySQL

Lösung für das Problem, dass Tomcat beim normalen Zugriff auf localhost eine 404-Meldung ausgibt

Beispiel zur Identifizierung des Benutzers mithilfe eines Linux-Bash-Skripts

Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“

Bootstrap 3.0 - Schaltflächenstil für Lernnotizen

Lösung zum Vergessen des MySQL-Datenbankkennworts

Installieren Sie Docker offline, indem Sie RPM und zugehörige Abhängigkeiten mit Yum herunterladen.

Einfacher Vergleich von Meta-Tags in HTML

JavaScript zur Implementierung des Flugzeugkriegsspiels

Spezifische Verwendung von GNU Parallel

So konfigurieren Sie gängige Software unter Linux

Analyse des Ereignisschleifenmechanismus von js

Mehrere Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx