Cascading Style Sheets

Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML)

Beispiel zur Einführung: Wozu CSS? ALLES GROSSGESCHRIEBEN Bla text In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Stile-Sheets eine Layoutete Datei

Welche Browser verstehen CSS? • IE3: CSS 1 • IE4, Netscape 4: CSS1, CSS 2 (teilweise) • Sobald im Netscape Javascript ausgeschaltet ist, werden Style Sheets ignoriert. (ebenso ältere Browserversionen)

Was geht in Netscape 4 und IE4? • Tabelle über alle Funktionen: http://www.webreview.com/style/css1/charts/mastergrid.shtml • CSS-Guide von Stefan Münz: • An jeder besprochenen Funktion ist ein Symbol, ob es nur im Standard ist oder von welcher Browserversion es verstanden wird

Übung: Wie fange ich zu arbeiten an? • Vorgefertigte Style Sheets • Bitte im Netscape aufrufen! • http://www.w3.org/StyleSheets/Core/preview • Beliebigen Stil und unten (show me only style sheet) anklicken • Style sheet speichern mit: Auf Datei – Speichern gehen und so in public_html als w3org.css speichern (als Vorlage zum Weiterarbeiten)

Wenn das CSS nicht funktionieren will • Validatoren für fehlerfreie Seiten • www.htmlhelp.org/tools/validator • Validator.w3.org

Wie kommt das CSS zum HTML? • Extern: <head><link rel=stylesheet href=„w3org.css“ type=„text/css“> • Nur in der einen Datei - Embedded: <style type=„text/css“><!– css -> • Nur an der einen Stelle - Inline: <p style=„text-indent: 10pt“>text</p>

Übung: CSS in Webseite einbinden • Kopiere style.css und simpel.html aus www.zdv.uni-mainz.de/download/html/ (mit rechter Maus draufklicken, Ziel speichern unter public_html. • Style.css in simpel.html in den Header schreiben:<link rel="stylesheet" type="text/css" href="style.css"> • simpel.html davor und danach im Webbrowser anschauen. Was ist anders?

Übung- Nachtrag: CSS einbinden • Das gleiche geht natürlich auch im Dreamweaver menügeführt: • Fenster – CSS-Stile • Darin auf das Icon mit dem Stift klicken • Auf Verknüpfen klicken • Das Style-Sheet style.css auswählen • OK

Syntax-Elemente eines Styles ruleset P, em, li {color: red; text-indent: 10pt} property value declaration

Änderbare Eigenschaften (im Prinzip) • Schrift • Abstände, Ränder, Ausrichtung, Rahmen • Farben • Tabellen • Mehrspaltiger Textfluss • Seitenumbruch

DreamweaverHauptfenster 1. Launcher: Einblenden des CSS-Fensters 2. Mit Style Sheet verknüpfen

Was kann man neu definieren? • Freie Eigenschaften (Klassen), indem man ein Stück Text markiert und die Klasse/Eigenschaft zuweist • HTML-Tags • Link-Eigenschaften (Aktiv, Darübergestrichen/Hover, vor kurzem mal angeklickt/visited)

CSS-Datei in Dreamweaver bearbeiten 4 2 3 1 5

Klasse neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei Name .betonung eintragen, OK • Typ: Farbe: rot, Stärke: fett, Variante: Kapitälchen, Hintergrund, Farbe: gelb • Mit OK bestätigen • Text auf Webseite markieren, dann im Style-Fenster auf betonung klicken

HTML-Tag H1 neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei „Typ“ HTML-Tag anklicken, OK • Jetzt wird das Tag H1 neu definiert • Die Schriftfarbe auf Hellblau ändern • Mit OK bestätigen

HTML-Tag H2 neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei „Typ“ HTML-Tag anklicken • Bei „Tag“ h2 auswählen, OK • Jetzt wird das Tag H2 neu definiert • Ein Hintergrundbild einfügen • Mit OK bestätigen

CSS-Selektor neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei „Typ“ CSS-Selektor anklicken • Bei „Tag“ a:hover auswählen, OK • Jetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiert • Die Schrift vergrößern • Mit OK bestätigen

CSS-Stil-Definitionsfenster in Dreamweaver

Übung: Nachbereitung • In kurs.html link setzen (CSS soll auf simpel.html zeigen) • Maile das fertige style.css an slowi@mail.uni-mainz.de

Cascading Style Sheets