css-Lehrgang erster Tag

Teil 2 des heutigen Tages

Es geht weiter mit:

  • Wir beginnen zu Stylen
  • Schriftformatierung
  • Rahmen- und Hintergrundeigenschaften
  • Das Box-Modell

Wir beginnen zu stylen

Schriftformatierung mit css

Zu den häufigsten Aufgaben bei der Gestaltung von Webseiten gehört die Schriftformatierung. Dazu stellt css eine ganze Reihe von Eigenschaften zur Verfügung. Wir wollen dazu ein Beispiel erstellen und dies dann genauer betrachten.

css-lehrgang Vererbung

Hier das Ergebnis unserer Stilbemühungen

css-lehrgang Vererbung

Und hier zum Vergleich dieselbe Überschrift ohne css-Eigenschaften:

css-lehrgang Vererbung

Wir sehen, dass sich das Ergebnis erheblich vom Ursprungsstil unterscheidet.

Aber betrachten wir die Eigenschaften der Reihe nach.

  • Zeile 15, font-family: Definition der Schriftart. Die Anweisung bedeutet: "Verwende für dies Element (h1) die Schriftart verdana, sollte diese nicht verfügbar sein, verwende arial, und sollte auch diese fehlen, dann nimm irgendeine serifenlose Schrift."
  • Zeile 16, font-size: Die Schriftgröße in pt. In css gibt es eine ganze Reihe von Größenangaben, die wir später noch ausführlich besprechen werden.
  • Zeile 17, color: Die Schriftfarbe, die wie in html mit Farbnamen oder hexadezimal (Beispiel: #FFFFFF für weiß) angegeben werden kann.
  • Zeile 18, font-weight: Die Gewichtung der Schrift: lighter, normal, bold oder bolder.
  • Zeile 19, font-style: Die Schrägstellung: normal, italic, oblique.
  • Zeile 20, letter-spacing: Die Schriftweite bzw. Abstände zwischen den einzelnen Zeichen. In diesem Fall wurde die Schriftweite in relativer Größe angegeben. Was das bedeutet werden wir später noch besprechen.
  • Zeile 21, word-spacing: Die Abstände zwischen den einzelnen Wörtern. Auch hier die Angabe in relativer Größe.
  • Zeile 22, text-decoration: Die Textgestaltung, hier unterstrichen. Außerdem gibt es noch none(=keine), overline, line-through, blink

Eine kleine Aufgabe: Probiert doch einmal die anderen Eigenschaften aus.

Rahmen- und Hintergrundeigenschaften

Auch für die Gestaltung von Rahmen bietet css eine Fülle von Eigenschaften. Wir werden dies ebenfalls ausgiebig testen.

In diesem Zusammenhang lernt ihr nun ein neues Attribut kennen: die Klasse ("class"). class ist ein Universalattribut, das dazu dient, gleichen html-Elementen verschiedene Eigenschaften zuzuweisen.

css-lehrgang Rahmengestaltung

Das Ergebnis im Browserfenster:

css-lehrgang Rahmen

Puh, eine ganze Menge an neuen Eigenschaften und Methoden. Also der Reihe nach:

  • Zeile 9-13: Hier haben wir allen Überschriften "h1" Eigenschaften zugewiesen. Diese Eigenschaften bleiben auch für die mit "class" deklarierten Überschriften bestehen, solange diese nicht dort geändert werden, wie in variante_1 "font-size:8pt;". So ändert sich für diese Überschrift die Schriftgröße.
  • Zeile 14-17: Der erste "class"-Block. Eine Klasse beginnt in css immer mit einem Punkt, gefolgt von dem Namen der Klasse. border-width deklariert die Rahmenbreite, border-style den Stil des Rahmens, in diesem "solid" = durchgezogen.
  • Zeile 18-24: Es ist möglich, jede Seite des Rahmens für sich zu stylen, in diesem Fall mit border-...-style. In gleicher Weise ist es möglich, jeder Rahmenseite eine eigene Farbe (border-top-color:....) bzw. Rahmenbreite (border-right-width:...) zuzuweisen.
  • Zeile 25-27: Der Klassenname ist frei zu vergeben. Allerdings sollte er keine Leerzeichen,Unterstriche und Umlaute enthalten, nicht mit einer Ziffer oder Bindestrich beginnen und nicht zu lang sein. Elemente oder Klassen mit gleichen Eigenschaften lassen sich auch zusammenfassen, wie hier die Klassen martin1 bis martin4. Getrennt wird die Aufzählung durch ein Komma.
  • Die vier Borderstyles unter martin... haben 3D-Effekte, wie ihr in der Browserausgabe erkennen könnt.
  • Mit "background-color" haben wir die Hintergründe diverser Rahmen eingefärbt.
  • Schließlich haben wir in Zeile 42 die Rahmenbreite auf 400px eingestellt. Normalerweise ist der Rahmen für Überschriften so breit, wie es das Browserfenster hergibt. Das hat damit zu tun, dass eine Überschrift ein sogenanntes Blockelement ist. Aber dazu später mehr.

Mit diesen Styles ergeben sich schon viele Gestaltungsmöglichkeiten, z.B.:

css-lehrgang Rahmen

hierzu möchte ich im Einzelnen nicht darauf eingehen. Experimentiert doch selber ein bisschen.

Eines wäre jedoch noch zu erläutern: Im letzten Beispiel habe ich ein Bild als Hintergrund eingefügt: Die dazu passende Anweisung lautet:

background:url(bilder/himmel_auf_erden.png);

Noch eines fällt mir ein:

Es gibt für Rahmen auch eine Kurzschreibweise. Probiert doch einmal folgendes aus:

<h1 style="border:3px solid #770033;">Tolle Farbe!</h1>

Das Box-Modell

Das css-Boxmodell ist eines der wichtigsten Teile von CSS. Es bildet die Grundlage der Darstellung und Positionierung aller Elemente.

Jedes Element erzeugt eine rechteckige Box, die das Element umgibt und sich aus weiteren Boxen zusammensetzt:

  • der Contentbox (z.B. Text oder ein Bild)
  • der Paddingbox (Polsterung)
  • der Borderbox (Rahmen)
  • und der Marginbox (Randabstand).

Jeder dieser Bereiche kann durch oben(top), rechts(right), unten(bottom) und links(left) aufgeteilt werden, siehe nachfolgende Grafik:

css-Lehrgang Box-Modell

Zur Verdeutlichung wollen wir einmal ein Modell mit allen Attributen erstellen.

css-lehrgang Box-Modell

Hier die Ausgabe:

css-lehrgang Box-Modell

Betrachten wir das Modell im Einzelnen von innen nach außen:

Dem Inhalt haben wir mit Breite(width) und Höhe(height) eine feste Größe gegeben.

Wie wir sehen ist der Inhalt nicht direkt am Rand der inneren Box. Das liegt daran, dass wir dem Inhalt einen Innenabstand von 10 Pixeln mit Hilfe der css-Eigenschaft "padding" gegeben haben.

Der Rahmen erhielt eine Stärke von 5 Pixeln.

Zu guter Letzt haben wir noch einen Außenabstand durch "margin" von 50 Pixel, was wir deutlich am Abstand vom linken Rand, zum oberen Text und zum unteren Text sehen können. Und wenn wir rechts auch einen Text hätten, so wäre dazu ebenfalls ein Abstand von 50 Pixeln.

Jede dieser Eigenschaft lässt sich für jede Seite gesondert definieren. Probieren wir dies doch einmal am "padding" aus.

css-lehrgang Box-Modell

Hier das Ergebnis:

css-lehrgang Box-Modell

Wie wir sehen haben wir nun unterschiedliche Innenabstände. Aber noch etwas sollte uns auffallen: Die ursprünglich vorgegebene Höhe von 100 Pixel wurde nicht eingehalten, was ja auch nicht möglich war, da der Inhalt einschließlich dem Padding einen größeren Bereich beansprucht. Die vorgegebene Höhe ist nun zu einer Mindesthöhe geworden. Es ist auch möglich, die Höhenangabe gänzlich wegzulassen.

Die padding-Angabe kann man auch in einer Kurzform schreiben:

padding:0 20px 30px 7px;

Wir beginnen dabei mit der Angabe für Oben(top) und gehen im Uhrzeigersinn weiter. Bei 0 Pixel kann die Angabe "px" fehlen.

Die Angaben für "margin" werden wie bei "padding" gemacht. Wr probieren hier gleich einmal die Kurzschreibweise:

css-lehrgang Margin

Das Ergebnis im Browser:

css-lehrgang Margin

Das soll für den ersten Tag genügen.

Und hier geht es weiter mit dem css-Lehrgang zweiter Tag.



« zurück