HTML <style> Tag

Definition und Verwendung

<style> Tag wird verwendet, um Stylinformationen für das Dokument zu definieren (CSS).

In <style> In einem Element können Sie angeben, wie ein HTML-Element im Browser dargestellt wird.

Bitte beachten Sie, dass das style-Element eingebettete CSS-Stile im HTML-Dokument definiert, während das link-Element dazu dient, Stile aus externen Stilblättern zu importieren.

Das style-Element kann in verschiedenen Teilen eines HTML-Dokuments vorkommen. Ein Dokument kann mehrere style-Elemente enthalten, daher müssen nicht alle Stildefinitionen in den head-Teil gepackt werden. Diese Eigenschaft ist bei der Verwendung von Template-Engines zur Generierung von Seiten sehr nützlich, da so Stile für die von der Vorlage definierten Stile ergänzt werden können, die spezifisch für die Seite sind.

Siehe auch:

HTML-Tutorial:HTML CSS

CSS-Tutorial:CSS Tutorial

HTML DOM Referenzhandbuch:Style-Objekt

Beispiel

Beispiel 1

Verwenden Sie <style> Ein Element wendet einen einfachen Stilblatt auf das HTML-Dokument an:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Das ist ein Titel</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>

Probieren Sie es selbst aus

Beispiel 2

Mehrfache Stile für gleiche Elemente:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Das ist ein Titel</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>

Probieren Sie es selbst aus

Hinweise und Anmerkungen

Hinweis:Wenn der Browser das Stilblatt liest, formatiert er das HTML-Dokument gemäß den Informationen im Stilblatt. Wenn für denselben Selector (Element) in verschiedenen Stilblättern einige Eigenschaften definiert wurden, wird der Wert aus dem zuletzt gelesenen Stilblatt verwendet (siehe obigen Beispiel)!

Tip:To link to an external stylesheet, use <link> Tag.

Tip:To learn more about style sheets, please read our CSS Tutorial.

Attribute

Attribute Value Description
media Media Queries Specifies the media used for the style.
type text/css Specifies the media type of the <style> tag.

Global Attributes

<style> The tag also supports Global Attributes in HTML.

event attributes

<style> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display with the following default values: <style> Element:

style {
  display: none;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support