layout mit css iftikhar ahmad datum: 2.juni.2005

Layout mit CSS

Iftikhar Ahmad Datum: 2.Juni.2005

Inhaltsverzeichnis

Einführung Layout mit CSS

Schriften Farben Box Rahmen

CSS2 versus CSS1

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

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)

Häufige Web-Schriften

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

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

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

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

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

BOX

Alle Dokument-Elemente können eine rechteckige Box (element box) erzeugen.

Box-Modell

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

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

Margin

Die Ränder einer Box können definiert werden durch:

margin-top margin-bottom margin-left margin-right

Border

Der Rand wird mit den Properties definiert: border-color border-style border-width border-left (-right, -top, -bottom), border

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

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

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

Rahmentypen

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)

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.

Endspurt

Danke für Ihre Aufmerksamkeit!

Viel Spaß bei den Übungen!

layout mit css iftikhar ahmad datum: 2.juni.2005

Documents