CSS - Cascading Style Sheets für HTML

CSS - Cascading Style Sheets für HTML

Unterpunkte dieser Seite

Einleitung
CSS Kommentare
CSS mit der Formatierungssprache verbinden
CSS aus einer zentralen CSS Datei einbinden
Die Textbreite einstellen

Einleitung

Cascading Style Sheets sind eine Erweiterung zu HTML und erlauben das exakte positionieren von HTML Elementen. Außerdem erlauben Sie es einem HTML Autor HTML Tags einzustellen. Mit Stylesheets ist es möglich an einer zentralen Position Einstellungen für HTML Tags vorzunehmen, z.B. kann man einer DIV Umgebung eine Breite und einen Rahmen in einer bestimmen Farbe zuweisen. Bei jeder Verwendung des DIV Umgebung wirken die CSS Einstellungen für dieses HTML Tag und man erhällt ohne weitere Attribute im Tag die gewünschte Voreinstellung. Damit ist es möglich gesammten Seiten ein einheitliches Aussehen zu geben ohne jedes mal aufs neue Attribute anzugeben. Man kann mit den Cascading Style Sheets fast alle HTML Tags einstellen.

CSS Kommentare

Zwischen den <HEAD> </HEAD> Tags des HTML Dokumentes kann man einen STYLE Bereich für Cascading Style Sheets einrichten. Man verwendet dazu die Tags <STYLE> </STYLE>. Innerhalb dieses STYLE Bereichs gibt es bezüglich Kommentaren eine Sache auf die man achten muss. Normale HTML Kommentare von der Form <!-- --> innerhalb des STYLE Bereiches führen dazu, das der STYLE Bereich deaktiviert wird ! Es gibt spezielle CSS Kommentare, die dafür gedacht sind innerhalb des STYLE Bereichs und in externen CSS Sheet Dateien eingesetzt zu werden. Diese Kommentare sind von der Form /* Kommentar */. Sie führen nicht zur Deaktivierung des STYLE Bereiches !

CSS mit der Formatierungssprache verbinden

Grundsätzlich wird CSS als Ergänzung zu einer Formatierungssprache eingesetzt. In unserem Falle ist die Formatierungssprache HTML. CSS muss nun mit der Formatierungssprache verbunden werden. Dazu gibt es drei Ansätze.
  1. CSS direkt in ein HTML Tag mittels des style attributs einbinden
  2. Einen CSS Style Bereich an den Anfang des HTML Dokuments einbinden. Ein CSS Style Bereich wird innerhalb der <html> </html> Tags eingefügt, also parallel zu den head und body Bereichen.
    
    <html>
    <head> ... </head>
    <style> ... </style>
    <body> ... </body>
    </html>
    
    
  3. CSS kann in eine externe .css Datei geschrieben werden und über ein link Tag in ein HTML Dokument eingefügt werden. Das link Tag wird in den head Bereich einer HTML Datei eingefügt.

CSS aus einer zentralen CSS Datei einbinden

Um ein einheitliches Aussehen auf allen Seiten eines Internetauftritts zu erzielen, kann man CSS Sytlesheets in einer zentralen .css Datei ablegen und diese dann in jeder HTML Datei einbinden. Man braucht dann keinen STYLE Bereich mehr. Allerdings kann man einen STYLE Bereich immer noch verwenden. Die lokalen STYLES aus dem STYLE Bereich überdecken die globalen STYLES aus der zentralen Stylesheet Datei.
Eine Stylesheet .css Datei hat folgendes Aussehen:
/* Kommentar */
div { width:450px; padding:20px; border:20px solid#66a }
Eine Stylesheet Datei wird folgendermaßen in den head Bereich einer HTML Datei eingebunden:
<link rel="stylesheet" type="text/css" href="formate.css"> 
Wobei formate.css der Name der Stylesheet Datei ist. Wenn sich die Datei in einem anderen Verzeichnis als die HTML Datei befindet, so muss man einen Pfad im href Attribut angeben. Dieses Link Tag muss im HEAD der HTML Datei verwendet werden.

Die Textbreite einstellen



zum Seitenanfang
zur Hauptseite

Letzte Änderung: 17.02.2006