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

Cascading Style Sheets

Vollständige Trennung von Layout (CSS) und Inhalt (HTML)www.staff.uni-mainz.de/slowi/html/css.ppt

Beispiel zur Einführung: Wozu CSS?

In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Style-Sheets eine Layoutete Datei

Blatext

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?

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

Ü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

http://www.w3.org/StyleSheets/Core/preview






http://www.csszengarden.com/

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>

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

http://www.staff.uni-mainz.de/slowi/html/

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

Syntax-Elemente eines Styles

P, em, li {color: red; text-indent: 10pt}

property value

declaration

ruleset

Änderbare Eigenschaften

SchriftAbstände, Ränder, Ausrichtung, RahmenFarbenTabellenMehrspaltiger TextflussSeitenumbruch

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)

Style-Sheet in Dreamweaver

1

2

34

Fenster

CSS-Stile

Ü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

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

Ü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

Ü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

CSS-Stil-Definitionsfenster in Dreamweaver

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

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

Documents

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