Dez 2011

HTML-Tag style – Globale CSS-Eigenschaften

Das style-Tag enthält globale CSS-Stile, die innerhalb des gesamten Dokuments gelten und 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 HTML-Tag style muss innerhalb des head-Elements liegen.

Es gibt auch ein style-Attribut, dass in den meisten HTML-Tags verwendet werden darf, aber das style-Attribut gilt nur für den Inhalt dieses einen Tags. Es überschreibt die globalen CSS-Regeln.

<head>
   <style type="text/css" title="text/css">
      p { font-size: 14px; }
   </style>
</head>
<body>
   <p style="font-size: 12px;">Kleiner Text</p>
</body>

Der Code, der zwischen der ö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, CSS-Anweisungen in HTML-Kommentar-Tags zu setzen. 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 Netscape 3/4 zu verbergen. Brauchen wir heute auch nicht mehr …

Attribute für style

media
eine Liste von Medien, 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. Es gibt nur einen möglichen Wert: text/css. Da es keine Voreinstellung gibt, sollte das Attribut immer 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 erspart dem Browser das Laden von nicht unterstützten Medientypen. 

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

-->
</style>

Die Import-Regel ist heute überflüssig – das link-Tag sollte externe CSS-Dateien einbinden.

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>

HTML-Tag style: Attribute