Mittels CSS kann die Auszeichnungssprache HTML genutzt und verändert werden. Dabei benötigt man die Definition, um CSS überhaupt anwenden zu können.
Für diesen Zweck gibt es 3 Möglichkeiten.
1. CSS intern in HTML definieren/einbinden
Vorteil:
Ideal für schnellen Test oder Programmierung eines Designs. Auch wenn ein durch PHP erzeugtes Script für eine Seite andere oder weitere Styles anbietet, ohne extra Datei zu definieren. (z.B. oft auch bei WordPress Eigenerweiterungen/Plugins)
Nachteil:
HTML Datei wird unnötig vergrößert, was die Übersicht etwas verlieren lässt.
Definition:
Im Bereich zwischen <head> und </head> kann der Style Tag verwendet werden.
<!-- div{ boder:1px solid red; } -->
Im Beispiel wurde dem Div Element einen Rahmen gegeben. Die klassischen <!– und –> Anweisungen sind nicht zwingend Notwendig. Browser, die nicht erkennen, das es sich um eine Style-Anweisung handelt, würden sonst dies als Text ausgeben. Damit dies nicht passiert, werden die Style-Anweisungen mit einem HTML-Kommentar versehen. Unter CSS ist dies nicht üblich – Browser die es als Style erkennen, ignorieren dies dann auch korrekt. Die Angabe ist einfach empfohlen.
2. CSS intern direkt in einem HTML Element
Vorteil:
Schnelles Programmieren und Testen. Ideal auch für Elemente, die kein weiteres mal genau so angepasst werden.
Nachteil:
Vergrößert unnötig die HTML Datei. Sorgt für Spaghetti-Code, den man bei einem Designwechsel erschwert anpassen muss.
Definition:
Das Beispiel wird hier anhand eines DIVs gezeigt.
<div style="border: 1px solid red;">Beispiel</div>
3. CSS extern ausgelagert auf eine externe .css StyleSheet Datei
Vorteil:
Belastet den HTML Code nicht. Alle CSS Anpassungen liegen übersichtlich in dieser Datei. Bei einer Designänderung wird nur die style.css Datei verändert.
Nachteil:
Ungeeignet zum testen oder Aufbau eines Webdesigns.
Definition:
Die .css Datei wird zwischen <head> und </head> mittels Link-Meta-Angabe definiert.
So sieht es unter HTML/XHTML aus, wobei style.css die Textdatei ist, indem alle Style Eigenschaften den Elementen zugeordnet werden:
Unter XHTML wird dies mit einem /> abgeschlossen, da dieser Tag kein Inhalt aufweist, damit kein eigenen Endtag besitzt.
Marcus alias Speedy86 ist Administrator dieser Webseite und veröffentlicht unter andem News und interessante Artikel rund um WordPress, Suchmaschinenoptimierung, Programmierung und Webdesign. Im Webmaster-Glossar.de gibt es viel wissenswerten Stoff für Webmaster, Webworker bzw. Selbständige im Internet.Artikel:
Bereits 439 Artikel verfasst!