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 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten.

2 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 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 Stylesheets: Formatvorlagen in HTML4 Wozu Stylesheets verwenden? Lösung: Verwendung von Stylesheets

5 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 Stylesheets: Formatvorlagen in HTML6 Vergleich: HTML-Formatierung und Stylesheets Mit HTML Formatanweisungen Berlin Hamburg München Köln

7 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 Stylesheets: Formatvorlagen in HTML8 Vergleich: HTML-Formatierung und Stylesheets Berlin Hamburg München Köln

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

10 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 Stylesheets: Formatvorlagen in HTML11 Stylesheets: Aktuelle Version Version CSS3 ist noch in Bearbeitung Neue Features, u.a. : Skalierbare Vektorgrafiken

12 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Stylesheets: Formatvorlagen in HTML27 Definieren von Stylesheets Inline (Direktformatierung einzelner Elemente) Syntax:

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

Text der Überschrift

Absatztext......

Absatztext......"> 12.09.2002 Stylesheets: Formatvorlagen in HTML28 Definieren von Stylesheets Beispiele für Inline Stylesheets <h1 style=

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

30 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 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 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 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 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 Stylesheets: Formatvorlagen in HTML35 Definieren von Stylesheets Einbinden von Stylesheets in HTML- Dateien Titel der Datei

36 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 Stylesheets: Formatvorlagen in HTML37 Definieren von Stylesheets Formatvorlagen für Unterschiedliche Medien: Titel der Datei

38 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 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 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 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 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 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 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 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 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 Stylesheets: Formatvorlagen in HTML47 Zuweisung der Vorlagen Absatzformate: Text

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

49 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 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 Stylesheets: Formatvorlagen in HTML51 Absätze mit Textumrandung Text

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

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

54 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 Stylesheets: Formatvorlagen in HTML55 Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte:

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

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

58 Stylesheets: Formatvorlagen in HTML58 Objekte Positionieren und Überlagern

59 Stylesheets: Formatvorlagen in HTML59 Weiterführende Online Literatur Spezifikation vom W3-Consortium CSS2/cover.html#minitoc CSS2/cover.html#minitoc Einführung in Stylesheets von Bernhard Friedrichs HTML-Kurs von Stefan Münz hohenheim.de/www/html/selfhtml/css/index.htm 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