CSS wird auf drei Arten in Seiten verwendet: Inline-Stile, eingebettete Stylesheets und verknüpfte Stylesheets

CSS wird auf drei Arten auf Seiten verwendet: Inline-Stile, eingebettete Stylesheets und verknüpfte Stylesheets

2024-07-12

Die Verwendung von CSS-Stilen auf Seiten umfasst drei Methoden: Inline-Stile, eingebettete Stylesheets und verknüpfte Stylesheets.

1. Inline-Stil

Der Inline-Stil ist ein relativ direkter Stil, der direkt im HTML-Tag definiert und über das Style-Attribut implementiert wird. Diese Methode ist einfacher zu erlernen, aber nicht sehr flexibel.

【Beispiel】Wenden Sie Inline-Stile an, um die Seite zu steuern.


<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Ergebnisse der:

2. Eingebettetes Stylesheet

Verwendung eingebetteter Stylesheets <style>...</style> Tags enthalten CSS-Stile in der Seite. Die Form von Inline-Stylesheets ist nicht so direkt wie Inline-Stile, aber die Seite wird regelmäßiger.

【Beispiel】Verwenden Sie eingebettete Stylesheets, um Ihre Seiten zu gestalten.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

Ergebnisse der:

3. Verlinktes Stylesheet

Die Verknüpfung mit einem externen CSS-Stylesheet ist die gebräuchlichste Art, auf ein Stylesheet zu verweisen.Definieren Sie zunächst den CSS-Stil in einer separaten Datei und übergeben Sie ihn dann in der HTML-Seite<link> Tags, um darauf zu verweisen, ist dies die effizienteste Art, CSS-Stile zu verwenden.

<link>Die Syntaxstruktur des Tags ist wie folgt:

<link rel='stylesheet' href='path' type='text/css'>

rel: Die Beziehung zwischen dem externen Dokument und dem aufrufenden Dokument.

href: absoluter oder relativer Pfad zum CSS-Dokument.

Typ: MIME-Typ der externen Datei

【Beispiel】Verweisen Sie auf CSS-Stile auf der Seite.

(1) Erstellen Sie ein CSS-Verzeichnis und erstellen Sie dann eine CSS.CSS-Stildatei im Verzeichnis.


/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

(2) Übergeben Sie die Seite<link> Tags fügen CSS-Stildateien in die Seite ein.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
 
    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

Ergebnisse der:

4. Priorität der Stylesheet-Aufrufe

Die Prioritätsreihenfolge von Stylesheet-Aufrufen folgt den folgenden Prinzipien:

(1) Der im Inline-Stil definierte Stil hat die höchste Priorität.

(2) Andere Stile folgen dem Proximity-Prinzip in der Reihenfolge, in der sie in der HTML-Datei erscheinen oder referenziert werden. Je näher am Text, desto höher die Priorität.

(3) Die Prioritätsreihenfolge der Selektoren ist Nachkommenselektor, Klassenselektor, ID-Selektor, und die Priorität nimmt in der Reihenfolge ab.

(4) Stile, die in keiner Datei definiert sind, folgen dem Standardstil des Browsers.

Technologieaustausch

CSS wird auf drei Arten auf Seiten verwendet: Inline-Stile, eingebettete Stylesheets und verknüpfte Stylesheets

1. Inline-Stil

2. Eingebettetes Stylesheet

3. Verlinktes Stylesheet

4. Priorität der Stylesheet-Aufrufe

Persönliches Profil

meine Kontaktdaten