![Page 1: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/1.jpg)
Layout mit CSS
Iftikhar Ahmad Datum: 2.Juni.2005
![Page 2: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/2.jpg)
Inhaltsverzeichnis
Einführung Layout mit CSS
Schriften Farben Box Rahmen
CSS2 versus CSS1
![Page 3: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/3.jpg)
Einführung
Cascading Style Sheets sind eine Ergänzung zu HTML.
eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle
in einem separaten File (z.B. Style.css) oder direkt in die HTML-Seite integriert werden
CSS sind wie HTMLs reine Text-Dokumente Definition des Layouts für mehrere Seiten
gleichzeitig
![Page 4: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/4.jpg)
Schriften Mehrere Schriftarten möglich
Schriftarten werden mit font-family definiert
Es ist üblich, eine Aufzählung mehrerer Schriften anzugeben, für den Fall, dass bestimmte Schriften nicht auf dem System des Users vorhanden ist. Beispiel:font-family: Verdana,Helvetica,Arial,sans-serif;
Zuletzt sollte immer eine "generische" Schriftfamilie stehen, wie sans-serif (serifenlose Schrift), serif,cursiv, monospace (feste Laufweite)
![Page 5: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/5.jpg)
Häufige Web-Schriften
![Page 6: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/6.jpg)
Schriftgröße
CSS-Eigenschaft font-size Angabe (u.a.) in:
Bildschirmpixel, Bsp: font-size:12px Punkt (1/72 Inch), Bsp: font-size:10pt in (inch), cm, mm "relativ" zur Schriftgröße des Elternelements: Prozentwerte %, em, ex
![Page 7: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/7.jpg)
Weitere Schriftstile
color - Textfarbe, Angabe hexadezimal - color:#003366 als rgb-Schema - color:rgb(0,51,102) Farbnamen - color:blue
font-weight (Schriftbreite): bold oder normal - "fett" font-style (Schriftstil): italics oder normal - "kursiv" text-decoration:underline oder none - "unterstrichen" font-variant:small-caps oder normal - "Kapitälchen" line-height - Zeilenabstand in Abhängigkeit der
Angabe in font-size, es sind dieselben Maßeinheiten möglich
![Page 8: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/8.jpg)
Beispiele
<html><head>
<style type="text/css">h3 {font-family: times; font-style: italic; font-size: 150%}p {font-family: courier ;font-style: normal; font-size:19pt; font-variant: small-caps;font-weight: bold}</style>
</head><body>
<h3>Manchmal glaube ich, wir sind keine Familie, sondern ein biologisches Experiment. (AL Bundy)</h3><p>Viele Leute müssen mit ihrer Enttäuschung leben. Aber ich muss mit meiner schlafen (Al Bundy)</p>…
![Page 9: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/9.jpg)
Farben
In CSS gibt es die 16 vordefinierten (VGA-) Farben:
aqua black blue fuchsia gray green lime maroon navy olive red white silver yellow
teal purple Beliebige Farben können gesetzt werden durch:
rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)
oder hexadezimal:#FF0000, #00FF00, #0000FF
![Page 10: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/10.jpg)
Beispiele<html><head>
<style type="text/css">h1 {color: #00ff00}h2 {color: rgb(0,0,255)}</style>
</head>
<body><h1>Zuerst hatten wir kein Glück und dann kam auch noch Pech dazu. (J.Wegmann)</h1><h2>Geliebt zu werden kann eine Strafe sein. Nicht wissen, ob man geliebt wird, ist Folter. (Robert Lembke) </h2>…
![Page 11: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/11.jpg)
BOX
Alle Dokument-Elemente können eine rechteckige Box (element box) erzeugen.
![Page 12: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/12.jpg)
Box-Modell
![Page 13: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/13.jpg)
Box Die Größe dieser Box kann festgelegt werden
durch die Properties height und width. Drei verschiedene Abstandsarten
Außenabstand (margin) Wird im Stil des umgebenden Elements ausgefüllt
Rahmen (border) Kann eigenen Stil haben, umrahmt das Element
Innenabstand (padding) Definiert Abstand zwischen Inhalt und Rand des Elements Wird im Stil des Elements ausgefüllt
![Page 14: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/14.jpg)
Box
alle Werte können in px, cm, % , … angegeben wird nur ein Wert notiert: → gilt für alle vier Seiten
(top, bottom, right, left) Werden zwei Werte notiert: →1.Wert gilt für top,
bottom; →2.Wert gilt für right, left Werden drei Werte notiert: →1.Wert gilt für top;
→2.Wert gilt für right, left; →3.Wert gilt dann für bottom
Werden vier Werte notiert: →1.Wert gilt für top; →2.Wert gilt für right; →3.Wert gilt für bottom; → 4.Wert gilt für left
![Page 15: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/15.jpg)
Margin
Die Ränder einer Box können definiert werden durch:
margin-top margin-bottom margin-left margin-right
![Page 16: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/16.jpg)
Beispiele<html><head>
<style type="text/css">p.bottom {margin-bottom:7cm;}p.margin {margin-left: 2cm;}</style>
</head><body>
<p class="bottom">Wir duerfen jetzt nur nicht den Sand in den Kopf stecken. (Lothar Matthaeus)</p><p class="margin">Zwei Chancen, ein Tor - das nenne ich hundertprozentige Chancenauswertung. (Roland Wohlfahrt)</p>
…
![Page 17: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/17.jpg)
Border
Der Rand wird mit den Properties definiert: border-color border-style border-width border-left (-right, -top, -bottom), border
![Page 18: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/18.jpg)
Padding
Der Rand zwischen dem eigentlichen (Text)-Inhalt und dem Rahmen (border) wird definiert durch die Properties definiert: padding-top padding-bottom padding-right padding-left padding
![Page 19: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/19.jpg)
Beispiele…<style type="text/css">td {padding-left: 2cm}td.padding {padding: 0.5cm 2.5cm}</style>
</head><body>
<table border="1"><tr><td>Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Brecht)</td></tr></table>
<br>
<table border="1"><tr><td class=„padding">Eine glückliche Ehe: eine Ehe, in der die Frau ein bißchen blind und der Mann ein bißchen taub ist. (G.Dean)</td></tr></table>…
![Page 20: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/20.jpg)
Rahmen
Sinnvoll für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden (h1,..,p,div, table)
border-width border-color border-style
![Page 21: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/21.jpg)
Rahmentypen
![Page 22: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/22.jpg)
Beispiele<html><head>
<style type="text/css">p.dotted {border-style: dotted}p.dashed {border-style: dashed}p.solid {border-style: solid; border-color: #0000ff; border-left-width: 15px}
</style></head><body>
<p class="dotted">Lass dir unsere Kinder als Lehre dienen, Peg! Es kann nichts Gutes beim Sex rauskommen! (Al Bundy)</p><p class="dashed">Auf den Alkohol - die Ursache und die Loesung aller Probleme! (Homer Simpson)</p><p class="solid">Und wieviel kostet das Gratiswochenende? (Homer S.)</p>…
![Page 23: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/23.jpg)
CSS2 versus CSS1
CSS Sprache Visuelles Formatierungsmodell
Unterstützung von medienspezifischen Style Sheets z. B. für Print-Layout, künstliche Sprachausgabe
Positionierung von Elementinhalten Fonts sind downloadfähig Tabellenlayout u.a.m.
CS
S1
(1
99
6)
CS
S2
(1
99
8)
![Page 24: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/24.jpg)
CSS2 versus CSS1
CSS Version 1 (1996) CSS Version 2 (1998)Funktioniert ab Netscape 4.x und Internet Explorer 3.0Unterklassen können erzeugt werden Grundfunktionen der Formatierung von ObjektenDetaillierte Beschreibung von Objekten möglich
Funktioniert ab Netscape 4.x und Internet Explorer 4.0 aber nur teilweiseErweiterungen von CSS1Erstellen spezieller Layouts für verschiedene AusgabemedienIntegration von AudioGrafik-, Bildeffekte, Filter,usw.
![Page 25: Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005](https://reader035.vdocuments.pub/reader035/viewer/2022070310/55204d7349795902118c7a7e/html5/thumbnails/25.jpg)
Endspurt
Danke für Ihre Aufmerksamkeit!
Viel Spaß bei den Übungen!