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(https://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(https://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
