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