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.


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


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


4

Wozu Stylesheets verwenden?

Lösung: Verwendung von Stylesheets


5

Wozu Stylesheets verwenden?Vorteile Trennung von Inhalt und

Formatanweisungen Änderungen der Formate an einer

zentralen Stelle Gleiche Darstellung der Dokumente in

allen Browsern


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>


7


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:


8


<TABLE border="1"> <TR> <TD>Berlin</TD> <TD>Hamburg</TD> <TD>München</TD> <TD>Köln</TD> </TR> </TABLE>


9

Stylesheets: Arbeitsschritte Bei der Arbeit mit Stylesheets sind 2

Schritte erforderlich: Stylesheets definieren Formate zuweisen.


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


11

Stylesheets: Aktuelle Version Version CSS3 ist noch in

Bearbeitung Neue Features, u.a. :

Skalierbare Vektorgrafiken


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;

}


13

Stylesheets: Syntax Groß- und Kleinschreibung wird

nicht beachtet. Es wird empfohlen, für HTML-Tags und CSS-Definitionen nur Kleinbuchstaben zu verwenden


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}


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.


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;


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, ..)


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)


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


20

Stylesheets: FontangabenBeispiel:h1 {

font-family: arial, helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; font-variant: small-caps;}


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;}


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>


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">


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


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.


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


27

Definieren von StylesheetsInline

(Direktformatierung einzelner Elemente)Syntax: <HTML-Selector style="Eigenschaft1:Wert;

Eigenschaft2:Wert; …;"></HTML-Selector>


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>


29

Definieren von StylesheetsEmbedded

(Dateiweite Formatierung)<head> <title>Titel der Datei</title> <style type="text/css"> /* ... Stylesheet-Angaben ... */ </style> </head>


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; }


31


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;}


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>


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).


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


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>


36


Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche

Vorlagendateien fürverschiedene Ausgabemedien definieren,

z.B. Bildschirm Drucker


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>


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; }


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; }


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;}


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; }


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 }


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.


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; }


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}


46

Vererbung von FormatangabenDie Absatzklassen small und einzug erben alle Eigenschaften vom

Grund-element <p>, wenn diese in der Klassendefinition nicht andere Werteerhalten.


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>


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>


49

Textumrandung (Box) .box {

border: solid; border-width: thin; padding: 0.5em; }

.redbox { border: solid; border-width: 1px; border-color: red; padding: 0.5em; }


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; }


51

Absätze mit Textumrandung

<p "class = box"> Text </p><p "class = redbox"> Text </p><p "class = linker-rand"> Text </p>


52

Objekte Positionieren und ÜberlagernDefinition steht im Dateikopf<style type="text/css">#bild1 { position: absolute; top: 150px; left: 200px; z-index: 1; }


53

Objekte Positionieren und Überlagern #bild2 { position: absolute; top: 200px; left: 240px; z-index: 2; }


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>


55

Objekte Positionieren und ÜberlagernAnwendung der Angaben auf

Objekte:<div ID="bild1"><img src="images/kugel.gif"

width="136" height="135"></div>


56

Objekte Positionieren und ÜberlagernAnwendung der Angaben auf

Objekte:<div ID="bild2"><img src="images/ring.gif"

width="172" height="120"></div>


57

Objekte Positionieren und Überlagern

Anwendung der Angaben auf Objekte:

<div ID="text">Hier steht der Text</div>


58

Objekte Positionieren und Überlagern


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

http://www.w3.org/TR/REC-CSS2/cover.html#minitoc

http://www.w3.org/TR/REC-CSS2/cover.html#minitoc

http://www.hsguide.com/guides/stylesheets/

http://www.rz.uni-hohenheim.de/www/html/selfhtml/css/index.htm












12.09.2002 stylesheets: formatvorlagen in html1 stylesheets in html webdokumente mit hilfe von...

Documents