English | česky | >> Português <<ZVON > Tutorials > CSS2 tutorial
Introdução / Procura / ZVON
>> Exemplo 50 << | Anterior | Próximo | Index | Conteúdos

Com a propriedade "list-style-type" o tipo do marcador da lista pode ser escolhido.

Documento XMLfolha de estilos CSSExemplo de ligação
(1)
     <AAA>
          <XXX>
               <html:ul>
                    <html:li>xxx</html:li>
                    <html:li>xxx</html:li>
               </html:ul>
          </XXX>
          <YYY>
               <html:ul>
                    <html:li>yyy</html:li>
                    <html:li>yyy</html:li>
               </html:ul>
          </YYY>
          <ZZZ>
               <html:ul>
                    <html:li>zzz</html:li>
                    <html:li>zzz</html:li>
               </html:ul>
          </ZZZ>
     </AAA>
XXX li {list-style-type:disc}
YYY li {list-style-type:circle}
ZZZ li {list-style-type:square}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(2)
     <AAA>
          <XXX>
               <html:ul>
                    <html:li>xxx</html:li>
                    <html:li>xxx</html:li>
               </html:ul>
          </XXX>
          <YYY>
               <html:ul>
                    <html:li>yyy</html:li>
                    <html:li>yyy</html:li>
               </html:ul>
          </YYY>
          <ZZZ>
               <html:ul>
                    <html:li>zzz</html:li>
                    <html:li>zzz</html:li>
               </html:ul>
          </ZZZ>
     </AAA>
XXX li {list-style-type:decimal}
YYY li {list-style-type:decimal-leading-zero}
ZZZ li {list-style-type: none}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(3)
     <AAA>
          <XXX>
               <html:ul>
                    <html:li>xxx</html:li>
                    <html:li>xxx</html:li>
               </html:ul>
          </XXX>
          <YYY>
               <html:ul>
                    <html:li>yyy</html:li>
                    <html:li>yyy</html:li>
               </html:ul>
          </YYY>
          <ZZZ>
               <html:ul>
                    <html:li>zzz</html:li>
                    <html:li>zzz</html:li>
               </html:ul>
          </ZZZ>
     </AAA>
XXX li {list-style-type:lower-roman}
YYY li {list-style-type:upper-roman}
ZZZ li {list-style-type: lower-greek}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(4)
     <AAA>
          <XXX>
               <html:ul>
                    <html:li>xxx</html:li>
                    <html:li>xxx</html:li>
               </html:ul>
          </XXX>
          <YYY>
               <html:ul>
                    <html:li>yyy</html:li>
                    <html:li>yyy</html:li>
               </html:ul>
          </YYY>
          <ZZZ>
               <html:ul>
                    <html:li>zzz</html:li>
                    <html:li>zzz</html:li>
               </html:ul>
          </ZZZ>
     </AAA>
XXX li {list-style-type:lower-alpha}
YYY li {list-style-type:lower-latin}
ZZZ li {list-style-type: upper-alpha}
Ver resultado