As propriedades CSS mostradas neste tutorial podem ser usadas para estilizar listas. As informações se referem aos elementos HTML ul e ol. Portanto, você pode personalizar listas ordenadas e não ordenadas conforme desejar.
Informações gerais sobre a lista
O list-style é um resumo das três seguintes propriedades:
• list-style-type
• list-style-position
• list-style-image
O list-style permite influenciar o estilo gráfico dos marcadores em listas e o recuo. As informações mencionadas são separadas por vírgulas. A ordem é irrelevante. Além disso, um valor não precisa ser especificado para cada propriedade.
Um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>No navegador, fica assim:
Marcadores gráficos
Você pode especificar uma imagem personalizada como marcador de lista. Para isso, utiliza-se a propriedade list-style-image. Os seguintes valores são possíveis:
• url – o nome do arquivo e possivelmente o caminho da imagem
• none – nenhuma imagem é exibida.
Um exemplo:
ul {
list-style-image: url(bullet.gif);
}
Verifique se o caminho da imagem especificado em URL está correto.
Se um caminho incorreto for especificado, os navegadores devem recorrer a um marcador padrão de lista.
A posição dos marcadores de lista
A propriedade list-style-position define como as numerações ou marcadores de lista devem se comportar em relação ao recuo.
• inside – a primeira linha é recuada de modo que o marcador e o item da lista terminem alinhados à esquerda.
• outside – o marcador de lista fica à esquerda do item da lista.
No exemplo a seguir, os dois valores inside e outside são utilizados.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Uma lista inside:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Uma lista outside:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Dessa forma, é possível ver diretamente as diferentes influências desses dois valores.
Definir a aparência dos marcadores de lista
Para personalizar os marcadores ou bullets, você pode especificar explicitamente a aparência. Da mesma forma, é possível influenciar a exibição de listas numeradas. Para isso, utiliza-se a propriedade list-style-type. Os seguintes valores são permitidos para essa propriedade:
• decimal – para listas ol: Numeração 1, 2, 3, etc.
• lower-roman – para listas ol: Numeração i., ii., iii., etc.
• upper-roman – para listas ol: Numeração I., II., III., IV, etc.
• lower-alpha ou lower-latin – para listas ol: Numeração I., II., III., IV., etc.
• upper-alpha ou upper-latin – para listas ol: Numeração A., B., C., D., etc.
• disc – para listas ul: círculo preenchido como marcador
• circle – para listas ul: círculo vazio como marcador
• square – para listas ul: retângulo como marcador
• none – nenhum marcador ou numeração
• lower-greek – para listas ol: Numeração com letras gregas
• hebrew – para listas ol: Numeração com letras hebraicas
• decimal-leading-zero – para listas ol: Numeração com zero à frente 0: 01., 02., 03., 04., etc.
• cjk-ideographic – para listas ol: Numeração com caracteres ideográficos
• hiragana – para listas ol: numeração japonesa (com letras minúsculas)
• katakana – para listas ol: numeração japonesa (com letras maiúsculas)
• hiragana-iroha – para listas ol: numeração japonesa (com letras minúsculas)
• katakana-iroha – para listas ol: numeração japonesa (com letras maiúsculas)
No seguinte exemplo, algumas das variantes listadas são utilizadas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<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>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>No navegador, a seguinte imagem é exibida:
Contador
Com listas ordenadas ol, é possível numerar o conteúdo. No entanto, em aplicações mais complexas, essa forma de numeração pode não ser muito prática. O CSS oferece uma alternativa com os contadores.
A seguir, vou mostrar como utilizar os contadores.
Primeiramente, crio um novo contador para o elemento body.
body {
counter-reset: kapitel;
}Com essa definição, o contador kapitel existe no documento. Agora é possível utilizar esse contador.
h1 {
counter-increment: kapitel;
}
Com a sintaxe mostrada, o contador é automaticamente incrementado em 1 cada vez que um novo elemento h1 aparece. O problema é que, no momento, a contagem ainda não é visível. Isso pode ser facilmente resolvido utilizando pseudo-elementos.
h1::before {
content: counter(kapitel) ". ";
}
Uma aplicação completa poderia ser assim:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Capítulo</h1>
<h1>Capítulo</h1>
</body>
</html>E aqui está o resultado no navegador:
No exemplo mostrado, o número é exibido no início do elemento h1 usando ::before. Para evitar que o número fique imediatamente ao lado do texto do cabeçalho, é adicionado um ponto e um espaço após o número.
content: counter(kapitel) ". "
Também é possível utilizar contagens aninhadas. Para isso, o contador é definido no ponto em que deve ser reiniciado.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Neste exemplo, o contador é reiniciado sempre que um novo elemento h1 é encontrado. O exemplo a seguir demonstra uma aplicação típica de contadores aninhados.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Capítulo</h1>
<h2>Subcapítulo</h2>
<h2>Subcapítulo</h2>
<h2>Subcapítulo</h2>
<h1>Capítulo</h1>
<h2>Subcapítulo</h2>
<h2>Subcapítulo</h2>
<h2>Subcapítulo</h2>
</body>
</html>No navegador, o resultado é o seguinte:
Os exemplos mostraram o quão poderosos os contadores podem ser.
