Download - Cascading Style Sheets
![Page 1: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/1.jpg)
Cascading Style Sheets
Vollständige Trennung von Layout (CSS) und Inhalt (HTML)
![Page 2: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/2.jpg)
Beispiel zur Einführung: Wozu CSS?
In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Stile-Sheets eine Layoutete Datei
Blatext
![Page 3: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/3.jpg)
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)
![Page 4: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/4.jpg)
Was geht in Netscape 4 und IE4?
Tabelle über alle Funktionen:http://www.webreview.com/style/css1/
charts/mastergrid.shtmlCSS-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
![Page 5: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/5.jpg)
Übung: Wie fange ich zu arbeiten an?
Vorgefertigte Style SheetsBitte im Netscape aufrufen!
http://www.w3.org/StyleSheets/Core/preview Beliebigen Stil und unten (show me only style sheet) anklickenStyle sheet speichern mit: Auf Datei – Speichern gehen und so in public_html als w3org.css speichern (als Vorlage zum Weiterarbeiten)
![Page 6: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/6.jpg)
Wenn das CSS nicht funktionieren will
Validatoren für fehlerfreie Seitenwww.htmlhelp.org/tools/validatorValidator.w3.org
![Page 7: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/7.jpg)
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>
![Page 8: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/8.jpg)
Ü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?
![Page 9: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/9.jpg)
Übung- Nachtrag: CSS einbinden
Das gleiche geht natürlich auch im Dreamweaver menügeführt:
Fenster – CSS-StileDarin auf das Icon mit dem Stift klickenAuf Verknüpfen klickenDas Style-Sheet style.css auswählenOK
![Page 10: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/10.jpg)
Syntax-Elemente eines Styles
P, em, li {color: red; text-indent: 10pt}
property value
declaration
ruleset
![Page 11: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/11.jpg)
Änderbare Eigenschaften (im Prinzip)
SchriftAbstände, Ränder, Ausrichtung, RahmenFarbenTabellenMehrspaltiger TextflussSeitenumbruch
![Page 12: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/12.jpg)
DreamweaverHauptfenster
1. Launcher: Einblenden des CSS-Fensters
2. Mit Style Sheet
verknüpfen
![Page 13: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/13.jpg)
Was kann man neu definieren?
Freie Eigenschaften (Klassen), indem man ein Stück Text markiert und die Klasse/Eigenschaft zuweistHTML-TagsLink-Eigenschaften (Aktiv, Darübergestrichen/Hover, vor kurzem mal angeklickt/visited)
![Page 14: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/14.jpg)
CSS-Datei in Dreamweaver bearbeiten
13
2
4
5
![Page 15: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/15.jpg)
Klasse neu definieren
in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klickenBei Name .betonung eintragen, OKTyp: Farbe: rot, Stärke: fett, Variante: Kapitälchen, Hintergrund, Farbe: gelbMit OK bestätigenText auf Webseite markieren, dann im Style-Fenster auf betonung klicken
![Page 16: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/16.jpg)
HTML-Tag H1 neu definieren
in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klickenBei „Typ“ HTML-Tag anklicken, OKJetzt wird das Tag H1 neu definiertDie Schriftfarbe auf Hellblau ändernMit OK bestätigen
![Page 17: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/17.jpg)
HTML-Tag H2 neu definieren
in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klickenBei „Typ“ HTML-Tag anklickenBei „Tag“ h2 auswählen, OKJetzt wird das Tag H2 neu definiertEin Hintergrundbild einfügenMit OK bestätigen
![Page 18: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/18.jpg)
CSS-Selektor neu definieren
in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klickenBei „Typ“ CSS-Selektor anklickenBei „Tag“ a:hover auswählen, OKJetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiertDie Schrift vergrößernMit OK bestätigen
![Page 19: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/19.jpg)
CSS-Stil-Definitionsfenster in Dreamweaver
![Page 20: Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022081002/56812b88550346895d8fa49c/html5/thumbnails/20.jpg)
Übung: Nachbereitung
In kurs.html link setzen (CSS soll auf simpel.html zeigen)Maile das fertige style.css an [email protected]