Heim >Web-Frontend >HTML-Tutorial >Was bedeutet das HTML-Style-Tag? Ausführliche Erklärung zur Verwendung des Style-Tags
Was bedeutet das HTML-Style-Tag? Ausführliche Erklärung zur Verwendung des Style-Tags
- 寻∝梦Original
- 2018-08-22 13:58:3916478Durchsuche
In diesem Artikel geht es hauptsächlich um die Definition und Einführung von HTML-Style-Tags. Lassen Sie uns zunächst einige Verwendungszwecke und Positionen von Style-Tags in HTML verstehen und dann einige Methoden und detaillierte Techniken vorstellen Schauen Sie sich die Definition und Verwendung des
HTML-Stil-Tags an. Das -Tag wird verwendet, um Stilinformationen für HTML-Dokumente zu definieren .
Im Stil können Sie festlegen, wie das HTML-Dokument im Browser gerendert wird. Das Typattribut ist erforderlich und definiert den Inhalt des Stilelements. Der einzig mögliche Wert ist „text/css“. Das Stilelement befindet sich im Kopfbereich.HTML c9ccee2e6ea535a969eb3f532ad9fe89-Tag-Instanz:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>Erforderliche Attribute: Typ: text/css: Gibt den MIME-Typ des Stylesheets an .
Detaillierte Erklärung zur Verwendung des HTML-Style-Tags: 531ac245ce3e4fe3d50054a55f265927 Schreiben Sie die Stile verschiedener Tags in das Tag-Paar , was sein kann body Es kann auch h1 sein, das heißt, alle Inline-Stile zusammen schreiben
Wenn beispielsweise 10 Tags alle derselben Klasse angehören, müssen Sie 10im Inline-Stil und im Stil. Schreiben Sie einfach einen.
Jetzt handelt es sich bei allen um Designmuster, die Struktur (HTML), Stil (CSS) und Verhalten (JS) trennen.
<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>Das Style-Tag ist entsprechend seiner Position im CSS unterteilt Stylesheet Drei Typen:
1. Inline-Stylesheet 2. Internes Stylesheet
3. Externes Stylesheet
Lass es uns erklären im Detail unten:
1. Das eingebettete Stylesheetwird in das Tag (Tag) geschrieben, das es beispielsweise im e388a4556c0f65e1904146cc1a846bee verwendet >
Die Syntax lautet:<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>2. Das interne Stylesheet unterscheidet sich vom eingebetteten Stylesheet, das zwischen 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 geschrieben wird. Tags der HTML-Webseite, daher ist es für die gesamte Seite gültig. Es ist zu beachten, dass Sie beim Schreiben darauf achten müssen, dass dieses Stylesheet in diesem Tag verwendet wird, da es nicht in einem bestimmten Tag geschrieben ist. Sie müssen es auch klar schreiben, wenn Sie es definieren, da es sonst zu Problemen kommt Die gesamte Seite ist unübersichtlich. Beispiel:
<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html> Wenn Sie ein internes Stylesheet definieren, sollten Sie bei der Deklaration von c9ccee2e6ea535a969eb3f532ad9fe89 zunächst angeben, in welchem Tag dieses Stylesheet verwendet wird Stylesheet in allen Seiten. Wenn dieses Stylesheet in allen Tags verwendet wird, fügen Sie nach dem deklarierten Tag einen selbstdefinierten Stylesheet-Namen hinzu, wie z. B. p.mylayout oben, was bedeutet, dass dieses Stylesheet nur im < verwendet werden kann ;p>-Tag der Webseite, deklarieren Sie es als 0520d7dcd51e235b29e286f78a25dfc7Mit der Stylesheet-Auswahl können Sie dasselbe HTML verwenden Tag, um verschiedene Stile zu bilden. Sie möchten beispielsweise, dass der Absatz e388a4556c0f65e1904146cc1a846bee zwei Stile hat, einen zentriert und einen rechtsbündig. Sie können den folgenden Stil schreiben:
p.right {text-align:right}
p.center {text-align:center}wobei sich rechts und in der Mitte zwei Stylesheets befinden. Dann können Sie auf diese beiden Stylesheets verweisen: <p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p>Sie können auch direkt „.“ plus den Stylesheet-Namen verwenden, ohne HTML-Tags zu verwenden. Der Beispielcode lautet wie folgt:
.center {text-align: center}Dieser universelle Stylesheet-Name unterliegt nicht den Einschränkungen von Tags und kann für verschiedene Tags verwendet werden. Zum Beispiel: <h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p>
3. Externes Stylesheet
Ein externes Stylesheet schreibt den Inhalt des Stylesheets separat in einen Notizblock und speichert ihn mit der Endung .css Datei, fügen Sie der Webseite, die Sie aufrufen möchten, den folgenden Code hinzu (fügen Sie ihn natürlich trotzdem zwischen 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 ein):<link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">Zum Beispiel: Zuerst schreiben ein Stück Code und speichere es als p.css
p.mylayout {font-size:20pt; border-width:1px; color:blue; } und rufe dann dieses Stylesheet in der Webseite auf, die du schreibst: <HTML> <head> <link href="p.css所在的相对路径" rel="stylesheet" type="text/css"> </head> <body> <p class="mylayout"> 这个标题使用了Style 。</p> <p>这个标题没有使用Style。</p> </body> </HTML>Ein externes Stylesheet kann also von vielen Webseiten aufgerufen werden , das sind die äußeren Stilvorteile der Tabelle. Stylesheets können auch verkettet werden, das heißt, eine Webseite verwendet mehrere CSS. Die Reihenfolge der Verkettung ist: eingebettet > intern > extern > browsereigene
das heißt, wenn eine Web Seite hat internes CSS, ihr Aufruf an externes CSS wird überschrieben (d. h. externes CSS funktioniert nicht) Verschachtelungsbeschreibung, wenn CSS-Stylesheet definiert ist: p b {color :blue; }Bei Verwendung:
<p>这段文字在b标签中的为<b>蓝色</b></p>cursor:hand Dieses Attribut verwandelt die Maus in die Form einer Hand. [Artikel zum Thema des Herausgebers]
Was ist die Funktion des HTML-EM-Tags? Der Unterschied zwischen 907fae80ddef53131f3292ee4f81644b- und 5a8028ccc7a7e27417bff9f05adf5932-Tags
Was bedeutet das HTML5-Ausgabe-Tag? So verwenden Sie das HTML5-Ausgabe-Tag
Das obige ist der detaillierte Inhalt vonWas bedeutet das HTML-Style-Tag? Ausführliche Erklärung zur Verwendung des Style-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!