CSS einfach erklärt

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:

1. für die Symbole Werte verwenden, die die CSS-Eigenschaft list-style-type anbietet
2. mithilfe der CSS-Eingenschaft list-style-image eine eigene (ggf. animierte) Grafik als Symbol verwenden
3. Liste und /  oder Listeneintrag mit CSS-Eigenschaften designen

1. Möglichkeit: Die Eigenschaft list-style-type

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:

• disc = gefüllter Kreis
• circle = leerer Kreis
• square = gefülltes Quadrat
• none = kein Listensymbol

Wenn Sie sich trotzdem an die anderen Werte heranwagen möchten, schauen Sie sich zunächst auf quirksmode.org die Kompatibilitätsliste an.

2. Möglichkeit: Die Eigenschaft list-style-image

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.

3. Möglichkeit: Rein mit CSS-Eigenschaften designen

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 … »

Hintergrundbilder und Farbverläufe (sog. Pattern) werden auf Websites gerne als Gestaltungsmittel für die Homepage eingesetzt. Grundlage für diese Techniken ist die CSS-Eigenschaft background-image, mit der einem HTML-Element ein Hintergrundbild zugewiesen wird. Im Buch hatte ich u. a. die Anwendung in Verbindung mit background-repeat und background-color erläutert.

Hintergrundbilder werden gewöhnlich in Bildbearbeitungsprogrammen erstellt, deren Bedienung Anfängern oftmals Probleme bereitet. Alternativ bietet sich die Nutzung von Pattern-Generatoren an, die erstaunlich einfach zu bedienen sind. Wem selbst das zu aufwendig ist, kann schließlich auf einen riesigen Fundus an bereits fertigen Mustern zugreifen.

Mehr lesen … »

Fortschritte beim Erlernen von CSS lassen sich vor allem beim Analysieren fremder Designs erzielen. Dass dies sowohl für abschreckende wie auch nachahmenswerte Beispiele gilt, hatte ich bereits in einem früheren Beitrag angemerkt.

Wer Inspirationsquellen speziell für Tabellen benötigt, sollte mal die Sammlung CSS Table Gallery anschauen. Einfach auf den “Design Name” klicken, und schon wird die jeweilige Formatierung angeigt. Über den Link “Download” wird der CSS-Code übersichtlich angezeigt.

border ist ein wichtiger Bestandteil des Box-Modells, welcher Rahmen um Elemente zeichnet. Der Rahmen, der den Innen- vom Außenrand voneinander trennt, besitzt die Eigenschaften:

• Breite (border-width)
• Stil (border-style)
• Farbe (border-color).

Auch hier lässt sich für jede dieser Eigenschaften mittels border-left, border-right, border-top und border-bottom für jede der vier Seiten ein eigener Wert angeben. Wird nur border angegeben, wird ein Rahmen mit gleicher Breite, Stil und Farbe auf allen vier Seiten des HTML-Elements festgelegt.

Mehr lesen … »