Stil mit {stil}

Okt 2008

HTML-Tag style – Lokale Deklaration von CSS-Eigenschaften im Dokument

Das <style>-Tag enthält globale Stylesheets, die innerhalb des Dokuments gelten und die Elemente dieses Dokuments formatieren. Im Gegensatz dazu erzeugt das style-Attribut innerhalb von HTML-Tags CSS-Regeln, die nur für dieses individuelle Element 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.

Da ältere Browser das style-Tag nicht erkannten, wurde früher 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. Browser, die CSS unterstützen, ignorieren die Kommentar-Tags, während Browser, die das Tag nicht kennen, den Code innerhalb des Kommentars ignorieren. Brauchen wir heute nicht mehr …

Innerhalb des style-Tags kann auch eine externe CSS-Datei mit der @import-Rule in das Dokument importiert werden. Diese Technik wurde in der Vergangenheit benutzt, um eine CSS-Datei vor dem Netscape-Browser zu verbergen. Brauchen wir heute auch nicht mehr …

Attribute für style

media

eine durch Kommas getrennte Liste von Medientypen, in denen das HTML-Dokument präsentiert werden kann (all, aural, braille, handheld, print, projection, screen, tv und tty). Die Vorgabe ist screen.

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.

Stylesheets aus externen CSS-Dateien importieren (@import-Rule)

Innerhalb des öffnenden und schließenden style-Tags dürfen nicht nur CSS-Eigenschaften direkt deklariert werden, sondern mit der @import-Regel externe CSS-Dateien importiert werden. Die Syntax erlaubt sowohl die direkte Notation URL ("style.css") als auch den Aufruf innerhalb von url(" … ").

Die Angabe eines Medientyps kann dem Browser das Laden von nicht unterstützten Medientypen ersparen, wenn der Autor eine medien-abhängige @import-Regel angibt.

<style type="text/css">
<!--
   @import url("style.css");
   @import "style.css";
   @import url("print.css") print;
   @import url("small-devices.css") projection, tv;

-->
</style>

style-Tag: Einfache CSS-Regeln anlegen

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. Weitere Informationen zu Cascading Stylesheets ….

<style type="text/css" media="screen"> 
<!-- 
   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>

Kernattribute für style-Tags

• dir, lang, title

Zum Seitenanfang