Das Style-Tag in HTML
- 24-07-2022
- Trung Minh
- 0 Comments
In diesem Artikel zeige ich Ihnen, wie Sie das Style-Tag in HTML verwenden. Dies ist ein Tag, mit dem CSS-Code für HTML-Tags geschrieben oder Informationen in CSS-Dateien für Webseiten angegeben werden.
Beim Style-Tag müssen Sie unbedingt an CSS denken. Aber da wir es noch nicht gelernt haben, lassen Sie uns vorübergehend die Beispiele im Artikel ausführen, um die Ergebnisse zu sehen. Später, wenn Sie zu den CSS-Lektionen wechseln, lernen Sie sorgfältiger.
Mục lục
Was ist das Style-Tag in HTML?
Style ist ein normales HTML-Tag, es wird verwendet, um den Umfang des CSS-Codes zu definieren, den der Browser zu kompilieren hat. Der gesamte Code innerhalb des Style-Tags wird nicht auf der Benutzeroberfläche angezeigt, er wird lediglich kompiliert und im Hintergrund im Browser ausgeführt.
Beispiel : Verwenden Sie das style-Tag, um die Anzeigetextfarbe des p-Tags und des h1-Tags anzugeben.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <p>this is a test.</p> </body> </html>
Wie Sie sehen können, habe ich innerhalb des style-Tags zwei CSS-Eigenschaften definiert:
<style> h1 {color:red;} p {color:blue;} </style>
Verwenden Sie das style-Tag, um die Schnittstelle zu formatieren
Zum besseren Verständnis mache ich ein sehr einfaches Beispiel, das wie folgt in zwei Fälle unterteilt ist:
<!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html>
Ergebnis
Chào mừng bạn đến với website học lập trình online web888.vn
<!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> p{ background: white; color: black; text-align: center; font-size: 30px; } </style> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html>
Chào mừng bạn đến với website học lập trình online web888.vn
Führen Sie die beiden obigen Beispiele aus und Sie werden den Unterschied zwischen ihnen sehen. Das erste Beispiel hat einen weißen Hintergrund und schwarzen Text, das zweite Beispiel hat einen blauen Hintergrund und weißen Text. Hinsichtlich der HTML-Struktur gibt es keinen Unterschied, aber in Beispiel 2 habe ich einen CSS-Code wie folgt hinzugefügt:
<style type="text/css"> p{ background: blue; color: white; text-align: center; font-size: 30px; } </style>
Um also CSS zum HTML-Tag hinzuzufügen, fügen wir es in das style-Tag ein. Was die CSS-Syntax betrifft, können Sie den Artikel CSS-Syntax lesen, um sie besser zu verstehen.
Sie verstehen also bereits die Bedeutung des HTML-Stil-Tags, oder? Später werden wir üben, CSS-Code auf diesem Style-Tag selbst zu schreiben. Wir sehen uns im nächsten Beitrag.