Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
![]() Neue Kameras und Objektive | Bildgestaltung und Bildbearbeitung Fotografie von ihrer besten Seite: foto.5lux.de |
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>
