cascading style sheets vollständige trennung von layout (css) und inhalt (html) ...
TRANSCRIPT
![Page 1: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/1.jpg)
Cascading Style Sheets
Vollständige Trennung von Layout (CSS) und Inhalt (HTML)www.staff.uni-mainz.de/slowi/html/css.ppt
![Page 2: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/2.jpg)
Beispiel zur Einführung: Wozu CSS?
In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Style-Sheets eine Layoutete Datei
Blatext
![Page 3: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/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 Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/4.jpg)
Was geht in Netscape 4 und IE4?
CSS-Guide von Stefan Münz:http://selfhtml.teamone.de/css/index.htm
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 Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/5.jpg)
Übung: Wie fange ich zu arbeiten an?
Erst mal gucken, zb beim W3:http://www.w3.org/StyleSheets/Core/preview HTML-Sampler und beliebigen Stil auswählen
Zen Garden:http://www.csszengarden.com/Jeweils der gleiche Inhalt in unterschiedlichem Layout
![Page 6: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/6.jpg)
Wie kommt das CSS zum HTML?
Extern: <head><link rel=stylesheet href="meinestile.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 7: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/7.jpg)
Übung: CSS in Webseite einbinden
Kopiere simpel.html und meinestile.css aus www.staff.uni-mainz.de/slowi/html/ (mit rechter Maus draufklicken, Ziel speichern im Webverzeichnismeinestile.css in simpel.html in den Header schreiben:<link rel="stylesheet" type="text/css" href="meinestile.css">simpel.html davor und danach im Webbrowser anschauen. Was ist anders?
![Page 8: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/8.jpg)
Übung- Alternative: CSS einbinden
Das gleiche geht im Dreamweaver menügeführt:
Fenster – CSS-StileMit dem linken Icon das Fenster öffnen meinestile.css eintippen - OK
meinestile.css
1.
2.
![Page 9: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/9.jpg)
Syntax-Elemente eines Styles
P, em, li {color: red; text-indent: 10pt}
property value
declaration
ruleset
![Page 10: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/10.jpg)
Änderbare Eigenschaften
SchriftAbstände, Ränder, Ausrichtung, RahmenFarbenTabellenMehrspaltiger TextflussSeitenumbruch
![Page 11: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/11.jpg)
Was kann man neu definieren?
Freie Eigenschaften (Klassen), indem man ein Stück Text markiert und die Klasse/Eigenschaft zuweist (mit <span>)HTML-TagsLink-Eigenschaften (Aktiv, Darübergestrichen/Hover, vor kurzem mal angeklickt/visited)
![Page 12: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/12.jpg)
Style-Sheet in Dreamweaver
1
2
34
Fenster
CSS-Stile
![Page 13: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/13.jpg)
Übung: (Selbsterfundene) Klasse neu definieren
Fenster – CSS-Stile öffnenin simpel.html im Style-Fenster unten auf das Icon mit dem Plus klickenBei Name .betonung eintragen, der Punkt vor betonung ist essentiell!Farbe: helles orange, Variante: Kapitälchen, Hintergrund-Farbe: weißMit OK bestätigenEin kleines Stück Text auf Webseite markieren, dann im Style-Fenster mit der rechten Maus auf .betonung klicken, auf „Anwenden“ gehen
![Page 14: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/14.jpg)
Übung: HTML-Tag H1 neu definieren
In CSS-Stile auf das + klickenBei Typ: HTML-Tag auswählen,Bei Name: H1 auswählen, OKDie Schriftfarbe auf Hellgrau ändernMit OK bestätigen(Änderungen mit re. Maus auf das Tag)
![Page 15: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/15.jpg)
Übung: HTML-Tag body umdefinieren
Startseite Uni, mit rechter Maus auf den Gutenberg klicken, Bild/Grafik speichern im Webverz.Klicken Sie im CSS-Fenster mit der rechten Maus auf body , wählen Sie „Bearbeiten“ Ein Hintergrundbild einfügen (nicht wiederholen), als HG-Farbe eine auswählen, die auch im Bild vorkommt (mit der Pipette) In der Kategorie "Hintergrund" ein Bild einfügen und bei ""Wiederholen" "nicht wiederholen" auswählen.Mit OK bestätigen
![Page 16: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/16.jpg)
Übung: CSS-Selektor umdefinieren
a:hover mit rechter Maus anklicken, auf "Bearbeiten" gehenJetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiertUnterstreichung hinzufügenMit OK bestätigen
![Page 17: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/17.jpg)
CSS-Stil-Definitionsfenster in Dreamweaver
![Page 18: Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062417/55204d6549795902118bae46/html5/thumbnails/18.jpg)
Übung: Nachbereitung
kurs.html öffnen, link auf simpel.html setzenAlle HTML-Seiten im Dreamweaver öffnen und das Stylesheet meinestile.css zuweisen. Jetzt haben Sie die Layoutkontrolle über alle Ihre Seiten.