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

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?

Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.

Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.

Você pode usar esse conhecimento para:

✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.

👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: