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 Erklärung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS

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

Detaillierte Erklärung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS

So verwenden Sie TypeScript in Vue

Ubuntu 16.04 Installations-Tutorial unter VMware 12

Attribute und Verwendung von INS- und DEL-Tags

MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen

Vue implementiert die Methode zur Anzeige des Prozentsatzes der Echart-Kreisdiagrammlegende

Eine kurze Erläuterung des Lazy-Loading-Attributmusters in JavaScript

Verwenden der Better-Scroll-Komponente in Vue zum Realisieren der horizontalen Scrollfunktion

Eine kurze Diskussion über die Effizienz der MySQL-Unterabfrage-Vereinigung und in

Methode zur Optimierung von MySQL-Gruppenabfragen

Artikel empfehlen

Binäre Installation von MySQL 5.7.23 unter CentOS7

Detaillierte Analyse von MySQL-Ausführungsplänen

Neue Funktionen in MySQL 8.0 - Einführung in Check Constraints

Einführung in die Schritte zum Bereitstellen von Redis in einem Docker-Container

Zusammenfassung der am häufigsten verwendeten Wissenspunkte zu den neuen Funktionen von ES6

W3C Tutorial (9): W3C XPath Aktivitäten

So verwenden Sie den Linux-Befehl nl

base target="" steuert den Ziel-Open-Frame des Links

CSS3 implementiert einen Fußbereich, der unten fixiert ist (immer unten, egal wie hoch die Seite ist).

CSS zum Erzielen von leuchtendem Text und ein paar JS-Spezialeffekten

Lösen Sie das Problem, dass Navicat beim Importieren der SQL-Datenbankdatenstruktur den Fehler datetime(0) meldet.

React-Beispiel, das den Fortschritt des Datei-Uploads zeigt

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

js realisiert eine schrittweise zunehmende digitale Animation

Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue