12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von...
-
Upload
erica-weiss -
Category
Documents
-
view
237 -
download
0
Transcript of 12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von...
12.09.2002 Stylesheets: Formatvorlagen in HTML
1
Stylesheets in HTML
Webdokumente mit Hilfe von
Formatvorlagen gestalten.
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
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
12.09.2002 Stylesheets: Formatvorlagen in HTML
4
Wozu Stylesheets verwenden?
Lösung: Verwendung von Stylesheets
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
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>
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:
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>
12.09.2002 Stylesheets: Formatvorlagen in HTML
9
Stylesheets: Arbeitsschritte Bei der Arbeit mit Stylesheets sind 2
Schritte erforderlich: Stylesheets definieren Formate zuweisen.
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
12.09.2002 Stylesheets: Formatvorlagen in HTML
11
Stylesheets: Aktuelle Version Version CSS3 ist noch in
Bearbeitung Neue Features, u.a. :
Skalierbare Vektorgrafiken
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;
}
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
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}
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.
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;
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, ..)
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)
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
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;}
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;}
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>
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">
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
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.
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
12.09.2002 Stylesheets: Formatvorlagen in HTML
27
Definieren von StylesheetsInline
(Direktformatierung einzelner Elemente)Syntax: <HTML-Selector style="Eigenschaft1:Wert;
Eigenschaft2:Wert; …;"></HTML-Selector>
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>
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>
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; }
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;}
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>
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).
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
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>
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
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>
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; }
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; }
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;}
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; }
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 }
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.
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; }
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}
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.
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>
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>
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; }
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; }
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>
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; }
12.09.2002 Stylesheets: Formatvorlagen in HTML
53
Objekte Positionieren und Überlagern #bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; }
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>
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>
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>
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>
12.09.2002 Stylesheets: Formatvorlagen in HTML
58
Objekte Positionieren und Überlagern
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