Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Cascading Style Sheets

Ähnliche Präsentationen


Präsentation zum Thema: "Cascading Style Sheets"—  Präsentation transkript:

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

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

3 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)

4 Was geht in Netscape 4 und IE4?
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

5 Übung: Wie fange ich zu arbeiten an?
Erst mal gucken, zb beim W3: HTML-Sampler und beliebigen Stil auswählen Zen Garden: Jeweils der gleiche Inhalt in unterschiedlichem Layout

6 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>

7 Übung: CSS in Webseite einbinden
Kopiere simpel.html und meinestile.css aus (mit rechter Maus draufklicken, Ziel speichern im Webverzeichnis meinestile.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?

8 Übung- Alternative: CSS einbinden
Das gleiche geht im Dreamweaver menügeführt: Fenster – CSS-Stile Mit dem linken Icon das Fenster öffnen meinestile.css eintippen - OK 2. meinestile.css 1.

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

10 Änderbare Eigenschaften
Schrift Abstände, Ränder, Ausrichtung, Rahmen Farben Tabellen Mehrspaltiger Textfluss Seitenumbruch

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

12 Style-Sheet in Dreamweaver
1 Fenster 2 CSS-Stile 4 3

13 Übung: (Selbsterfundene) Klasse neu definieren
Fenster – CSS-Stile öffnen in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken Bei Name .betonung eintragen, der Punkt vor betonung ist essentiell! Farbe: helles orange, Variante: Kapitälchen, Hintergrund-Farbe: weiß Mit OK bestätigen Ein kleines Stück Text auf Webseite markieren, dann im Style-Fenster mit der rechten Maus auf .betonung klicken, auf „Anwenden“ gehen

14 Übung: HTML-Tag H1 neu definieren
In CSS-Stile auf das + klicken Bei Typ: HTML-Tag auswählen, Bei Name: H1 auswählen, OK Die Schriftfarbe auf Hellgrau ändern Mit OK bestätigen (Änderungen mit re. Maus auf das Tag)

15 Ü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

16 Übung: CSS-Selektor umdefinieren
a:hover mit rechter Maus anklicken, auf "Bearbeiten" gehen Jetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiert Unterstreichung hinzufügen Mit OK bestätigen

17 CSS-Stil-Definitionsfenster in Dreamweaver

18 Übung: Nachbereitung kurs.html öffnen, link auf simpel.html setzen
Alle HTML-Seiten im Dreamweaver öffnen und das Stylesheet meinestile.css zuweisen. Jetzt haben Sie die Layoutkontrolle über alle Ihre Seiten.


Herunterladen ppt "Cascading Style Sheets"

Ähnliche Präsentationen


Google-Anzeigen