HTML: Text und Textstruktur mit CSS gestalten

Transkript

1 Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker 23. Juni 2004

2 Schriftarten und generische Schriftfamilien 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, monospace (feste Laufweite) Sollte keine der angegebenen Schriften vorhanden sein, nutzt der Client die Schrift, die in seinen Einstellungen für die entsprechende generische Schriftfamilie gewählt ist

3 Häufige Web-Schriften The quick brown Fox Arial sans-serif The quick brown Fox Verdana sans-serif The quick brown Fox The quick brown Fox Tahoma Times sans-serif serif The quick brown Courier monospace Fox

4 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 "Absolute" Größenangaben gibt es praktisch nicht, da z.b. cm und Inch in Pixel umgerechnet werden müssen, das Umrechnungsverhältnis (Pixel je Inch, dot per inch, dpi) je nach Betriebssystem und Software unterschiedlich ist, Kalibrierung auf tatsächliche Monitorgröße nicht stattfindet, Pixelangaben aufgrund unterschiedlicher Monitorauflösungen und -größen ebenfalls relativ sind

5 Weitere Schriftstile color - Textfarbe, Angabe hexadezimal - color:# als rgb-schema - color:rgb(0,51,102) Farbnamen - color:blue font-weight:bold oder normal - "fett" font-style: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 diesselben Maßeinheiten möglich

6 Absatzformatierung margin (und die Derivate margin-left, -top, -right und -bottom) bestimmen den Außenabstand, Beispiel: margin-top:10px;margin-bottom:10px Stoßen zwei Elemente mit Außenabstand aufeinander, werden die Abstände miteinander verrechnet mit padding-left bzw. padding-right lassen sich Absatzelemente (und andere Blockformate) einrücken text-indent bestimmt das Verhalten der ersten Zeile: text-indent:10px - erste Zeile rückt 10 Pixel ein text-indent:-8px - erste Zeile rückt 8 Pixel aus

7 Listen Eine nummerierte (ol, ordered list) oder nicht nummerierte Liste (ul, unordered list) kann per CSS gestaltet werden: pauschal für alle Listenblöcke über ul bzw. ol für jeden Listenpunkt einzeln über li (list item, Listenpunkt) Der linke Standardeinzug der Listenpunkte von üblicherweise 30px - bezogen auf den Textblockrand - kann über padding-left verändert werden

8 list-style-type Mit list-style-type lassen sich die Listenpunkte (bei ul) bzw. Aufzählungszeichen (bei ol) bestimmen Mögliche Werte bei ul: list-style-type:disc - "Bullets" list-style-type:circle - Kreis list-style-type:square - Quadrat list-style-type:none Mögliche Werte bei ol: list-style-type:decimal - 1,2,3,4 usw. list-style-type:upper-roman - I.,II.,III.,IV. usw. list-style-type:lower-roman - i.,ii.,iii.,iv. usw. list-style-type:upper-alpha - A,B,C,D usw. list-style-type:lower-alpha - a,b,c,d usw.

9 list-style-image Mit list-style-image kann eine eigene Grafikdatei als Listenzeichen verwendet werden. Beispiel für eine nicht nummerierte Liste, als zentrales Format definiert: ul {list-style-image:url(bilder/mybullet.gif)} Die referenzierte Grafik muss sich in einem Web-üblichen Grafikformat (.jpg,.gif,.png) befinden Für den angegebenen Pfad gelten dieselben Verweisregeln wie bei Hyperlinks und Bildern. Bei einem relativen Pfad ist das Ausgangsdokument die Datei, in der der CSS-Stil notiert ist (z.b. ein externes Stylesheet)

10 list-style-position Mit list-style-position kann bestimmt werden, ob das Listenzeichen vor dem Textblock steht, oder am Anfang der ersten Zeile mit Textumfluss Mögliche Werte: list-style-position:inside... Listenzeichen mit Textumfluss innerhalb list-style-position:outside... Listenzeichen ausgerückt