Stylesheets: Formatvorlagen in HTML

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

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

Lösung: Verwendung von Stylesheets Stylesheets: Formatvorlagen in HTML

Vorteile Trennung von Inhalt und Formatanweisungen Änderungen der Formate an einer zentralen Stelle Gleiche Darstellung der Dokumente in allen Browsern 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> Stylesheets: Formatvorlagen in HTML

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

<TABLE border="1"> <TR> <TD>Berlin</TD> <TD>Hamburg</TD> <TD>München</TD> <TD>Köln</TD> </TR> </TABLE> Stylesheets: Formatvorlagen in HTML

Stylesheets: Arbeitsschritte
Bei der Arbeit mit Stylesheets sind 2 Schritte erforderlich: Stylesheets definieren Formate zuweisen. 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 Stylesheets: Formatvorlagen in HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Definieren von Stylesheets
Inline (Direktformatierung einzelner Elemente) Syntax: <HTML-Selector style="Eigenschaft1:Wert; Eigenschaft2:Wert; …;"> </HTML-Selector> Stylesheets: Formatvorlagen in HTML

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

Embedded (Dateiweite Formatierung) <head> <title>Titel der Datei</title> <style type="text/css"> /* ... Stylesheet-Angaben ... */ </style> </head> Stylesheets: Formatvorlagen in HTML

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

h2 { font-size:16pt; color:darkblue; font-family:Helvetica,Arial; font-style:bold;} h3 { font-size:14pt; color:darkblue; Stylesheets: Formatvorlagen in HTML

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

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

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

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

Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche Vorlagendateien für verschiedene Ausgabemedien definieren, z.B. Bildschirm Drucker Stylesheets: Formatvorlagen in HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Absätze mit Textumrandung
<p "class = box"> Text </p> <p "class = redbox"> Text </p> <p "class = linker-rand"> Text </p> 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; } Stylesheets: Formatvorlagen in HTML

#bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; } Stylesheets: Formatvorlagen in HTML

#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

Anwendung der Angaben auf Objekte: <div ID="bild1"> <img src="images/kugel.gif" width="136" height="135"> </div> Stylesheets: Formatvorlagen in HTML

Anwendung der Angaben auf Objekte: <div ID="bild2"> <img src="images/ring.gif" width="172" height="120"> </div> Stylesheets: Formatvorlagen in HTML

Anwendung der Angaben auf Objekte: <div ID="text"> Hier steht der Text </div> Stylesheets: Formatvorlagen in HTML

Stylesheets: Formatvorlagen in HTML

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

Stylesheets: Formatvorlagen in HTML

Ähnliche Präsentationen

Präsentation zum Thema: "Stylesheets: Formatvorlagen in HTML"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback

Anmelden

Anmeldung über soziales Netzwerk:

Stylesheets: Formatvorlagen in HTML

Ähnliche Präsentationen

Präsentation zum Thema: "Stylesheets: Formatvorlagen in HTML"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback