Downloadbereich Informatik


HTML

CSS - Style-Sheet-Angaben

- 3 -


Style Sheet Angaben


1. Schriftformatierung

font-family: Avantgarde, Arial; in der angegebenen Reihenfolge wird eine Schriftfamilie gesucht.

font-style: italic [normal];

font-variant: small-caps [normal]; Kapitälchen

font-size: 24pt [150% | xx-small | x-small | medium | large | xx-large | larger | smaller ] ; bei Prozent-Angaben ist der Bezug die normale Schriftgröße

font: 12pt/14pt; Schriftgröße 12 pt, Zeilenhöhe 14 pt

font-weight: bold [bolder | lighter ]; feinere Abstufungen sind mit Zahlenangabe zwischen 100 (extradünn) und 900 (extrafett) möglich

font: Arial italic small-caps 14 pt; ist eine Kurzfassung der Eigenschaften, getrennt durch Leerzeichen

word-spacing: 8mm; (wird von den Browsern noch nicht interpretiert)

letter-spacing: 3em; der Abstand zwischen den Buchstaben wird auf die elementeigene Buchstabenhöhe bezogen. Angaben in pt und mm sind auch möglich.

text-decoration: underline [overline | line-through | blink | none]; blink und overline werden nicht von allen Browsern interpretiert

text-transform: capitalize [uppercase | lowercase | none]; Wortanfänge als Großbuchstaben, usw.

color: #CC0000; Textvordergrundfarbe



2. Abstände, Ränder, Ausrichtung

Sinnvoll sind Angaben hierzu für alle HTML-Tags, die einen eigenen Absatz erzeugen bzw. einen Block bilden wie <hx>, <p>, <blockquote>, <pre>, <div>, <table>, <tr>, <td>, <th>.

Rand bzw. Abstand bedeutet den Rand/Abstand des aktuellen Elements zu seinem „logischen“ Eltern – Element (ggf. das vorhergende Element). Mit negativen Werten kann ein Überlappen erreicht werden. Die Reaktion auf die Folge von margin-bottom und margin-top ist browserabhängig.

margin: 2cm; Rand rundherum 2 cm

margin-top [-left | -right | -bottom]: 2cm; sind mögliche Angaben zu Rand/Abstand

text-indent: 7.5mm; Erstzeileneinzug; mit einem negativen Wert wird ein Absatz eingerückt.

line-height: 16pt; Festlegung der Zeilenhöhe; kann bei Grafiken im Text Probleme ergeben.

text-align: left [center | right | justify]; richtet Text aus.



3. Rahmen und Innenabstände


border-style: none [dotted | dashed | solid | double | groove | ridge | inset | outset]; legt den Rahmentyp fest: kein Rahmen, gepunktet, gestrichelt, durchgezogen, doppelt durchgezogen, 3 – D – Effekte

zu border-style Angaben kann noch kommen:

border-width: thin [medium | thick | xcm] ; für x Zahlenwert setzen

border-color: red; legt die Rahmenfarbe fest

Auch bei border ist eine Kurzfassung der Angaben möglich (s. font).


padding: 2cm; bestimmt einen einheitlichen Innenabstand zwischen den 4 Elementgrenzen und dem Elementinhalt.

padding-top [-left | -right | -bottom]: 2cm; stellt einzelne Abstände ein.



4. Hintergrundfarben, Hintergrundbilder


background-color: red;

background-image: url([Dateiname]); stellt eine Grafik als Wallpaper in das Element.

background-position: 1cm 2cm [top | center | middle | bottom | left | right]; legt die Position der linken oberen Ecke einer Grafik fest (nur IE)


5. Listen und Tabellen


Style Sheet Angaben sind hier vor allem dann von Vorteil, wenn sie in einer eigenen Datei abgelegt sind. Es gibt nur wenige Möglichkeiten, HTML - Tags zu erweitern.

list-style-type:circle[ sqare | none | disc | upper-alpha | lower-alpha | upper-roman | lower-roman | decimal];

Beisp.: ul.rund {ul list-style-type:circle}

Beisp.: ol.numerisch {ol list-style-type:decimal}

list-style-position: inside [outside]; eingerückt (nur mit CSS möglich); ausgerückt (Voreinstellung)

list-style-image: url([Dateiname]); eigenes Grafiksymbol als Aufzählungszeichen bei Aufzählungslisten

Beisp.: ul {list-style-image:url(point.gif);}

Tabellenüberschrift:

caption-side: top [ topleft | topright | bottom | bottomleft | bottomright]; setzt die Überschrift entsprechend.

Beispiel, auch für eine Style Sheet Definition für ein HTML-Tag im Text:

<table border> <caption style=“caption-side:top“> Tabellen&uuml;berschrift</caption>


6. Elemente positionieren

Mit relativen und absoluten Positionsangaben können Elemente genau kontrolliert werden. Im wesentlichen decken diese Style Sheet Angaben die Möglichkeiten der Layer ab, entsprechen jedoch im Gegensatz zu den Layern dem Standard. Die Positionierung ist eine wichtige Voraussetzung für viele Anwendungsfälle von DHTML.

Ein Beispiel für die Style Sheet Definition im HTML-Tag:

<div style=“position: absolute; top:100px;left:45px;width:300px“>Inhalt</div>

position: absolute [ fixed | relative | static]; absolute Positionierung gemessen am Fensterrand, scrollbar

fixed: zunächst wie absolut, aber nicht scrollbar (wird z.Zt. noch nicht von Browsern interpretiert)

relativ: gemessen am Vorgänger – Element

static : (Normaleinstellung)

Die Angabe position: macht nur Sinn, wenn eine Angabe zur Starposition vorausgeht (z.B. top oder left)

Angaben zur Positionierung sollten vorläufig nur auf die HTML-Tags <div>...</div> und <span> ...</span> angewendet werden. Andere Elemente können in diesen Tags eingeschlossen werden.

Die folgenden Attribute können zusammen mit position: verwendet werden, sind aber auch im Fließtext erlaubt. Beisp.:

div.Verweise {min-width:6cm;}

min-width: Mindestbreite als numerische Angabe

max-width: Maximalbreite kann erzwungen werden (nicht im IE und Netscape möglich)

height: gibt die Höhe eines Elements an (Netscape nicht möglich)


Textumfluss

Beisp.:

<div style=“float:left; width=100px;“> Kurztext </div>

<p>Langer Text, der rechts um den Kurztext flie&szlig;t</p>

Mit float: wird bestimmt, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:

float: left [ right | none];

Damit die Angabe in den aktuellen Browsern funktioniert, muss zumindest noch eine Angabe zu width: gemacht werden.

Das folgende Beispiel bricht den Textumfluss auf der rechten Seite ab:

<p style= “clear:left“>

clear: right [both | none]; both erzwingt in jedem Fall den Abbruch; none ist Normaleinstellung

Seite 3 von 3 script4.odt