CSS, HTML und Javascript mit {stil}

HTML style – Globale CSS-Eigenschaften

HTML style Tag

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.

Neben Stilen, die nur für das aktuelle Dokument gelten, können im style-Tag die CSS-Stile notiert werden, die für das Rendern des Inhalts »above the fold« wichtig sind. Diese Technik beschleunigt den Aufbau der Seite beim Benutzer, da der Browser nicht warten muss, bis die komplette CSS-Datei geladen wurde.

style-Tag

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. Mehr zu CSS.

<head>
…
<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>
…
</head>

CSS frühzeitig einbinden

Obwohl es keine Rolle spielt, in welcher Reihenfolge die Tags im head der Webseite auftreten (außer der Reihenfolge von Javascript-Dateien, die aufeinander aufbauen), werden CSS-Dateien vor Skripten eingebunden. So kann der Browser die Seite schneller darstellen.

style im body: scoped

Das style-Tag mit Body-Element kam in HTML5, wurde aber wieder aus dem Standard entfernt.

Das style-Tag muss innerhalb des head-Elements liegen, es sei denn, das scoped-Attribut ist gesetzt.

Dann kann ein style-Tag im body der Webseite gesetzt werden. Sein Wirkungsbereich beschränkt sich auf das umfassende HTML-Element – daher der Name »scoped«.

<article>
   <header>
      <h2>Zweiter Artikel – Überschrift  h2</h2>
   </header>
   <section>
      <style scoped>
         h3 { background: orchid; padding: 10px}
      </style>
      <h3>Section 1 in Artikel 2 Überschrift h3</h3>
    </section>
</article>

Mit scoped dürfen CSS-Regeln nur innerhalb ihres umfassenden Containers angewendet werden, aber die Browser (außer Firefox) ignorieren das scoped-Attribut und wenden die Regeln des style-Tags auf das gesamte Dokument an.

Um in Ausnahmefällen CSS auf einen Bereich des Dokuments anzuwenden, gibt es das style-Attribut der HTML-Tags. Das style-Attribut gilt nur für den Inhalt dieses einen Elements.

@import-Regel

Innerhalb des style-Tags kann auch eine externe CSS-Datei mit der @import-Rule in das Dokument importiert werden. Mit der @import-Regel laden CSS-Dateien allerdings langsamer als mit einem link-Tag.

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

Die Import-Regel ist heute überflüssig (und langsamer als das Laden der CSS-Datei mittels link-Tag). Das link-Tag zum Einbinden externer CSS-Dateien ist die bessere Wahl.

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.
scoped (neu in HTML5 und wieder raus)
ist ein boolesches Attribut. Wenn scoped gesetzt ist, darf das style-Tag in ein HTML-Element im body der Webseite gesetzt werden und CSS-Eigenschaften für das umfassende Element festlegen.
type
deklariert die Art des Stils. Es gibt nur einen möglichen Wert: text/css. In HTML5 kann type="text/css" weggelassen werden.
HTML style Tag <style> macht dem HTML Flügel