layout mit css iftikhar ahmad datum: 2.juni.2005
Post on 05-Apr-2015
117 Views
Preview:
TRANSCRIPT
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
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>
…
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
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>…
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!
top related