Cascading Stylesheets – Zur Startseite Cascading Stylesheets Stil mit <Stil>

♦ style ♦ <style> ... </style> ♦ IE4+ M1 N4+ O5+ ♦ HTML 3.2, 4.0

Das <style>-Tag enthält globale Stylesheets, die innerhalb des Dokuments gelten. Im Gegensatz dazu erzeugt das style-Attribut Stylesheets, die nur innerhalb eines HTML-Elements in einem Dokument gelten.

Das <style>-Tag muss innerhalb des head-Elements notiert werden. Der Code, der zwischen den öffnenden und schließenden Klammern des <style>-Tags steht, ist kein HTML-Code, sondern CSS (Cascading Stylesheets). Die CSS-Eigenschaft wird einem Selektor zugewiesen, z.B. einem HTML-Tag.

Nicht alle Browser erkennen dieses Tag. Da insbesondere ältere Browser es nicht erkennen, wird empfohlen, das Tag zwischen öffnende und schließende HTML-Kommentar-Tags zu setzen, wobei der öffnende Kommentar direkt nach dem öffnenden <style>-Tag steht und der schließende Kommentar direkt vor dem schließenden <style>-Tag. Ein Browser, der CSS unterstützt, wird die Kommentar-Tags ignorieren, während Browser, die das Tag nicht kennen, den Code innerhalb des Kommentars ignorieren.

Das schließende Tag ist erforderlich.

Kernattribute dir lang title
media Das Attribut media ist eine durch Kommas getrennte Liste von einem oder mehreren Mediatypen, in denen das HTML-Dokument präsentiert werden kann (all, aural, braille, handheld, print, projection, screen, tv und tty). Die Vorgabe ist screen. Das Attribut wird nicht von allen Browsern, die Stylesheets realisieren, erkannt.
type Das Attribut type deklariert die Art des Stils. Die beiden möglichen Werte sind text/css und text/javascript. Da es keine Voreinstellung gibt, sollte dieses Attribut stets im <style>-Tag gesetzt werden.

Beispiel

Dies ist ein einfaches Beispiel für das Anlegen von Stylesheets im Dokument. Die Stylesheet-Eigenschaften deklarieren die Schrift, Farbe und Größe für <p>-, <pre>- und <code>-Tags. Für weitere Informationen zu Cascading Stylesheets linken Sie in den CSS2-Ordner.

<style type="text/css"> 
<!-- 
p { font-face: arial; color: black; font-size: 12px" } 
pre { font-face: arial; color: red; font-size: 14px" } 
code { font-face: courier; color: blue; font-size: 12px" } 
--> 
</style>      

 

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen