![Page 1: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/1.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
1
Stylesheets in HTML
Webdokumente mit Hilfe von
Formatvorlagen gestalten.
![Page 2: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/2.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
2
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
![Page 3: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/3.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
3
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
![Page 4: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/4.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
4
Wozu Stylesheets verwenden?
Lösung: Verwendung von Stylesheets
![Page 5: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/5.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
5
Wozu Stylesheets verwenden?Vorteile Trennung von Inhalt und
Formatanweisungen Änderungen der Formate an einer
zentralen Stelle Gleiche Darstellung der Dokumente in
allen Browsern
![Page 6: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/6.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
6
Vergleich: HTML-Formatierung und Stylesheets
Mit HTML Formatanweisungen<TABLE border="1"> <TR> <TD><FONT color="red" face="verdana" size="4">Berlin</FONT></TD> <TD><FONT color="red" face="verdana" size="4">Hamburg</FONT></TD> <TD><FONT color="red" face="verdana" size="4">München </FONT></TD> <TD><FONT color="red" face="verdana" size="4">Köln</FONT></TD> </TR> </TABLE>
![Page 7: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/7.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
7
Vergleich: HTML-Formatierung und Stylesheets
Mit Stylesheets Formatanweisungen<HEAD> <TITLE>CSS und HTML</TITLE> <STYLE type="text/css"> TD { color: red; font-family: verdana; font-size: large; } </STYLE> </HEAD>
Hinweis: Diese Anweisung kann auch in einer externen Datei stehen. Der HTML Code für die Tabelle sieht dann wesentlich einfacher aus:
![Page 8: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/8.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
8
Vergleich: HTML-Formatierung und Stylesheets
<TABLE border="1"> <TR> <TD>Berlin</TD> <TD>Hamburg</TD> <TD>München</TD> <TD>Köln</TD> </TR> </TABLE>
![Page 9: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/9.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
9
Stylesheets: Arbeitsschritte Bei der Arbeit mit Stylesheets sind 2
Schritte erforderlich: Stylesheets definieren Formate zuweisen.
![Page 10: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/10.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
10
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
![Page 11: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/11.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
11
Stylesheets: Aktuelle Version Version CSS3 ist noch in
Bearbeitung Neue Features, u.a. :
Skalierbare Vektorgrafiken
![Page 12: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/12.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
12
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;
}
![Page 13: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/13.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
13
Stylesheets: Syntax Groß- und Kleinschreibung wird
nicht beachtet. Es wird empfohlen, für HTML-Tags und CSS-Definitionen nur Kleinbuchstaben zu verwenden
![Page 14: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/14.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
14
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 pxp { font-size: 14px; line-height: 2ex}
![Page 15: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/15.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
15
Stylesheets: Maßeinheiten2. 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.
![Page 16: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/16.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
16
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, Beispielcolor : blue;
![Page 17: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/17.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
17
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, ..)
![Page 18: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/18.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
18
Stylesheets: FontangabenDefinition 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)
![Page 19: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/19.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
19
Stylesheets: FontangabenWelche Schriftart verwenden?
serif: für große Schriften und Druckseiten
sans-serif: kleine Schriften auf Bildschirm
monospace: Texte mit Tabulatoren, Programmcode
cursive: Dekorative Texte
![Page 20: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/20.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
20
Stylesheets: FontangabenBeispiel:h1 {
font-family: arial, helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; font-variant: small-caps;}
![Page 21: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/21.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
21
Stylesheets: Selektoren Es gibt 3 CSS- Selektoren (Selectors)1. HTML-Tags:
Definiert Formatierung von HTML-Tags (wie etwa <h1> oder <p>),Beispiel: p {font: bold 12pt times;}
![Page 22: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/22.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
22
Stylesheets: Selektoren2. 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ählbarAnwendung von Klassendefintionen:<span class="Einzug1"><p>Text (Kann aus mehreren Absätzen besten)</p> …</span>
![Page 23: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/23.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
23
Stylesheets: Selektoren3. 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:<img id="object1" src="foto1.jpg">
![Page 24: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/24.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
24
Stylesheets: SelektorenAnmerkung: 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
![Page 25: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/25.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
25
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.
![Page 26: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/26.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
26
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
![Page 27: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/27.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
27
Definieren von StylesheetsInline
(Direktformatierung einzelner Elemente)Syntax: <HTML-Selector style="Eigenschaft1:Wert;
Eigenschaft2:Wert; …;"></HTML-Selector>
![Page 28: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/28.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
28
Definieren von StylesheetsBeispiele für Inline Stylesheets <h1 style="font-size:24pt; color:red;
font-family: Arial, Helvetica; font-style:bold;">Text der Überschrift </h1><p style="font-size:12pt; letter-spacing:3px; font-family: Arial, Helvetica, sans-serif;">Absatztext ...... </p>
![Page 29: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/29.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
29
Definieren von StylesheetsEmbedded
(Dateiweite Formatierung)<head> <title>Titel der Datei</title> <style type="text/css"> /* ... Stylesheet-Angaben ... */ </style> </head>
![Page 30: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/30.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
30
Definieren von Stylesheets
Beispiel für Embedded Stylesheets:<head> <title>Titel der Datei</title> <style type="text/css">
h1 { font-size:18pt; color:red; font-family:Helvetica,Arial; font-style:bold; }
![Page 31: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/31.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
31
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;}
![Page 32: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/32.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
32
Definieren von Stylesheets p,li { font-size:12pt;
line-height:14pt; font-family:Helvetica,Arial; letter-spacing:0.2mm; word-spacing:0.8mm; } </style></head>
![Page 33: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/33.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
33
Definieren von StylesheetsLinked 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).
![Page 34: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/34.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
34
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
![Page 35: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/35.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
35
Definieren von Stylesheets Einbinden von Stylesheets in
HTML-Dateien<head> <title>Titel der Datei</title> <link rel=stylesheet type="text/css"
href="/stylesheets/formate.css"></head>
![Page 36: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/36.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
36
Definieren von Stylesheets
Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche
Vorlagendateien fürverschiedene Ausgabemedien definieren,
z.B. Bildschirm Drucker
![Page 37: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/37.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
37
Definieren von StylesheetsFormatvorlagen für Unterschiedliche Medien:<title>Titel der Datei</title> <link rel=stylesheet media="screen"
href="/stylesheets/screen.css"> <link rel=stylesheet media="print"
href="/stylesheets/printer.css"></head>
![Page 38: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/38.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
38
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; }
![Page 39: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/39.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
39
Syntax der Formatdefinitionen
Element.class { Eigenschaft: Wert; .......}, z.B:p.klein { font-size:8pt; color:black; }
.class { Eigenschaft: Wert; .......}, z.B:.rot { Color : red; }
![Page 40: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/40.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
40
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;}
![Page 41: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/41.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
41
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; }
![Page 42: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/42.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
42
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 }
![Page 43: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/43.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
43
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.
![Page 44: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/44.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
44
Vererbung von FormatangabenBeispiel: Eigenschaften vom
Grundelement<p> definierenp { font-size:11pt; line-height:14pt; font-family:Arial,Helvetica, Sans-Serif; letter-spacing:0.2mm; word-spacing:0.8mm; }
![Page 45: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/45.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
45
Vererbung von FormatangabenDanach zusätzliche Klassen mitteilweise anderen Eigenschaftenp.small { font-size: 9pt; line-height: 12pt; }p.einzug { margin-left: 1cm margin-right: 1cm}
![Page 46: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/46.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
46
Vererbung von FormatangabenDie Absatzklassen small und einzug erben alle Eigenschaften vom
Grund-element <p>, wenn diese in der Klassendefinition nicht andere Werteerhalten.
![Page 47: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/47.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
47
Zuweisung der Vorlagen Absatzformate:
<p class="normal">Text</p><p class="einzug">Text</p><p class="block"> Text</p><p class="SansSerif"> Text</p>
![Page 48: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/48.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
48
Zuweisung der Vorlagen Textabschnitte aus mehreren
Absätzen und anderen Textelementen:<div class="einzug">Text</div><div class="block">Text</div><div class="rot"> Text</div>
![Page 49: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/49.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
49
Textumrandung (Box) .box {
border: solid; border-width: thin; padding: 0.5em; }
.redbox { border: solid; border-width: 1px; border-color: red; padding: 0.5em; }
![Page 50: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/50.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
50
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; }
![Page 51: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/51.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
51
Absätze mit Textumrandung
<p "class = box"> Text </p><p "class = redbox"> Text </p><p "class = linker-rand"> Text </p>
![Page 52: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/52.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
52
Objekte Positionieren und ÜberlagernDefinition steht im Dateikopf<style type="text/css">#bild1 { position: absolute; top: 150px; left: 200px; z-index: 1; }
![Page 53: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/53.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
53
Objekte Positionieren und Überlagern #bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; }
![Page 54: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/54.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
54
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
</style>
![Page 55: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/55.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
55
Objekte Positionieren und ÜberlagernAnwendung der Angaben auf
Objekte:<div ID="bild1"><img src="images/kugel.gif"
width="136" height="135"></div>
![Page 56: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/56.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
56
Objekte Positionieren und ÜberlagernAnwendung der Angaben auf
Objekte:<div ID="bild2"><img src="images/ring.gif"
width="172" height="120"></div>
![Page 57: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/57.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
57
Objekte Positionieren und Überlagern
Anwendung der Angaben auf Objekte:
<div ID="text">Hier steht der Text</div>
![Page 58: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/58.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
58
Objekte Positionieren und Überlagern
![Page 59: 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten](https://reader035.vdokument.com/reader035/viewer/2022062316/570491c41a28ab14218d9efc/html5/thumbnails/59.jpg)
12.09.2002 Stylesheets: Formatvorlagen in HTML
59
Weiterführende Online Literatur
Spezifikation vom W3-Consortiumhttp://www.w3.org/TR/REC-CSS2/cover.html#minitoc
Einführung in Stylesheets von Bernhard Friedrichs http://www.hsguide.com/guides/stylesheets/
HTML-Kurs von Stefan Münzhttp://www.rz.uni-hohenheim.de/www/html/selfhtml/css/index.htm