Optionen und weiterführende Links


In der Datenbank befinden sich derzeit 477 Specials. Alle Specials anzeigen...

Von Inline-Styles und Selektoren

Von Inline-Styles und Selektoren

Wie bereits erwähnt, gibt es drei Möglichkeiten, CSS in Euren HTML-Dokumenten unterzubringen. Die direkteste und einfachste davon sind die sogenannten Inline-Styles. Dabei gebt Ihr dem HTML-Element, das Ihr formatieren wollt, das passende Stylesheet als style-Attribut mit 

<p style="color:darkgreen">Dieser Text ist grün</p>

Und voila, dieser Text ist grün.

Ein zweites Beispiel soll zum einen Stylesheets mit mehreren Angaben, zum anderen die Wirkung der Vererbung zeigen 

<div style="color:darkgreen; font-size:14pt">
  <p>Stylesheet des div gilt weiter</p>
  
  <p style="color:black">color-Eigenschaft wird überschrieben,
    font-size gilt weiter</p>

  <p>Hier gilt auch beides</p>
</div>

Ihr könnt Eure Stylesheets aber auch zentral im Head der HTML-Datei definieren. Dazu benutzt Ihr den style-Tag 

<head>

  <style type="text/css">
    
    li{color:darkgreen}
    
    .little{font-size:8pt; color:lightgreen}
    
    #entry{color:darkgreen; font-weight:bold}

  </style>
</head>

Im style-Tag notiert Ihr Eure Stylesheets in Mengenklammern ({ und }), davor steht der sogenannte Selektor. Der legt fest, für welche Elemente das Stylesheet gelten soll. Dabei gibt es drei Möglichkeiten

Tag-Selektoren
heißen genauso wie der Tag, für den das Stylesheet gelten soll. Im obigen Beispiel würden also alle li-Tags in dunkelgrüner Schrift dargestellt.
class-Selektoren
könnt Ihr beliebig bennen. Gekennzeichnet werden sie mit einem Punkt vor dem Namen. Stylesheets mit Class-Selektoren wirken auf alle Tags, denen Ihr den Selektornamen im class-Attribut zuweist. Das mittlere Stylesheet aus dem obigen Beispiel beeinflußt also alle Tags, denen Ihr 'class="little"' mitgebt (ohne den Punkt).
ID-Selektoren
haben ein # vor dem Namen stehen. Sie wirken auf das Element, das den Selektornamen als ID (also im id-Attribut) hat. Das dritte Stylesheet im obigen Beispiel bewirkt also dunkelgrüne Schrift und Fettdruck für das Element, das 'id="entry" hat.

Es ist auch möglich, bestimmte Kombinationen dieser Selektor-Typen zu verwenden 

<style type="text/css">

  // wirkt auf alle div- und alle p-Tags
  div, p{color:darkgreen}

  // wirkt auf alle p-Tags, die sich innerhalb eines div-Tags befinden
  div p{color:darkgreen}

  // wirkt auf alle p-Tags, die 'class="little" haben
  p.little{color:darkgreen}

  // wirkt auf das p-Tag, das 'id="entry" hat
  p#entry{color:darkgreen}

</style>

Es gibt noch weitere solche Kombinationen, die ein Stylesheet beispielsweise von Attributen (außer class und id) abhängig machen und vieles mehr. Diese Varianten werden aber so selten verwendet, daß sie hier nur zu Verwirrung führen würden.

Eine Variante soll hier aber noch erwähnt werden: Die sogenannten Pseudoformate. Ein Link beispielsweise kann in verschiedenen Zuständen auftreten: Noch nicht besucht, gerade angeklickt, früher schon mal besucht, ... Alle dieser Varianten stellt der Browser unterschiedlich dar, und für alle steht dasselbe a-Tag im HTML-Code. Wie unterscheidet man in CSS diese verschiedenen Zustände? Dazu ist das a-Tag in fünf Formate unterteilt, die es im HTML-Code «eigentlich» gar nicht gibt, eben Pseudoformate 

<style type="text/css">

  // wirkt auf noch nicht besuchte Links
  a:link{color:darkgreen}

  // wirkt auf schon besuchte Links
  a:visited{color:darkgreen}

  // wirkt auf besuchte Links, über denen sich gerade die Maus befindet
  a:hover{color:darkgreen}

  // wirkt auf besuchte Links, die gerade angeklickt werden
  a:active{color:darkgreen}

  // wirkt auf besuchte Links, die den Fokus haben
  a:focus{color:darkgreen}

</style>

Neben diesen recht bekannten Pseudoformaten gibt es ein paar eher unbekannte, die aber manchmal ganz praktisch sind 

<style type="text/css">

  // wirkt auf die erste Zeile innerhalb eines p- (oder anderen) Tags
  p:first-line{color:darkgreen}

  // wirkt auf das erste Zeichen innerhalb eines p- (oder anderen) Tags
  p:first-letter{color:darkgreen}
  
  // fügt 'Preis ' vor dem Inhalt eines p- (oder anderen) Tags ein
  p:before{content:Preis }
  
  // fügt ' DM' nach dem Inhalt eines p- (oder anderen) Tags ein
  p:after{content: DM}

</style>

In den letzten beiden Fällen steht das Schlüsselwort 'content' fest; hier könnt Ihr also keine beliebige CSS-Eigenschaft einsetzen.

Fehlt noch die dritte Möglichkeit, Stylesheet einzubauen, und zwar als externe Datei. Das könnt Ihr Euch gewissermaßen als «ausgelagertes» style-Tag vorstellen. Ihr schreibt einfach das, was Ihr sonst in einen style-Tag schreiben würdet, in eine normale Textdatei mit der Endung *.css. Und damit der Browser auch weiß, wo er die Stylesheets findet, gebt Ihr im Head einen Link an 

<link href="mystyles.css" rel="stylesheet" type="text/css">

Auf diese Weise könnt Ihr Eure Stylesheets in beliebig vielen HTML-Dokumenten verwenden, ohne jedesmal einen umfangreichen style-Tag mitschleppen zu müssen. Auch Änderungen und Ergänzungen werden damit erleichert.

Verwechselt bitte nicht den link-Tag mit dem a-Tag. Mit Hilfe des link-Tags könnt Ihr Beziehungen zwischen Dokumenten festlegen, wie hier zwischen der HTML-Datei und der Stylesheet-Datei. Damit könnt Ihr auch Beziehungen wie «Vorgänger», «Nachfolger» oder «Inhaltsverzeichnis» festlegen. Da aber fast kein Browser diese Möglichkeiten unterstützt (nur Mozilla zeigt eine zusätzliche Navigationsleiste an), will ich hier nicht näher auf den link-Tag eingehen.



Special vom: 16.01.2003
Autor dieses Specials: Henning Kockerbeck
Die weiteren Unterseiten dieses Specials:
Die reine Lehre - HTML
Stilvoll - CSS
Kleiner Grundkurs Programmieren
Jetzt wird's dynamisch - JavaScript
Die andere Seite der Dynamik - PHP
Neue Gefilde - XML
Weiterführende Links
Zurück zur Hauptseite des Specials


?>