Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Stylesheets: Formatvorlagen in HTML
Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten. Stylesheets: Formatvorlagen in HTML
2
Stylesheets: Formatvorlagen in HTML
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 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 Stylesheets: Formatvorlagen in HTML
4
Wozu Stylesheets verwenden?
Lösung: Verwendung von Stylesheets 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 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> 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: 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> Stylesheets: Formatvorlagen in HTML
9
Stylesheets: Arbeitsschritte
Bei der Arbeit mit Stylesheets sind 2 Schritte erforderlich: Stylesheets definieren Formate zuweisen. 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 Stylesheets: Formatvorlagen in HTML
11
Stylesheets: Aktuelle Version
Version CSS3 ist noch in Bearbeitung Neue Features, u.a. : Skalierbare Vektorgrafiken Stylesheets: Formatvorlagen in HTML
12
Stylesheets: Formatvorlagen in HTML
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; } Stylesheets: Formatvorlagen in HTML
13
Stylesheets: Formatvorlagen in HTML
Stylesheets: Syntax Groß- und Kleinschreibung wird nicht beachtet. Es wird empfohlen, für HTML-Tags und CSS-Definitionen nur Kleinbuchstaben zu verwenden Stylesheets: Formatvorlagen in HTML
14
Stylesheets: Maßeinheiten
bei Größenangaben können relative oder absolute Maßeinheiten verwendet werden: 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} Stylesheets: Formatvorlagen in HTML
15
Stylesheets: Maßeinheiten
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. 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, Beispiel color : blue; 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, ..) Stylesheets: Formatvorlagen in HTML
18
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) Stylesheets: Formatvorlagen in HTML
19
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 Stylesheets: Formatvorlagen in HTML
20
Stylesheets: Fontangaben
Beispiel: h1 { font-family: arial, helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; font-variant: small-caps; } Stylesheets: Formatvorlagen in HTML
21
Stylesheets: Selektoren
Es gibt 3 CSS- Selektoren (Selectors) HTML-Tags: Definiert Formatierung von HTML-Tags (wie etwa <h1> oder <p>), Beispiel: p {font: bold 12pt times;} Stylesheets: Formatvorlagen in HTML
22
Stylesheets: Selektoren
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: <span class="Einzug1"> <p>Text (Kann aus mehreren Absätzen besten)</p> … </span> Stylesheets: Formatvorlagen in HTML
23
Stylesheets: Selektoren
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"> Stylesheets: Formatvorlagen in HTML
24
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 Stylesheets: Formatvorlagen in HTML
25
Stylesheets: Formatvorlagen in HTML
Stylesheets: Typen Wir unterscheiden 3 Typen von Stylesheets. Inline: Formate innerhalb eines HTML-Elements definieren. Embedded: Formate für ganze Datei, werden im Dateikopf definiert. Linked: Formate in einer externen Datei. 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 Stylesheets: Formatvorlagen in HTML
27
Definieren von Stylesheets
Inline (Direktformatierung einzelner Elemente) Syntax: <HTML-Selector style="Eigenschaft1:Wert; Eigenschaft2:Wert; …;"> </HTML-Selector> Stylesheets: Formatvorlagen in HTML
28
Definieren von Stylesheets
Beispiele 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> Stylesheets: Formatvorlagen in HTML
29
Definieren von Stylesheets
Embedded (Dateiweite Formatierung) <head> <title>Titel der Datei</title> <style type="text/css"> /* ... Stylesheet-Angaben ... */ </style> </head> 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; } 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; 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> Stylesheets: Formatvorlagen in HTML
33
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). 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 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> Stylesheets: Formatvorlagen in HTML
36
Definieren von Stylesheets
Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche Vorlagendateien für verschiedene Ausgabemedien definieren, z.B. Bildschirm Drucker Stylesheets: Formatvorlagen in HTML
37
Definieren von Stylesheets
Formatvorlagen 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> 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; } 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; } 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;} 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; } 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 } 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. Stylesheets: Formatvorlagen in HTML
44
Vererbung von Formatangaben
Beispiel: Eigenschaften vom Grundelement <p> definieren p { font-size:11pt; line-height:14pt; font-family:Arial,Helvetica, Sans-Serif; letter-spacing:0.2mm; word-spacing:0.8mm; } Stylesheets: Formatvorlagen in HTML
45
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} Stylesheets: Formatvorlagen in HTML
46
Vererbung von Formatangaben
Die Absatzklassen small und einzug erben alle Eigenschaften vom Grund- element <p>, wenn diese in der Klassendefinition nicht andere Werte erhalten. 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> 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> Stylesheets: Formatvorlagen in HTML
49
Stylesheets: Formatvorlagen in HTML
Textumrandung (Box) .box { border: solid; border-width: thin; padding: 0.5em; } .redbox { border: solid; border-width: 1px; border-color: red; padding: 0.5em; Stylesheets: Formatvorlagen in HTML
50
Stylesheets: Formatvorlagen in HTML
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; } 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> Stylesheets: Formatvorlagen in HTML
52
Objekte Positionieren und Überlagern
Definition steht im Dateikopf <style type="text/css"> #bild1 { position: absolute; top: 150px; left: 200px; z-index: 1; } Stylesheets: Formatvorlagen in HTML
53
Objekte Positionieren und Überlagern
#bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; } 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> Stylesheets: Formatvorlagen in HTML
55
Objekte Positionieren und Überlagern
Anwendung der Angaben auf Objekte: <div ID="bild1"> <img src="images/kugel.gif" width="136" height="135"> </div> Stylesheets: Formatvorlagen in HTML
56
Objekte Positionieren und Überlagern
Anwendung der Angaben auf Objekte: <div ID="bild2"> <img src="images/ring.gif" width="172" height="120"> </div> Stylesheets: Formatvorlagen in HTML
57
Objekte Positionieren und Überlagern
Anwendung der Angaben auf Objekte: <div ID="text"> Hier steht der Text </div> Stylesheets: Formatvorlagen in HTML
58
Objekte Positionieren und Überlagern
Stylesheets: Formatvorlagen in HTML
59
Weiterführende Online Literatur
Spezifikation vom W3-Consortium Einführung in Stylesheets von Bernhard Friedrichs HTML-Kurs von Stefan Münz Stylesheets: Formatvorlagen in HTML
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.