CSS zur Gestaltung



Cascading Style Sheets: Formatangaben, die sich global auf ein Dokument oder immer weiter verfeinert auf Elementgruppen oder einzelne Elemente beziehen.

Nachdem der Inhalt und der Aufbau* der Webseite festgelegt sind, wird die Seite gestaltet.
*Anmerkung: Auch mit CSS kann die Anordnung der HTML-Elemente effektvoll gestaltet werden.

Je allgemeiner diese Gestaltung erfolgt, desto leichter kann sie nachträglich geändert oder in andere Webseiten übernommen werden.
Zum Beispiel sollte nicht bei jedem img-Tag das Rahmenformat eingestellt werden, sondern der Stil am Anfang des Dokument gleich für alle Bilder festgelegt werden.

Beispiele für Stile:

  • Textfarbe <p style="color:blue;">...</p>

  • Hintergrundfarbe <p style="background-color:#88aa00;">...</p>

  • Schriftgröße <p style="font-size:10px;">...</p>

  • Breite <img src="bild.jpg" style="width:200px;" />

  • Breite und Höhe <img src="bild.jpg" style="width:50%; height:75%;" />

  • Style-Definition für p-Element
    <style type="css/text">
        p {font-style:italic;}
    </style>

  • Style-Definition für span-Element im p-Element
    <style type="css/text">
        p span {color:red;}
    </style>

Wo werden css-Formate notiert?

    im Browser (z.B. die Schriftart)
    in einer externen Datei, die eingebunden wird: <link rel="stylesheet" href="style.css" type="text/css" >
    im Kopf der Html-Datei: <style type="css/text">...</style>
    in einem Html-Element (inline-stylesheet), z. B. <img src="bild.jpg" style="..." />

Wenn sich einzelne Format-Beschreibungen wiedersprechen, gilt die letzte.
Allerdings kann z. B. mit <style> p {font-style:normal; !important} </style> eine nachfolgende font-style-Formatierung ausgehebelt werden. Das kann wichtig sein, wenn externe css-Dateien eingebunden werden, deren Inhalt man nicht genauer kennt.

Wie werden css-Formate notiert?

    Global für bestimmte Html-Elemente, z. B. p {…} für p-Elemente
    Global für verschachtelte Elemente, z. B. p span {..} für span-Elemente, die in einem p-Element vorkommen
    Global für bestimmte Klassen, z. B. .wichtig {…} für Elemente, die das Attribut class="wichtig" enthalten
    Für ein bestimmtes Element, z. B. #emailadresse {…} für das Element, das das Attribut id="emailadresse" besitzt.

Weiteres bei SELFHTML: Kurzreferenz CSS
und CSS 4 you - die deutsche Seite für Cascading Stylesheets (CSS)

Aufgabe

Siehe unter http://de.selfhtml.org/css/eigenschaften/schrift.htm nach, welche Möglichkeiten es für die Schriftgestaltung gibt. Formatiere deine Webseite

Aufgabe

Siehe unter http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout nach, wie die Tabelle auf "volle Breite" eingestellt wird – und die linke Spalte auf eine Breite von 150 Bildschirmpunkten.

Aufgabe

Die Tabelle soll die Bildschirmseite in der Höhe vollständig (zu 100%) ausfüllen.
Die obere Zeile der Tabelle soll 100 Bildpunkte hoch sein und gelbe Schrift auf hellblauem Hintergrund zeigen. Arrangiere das.

Farbangaben unter http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben
und
http://www.susas.de/farben/websichere_farben.htm