Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten.

Ähnliche Präsentationen


Präsentation zum Thema: "12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten."—  Präsentation transkript:

1 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten.

2 12.09.2002 Stylesheets: Formatvorlagen in HTML2 Stylesheets in HTML Diese Folien sind nur als Begleitmaterial zum Kurs gedacht. Sie stellen keine umfassende Einführung in das Thema Stylesheets dar. Angaben über weiterführende Literatur finden Sie auf der letzten Folie

3 12.09.2002 Stylesheets: Formatvorlagen in HTML3 Wozu Stylesheets verwenden? Problembeschreibung: HTML erlaubt kein exaktes Layout Viele einzelne Formatanweisungen erforderlich HTML Code wird unübersichtlich Die Darstellung der Dokumente ist abhängig vom Browser

4 12.09.2002 Stylesheets: Formatvorlagen in HTML4 Wozu Stylesheets verwenden? Lösung: Verwendung von Stylesheets

5 12.09.2002 Stylesheets: Formatvorlagen in HTML5 Wozu Stylesheets verwenden? Vorteile Trennung von Inhalt und Formatanweisungen Änderungen der Formate an einer zentralen Stelle Gleiche Darstellung der Dokumente in allen Browsern

6 12.09.2002 Stylesheets: Formatvorlagen in HTML6 Vergleich: HTML-Formatierung und Stylesheets Mit HTML Formatanweisungen Berlin Hamburg München Köln

7 12.09.2002 Stylesheets: Formatvorlagen in HTML7 Vergleich: HTML-Formatierung und Stylesheets Mit Stylesheets Formatanweisungen CSS und HTML TD { color: red; font-family: verdana; font-size: large; } Hinweis: Diese Anweisung kann auch in einer externen Datei stehen. Der HTML Code für die Tabelle sieht dann wesentlich einfacher aus:

8 12.09.2002 Stylesheets: Formatvorlagen in HTML8 Vergleich: HTML-Formatierung und Stylesheets Berlin Hamburg München Köln

9 12.09.2002 Stylesheets: Formatvorlagen in HTML9 Stylesheets: Arbeitsschritte Bei der Arbeit mit Stylesheets sind 2 Schritte erforderlich: Stylesheets definieren Formate zuweisen.

10 12.09.2002 Stylesheets: Formatvorlagen in HTML10 Stylesheets: Aktuelle Version Die aktuelle Version ist CSS2 (Level 2) es wird von Netscape ab Version 6 und Internet Explorer ab Version 5 unterstützt Zuständig für Normierung: W3-Consortium

11 12.09.2002 Stylesheets: Formatvorlagen in HTML11 Stylesheets: Aktuelle Version Version CSS3 ist noch in Bearbeitung Neue Features, u.a. : Skalierbare Vektorgrafiken

12 12.09.2002 Stylesheets: Formatvorlagen in HTML12 Stylesheets: Syntax CSS-Defintionen haben folgenden Aufbau: Selector {Eigenschaft: Wert;} i.a. werden mehrere Eigenschaften definiert: h2 { font-family: Arial, Helvetica, Sans-Serif; font-weight: bold; font-size: 14pt; color: #660066; }

13 12.09.2002 Stylesheets: Formatvorlagen in HTML13 Stylesheets: Syntax Groß- und Kleinschreibung wird nicht beachtet. Es wird empfohlen, für HTML- Tags und CSS-Definitionen nur Kleinbuchstaben zu verwenden

14 12.09.2002 Stylesheets: Formatvorlagen in HTML14 Stylesheets: Maßeinheiten bei Größenangaben können relative oder absolute Maßeinheiten verwendet werden: 1. Relative Einheiten: em (Schriftgröße für die verwendete Schriftart) ex (Höhe des Buchstaben x für die verwendete Schriftart) px (Pixel= kleinster darstellbarer Punkt auf Bildschirm) Beispiele: H1 { font-size: 20px; margin-left: 2em} d.h. der linke Rand = 40 px p { font-size: 14px; line-height: 2ex}

15 12.09.2002 Stylesheets: Formatvorlagen in HTML15 Stylesheets: Maßeinheiten 2. Absolute Einheiten: pt (1pt = 1/72 inch) mm cm in Beispiele: margin-left: 4mm; font-size: 14pt; line-height: 0.8in; Anmerkung: Zwischen Zahlenwert und Einheit darf kein Leerzeichen eingegeben werden.

16 12.09.2002 Stylesheets: Formatvorlagen in HTML16 Stylesheets: Farbangaben #RRGGBB - Hexadezimale Werte von 00-FF, Beispiel: color : #ff0000 rgb (rot, grün, blau) – Werte von 0-255, Beispiel: color : rgb (204,51,255) rgb (rot%. grün%, blau%) – Werte von 0-100, Beispiel: color : rgb(18%,80%,40%) Name - Name der Farbe, Beispiel color : blue;

17 12.09.2002 Stylesheets: Formatvorlagen in HTML17 Stylesheets: Fontangaben Definition von Schriftarten in Stylesheets: font-family: (Angabe der Schriftartengruppe) serif (times, times new roman,..) sans-serif (arial, helvetica,..) monospace (courier, new courier,..) cursive (Zapf Chancery,..)

18 12.09.2002 Stylesheets: Formatvorlagen in HTML18 Stylesheets: Fontangaben Definition von Schriftarten in Stylesheets: font-size: Angabe der Größe font-style: (normal, italic, oblique) font-weight: (normal, bold) font-variant: (normal, small-caps) small-caps bedeutet Kapitälchen Color: (Farbangabe)

19 12.09.2002 Stylesheets: Formatvorlagen in HTML19 Stylesheets: Fontangaben Welche Schriftart verwenden? serif: für große Schriften und Druckseiten sans-serif: kleine Schriften auf Bildschirm monospace: Texte mit Tabulatoren, Programmcode cursive: Dekorative Texte

20 12.09.2002 Stylesheets: Formatvorlagen in HTML20 Stylesheets: Fontangaben Beispiel: h1 { font-family: arial, helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; font-variant: small-caps; }

21 12.09.2002 Stylesheets: Formatvorlagen in HTML21 Stylesheets: Selektoren Es gibt 3 CSS- Selektoren (Selectors) 1. HTML-Tags: Definiert Formatierung von HTML- Tags (wie etwa oder ), Beispiel: p {font: bold 12pt times;}

22 12.09.2002 Stylesheets: Formatvorlagen in HTML22 Stylesheets: Selektoren 2. Class Klassendefinitionen sind unabhängig von einem bestimmten HTML-Tag und können auf viele Tags angewandt werden. Beispiel:.Einzug1 {Margin-Left: 1cm; Margin-Right: 1cm} Klassenname (hier Einzug1) ist frei wählbar Anwendung von Klassendefintionen: Text (Kann aus mehreren Absätzen besten) …

23 12.09.2002 Stylesheets: Formatvorlagen in HTML23 Stylesheets: Selektoren 3. ID: ID-Selektoren werden meistens benutzt, um Objekte und ihre Eigenschaften zu definieren, z.B. Position im Browserfenster. Beispiel: #object1 {position: absolute; top: 100 px; left: 150 px;} Anwendung von ID-Defintionen, Beispiel:

24 12.09.2002 Stylesheets: Formatvorlagen in HTML24 Stylesheets: Selektoren Anmerkung: Man kann auch eine Liste von HTML- Selektoren in eine Stylesheet-Definition zusammen- fassen: h1,h2,h3,h4 { font-family: arial, helvetica, sans-serif; color: darkblue} Diese Möglichkeit wird leider von Netscape7 nicht unterstützt

25 12.09.2002 Stylesheets: Formatvorlagen in HTML25 Stylesheets: Typen Wir unterscheiden 3 Typen von Stylesheets. 1. Inline: Formate innerhalb eines HTML- Elements definieren. 2. Embedded: Formate für ganze Datei, werden im Dateikopf definiert. 3. Linked: Formate in einer externen Datei.

26 12.09.2002 Stylesheets: Formatvorlagen in HTML26 Stylesheets: Rangfolge Die Rangfolge der Cascading Style Sheets ist wie folgt: inline Style Eigenschaften haben Vorrang vor embedded Style Tags embedded Style Tag wiederum haben Vorrang vor linked Stylesheets

27 12.09.2002 Stylesheets: Formatvorlagen in HTML27 Definieren von Stylesheets Inline (Direktformatierung einzelner Elemente) Syntax:

28 12.09.2002 Stylesheets: Formatvorlagen in HTML28 Definieren von Stylesheets Beispiele für Inline Stylesheets

Text der Überschrift

Absatztext......

29 12.09.2002 Stylesheets: Formatvorlagen in HTML29 Definieren von Stylesheets Embedded (Dateiweite Formatierung) Titel der Datei /*... Stylesheet-Angaben... */

30 12.09.2002 Stylesheets: Formatvorlagen in HTML30 Definieren von Stylesheets Beispiel für Embedded Stylesheets: Titel der Datei h1 { font-size:18pt; color:red; font-family:Helvetica,Arial; font-style:bold; }

31 12.09.2002 Stylesheets: Formatvorlagen in HTML31 Definieren von Stylesheets h2 { font-size:16pt; color:darkblue; font-family:Helvetica,Arial; font-style:bold;} h3 { font-size:14pt; color:darkblue; font-family:Helvetica,Arial; font-style:bold;}

32 12.09.2002 Stylesheets: Formatvorlagen in HTML32 Definieren von Stylesheets p,li { font-size:12pt; line-height:14pt; font-family:Helvetica,Arial; letter-spacing:0.2mm; word-spacing:0.8mm; }

33 12.09.2002 Stylesheets: Formatvorlagen in HTML33 Definieren von Stylesheets Linked Stylesheets (Formate in separater Datei definieren). Vorteile: Trennung von Inhalt und Formatierung einheitliches Layout für alle Dokumente in einem Projekt Änderung in der Formatvorlage wirkt sich auf alle Dateien aus (Arbeitsersparnis).

34 12.09.2002 Stylesheets: Formatvorlagen in HTML34 Definieren von Stylesheets Erstellen von Stylesheet Dateien: Stylesheet Dateien können mit einem einfachen Texteditor erstellt werden Sie bestehen aus Formatierungs- anweisungen und Kommentaren Dateinamen enden mit.css

35 12.09.2002 Stylesheets: Formatvorlagen in HTML35 Definieren von Stylesheets Einbinden von Stylesheets in HTML- Dateien Titel der Datei

36 12.09.2002 Stylesheets: Formatvorlagen in HTML36 Definieren von Stylesheets Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche Vorlagendateien für verschiedene Ausgabemedien definieren, z.B. Bildschirm Drucker

37 12.09.2002 Stylesheets: Formatvorlagen in HTML37 Definieren von Stylesheets Formatvorlagen für Unterschiedliche Medien: Titel der Datei

38 12.09.2002 Stylesheets: Formatvorlagen in HTML38 Syntax der Formatdefinitionen Element { Eigenschaft: Wert;.......}, z.B: h1 { Font-Family : arial, helvetica, sans-serif; Color : darkblue; Font-Size : 18pt; Text-Align : Center; } p { font-size:11pt; line-height:14pt; font-family:Arial,Helvetica, Sans-Serif; letter-spacing:0.2mm; word-spacing:0.3mm; }

39 12.09.2002 Stylesheets: Formatvorlagen in HTML39 Syntax der Formatdefinitionen Element.class { Eigenschaft: Wert;.......}, z.B: p.klein { font-size:8pt; color:black; }.class { Eigenschaft: Wert;.......}, z.B:.rot { Color : red; }

40 12.09.2002 Stylesheets: Formatvorlagen in HTML40 Beispiele von Formatdefinitionen Unterschiedliche Absatzklassen p.normal { font-size:10pt; color:black; } p.gross { font-size:12pt; color:black; } p.klein { font-size:8pt; color:black; } p.einzug {margin-left:1.0 cm;} p.block {text-align:justify;}

41 12.09.2002 Stylesheets: Formatvorlagen in HTML41 Beispiele von Formatdefinitionen Allgemeine Klassen, nicht nur für Absätze.center {Text-Align : Center; }.SansSerif {Font-Family : arial, helvetica sans-serif;}.rot { Color : red; }

42 12.09.2002 Stylesheets: Formatvorlagen in HTML42 Beispiele von Formatdefinitionen Allgemeine Klassen, nicht nur für Absätze. gruen { Color : green }.Einzug1 { Margin-Left: 1cm; Margin-Right: 1cm}.Einzug2 { Margin-Left: 2cm; Margin-Right: 2cm }

43 12.09.2002 Stylesheets: Formatvorlagen in HTML43 Vererbung von Formatangaben Vererbung bedeutet, dass Sie zusätzliche Klassen (classes) jedes Elements angeben können, und jede Klasse wird einige der Style-Angaben des Grundelements erben, solange nicht explizit neue Werte eingetragen werden oder die jeweilige Eigenschaft nicht vererbt wird.

44 12.09.2002 Stylesheets: Formatvorlagen in HTML44 Vererbung von Formatangaben Beispiel: Eigenschaften vom Grundelement definieren p { font-size:11pt; line-height:14pt; font-family:Arial,Helvetica, Sans-Serif; letter-spacing:0.2mm; word-spacing:0.8mm; }

45 12.09.2002 Stylesheets: Formatvorlagen in HTML45 Vererbung von Formatangaben Danach zusätzliche Klassen mit teilweise anderen Eigenschaften p.small { font-size: 9pt; line-height: 12pt; } p.einzug { margin-left: 1cm margin-right: 1cm}

46 12.09.2002 Stylesheets: Formatvorlagen in HTML46 Vererbung von Formatangaben Die Absatzklassen small und einzug erben alle Eigenschaften vom Grund- element, wenn diese in der Klassendefinition nicht andere Werte erhalten.

47 12.09.2002 Stylesheets: Formatvorlagen in HTML47 Zuweisung der Vorlagen Absatzformate: Text

48 12.09.2002 Stylesheets: Formatvorlagen in HTML48 Zuweisung der Vorlagen Textabschnitte aus mehreren Absätzen und anderen Textelementen: Text

49 12.09.2002 Stylesheets: Formatvorlagen in HTML49 Textumrandung (Box).box { border: solid; border-width: thin; padding: 0.5em; }.redbox { border: solid; border-width: 1px; border-color: red; padding: 0.5em; }

50 12.09.2002 Stylesheets: Formatvorlagen in HTML50 Textumrandung.linker-rand { border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: thin; border-color: red; padding: 0.5em; }

51 12.09.2002 Stylesheets: Formatvorlagen in HTML51 Absätze mit Textumrandung Text

52 12.09.2002 Stylesheets: Formatvorlagen in HTML52 Objekte Positionieren und Überlagern Definition steht im Dateikopf #bild1 { position: absolute; top: 150px; left: 200px; z-index: 1; }

53 12.09.2002 Stylesheets: Formatvorlagen in HTML53 Objekte Positionieren und Überlagern #bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; }

54 12.09.2002 Stylesheets: Formatvorlagen in HTML54 Objekte Positionieren und Überlagern #text { position: absolute; top: 360px; left: 20px; z-index: 3; } // Objekte mit einem höheren z-index überlagern solche mit einem niedrigeren

55 12.09.2002 Stylesheets: Formatvorlagen in HTML55 Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte:

56 12.09.2002 Stylesheets: Formatvorlagen in HTML56 Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte:

57 12.09.2002 Stylesheets: Formatvorlagen in HTML57 Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte: Hier steht der Text

58 12.09.2002 Stylesheets: Formatvorlagen in HTML58 Objekte Positionieren und Überlagern

59 12.09.2002 Stylesheets: Formatvorlagen in HTML59 Weiterführende Online Literatur Spezifikation vom W3-Consortium http://www.w3.org/TR/REC- CSS2/cover.html#minitoc http://www.w3.org/TR/REC- CSS2/cover.html#minitoc Einführung in Stylesheets von Bernhard Friedrichs http://www.hsguide.com/guides/stylesheets/ http://www.hsguide.com/guides/stylesheets/ HTML-Kurs von Stefan Münz http://www.rz.uni- hohenheim.de/www/html/selfhtml/css/index.htm http://www.rz.uni- hohenheim.de/www/html/selfhtml/css/index.htm


Herunterladen ppt "12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten."

Ähnliche Präsentationen


Google-Anzeigen