Du bist hier: Themen / Rund ums WWW / CSS
Freitag, 19.04.2019

Die Darstellung einer XHTML-Seite wird über CSS (Cascading Style Sheets) definiert.

Einbinden in XHTML-Seiten

Meist ist es empfehlenswert CSS-Angaben in einer externen Datei anzugeben, die dann im Head des XHTML-Dokuments referenziert wird:

<link rel="stylesheet" type="text/css" href="pfadUndNameDerDatei" />

Diese Datei enthält dann die Information zur Formatierung gemäß dem folgenden Schema:

Selektor1 {
    Eigenschaft1: Wert1;
    ...
}

Selektor2 {
    ...
}

Ein Selektor wählt dabei aus welche Inhalte auf die angegebene Art dargestellt werden sollen.

Selektoren

Typ-Selektoren

Typ-Selektoren wählen alle Elemente eines bestimmten Typs -also eines HTML-Tags- aus, z.B.:

h2 {
   color: red;
}

bewirkt, dass alle Überschriften zweiter Ordnung rot dargestellt werden.

Aufgabe 1
Schreibe eine einfache CSS-Datei und binde diese in Dein Projekt ein.

Klassen-Selektoren

Klassen-Selektoren wählen alle Elemente aus, deren class-Attribut im XHTML-Code den entsprechenden Wert besitzen. Enthält ein XHTML-Dokument den Code

<h1 class="wichtig">Das ist die Überschrift</h1>
<p class="wichtig">Und das Text</p>

dann wird der Inhalt beider Elemente über den folgenden CSS-Code blau dargestellt:

.wichtig { color: blue;}

ID-Selektoren

Analog wählen ID-Selektoren das Element aus, das eine bestimmte ID besitzt, z.B.:

XHTML:

<p id="zusammenfassung">Der Abschnitt behandelt ...</p>

CSS:

#zusammenfassung { color: black;}

Daneben gibt es noch weitere Selektoren oder die Möglichkeit Selektoren zu verknüpfen. Nähere Infos in der dargestellten Tabelle bei Wikipedia.

Aufgabe 2
Finde Beispiele für die sinnvolle Anwendungen der verschiedenen Selektoren und erweitere Dein Projekt entsprechend.

Farbangaben

(Nach http://de.wikipedia.org/wiki/Webfarben)

Webautoren haben zwei Möglichkeiten, die Farben einzelner Elemente auf ihren Webseiten festzulegen. Farben können zum einen als RGB-Werte im Hexadezimalformat definiert werden. Zum anderen gibt es die benannten Farben, welche einen englischen Namen besitzen.

Benannte Farben

Es gibt mehrere Standards, welche standardisierte Farbnamen definieren. Je nach Browser werden unterschiedliche viele Farben der Standards beachtet. Am sichersten ist es, die Farben des HTML 4 Standards zu benutzen:

black

#000000

silver

#C0C0C0

maroon

#800000

red

#FF0000

green

#008000

lime

#00FF00

olive

#808000

yellow

#FFFF00

navy

#000080

blue

#0000FF

purple

#800080

fuchsia

#FF00FF

teal

#008080

aqua

#00FFFF

gray

#808080

white

#FFFFFF

Angabe im Hexadezimalsystem

Um von den benannten Farben unabhänig zu sein, und außerdem mehr Farben angeben zu können, werden Farben meist nach dem RGB-Modell im Hexadezimalsystem angegeben. Eine Farbe wird dann durch eine sechstellige Hexadezimal-Zahl mit vorangestelltem #-Zeichen dargestellt. Dabei bezeichnen je zwei Ziffern die Intensität der drei Farbkanäle Rot, Grün und Blau in dieser Reihenfolge. So bezeichnet #FF0000 Rot, #00FF00 Grün und #0000FF Blau (FF in Hexadezimal entspricht 255 in Dezimal-Schreibweise). Alle anderen Farben lassen sich durch Mischung dieser drei Farben darstellen.

Größenangaben

Bei Schriftgrößen, Abständen o.ä. sind verschiede Einheiten üblich. Besonders wichtig sind die Angabe in

  • Bildschirmpunkten (Pixeln), z.B. width:50px;
  • Prozent, relativ zur Normalgröße von Elementen bzw. Größe des Fensters, z.B. width:80%;
  • Absoluter Größe in Zentimeter oder Milimeter, z.B. width:15mm;

Für mehr Informationen siehe den Abschnitt bei SELFHTML.

Links