SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
Die Style-Sheet-Angaben für Listen beziehen sich speziell auf die HTML-Tags <ul> (
Aufzählungslisten) und <ol> ( numerierte Listen).
Sie können mit Hilfe von Style-Sheet-Angaben die gleichen Formatierungen erzwingen, wie es in den HTML-Tags <ul> und <ol> auch mit Hilfe von zusätzlichen Attributen möglich ist. Von Vorteil gegenüber der Direktangabe im HTML-Tag sind solche Style-Sheet-Angaben vor allem dann, wenn Sie sie in einer separaten Datei notieren, die Sie dann in beliebigen HTML-Dateien einbinden können (siehe auch: Style-Sheets in separater Datei definieren). Darüber hinaus stehen einige erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.
Die Style-Sheet-Angaben zu Tabellen beziehen sich auf Tabellenmerkmale, die sich nicht durch andere Style-Sheet-Angaben, etwa solchen zu Rahmen und Innenabständen, beschreiben lassen.
 
|
Darstellungstyp (list-style-type)
Anzeigebeispiel: So sieht's aus
Für Auzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für numerierte Liste können Sie die Darstellung der Durchnumerierung beeinflussen.
<style type="text/css">
ul.rund { ul list-style-type:circle }
ul.eckig { ul list-style-type:square }
ol.numerisch { ol list-style-type:decimal }
ol.alphabetisch { ol list-style-type:lower-alpha }
</style>
|
Mit list-style-type: können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.
decimal = für <ol>-Listen: Numerierung 1.,2.,3.,4. usw.
lower-roman = für <ol>-Listen: Numerierung i.,ii.,iii.,iv. usw.
upper-roman = für <ol>-Listen: Numerierung I.,II.,III.,IV. usw.
lower-alpha = für <ol>-Listen: Numerierung a.,b.,c.,d. usw.
upper-alpha = für <ol>-Listen: Numerierung A.,B.,C.,D. usw.
disc = für <ul>-Listen: Dateisymbol als Bulletzeichen
circle = für <ul>-Listen: rundes Bulletzeichen
square = für <ul>-Listen: rechteckiges Bulletzeichen
none = kein Bulletzeichen, keine Numerierung
|
|
Listeneinrückung (list-style-position) Anzeigebeispiel: So sieht's aus
Sie können bestimmen, wie sich Bulletzeichen oder Numerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.
<ul style="list-style-position:inside"> <li>Text <li>Text </ul>Text |
Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.
inside = eingerückt.
outside = ausgerückt (Voreinstellung).
Netscape 4.0 interpretiert diese Angabe nicht.
|
|
Eigene Bullet-Grafik (list-style-image) Anzeigebeispiel: So sieht's aus
Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.
<style type="text/css">
ul { list-style-image:url(point.gif) }
</style>
|
Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.
Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.
Netscape 4.0 interpretiert diese Angabe nicht.
|
|
Listendarstellung (allgemein) (list-style) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
Darstellungstyp (list-style-type)
Listeneinrückung (list-style-position)
Eigene Bullet-Grafik (list-style-image)
<ol style="list-style:upper-roman outside;"> <li>Text <li>Text </ol> |
Mit list-style: können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder numerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.
Netscape 4.0 interpretiert nur einen Teil dieser Angaben.
|
|
Tabellenzelle über mehrere Spalten erstrecken (column-span) Anzeigebeispiel: So sieht's aus
Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, daß diese sich über mehrere Spalten erstrecken. Die Style-Sheet-Angabe hat den gleichen Effekt wie das spaltenweise Verbinden von Zellen in HTML. Im Unterschied dazu können Sie jedoch globale Angaben zu Unterklassen von Tabellenzellen machen.
<style type="text/css">
td.zweispaltig { column-span:2 }
td.dreispaltig { column-span:3 }
</style>
|
Mit column-span: können Sie angeben, über wie viele Spalten sich eine Tabellenzelle (<td>- oder <th>-Tag) erstrecken soll.
|
|
Tabellenzelle über mehrere Zeilen erstrecken (row-span) Anzeigebeispiel: So sieht's aus
Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, daß diese sich über mehrere Zeilen erstrecken. Die Style-Sheet-Angabe hat den gleichen Effekt wie das zeilenweise Verbinden von Zellen in HTML. Im Unterschied dazu können Sie jedoch globale Angaben zu Unterklassen von Tabellenzellen machen.
<style type="text/css">
td.zweizeilig { row-span:2 }
</style>
|
Mit row-span: können Sie angeben, über wie viele Zeilen sich eine Tabellenzelle (<td>- oder <th>-Tag) erstrecken soll.
|
|
Position einer Tabellenüberschrift (caption-side) Anzeigebeispiel: So sieht's aus
Sie können für Tabellen eine Tabellenüberschrift oder Tabellenunterschrift definieren. Mit der hier beschriebenen Style-Sheet-Angabe können Sie die Position der Über- bzw. Unterschrift festlegen. Die Style-Sheet-Angabe hat den gleichen Effekt wie eine Tabellenüberschrift / Tabellenunterschrift in HTML.
<table border"> <caption style="caption-side:top">Tabellenüberschrift</caption> <!-- Tabelleninhalt --> </table> |
Mit caption-side: können Sie die Position der Tabellenüberschrift bestimmen. Die Angabe ist für das HTML-Tag <caption>...</caption> gedacht. Folgende Angaben sind erlaubt:
top = oberhalb der Tabelle zentriert (Tabellenüberschrift).
topleft = oberhalb der Tabelle linksbündig (Tabellenüberschrift).
topright = oberhalb der Tabelle rechtsbündig (Tabellenüberschrift).
bottom = unterhalb der Tabelle zentriert (Tabellenunterschrift).
bottomleft = unterhalb der Tabelle linksbündig (Tabellenunterschrift).
bottomright = unterhalb der Tabelle rechtsbündig (Tabellenunterschrift).
|
|
Sprachausgabe von Tabellen (speak-header-cell) "Anzeigebeispiel": So hört sich's an
Wenn eine HTML-Tabelle nicht am Bildschirm angezeigt oder ausgedruckt wird, sondern von einem Sprecher oder Sprachausgabesystem vorgelesen wird (z.B. für Sehbehinderte), entsteht das Problem, daß ein zweidimensionaler Raum eindimensional in der Zeit gelesen werden soll. Mit der hier beschriebenen Angabe können Sie für diesen Fall entscheiden, ob der Inhalt von Kopfzellen bei jeder ihr untergeordneten Datenzelle erneut wiedergegeben werden soll, oder ob der Kopfzelleninhalt nur einmal wiedergegeben werden soll.
<table border"> <tr> <th style="speak-header-cell:always">Kopfzelle 1</th> <th style="speak-header-cell:once">Kopfzelle 2</th> </tr> <tr> <td>Datenzelle 1</td> <td>Datenzelle 2</td> </tr> <tr> <td>Datenzelle 3</td> <td>Datenzelle 4</td> </tr> </table> |
Mit speak-header-cell: können Sie das Wiedergabeverhalten für Kopfzelleninhalte bestimmen. In der CSS 2.0 Spezifikation ist noch nicht klar, ob die Angabe für Kopfzellen-Tags <th> oder für die zugehörigen Datenzellen-Tags <td> gedacht ist. Das obige Beispiel nimmt an, daß die Angabe im Kopfzellen-Tag steht. Das Beispiel bewirkt, daß die Kopfzelle 1 vor den Datenzellen 1 und 3 jeweils wiederholt wird, während die Kopfzelle 2 nur einmal ausgegeben wird. Folgende Angaben sind erlaubt:
always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen.
once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung).
|
| |
weiter: |
Style-Sheet-Angaben: Pseudo-Formate
|
zurück: |
Style-Sheet-Angaben: Hintergrundfarben und -bilder
|
