12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von...

12.09.2002 Stylesheets: Formatvorlagen in HTML

Stylesheets in HTML

Webdokumente mit Hilfe von

Formatvorlagen gestalten.

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

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

Wozu Stylesheets verwenden?

Lösung: Verwendung von Stylesheets

Wozu Stylesheets verwenden?Vorteile Trennung von Inhalt und

Formatanweisungen Änderungen der Formate an einer

zentralen Stelle Gleiche Darstellung der Dokumente in

allen Browsern

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>

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:

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

Stylesheets: Arbeitsschritte Bei der Arbeit mit Stylesheets sind 2

Schritte erforderlich: Stylesheets definieren Formate zuweisen.

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: Aktuelle Version Version CSS3 ist noch in

Bearbeitung Neue Features, u.a. :

Skalierbare Vektorgrafiken

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: Syntax Groß- und Kleinschreibung wird

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

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}

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.

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;

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

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

Stylesheets: FontangabenBeispiel:h1 {

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

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

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>

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

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

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.

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

Definieren von StylesheetsInline

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

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

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>

Definieren von StylesheetsEmbedded

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

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

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

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>

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

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

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>

Formatvorlagen für Unterschiedliche Medien: Man kann unterschiedliche

Vorlagendateien fürverschiedene Ausgabemedien definieren,

z.B. Bildschirm Drucker

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>

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

Syntax der Formatdefinitionen

Element.class { Eigenschaft: Wert; .......}, z.B:p.klein { font-size:8pt; color:black; }

.class { Eigenschaft: Wert; .......}, z.B:.rot { Color : red; }

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

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

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:

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.

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

Vererbung von FormatangabenDanach zusätzliche Klassen mitteilweise anderen Eigenschaftenp.small { font-size: 9pt; line-height: 12pt; }p.einzug { margin-left: 1cm margin-right: 1cm}

Vererbung von FormatangabenDie Absatzklassen small und einzug erben alle Eigenschaften vom

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

Zuweisung der Vorlagen Absatzformate:

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>

Textumrandung (Box) .box {

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

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

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

Absätze mit Textumrandung

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

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

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>

Objekte Positionieren und ÜberlagernAnwendung der Angaben auf

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

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

Objekte Positionieren und ÜberlagernAnwendung der Angaben auf

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

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

Objekte Positionieren und Überlagern

Anwendung der Angaben auf Objekte:

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

Objekte Positionieren und Überlagern

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

12.09.2002 Stylesheets: Formatvorlagen in HTML1 Stylesheets in HTML Webdokumente mit Hilfe von...

Documents

QUELLEN 50-50/14328.html 50-50/14328.html

Autor: Michael Puff · 2011-03-03 · 2 PHP und HTML 2 PHP und HTML PHP Code wird mit

HTML 5 Css 3

CSS Grundlagen Inhalt - esfl.bplaced.netesfl.bplaced.net/uebungen/thema_1/CSS-Grundlagen.pdfWas ist CSS? Mit Hilfe von CSS (Cascading Stylesheets) wird das Design einer HTML Website

Spaltensatz Formatvorlagen - Excel und Word Kenntnisse ... Format… · Web viewZudem gibt es seit WORD ... Anscheinend ohne eigenes Zutun wächst die Anzahl der angezeigten Formatvorlagen

HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)

Beyond HTML Internet Briefing

Dynamisches HTML - Praktische Anwendungsbeispiele

Layout-Modelle für Webseiten und Formulare Ein Überblick über Cascading Stylesheets und JGoodies

Aula_001 - HTML e JavaScript

Verwendung von VMware Horizon View HTML Access - … · Verwendung von VMware Horizon View HTML Access Das vorliegende Handbuch, Verwendung von VMware Horizon View HTML Access, stellt

HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim

CSS –Cascading Stylesheets€¦ · CSS –Einführung 2}CSS: Cascading Style Sheets}Bestimmt die Darstellung von HTML-Elementen}CSS löste ein Problem} HTML war ursprünglich nicht

Formatvorlagen Dokumentenvorlagen Formulare · PDF fileÜbungsblätter zu Word, Vorlagen und Textbausteine Seite 2 W. Grasser, Stand April 2012 Formatvorlagen Formatvorlagen gibt es

Lektionenplanungtaxi.ifoa.ch/Deutsch/Uebungen/Word/07-Formatvorlagen u… · Web view2015. 4. 18. · Repetition Word: Formatvorlagen. Öffnen Sie das Dokument „Layout Kino-Highlights.doc“

Anleitung zum Erstellen von Formatvorlagen in Word1 · 1 Anleitung zum Erstellen von Formatvorlagen in Word1 (Inkl. Struktur der Arbeit und Kapitelnummerierung) Deckblatt Inhaltsverzeichnis

HTML Webpublishing

HTML 5 Formulare erstellen und verarbeiten - eberhart.mediaeberhart.media/pdfs/html/4.html5.formular.pdf · Eberhart HTML5 – Formulare 1 HTML 5 Formulare erstellen und verarbeiten

Syntactically Awesome Stylesheets mit Sass

HTML, XHTML & CSS Der Meisterkurs – … · 2009-04-29 · Ein externes Stylesheet erstellen 128 Externe Stylesheets verknüpfen 129 Alternative Stylesheets