Tutoriais HTML/CSS CSS A propriedade CSS list style
CSS
A propriedade CSS list style
Esta propriedade e as propriedades list-style-type, list-style-image e liststyle-position definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e posição. Esses elementos não são suportados no Netscape.
list-style-type: disc | circle | square | decimal | lower-roman upper-roman | lower-alpha | upper-alpha | none
list-style-image: url(url_da_imagem)
list-style-position: inside | outside
Exemplo: list-style-image
<html>
<head>
<style type="text/css">
<!--
ul
{
list-style-image: url('/circulo.gif');
}
-->
</style>
</head>
<body>
<ul>
<li>Texto um</li>
<li>Texto dois</li>
<li>Texto tres</li>
</ul>
</body>
</html>
Veja como fica:
Exemplo: list-style-position
<ht,ml>
<head>
<style type="text/css">
<!--
ul.inside
{
list-style-position: inside;
}
ul.outside
{
list-style-position: outside;
}
-->
</style>
</head>
<body>
<ul>
<li>Este texto destina-se a demonstrar o
valor: "inside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para
fixar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul>
<li>Este texto destina-se a demonstrar o
valor: "outside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para
fixar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>
Veja como fica:
Exemplo: list-style-type
<html>
<head>
<style type="text/css">
<!--
ul.none {
list-style-type: none;
}
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
-->
</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>
Veja como fica:
Exemplo: Listas ordenadas
<html>
<head>
<style type="text/css">
<!--
ol.decimal
{
list-style-type: decimal;
}
ol.lroman
{
list-style-type: lower-roman;
}
ol.uroman
{
list-style-type: upper-roman;
}
ol.lalpha
{
list-style-type: lower-alpha;
}
ol.ualpha
{
list-style-type: upper-alpha;
}
-->
</style>
</head>
<body>
<ol>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
</body>
</html>
Veja como fica:
É possível definir as três propriedades através de um atalho usando list-type. A ordem dos fatores é importante neste caso.
list-style: list-style-type list-style-image list-style-position
Exemplo:
<html>
<head>
<style type="text/css">
<!--
ul
{
list-style: url('/circulo.gif');
list-style:square outside;
}
-->
</style>
</head>
<body>
<ul>
<li>Texto para demonstrar a propriedade
de declaração única para listas usando
CSS - Folhas de Estilo em Cascata;</li>
<li>Item dois;</li>
<li>Item tres.</li>
</ul>
</body>
</html>
Veja como fica:
