<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Listensymbole - Cascading Style Sheets - Workshop Internet-Präsenz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="DE" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Übung Cascading Style Sheet. Veränderte Listensymbole." /> <meta name="keywords" content="HTML, Cascading Style Sheet, CSS, Listensymbol, Liste" /> <meta name="author" content="Dr. Roland Unger" /> <style type="text/css"> <!-- ul.circle { list-style-type: circle; } ul.symbol { list-style-image: url("html_ballgelb.gif"); margin-left: 0px; padding-left: 20px; } ol.lowerRoman { list-style-type: lower-roman; } ol.katakana { list-style-type: katakana; } --> </style> </head> <body> <h2>Workshop Internet-Präsenz</h2> <h3>Veränderte Listensymbole - Cascading Style Sheet</h3> <h4>Nicht nummerierte Listen mit geändertem Symbol (CSS1)</h4> <ul class="circle"> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li> </ul> <ul class="symbol"> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li> </ul> <h4>Listennummerierung mit römischen Zahlen und Katakana-Symbolen (CSS2)</h4> <ol class="lowerRoman"> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li> </ol> <ol class="katakana"> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li> </ol> <p>Die Nummerierungsreihenfolge ist wie folgt:<br /> <strong>hiragana:</strong> a, i, u, e, o, ka, ki, ...<br /> <strong>katakana:</strong> A, I, U, E, O, KA, KI, ...<br /> <strong>hiragana-iroha:</strong> i, ro, ha, ni, ho, he, to, ...<br /> <strong>katakana-iroha:</strong> I, RO, HA, NI, HO, HE, TO, ...<br /> <strong>georgian:</strong> an, ban, gan, ..., he, tan, in, in-an, ...</p> <p>In der nachfolgenden Form (descendant combinators)<br /> ol ul, ul ul { list-style-type: circle; }<br /> ol ul ul, ol ol ul, ul ul ul, ul ol ul { list-style-type: square; }<br /> lassen sich auch tiefere Ebenen mit Stilvorlagen ausstatten.</p> <p>Für eine genaue Positionierung der Listennummierung sollten (zukünftig) <em>marker</em> verwendet werden.</p> </body> </html>