Heim > Artikel > Web-Frontend > Ausführliche Erklärung zur Verwendung des Style-Attributs von HTML-Tags (mit konkreten Beispielen)
Ausführliche Erklärung zur Verwendung des Style-Attributs von HTML-Tags (mit konkreten Beispielen)
- 寻∝梦Original
- 2018-08-27 14:10:3638253Durchsuche
Dieser Artikel erklärt Ihnen die Definition und Funktion des Stilattributs von HTML-Tags sowie Beispiele für die Verwendung des Stilattributs in HTML und verschiedene Stilanalysen des Stilattributs in HTML-Tags. Schauen wir uns diesen Artikel gemeinsam an
Lassen Sie uns zunächst die Definition des Stilattributs des HTML-Tags vorstellen:
Das Stilattribut gibt den Inline-Stil an des Elements. ) Das Attribut
style überschreibt alle globalen Stileinstellungen, z. B. diejenigen, die im c9ccee2e6ea535a969eb3f532ad9fe89-Tag angegeben sind.
Beispiel für ein HTML-Stilattribut
Verwendung des Stilattributs in HTML-Dokumenten:
<h1 style="color:blue; text-align:center">This is a header</h1> <p style="color:red">This is a paragraph.</p>
Die Syntax des HTML-Tag-Stilattributs:
<element style="value">
Attributwert des HTML-Tag-Stilattributs:
style_definition: Ein oder mehrere CSS-Attribute und -Werte, getrennt durch Semikolon.
Verschiedene Stilanalyse des Stilattributs in HTML
1. Das Stilattribut kann den Schriftstil (Schriftfamilie:) festlegen. Schriftgröße (font-size:), Textfarbe (color:) usw. Es kann in jedem anderen
-Tag oder in einem CSS-Stylesheet festgelegt werden. Da meine Artikel alle unter http://www.codecademy.com geschrieben sind, habe ich CSS noch nicht eingeführt, daher werde ich hier vorerst nicht auf CSS eingehen, sondern es einfach im Tag festlegen. Das Folgende ist der Beispielcode und schematisches Diagramm:
<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px">Hello World!</h3> <p style="color:red;font-size=10px">你好！！！！</p> </body> </html>
Hinweis:
a) Der Browser, den ich verwende, ist Chrome, und beim Bearbeiten und Anzeigen stelle ich immer fest, dass die eingestellte 10px-Schriftart nicht angewendet wird In den Einstellungen habe ich festgestellt, dass
bedeutet, dass die in Chrome festgelegte Mindestschriftart 12 Pixel beträgt, sodass die Schriftgröße von 10 Pixeln nutzlos ist. Ändern Sie einfach die Mindestschriftart des Chrome-Browsers auf eine kleinere Größe.
b) Die Zuweisungsmethode im Stilattribut lautet: Attributname: Wert, anstelle des üblichen Gleichheitszeichens =. Wenn das Gleichheitszeichen verwendet wird, wird der Stileffekt nicht ausgeführt.
2. Die Hintergrundfarbe kann auch im Stil festgelegt werden. Das Festlegen seines Farbwerts kann die Hintergrundfarbe innerhalb des gesamten Etikettenbereichs ändern 🎜>Die für die Hintergrundfarbe angegebene Farbe. Das Folgende ist der Beispielcode und das schematische Diagramm: <!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 style="color:blue;font-size=20px ;background-color:yellow">Hello World!</h3>
<p style="color:red;font-size=10px ;background-color:green">你好！！！！</p>
</body>
</html>
Einige Etikettenattribute verfügen über das align-Attribut, das die Textausrichtung festlegen kann und auch Ähnliche Eigenschaften gesetzt werden. Der Wert dieses Attributs ist text-align. Seine -Werte umfassen links, Mitte und rechts. Das Folgende ist der Beispielcode und das schematische Diagramm:
<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px ;background-color:yellow;text-align:center">Hello World!</h3> <p style="color:red;font-size=10px ;background-color:green;text-align:right">你好！！！！</p> </body> </html>Zwei spezifische Verwendungsbeispiele des Stilattributs von HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习使用HTML</title>
<style>
/*标签选择器*/
h4 {
color: blue;
text-align: right;
}
</style>
</head>
<body>
<!--规定元素的行内样式-->
<p style="color:red;text-align:center">测试html的style属性</p>
<h4>h41</h4>
<h4>h42</h4>
</body>
</html>[Verwandte Empfehlungen des Herausgebers]
Welche Rolle spielt der HTML5-Details-Tag? 25550ffaebd901e0762017a3c9bbf10cEinführung in die Verwendung von Tags (mit Anwendungsbeispielen)Was ist die HTML-Tabelle? f5d188ed2c074f8b944552db028f98a1So verwenden Sie verschiedene Attribute in Tags
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des Style-Attributs von HTML-Tags (mit konkreten Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!