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 verbinden Sie XShell und Netzwerkkonfiguration in CentOS7

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

So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7

Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout

Detaillierte Erklärung der Javascript-Grundlagen

Detaillierte Erläuterung der Vorgänge und Implementierungen im Zusammenhang mit dem HTML-Druck

So konfigurieren Sie MGR Single Master und mehrere Slaves in MySQL 8.0.15

HTML-Tabellen-Markup-Tutorial (40): Dunkles Rahmenfarbattribut der Kopfzeile BORDERCOLORDARK

MySQL-Fremdschlüsseleinschränkung (FOREIGN KEY) Fallerklärung

Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI

Dieser Artikel zeigt Ihnen, wie Sie Vue 3.0 responsive verwenden

Export- und Importvorgänge für Docker-Images

Artikel empfehlen

TypeScript-Lernhinweise: Typeingrenzung

Lösen Sie das Problem der Datensynchronisierung beim Scrollen und Liken von Vue-Seamless-Scroll

Detailliertes Tutorial zur Installation der komprimierten Version von MySQL 8.0.11 unter Win10

Probleme beim Springen auf HTML-Seiten und bei der Parameterübertragung

Div-CSS-Benennungsstandards, CSS-Klassenbenennungsregeln (entsprechend SEO-Standards)

Modularität in Node.js, npm-Paketmanager erklärt

Erweiterte Erklärung der Javascript-Funktionen

Die Verbindung zwischen JavaScript-Konstruktoren und Prototypen

Vue implementiert die vollständige Auswahlfunktion

Detaillierte Erläuterung der Verwendung von Docker-Tag und Docker-Push

js realisiert die Lupenfunktion der Shopping-Website

Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

Ein Artikel zum Erlernen von Fähigkeiten zur Optimierung von MySQL-Indexabfragen

So implementieren Sie die automatische Ansible-Installation und -Konfiguration von httpd im Linux-System