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

Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

Ubuntu 18.04, andere Versionen von Ubuntu Frage: ...

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

Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten

So implementieren Sie die jQuery-Karussellfunktion

JavaScript-Implementierung des Spiels des Lebens

Vue3 kapselt seine eigene Paging-Komponente

Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

So verwenden Sie Umgebungsvariablen in der Nginx-Konfigurationsdatei

13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

CSS3 verwendet die Übergangseigenschaft, um Übergangseffekte zu erzielen

Der Unterschied zwischen redundanten und doppelten Indizes in MySQL

Artikel empfehlen

Einführung in gängige MySQL-Speicher-Engines sowie Parametereinstellung und -optimierung

Implementierung eines CSS-Textschatten-Effekts zur allmählichen Unschärfe

Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers

Eine kurze Einführung in MySQL-Datenbankoptimierungstechniken

Best Practices zum Teilen von React-Code

Eine kurze Analyse von MySQL - MVCC

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

Vue implementiert einen Wasserfallfluss mit unendlichem Laden

Einführung in die Farbabstimmung von Königsblau für Webdesign

Der Prozess des SSH-Dienstes basierend auf der Schlüsselauthentifizierung im Linux-System

Was tun, wenn Sie das ursprüngliche Passwort für MySQL auf dem MAC vergessen?

mysql8.0.11 Winx64 Installations- und Konfigurationstutorial

Warum sollte CSS im Head-Tag platziert werden?

Kurztipps für die Linux-Befehlszeile: So finden Sie eine Datei

Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten