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:# 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 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} Manchmal glaube ich, wir sind keine Familie, sondern ein biologisches Experiment. (AL Bundy) Viele Leute müssen mit ihrer Enttäuschung leben. Aber ich muss mit meiner schlafen (Al Bundy) …

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 h1 {color: #00ff00} h2 {color: rgb(0,0,255)} Zuerst hatten wir kein Glück und dann kam auch noch Pech dazu. (J.Wegmann) Geliebt zu werden kann eine Strafe sein. Nicht wissen, ob man geliebt wird, ist Folter. (Robert Lembke) …

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

Beispiele p.bottom {margin-bottom:7cm;} p.margin {margin-left: 2cm;} Wir duerfen jetzt nur nicht den Sand in den Kopf stecken. (Lothar Matthaeus) Zwei Chancen, ein Tor - das nenne ich hundertprozentige Chancenauswertung. (Roland Wohlfahrt) …

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 … td {padding-left: 2cm} td.padding {padding: 0.5cm 2.5cm} Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Brecht) Eine glückliche Ehe: eine Ehe, in der die Frau ein bißchen blind und der Mann ein bißchen taub ist. (G.Dean) …

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

Beispiele p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid; border-color: #0000ff; border-left-width: 15px} Lass dir unsere Kinder als Lehre dienen, Peg! Es kann nichts Gutes beim Sex rauskommen! (Al Bundy) Auf den Alkohol - die Ursache und die Loesung aller Probleme! (Homer Simpson) Und wieviel kostet das Gratiswochenende? (Homer S.) …

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. CSS1 (1996) CSS2 (1998)

CSS2 versus CSS1 CSS Version 1 (1996)CSS Version 2 (1998) Funktioniert ab Netscape 4.x und Internet Explorer 3.0 Unterklassen können erzeugt werden Grundfunktionen der Formatierung von Objekten Detaillierte Beschreibung von Objekten möglich Funktioniert ab Netscape 4.x und Internet Explorer 4.0 aber nur teilweise Erweiterungen von CSS1 Erstellen spezieller Layouts für verschiedene Ausgabemedien Integration von Audio Grafik-, Bildeffekte, Filter,usw.

Endspurt Danke für Ihre Aufmerksamkeit! Viel Spaß bei den Übungen!