Listas em CSS

As listas são uma parte importante do layout de qualquer site. Seja para exibir links de navegação, destacar itens de um produto ou apresentar uma sequência de passos, as listas ajudam a organizar informações de forma clara e simples. As listas em CSS pode estilizar listas de várias maneiras para deixá-las mais atraentes e integradas ao design do seu site. Neste post, você aprenderá como personalizar listas e seus marcadores com CSS.

Exemplos práticos de listas em CSS

Abaixo estão listados essas propriedades e a descrição de suas funcionalidades.
Veja:

list-style-type: Especifica a aparência do marcador de lista quando a propriedade list-style-image for none ou se a imagem indicada por ela não estiver disponível:

ul {list-style-type: square}
ol {list-style-type: lower-alpha}
	
/* disc: pequeno círculo sólido; circle: pequeno círculo vazado; decimal: números decimais inteiros; 
decimal-leading-zero: o mesmo que decimal, mas com zeros à esquerda; lower-roman: números romanos 
minúsculos; upper-roman: números romanos maiúsculos; upper-alpha: letras latinas maiúsculas; 
none: não utiliza marcadores */

list-style-image: Especifica uma imagem que será utilizada como marcador da lista. Se a imagem não for encontrada, será utilizado o marcador definido pela propriedade list-style-type:

ul {list-style-image: url(imagem.gif)}
ol {list-style-image: url(http://www.criandobits.com.br/imagem.gif)} 

list-style-position: Especifica a posição do marcador em relação ao conteúdo da lista, ou seja, especifica se o marcador será colocado dentro ou fora da caixa de texto que define o conteúdo da lista:

ul {list-style-position: inside}
ol {list-style-position: outside} 

list-style: Essa propriedade é um atalho para especificar as propriedades list-style-type, list-style-position, list-style-image em um único local da folha de estilo. As propriedades que não tiverem valor fornecido, assumem o seu valor padrão:

ul {list-style: square outside url(imagem.gif)}
div ul {list-style: circ inside url(http://www.criandobits.com.br/imagem.gif)}

Estilizar listas em CSS vai muito além dos marcadores padrão. Com um pouco de criatividade, você pode transformar listas simples em elementos atraentes e interativos no seu site. Experimente usar essas dicas para criar listas estilizadas, menus de navegação e muito mais!

Dúvidas ou sugestões sobre vistas em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: listas