Stylesheets: Formatvorlagen in HTML Stylesheets in HTML Webdokumente mit Hilfe von Formatvorlagen gestalten. 12.09.2002 Stylesheets: Formatvorlagen in HTML
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 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
Wozu Stylesheets verwenden? Lösung: Verwendung von Stylesheets 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
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
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
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
Stylesheets: Arbeitsschritte Bei der Arbeit mit Stylesheets sind 2 Schritte erforderlich: Stylesheets definieren Formate zuweisen. 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
Stylesheets: Aktuelle Version Version CSS3 ist noch in Bearbeitung Neue Features, u.a. : Skalierbare Vektorgrafiken 12.09.2002 Stylesheets: Formatvorlagen in HTML
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; } 12.09.2002 Stylesheets: Formatvorlagen in HTML
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 12.09.2002 Stylesheets: Formatvorlagen in HTML
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} 12.09.2002 Stylesheets: Formatvorlagen in HTML
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. 12.09.2002 Stylesheets: Formatvorlagen in HTML
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; 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
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) 12.09.2002 Stylesheets: Formatvorlagen in HTML
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 12.09.2002 Stylesheets: Formatvorlagen in HTML
Stylesheets: Fontangaben Beispiel: 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
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;} 12.09.2002 Stylesheets: Formatvorlagen in HTML
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> 12.09.2002 Stylesheets: Formatvorlagen in HTML
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"> 12.09.2002 Stylesheets: Formatvorlagen in HTML
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 12.09.2002 Stylesheets: Formatvorlagen in HTML
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. 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
Definieren von Stylesheets Inline (Direktformatierung einzelner Elemente) Syntax: <HTML-Selector style="Eigenschaft1:Wert; Eigenschaft2:Wert; …;"> </HTML-Selector> 12.09.2002 Stylesheets: Formatvorlagen in HTML
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> 12.09.2002 Stylesheets: Formatvorlagen in HTML
Definieren von Stylesheets Embedded (Dateiweite Formatierung) <head> <title>Titel der Datei</title> <style type="text/css"> /* ... Stylesheet-Angaben ... */ </style> </head> 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
Definieren von Stylesheets h2 { font-size:16pt; color:darkblue; font-family:Helvetica,Arial; font-style:bold;} h3 { font-size:14pt; color:darkblue; 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
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). 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
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
Definieren von Stylesheets Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche Vorlagendateien für verschiedene Ausgabemedien definieren, z.B. Bildschirm Drucker 12.09.2002 Stylesheets: Formatvorlagen in HTML
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> 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
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
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
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
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
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
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; } 12.09.2002 Stylesheets: Formatvorlagen in HTML
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} 12.09.2002 Stylesheets: Formatvorlagen in HTML
Vererbung von Formatangaben Die Absatzklassen small und einzug erben alle Eigenschaften vom Grund- element <p>, wenn diese in der Klassendefinition nicht andere Werte erhalten. 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
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
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; 12.09.2002 Stylesheets: Formatvorlagen in HTML
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; } 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
Objekte Positionieren und Überlagern Definition steht im Dateikopf <style type="text/css"> #bild1 { position: absolute; top: 150px; left: 200px; z-index: 1; } 12.09.2002 Stylesheets: Formatvorlagen in HTML
Objekte Positionieren und Überlagern #bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; } 12.09.2002 Stylesheets: Formatvorlagen in HTML
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
Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte: <div ID="bild1"> <img src="images/kugel.gif" width="136" height="135"> </div> 12.09.2002 Stylesheets: Formatvorlagen in HTML
Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte: <div ID="bild2"> <img src="images/ring.gif" width="172" height="120"> </div> 12.09.2002 Stylesheets: Formatvorlagen in HTML
Objekte Positionieren und Überlagern Anwendung der Angaben auf Objekte: <div ID="text"> Hier steht der Text </div> 12.09.2002 Stylesheets: Formatvorlagen in HTML
Objekte Positionieren und Überlagern 12.09.2002 Stylesheets: Formatvorlagen in HTML
Weiterführende Online Literatur Spezifikation vom W3-Consortium http://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ünz http://www.rz.uni-hohenheim.de/www/html/selfhtml/css/index.htm 12.09.2002 Stylesheets: Formatvorlagen in HTML