Wie binde ich CSS ein?
Wie binde ich CSS ein?
Um CSS in eine Datei einzubinden gibt es 3 verschiedene Möglichkeiten.
Variante 1: Direkt Formatierung
Die erste Variante ist ein Element direkt zu Formatieren. Dazu benutzt man das Style-Attribut. Es ist einer der Univarsal-Attribute die in jedes Element eingefügt werden können. Als parameter übergibt mal die CSS definitionen. Diese Variante hat den nachteil das man nur dieses eine Element formatiert, mehr nicht!
Beispiel:
Code:
<a href="#" style="CSS-CODE">Link</a>
Variante 2: Interne Definition
Die zweite Variante ist die CSS-Definitionen in einem Style-Bereich innerhalb der Datei zu definieren. Damit können wir bereits Dateiweite formate definieren. Der Style bereich sollte immer im Head-Bereich der Datei definiert sein um eine klare struktur beizubehalten. Es ist zwar möglich ihn im Body zu definieren jedoch fördert dies nicht gerade die Lesbarkeit des Dokuments.
Style-Bereich:
Code:
<style type="text/css">
<!--
/* CSS Definitionen */
-->
</style>
Wie man sieht wird der Style-Bereich durch das Style-Element eingeschlossen und über Typ die art des Inhalts bestimmt.
Innerhalb des Bereichs beginnt dann ein HTML kommentar. Dieser dient dazu die Styleangaben bei nicht CSS fähigen Browsern auszublenden. Zwischen den Kommentar zeichen können dann die CSS-Definitionen geschrieben werden.
Variante 3: Externe Definition
Bei der Externen definition lagert man die CSS-Definitionen ganz aus und speichert sie in einer eigenen Datei. Diese Datei ist schnell und einfacherstellt, man muss nur einer normalen Textdatei die endung *.css zugeben. In die datei kann man ganz normal die Definitionen schreiben. Um die datei in eine Seite einzubinden benutzt man das Link-Element.
Link-Element:
Code:
<link rel="stylesheet" type="text/css" href="css_datei.css" />
Dieses Element muss in den Head-Bereich geschrieben werden. Mit rel und type legt man wieder die Art der Einbingun fest und über href wird die Adresse der einzubindenden CSS-Datei angegeben. Diese Variante ist die sinnvollste da man so allen Seiten leicht ein und das selbe Aussehen verleihen kann und bei änderungen nur schnell die CSS-Datei editieren muss.