Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998.

Präsentation zum Thema: "Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998."—  Präsentation transkript:

1

2 Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998 ist CSS 2 weltweit gültiger Standard. Es gibt 3 Möglichkeiten!

3 Inline-Stylesheet: Überschrift Einmalige Veränderung! Die Formatierung erfolgt in einem Tag und wird mit "style" eingeleitet

4 Zentrale Formatierung h3 {color: blue;font- size:36pt} Eingebettetes Stylesheet Zentrale Stelle nach Formatierung gilt für alle h3

5 1. Externes Style Sheet Die Dateien werden mit einem Texteditor (z. B. Notepad) erstellt und mit der Dateiendung.css abgespeichert. Der Link wird dann im Kopf zentral angegeben. Hier heißt die Datei meinformat.css Beispiel: Titel Bietet den Vorteil der zentralen Änderung durch Änderung von meinformat.css

6 * { font-size:14px; color:#ff0000;} Universal-Selektor Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben.

7 h1 { font-size:14px; font-style:italic; } p {color:#ff0000;} Typ-Selektoren verknüpfen ein HTML-Tag mit einer Formatierung.

8 body { background-image : url(bilder/koch.gif); background-repeat : no-repeat; background-color : Lime; background-position : top; font-family : Helvetica, Verdana, sans-serif ; } Typ-Selektoren Formatiert alles, was innerhalb von steht!

9 div { font-family : Helvetica, Verdana, sans-serif ; position : absolute; top : 80px ; left : 50px; } Diese Formatierung wirkt zwischen Typ-Selektoren

10 a:hover { color : oldlace ; background-color : #009 ; } Bewirkt einen Hoover-Effekt bei Links Typ-Selektoren

11 .rot{color:#ff0000;}.ul {text-decoration:underline}.fett{font-weight:bold} Ein roter Text Ein fetter Text Ein unterstrichener Text Ein Text, rot und unterstrichen Ein Text, fett und unterstrichen Ein Text, rot, fett und unterstrichen Class-Selektoren

12 a.zurueck { color : #009 ; text-decoration : none ; border: outset; } h1 { color : #900 ; margin-left : 50px; } a.zurueck { color : #009 ; text-decoration : none ; border: outset; } Class-Selektoren HTML: <a class = “zurueck“ href="../index.htm">zur Titelseite

13 a { padding:10px 30px; border: 3px solid Red; font-family:Arial, sans-serif; font-weight:normal; color: #DA70D6; text-decoration:none; background-color: #FFD700; } a:hover { border-right:2px solid #000000; font-weight:bold; color: Black; background-color:#FF6600; } Anwendung einfacher Typselektoren

14 Aufgabe Formatiere dann das Kochbuch zentral mit einem externen Stylesheet! Arbeite die PP-Päsentation noch einmal durch!