Webprogrammierung — 4. Lektion

Gestaltung des Aussehens von Webseiten

Mit HTML wird die Struktur beschrieben, mit CSS das Aussehen.
Trennen von Inhalt und Design
Beispiel für unterschiedliches Design bei gleichem Inhalt: CSSZenGarden (http://www.csszengarden.com/)

Aufbau von Beschreibungen in CSS

Wo soll was wie sein?

Beispielsweise sollen alle mit <strong> markierten Texte die Schriftfarbe rot bekommen und von einem Rand in grüner Farbe umgeben sein sowie der gesamte Text einen hellgelben Hintergrund haben:

strong { color: red; border: 1px solid green; }
body { background-color: lightyellow; }

Begriffe

Selektor { Attribut: Wert; }
In einem von geschweiften Klammern eingeschlossenen Block dürfen mehrere Attribut-Wert-Paare stehen. Jedes Paar wird durch ein Semikolon abgeschlossen, auch das letzte!
In den obigen Beispielen stammen die Selektoren von Tags; dabei spricht man von Typselektoren. Sollen sich Angaben auf alle Elemente beziehen, so verwende man den Universalselektor *.
Es gibt außerdem Klassen- und Individualselektoren – dazu später mehr.

Einbinden von CSS

Wo sollen Stilangaben in CSS stehen? Es gibt folgende Möglichkeiten.

Am Anfang einer html-Datei

Wie im einleitenden Beispiel werden alle CSS-Angaben in einem style-Block zusammengefasst und am Beginn der html-Datei innerhalb des head-Blockes gesetzt.

In einer separaten Datei

Alle CSS-Angaben in einer Datei (mit Endung css) abspeichern und diese Datei im head-Block mit einem link-Tag einbinden.
Attribut href gibt den Namen der css-Datei an
Attribut rel hat den Wert stylesheet
Die CSS-Datei, die im Erscheinungsbild rechts oben genutzt wird, ist Teil des Sets und heißt bsp.css. Verändern Sie doch mal die Farbe von red zu blue und aktualisieren Sie dann diese Seite...

In einem einzelnen html-Element

In einem Tag werden die gewünschten Eigenschaften mit dem Attribut style gesetzt.

CSS-Texte validieren

So wie HTML-Texte korrekt sein sollten, sollten es auch CSS-Beschreibungen sein, um nicht auf die Fehlertoleranz von Browsern angewiesen zu sein.
Direkteingabe von Texten: https://jigsaw.w3.org/css-validator/#validate_by_input

Farben

Es werden Vordergrundfarbe (Attribut color), Hintergrundfarbe (background-color) und Rahmenfarbe (border-color, auch als Bestandteil vom Attribut border) unterschieden.
Die Werte sind für manche Farben die englischen Bezeichnungen (z.B. red, green, lightyellow).
Allgemein können Farben im RGB-Schema angegeben werden. So ein Wert hat die Form #rgb, wobei r, g und b zweistellige Hexadezimalzahlen von 00 bis ff sind.
Beispiele für Farbewerte und ihre Wirkung im jeweiligen Hintergrund (lightred existiert nicht → keine Farbe):
red green blue yellow black silver fuchsia gold cyan

lightred lightgreen lightblue lightyellow grey

#ff0000 #ffd0d0 #a00000 #00ff00 #008000 #0000ff #d0d0ff #9966ff #66ffff #ccffcc #ffff00 #000000
Farbangaben nach RGB-Schema sind auch in der Form rgb(r%,g%,b%) möglich, wobei r, g und b Dezimalzahlen von 0 bis 100 sind, oder in der Form rgb(r,g,b), wobei r, g und b natürliche Zahlen von 0 bis 255 sind.
Seit CSS3 sind auch Angaben auch nach dem HSL-Schema möglich (hue-saturation-lightness). Eine Erläuterung dazu gibt es auf der Seite http://www.html-seminar.de/css3-farbmodell-hsl.htm.
Transparente Farben können mittels rgba(r%,g%,b%,d) oder hsla(h,s%,l%,d) gesetzt werden, wobei d eine Zahl größer oder gleich Null und kleiner oder gleich Eins ist (Schreibweise beispielsweise 0.3) und die Deckkraft angibt (1 steht für volle Deckkraft und 0 für keine Deckkraft).
Weiteres zu Farben und additiver Farbmischung: http://www.spectrumcolors.de/cor_rgb_demo.php

Schrift

Schriftart

Attribut font-family erhält als Wert meistens eine Folge von Bezeichnungen, von der die erste Schriftart gewählt wird, die der Browser unterstützt. Enthält eine Bezeichnung ein Leerzeichen, so ist sie in Anführungszeichen zu setzen.

Beispiele für serifenlose Schriftarten:

Beispiele für serifenbehaftete Schriftarten:

Weitere Schriftarten:

Schriftstil

Attribut font-style erhält einen der drei Werte italic (kursiv), oblique (schräggestellt), normal (aufrecht).
Bei vielen Schriftarten ist entweder ein italic- oder ein oblique-Schriftbild definiert. Browser nehmen von diesen beiden jenes, welches vorhanden ist, wenn font-style auf italic oder oblique gesetzt ist.

Schriftvariante

Attribut font-variant erhält einen der beiden Werte small-caps (Kapitälchen) oder normal (Groß- und Kleinbuchstaben).

Schriftstärke

Attribut font-weight erhält einen der Werte bold (fett), bolder (stärker als ohne Angabe), lighter (weniger stark als ohne Angabe), normal (Standard), 100, 200, 300, 400, 500, 600, 700, 800, 900.
Die Stärken normal und bold entsprechen den Werten 400 bzw. 700. Meistens sind nicht alle Stärken definiert. Bei einem gewünschten Wert größer oder gleich 600 wird erst nach oben und dann nach unten gesucht, bis ein Wert gefunden ist, für den ein Schriftbild definiert ist; bei kleineren Werten ist es umgekehrt.

Schriftgröße

Attribut font-size erhält einen der Werte xx-small (extra klein), x-small (sehr klein), small (klein), medium (Standard), large (groß), x-large (sehr groß), xx-large (extra groß), smaller (kleiner als ohne Angabe), larger (größer als ohne Angabe) oder eine Größenangabe in Pixeln (z.B. 28px), in m-Breiten (z.B. 1em), in x-Höhen (z.B. 3ex) oder in Prozent (von der Größe ohne Angabe).

Text-Satz

Zum Setzen von Texten gibt es folgende Attribute:

Individuelle Objekte

Elemente, die individuell behandelt werden sollen, bekommen über das Attribut id einen Bezeichner, der in der Datei nur einmal vorkommen sollte. Sollen mehrere Elemente gleich aber anders als alle anderen behandelt werden, sind sie über das Attribut class Klassen zuzuordnen. Sowohl Individual- als auch Klassenbezeichner dürfen nur lateinische Buchstaben (insbesonere keine Umlaute), Ziffern (aber nicht am Anfang), Unterstriche und Bindestriche enthalten. Groß- und Kleinschreibung wird unterschieden.
Sollen sich CSS-Angaben auf alle Elemente einer Klasse beziehen, so ist als Selektor (Klassenselektor) der Klassenname mit vorangestelltem Punkt zu nehmen. Bei einem individuellen Element ist als Selektor (Individualselektor) der Identifikator mit vorangestelltem Doppelkreuz zu verwenden.
Individualselektoren überlagern Klassenselektoren, diese überlagern Typselektoren und die wiederum den Universalselektor.

Kombination von Selektoren

Sollen für mehrere Elemente die gleichen Eigenschaften gesetzt werden, so zähle man sie durch Kommata getrennt auf.
Soll die Auswahl sich auf Elemente in anderen Elementen beziehen, aber nicht auf alle, so ist eine durch Leerzeichen getrennte Folge von Selektoren zu verwenden.
Wenn auf auszuwählende Elemente mehreres zutreffen soll, so sind die Selektoren ohne Trennzeichen hinter einander zu schreiben.