Beim stöbern im Netz bin ich auf eine Zusammenfassung der wichtigsten CSS-Grundregeln gestoßen, die ich gerne mit Euch teilen möchte. Konkret geht es um folgende acht Punkte, die ich mal als Gebote zusammenfasse:
Während der Entwicklungsphase einer Homepage konzentriert sich der Entwickler im Regelfall ausschließlich auf die Umsetzung des Layouts. Erst wenn dieser Prozess abgeschlossen ist, erfolgt das Einpflegen von Texten und Bildern, die nicht zum Grundlayout gehören. Da die Fläche aber trotzdem reserviert werden soll, arbeitet man temporär mit Platzhaltern. Im Textbereich greift man hierzu auf sogenannte Blindtexte zurück, für die ich sinnvolle Generatoren bereits in einem früheren Artikel vorgestellt hatte.
Das Designen einer Website und das Einfügen von Content (Inhalt) sind im Regelfall zwei unabhängige Prozesse. Das ist problematisch, da die Wirkung des Designs erst vollständig beurteilt werden kann, wenn insbesondere Textinhalte vorhanden ist. Webdesigner behelfen sich deshalb mit fiktiven Texten, die als Blindtext bezeichnet werden. Ausdenken braucht man sich einen solchen Text nicht selbst, zahlreiche Websites bieten sogenannte Blindtextgeneratoren an. Grundsätzlich gibt es zwei Gattungen: In der einfachen Variante wird reiner Fließtext angeboten, komfortablere Varianten bieten zusätzliche (X)HTML-Elemente wie Listen oder Tabellen.
Listen sind zum Strukturieren von Informationen ein unverzichtbares Stilmittel beim Webdesign. Bei einer nummerierten Liste wird jedem Listeneintrag aufsteigend eine Nummer vorangestellt, bei einer Aufzählungsliste jedem Listeneintrag ein Aufzählungssymbol. Möchten Sie die vorgegebenen (HTML) Nummerierung oder das Symbol verändern gibt es zwei Möglichkeiten:
Das W3C sieht insgesamt 16 mögliche Werte für die Eigenschaft list-style-type vor. Da insbesondere der Internet Explorer bei den meisten Werten nur eine notdürftige Unterstützung gewährleistet, benutzen die meisten Webdesigner lediglich folgende Werte, die dafür allerdings in allen gängigen Browsern funktionieren:
Wenn Sie sich trotzdem an die anderen Werte heranwagen möchten, schauen Sie sich zunächst auf quirksmode.org die Kompatibilitätsliste an.
Diese Eigenschaft ersetzt das standardmäßige Aufzählungszeichen. Für den Fall, dass das definierte Bild aus irgendeinem Grund nicht anzeigbar ist, kann zusätzlich eine Alternative mit list-style-type angegeben werden, ansonsten wird auf das Standardaufzählungszeichen zurückgegriffen. Beispiel:
1 2 3 4 | ul { list-style-type: disc; list-style-image: url(http://www.css-einfach.de/downloads/pfeil5.gif); } |
Zusätzliche Effekte lassen sich hierbei durch den Einsatz animierter GIF-Grafiken erzielen.
Hierzu kann einfach munter auf die CSS-Eigenschaften zurückgegriffen, die zur Schriftformatierung zur Verfügung stehen. Bei einer nummerierten Liste kann sowohl die Durchnummerierung wie der Listeneintrag formatiert werden, bei Aufzählungslisten freilich nur der Listeneintrag. Nachfolgend ein Beispiel für eine nummerierten Liste:
1 2 3 4 5 6 7 8 9 10 | ol { font-style: italic; font-size: xx-large; font-family: fantasy; } ol p { font-style: normal; font-size: medium; font-family: sans-serif; } |
Seit einiger Zeit ist es auf der Homepage von Mozilla möglich, Sammlungen seiner Firefox-Erweiterungen anzulegen und zu veröffentlichen. Im Kontext des CSS-Buches habe ich eine solche Zusammenfassung erstellt. Mehr lesen … »
