CSS Listas
Existem dois tipos listas:
Lista não ordenada
§ Café
o
Chá
·
Leite
Lista ordenada
1. Café
I.
Leite
·
Chá
Marcadores de itens de lista diferentes
list-style-type é a
propriedade para especificar tipo de marcador para lista.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>A propriedade de tipo
de estilo de lista</h2>
<p>lista não
ordenada:</p>
<ul class="a">
<li>leite</li>
<li>café</li>
<li>chá</li>
</ul>
<ul class="b">
<li>leite</li>
<li>café</li>
<li>chá</li>
</ul>
<p>lista
ordenada:</p>
<ol class="c">
<li>leite</li>
<li>café</li>
<li>chá</li>
</ol>
<ol class="d">
<li>leite</li>
<li>café</li>
<li>chá</li>
</ol>
</body>
</html>
Uma imagem como
marcador de item de lista
list-style-image é a propriedade para especificar a imagem na lista
de marcador.
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('nomedaimagem.gif');
}
</style>
</head>
<body>
<h2>A propriedade
list-style-image</h2>
<p>A propriedade
list-style-image especifica uma imagem como o marcador de item da
lista:</p>
<ul>
<li>leite</li>
<li>café</li>
<li>chá</li>
</ul>
</body>
</html>
Posicione os
Marcadores de Item da Lista
A list-style-position propriedade
especifica a posição dos marcadores de item de lista.
posição
de estilo de lista: fora;" significa que os marcadores estarão fora
do item da lista. O início de cada linha de um item de lista será alinhado
verticalmente. Este é o padrão:
"posição
de estilo de lista: dentro;" significa que os marcadores estarão
dentro do item da lista. Como faz parte do item da lista, ele fará parte
do texto e colocará o texto no início:
<!DOCTYPE
html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>A
propriedade list-style-position</h1>
<h2>posição
de estilo de lista: fora (padrão):</h2>
<ul
class="a">
<li>Chá - Uma bebida aromática
comumente preparada derramando água quente ou fervente sobre folhas curadas da
Camellia sinensis, um arbusto perene (arbusto) nativo da Ásia</li>
<li>Coca Cola - Um refrigerante
carbonatado produzido pela The Coca-Cola Company. O nome da bebida refere-se a
dois de seus ingredientes originais, que eram nozes de cola (uma fonte de
cafeína) e folhas de coca.</li>
<li>Café - Uma bebida preparada a
partir de grãos de café torrados, que são as sementes das bagas da
planta</li>
</ul>
<h2>posição
de estilo de lista: dentro:</h2>
<ul
class="b">
<li>Chá - Uma bebida aromática
comumente preparada derramando água quente ou fervente sobre folhas curadas da
Camellia sinensis, um arbusto perene (arbusto) nativo da Ásit</li>
<li>Coca Cola - Um refrigerante
carbonatado produzido pela The Coca-Cola Company. O nome da bebida refere-se a
dois de seus ingredientes originais, que eram nozes de cola (uma fonte de
cafeína) e folhas de coca.</li>
<li>Café - Uma bebida preparada a
partir de grãos de café torrados, que são as sementes das bagas da
planta</li>
</ul>
</body>
</html>
Remover
configurações padrão
A list-style-type:none propriedade também pode ser
usada para remover os marcadores/marcadore
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type:
none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Lista padrão:</p>
<ul>
<li>Leite</li>
<li>café</li>
<li>chá</li>
</ul>
<p>Remova marcadores, margem e preenchimento da
lista:</p>
<ul class="demo">
<li>leite</li>
<li>café</li>
<li>chá</li>
</ul>
</body>
</html>
Lista -
Propriedade abreviada
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("nomedaimagem.gif");
}
</style>
</head>
<body>
<h2>A propriedade de estilo de
lista</h2>
<p>A propriedade de estilo de lista é uma
propriedade abreviada, usada para definir todas as propriedades de lista em uma
declaração. </p>
<ul>
<li>leite</li>
<li>café</li>
<li>chá</li>
</ul>
</body>
</html>
Lista de
estilos com cores
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color:
darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color:
darkblue;
margin:
5px;
}
</style>
</head>
<body>
<h1>Estilizando listas com
cores</h1>
<ol>
<li>leite</li>
<li>café</li>
<li>chá</li>
</ol>
<ul>
<li>leite</li>
<li>café</li>
<li>chá</li>
</ul>
</body>
</html>