Como colocar imagens nos marcadores de uma lista HTML com CSS
- Detalhes
- Angelo Luis Ferreira
- CSS
- Acessos: 18843
Neste tutorial, vamos mostrar como substituir os marcadores de uma lista HTML não ordenada por imagens, usando a propriedade list-style-image do CSS.
Listas HTML são elementos para desenvolvimento web que permitem o agrupamento de um conjunto de itens relacionados. As listas não ordenadas possuem alguns marcadores padrão. Veja no link a seguir um exemplo com os marcadores padrão de uma lista não ordenada: http://squids.com.br/editor/index.php?id=45 .
Obs.: Não é permitido a alteração dos marcadores por imagens em listas ordenadas.
HTML
1. Primeiro vamos criar uma lista não ordenada com HTML. Veja abaixo o nosso exemplo:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>A propriedade list-style-image</h1>
<p>A propriedade list-style-image substitui os marcadores de uma lista por uma imagem:</p>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
<li>Chocolate</li>
<li>Suco de laranja</li>
<li>Mingau</li>
</ul>
</body>
</html>1.1. Para criar uma lista HTML não ordenada usamos as tags <ul></ul> e para criar os itens desta lista usamos as tags <li></li>.
2. Observe que a lista acima já possui um marcador padrão. Veja o resultado abaixo:
CSS
3. Para substituir o marcador padrão de uma lista não ordenada, precisamos primeiro definir o endereço do arquivo da imagem no atributo list-style-image do CSS, conforme a sintaxe abaixo:
ul {
list-style-image: url('endereço da imagem');
}4. No nosso exemplo, vamos adicionar o nosso atributo CSS dentro da tag <style></style>:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url("http://squids.com.br/icons/folder.png");
}
</style>
</head>
<body>
<h1>A propriedade list-style-image</h1>
<p>A propriedade list-style-image substitui os marcadores de uma lista por uma imagem:</p>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
</body>
</html> 
Para testar o código acima, acesse: http://squids.com.br/editor/index.php?id=248
Observações:
4.1. Note que usamos o próprio elemento <ul> como seletor CSS. Podemos também usar classes ou id's para identificar listas específicas.
4.2. O endereço do arquivo de imagem que irá substituir os marcadores deverá estar hospedado em um servidor web.
4.3. Também é possível colocar o estilo CSS em um arquivo externo.
5. Veja o resultado abaixo:
TENTE VOCÊ MESMO
Veja no nosso editor HTML como substituímos os marcadores de uma lista HTML. No editor, altere os códigos da forma que você desejar até conseguir o efeito desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).
CÓDIGO COMPLETO DO EXEMPLO
Para copiar e colar nos seus projetos.
HTML
<h1>A propriedade list-style-image</h1>
<p>A propriedade list-style-image substitui os marcadores de uma lista por uma imagem:</p>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul> CSS
ul {
list-style-image: url("http://squids.com.br/icons/folder.png");
}Documentação Oficial
1. [Documentação MDN Web Docs - list-style-image] » Sobre a propriedade list-style-image.
