tutorials - Funktion von CSS

Wie funktioniert CSS? Die Eigenschaften von Cascading Style Sheets (CSS) sind denen von HTML sehr ähnlich. Nehmen wir den Hintergrund in

HTML

<legend><body bgcolor="#000000"></legend>

in CSS

body {background-color: #000000;}

Grundlegendes CSS-Modell: SELECTOR {PROPERTY: VALUE } Zuordnung Eigenschaft Wert der Eigenschaft body background-color: #000000 Wie werden CSS-Codes angewendet: Es gibt 3 Methoden der Anwendung CSS in HTML einzubinden 1. Direktformatierung des HTML-Elements - Inline Style

<html><head><title>Example</title></head><body style="background-color:#ff0000;"><p> Das ist eine rote Seite.</p></body></html>

2.Formatierung einer kompletten HTML-Datei - Block Style

<html><head><title>Example</title><style type= "text/css"> body{background-color:#00000;}</style></head><body><p> Das ist eine schwarze Seite.</p></body></html>

3. Die eleganteste Lösung, eine separate CSS Datei Bei dieser Methode werden die Stylesheetangaben genau wie im vorigen Beispiel geschrieben, Block-Style, der Unterschied ist, dass die Angaben in eine spezielle Datei, einer CSS Datei, eine einfache Textdatei mit der Erweiterung ".css", ausgelagert werden. In dieser Datei können alle Formatierungen aller Seiten untergebracht werden, es lässt sich das komplette Layout der Seite in dieser einen Datei festlegen.

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

Diese Zeile muss in den jeder Seite geschrieben werden die die Formatierung erhalten soll.

<html><head><title>Mein Dokument</title><link rel="stylesheet" type="text/css" href="style/style.css"/> </head><body>

So läßt sich CSS ganz einfach in jedes HTML Dokument eingebunden werden.