Vier Möglichkeiten, CSS und HTML zu kombinieren
|
(1) Jedes HTML-Tag hat ein Attribut style, das CSS und HTML miteinander verbindet <div style="background-color:red;color:blue;">Ich bin ein kleiner Vogel</div> (2) Verwenden Sie ein HTML-Tag, <style>-Tag: Schreiben Sie es in den Kopf
<style type="text/css">
CSS-Code;
</Stil>
<style type="text/css">
div {
Hintergrundfarbe: rot;
Farbe: grau;
}
</Stil>(3) Verwenden Sie Anweisungen im Style-Tag (funktioniert in einigen Browsern nicht) @import url(CSS-Dateipfad); - Schritt 1: Erstellen Sie eine CSS-Datei
<style type="text/css">
@import url(div.css);
</Stil>(4) Verwenden Sie den Header-Tag-Link, um externe CSS-Dateien einzuführen - Schritt 1: Erstellen Sie eine CSS-Datei - <link rel="stylesheet" type="text/css" href="div.css"/> *** Nachteile der dritten Kombinationsmethode: Sie funktioniert in einigen Browsern nicht und die vierte Methode wird im Allgemeinen verwendet *** Priorität (allgemein) Von oben nach unten, von außen nach innen, Priorität von niedrig nach hoch *** Die später geladenen haben eine höhere Priorität *** Formatselektorname {Attributname: Attributwert; Attributname: Attributwert; ......} Vollständiger Code:
<html>
<Kopf>
<title>Welt</title>
<style type="text/css">
div {
Hintergrundfarbe: grau;
Farbe: weiß;
}
</Stil>
</Kopf>
<Text>
<div style="background-color:red;color:blue;">Ich bin ein kleiner Vogel</div>
<div>Mögen wir auf die Jahre zurückblicken und gemeinsam mit tiefer Zuneigung alt werden! </div>
</body>
</html>
<html>
<Kopf>
<title>Welt</title>
<style type="text/css">
@import url(div.css);
</Stil>
</Kopf>
<Text>
<div>Mögen wir auf die Jahre zurückblicken und gemeinsam mit tiefer Zuneigung alt werden! </div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<title>Welt</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</Kopf>
<Text>
<div>Mögen wir auf die Jahre zurückblicken und gemeinsam mit tiefer Zuneigung alt werden! </div>
</body>
</html>Zusammenfassen Oben sind die vier Möglichkeiten zum Kombinieren von CSS und HTML, die ich Ihnen vorgestellt habe. Ich hoffe, sie werden Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Analyse des Unterschieds zwischen relativem und absolutem HTML-Pfad
>>: Spezifische Verwendungsanweisungen für MySQL-Joins
Artikel empfehlen
Tomcat-Ausnahmelösung (Ungültiges Zeichen im Anforderungsziel gefunden. Die gültigen Zeichen sind in RFC 7230 und RFC 3986 definiert)
1. Szenariodarstellung Das Tomcat-Protokoll melde...
Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).
Ich entwickle derzeit ein neues App-Projekt. Dies...
Vue3.0 implementiert die Fallstudie zum Lupeneffekt
Der zu erzielende Effekt ist: Festes Vergrößern a...
Nutzungsszenarien und Quellcodeanalyse der Funktionskomponenten erweiterter Vue-Komponenten
Inhaltsverzeichnis einführen Anwendungsszenarien ...
MySQL 8.0.21.0 Community Edition Installations-Tutorial (ausführliche Abbildungen)
1. MySQL herunterladen Melden Sie sich auf der of...
Vue3 (III) Website Homepage Layout Entwicklung
Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...
Detailliertes Tutorial zur Installation des Tomcat9-Windows-Dienstes
1. Vorbereitung 1.1 Laden Sie das komprimierte To...
Die perfekte Lösung für die verstümmelten chinesischen Zeichen in mysql6.x unter Win7
1. Stoppen Sie den MySQL-Dienst in der Befehlszei...
Analyse des Consul-Konfigurationsprozesses für die Docker-Bereitstellung
Befehl ausführen docker run -d --name consul -p 8...
Detaillierte Erläuterung der MySQL-Transaktionsisolationsebene und des MVCC
Inhaltsverzeichnis Transaktionsisolationsebene Be...
Kurztipps für die Linux-Befehlszeile: So finden Sie eine Datei
Wir alle haben Dateien auf unseren Computern gesp...
Eine kurze Analyse der startReactApplication-Methode von React Native
In diesem Artikel haben wir den Startvorgang von ...
Native JS-Implementierung des Ladefortschrittsbalkens
Dieser Artikel zeigt einen Spezialeffekt für dyna...
Tutorial zum Herunterladen und Installieren von MySQL 8.0.12 WinX64
MySQL 8.0.12 Download- und Installations-Tutorial...
Implementierung von HTTP- und HTTPS-Diensten mit Nginx-Reverse-Proxy für mehrere Domänennamen
Derzeit verfügt Nginx über einen Reverse-Proxy fü...