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

Seu computador está lento, travando ou dando tela azul? E toda vez que isso acontece você precisa gastar dinheiro com assistência técnica?

A verdade é que continuar sem esse conhecimento pode estar custando muito mais do que você imagina.

Você pode economizar centenas ou até milhares de reais ao longo do tempo fazendo você mesmo a manutenção dos seus computadores. E, se decidir prestar serviços, esse conhecimento também pode se transformar em uma fonte de renda, que pode variar de R$2.000 a R$5.000 por mês ou mais.

Tudo isso com aulas práticas, objetivas e focadas no que realmente funciona, sem enrolação:

✔ 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

A decisão é sua: continuar gastando dinheiro sempre que o computador apresentar um problema ou aprender uma habilidade que pode fazer você economizar e até gerar uma nova fonte de renda.

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