HTML/Kopfdaten/style

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem style-Element sind Stylesheet-Angaben möglich, die einheitlich für das aktuelle Dokument gelten.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
Beispiel
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zentrale Formate</title> <style> h1 { color:red; font-size:48px; } </style> </head> <body> <h1>48 Pixel und Rot!</h1> <p>„normaler“ Text.</p> <h1>Noch so eine Überschrift!</h1> </body> </html>
Das Beispiel enthält in einem style-Bereich eine Formatdefinition für h1-Elemente der Datei, also für Überschriften 1. Ordnung.

Durch das style-Element wird ein internes Stylesheet für das aktuelle Dokument zur Verfügung gestellt. Stylesheets definieren das Aussehen eines Dokuments, z.B. die Schriftart, Hintergrundfarben usw. Wenn Sie sich mit einer Office-Textverarbeitung auskennen, wird Sie das an Formatvorlagen erinnern. Stylesheets werden innerhalb von SelfHTML in einer eigenen Dokumentation behandelt. Ein internes Stylesheet ist nur im aktuellen Dokument verfügbar.

Es dürfen auch mehrere Stylesheetangaben gemacht werden. Lesen Sie hierzu CSS/Kaskade.

Beachten Sie: Früher einmal war es üblich, den gesamten Inhalt eines style-Elements in einen HTML-Kommentar zu setzen, da sehr alte Browser noch nicht mit Stylesheets umgehen konnten. Heutzutage sind solche Browser jedoch ausgestorben.

In der HTML-Referenz finden Sie Angaben darüber, welche Attribute Style-Elemente haben können.

Änderungen in HTML 5[Bearbeiten]

In den Vorgängerversionen von HTML5 mussten Sie mit dem Attribut type den MIME-Typ der Stylesprache bestimmen. Er lautet für CSS stets text/css. In der Zwischenzeit hat sich jedoch CSS als die vorherrschende Stylesprache etabliert. Mit HTML5 ist deshalb die Angabe des type-Attributs nur noch dann notwendig, wenn die verwendete Stylesprache nicht CSS ist. Die Angabe type="text/css" kann weggelassen werden.

style-Elemente mit eingeschränktem Gültigkeitsbereich[Bearbeiten]

In den Vorgängerversionen von HTML5 durften style-Elemente nur im head-Element enthalten sein. Es war angedacht, style-Elemente mit dem Attribut scoped auch innerhalb des body-Elementes notieren zu können. Seine Regeln hätten dann nur für das Elternelement und seine Nachfahren gegolten.

  • Achtung
  • Firefox

Details: caniuse.com

Achtung!

Diese Idee findet sich weder in den aktuellen Entwürfen und Spezifikationen (HTML 5.0, HTML 5.1 oder HTML 5.2 noch im Living Standard der WHATWG wieder.


Beispiel ansehen …
<!doctype HTML> <html> <head> <meta charset="utf-8"> <title>style-Elemente</title> <style> p {color: red;} </style> </head> <body> <h1>style-Elemente mit eingeschränktem Gültigkeitsbereich</h1> <p>Ein Textabsatz in roter Schrift, festgelegt durch die Regeln des dokumentweiten style-Elements.</p> <p> Dieser Absatz enthält ein style-Element. Dieses legt eine blaue Schriftfarbe fest. <style scoped> p {color: blue;} style {display: block; font-family: monospace; margin: 1em; white-space: pre;} </style> Außerdem wird der Inhalt des style-Elements angezeigt. </p> <p>Wieder ein Absatz.</p> </body> </html>

siehe auch[Bearbeiten]