Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Aprendendo CSS e HTML Vanessa S.

Propriedade CSS List – Objetos de Lista(ul,ol,li)

Dando segmento à série Aprendendo CSS e HTML, neste artigo iremos tratar sobre a Propriedade List (Propriedade de Lista).

A propriedade “list” trata das características e atributos aplicados às listas.
É com esta propriedade que definimos as características e os atributos para objetos de lista.
Conhecendo esta propriedade você conseguirá entender melhor sobre os objetos de lista, que também é peça chave na hora de estilizar ou editar seu layout no Blogger.

Neste artigo, serão discutidas as propriedades:
li -> Se refere a cada item da lista.
ul -> elemento primário da lista que gera uma marcação por simbolo.
ol -> elemento primário da lista que gera uma marcação numérica.

Existem dois tipos de listas: listas ordenadas e listas não ordenadas.

Listas não ordenadas:

O elemento ul cria uma lista não ordenada, em que cada item da lista inicia com um símbolo marcador.
Este marcador pode ser modificado através do atributo type.
ul – Se refere a lista inteira, é o elemento primário da lista não ordenada.
Em uma lista não ordenada, cada item da lista é marcado da mesma maneira.
Para iniciar uma lista não ordenada usamos o elemento ul. Para marcar os itens desta lista usamos o elemento li.

 

Listas ordenadas:

O elemento ol cria uma lista ordenada, em que cada item da lista inicia com um número para organizar a lista.
O elemento ol gera uma numeração. Este número pode ser modificado para algarismos romanos, por exemplo, através do atributo type.
O elemento li serve para indicar cada item da lista.

É possível colocar uma lista dentro de outra lista.

 

List-style:

Para especificar o estilo para uma lista, devemos usar a propriedade list-style para especificar o tipo de marcador.
Na propriedade list-style é possível definir atributos para objetos de lista, como tipo de marcador(style-type), imagem do marcador(style-image) e posição(style-position).

List-style-type:

Especifica um tipo de marcador de item de lista.

Em uma lista não ordenada, cada item da lista é marcado da mesma maneira.
Os tipos de marcadores para uma lista não ordenada são:

none -> sem marcador
disc -> círculo (bolinha cheia)
circle -> circunferência (bolinha vazia)
square -> quadrado cheio

Vejamos alguns exemplos de como definir no CSS os marcadores de listas não ordenadas(ul):

ul {list-style-type: none;}

ul {list-style-type: disc;}

ul {list-style-type: circle;}

ul {list-style-type: square;}

Para iniciar uma lista não ordenada devemos usar o elemento ul.
Esta lista deve ser formada por uma sequência de itens.
Para marcar os itens desta lista devemos usar o elemento li.
Devemos abrir o início da lista com as tags <ul>.
Depois, cada item da lista deve estar entre tags <li> e </li>;
e no final devemos encerrar a lista não ordenada com a tag de fechamento </ul>

Exemplo:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Se no CSS atribuirmos ao elemento ul o marcador “square“, por exemplo, devemos colocar desta forma:

ul {list-style-type: square;}

Neste caso, todos os itens da lista que iniciar pelo elemento ul conterá um simbolo de um “quadrado cheio“.

Em uma lista ordenada, cada item da lista possui uma marcação diferente para mostrar uma posição em sequência.
Como o elemento ol gera uma numeração, esta numeração pode ser definida pelo estilo de marcadores.
Os tipos de marcadores para uma lista ordenada são:

none -> sem marcação
decimal -> números 1, 2, 3, 4, …
lower-roman -> romano minúsculo i, ii, iii, iv, (…)
upper-roman -> romano maiúsculo I, II, III, IV, (…)
lower-alpha -> letra minúscula a, b, c, d, (…)
upper-alpha -> letra maiúscula A, B, C, D, (…)
lower-latin -> letra minúscula a, b, c, d, (…)
upper-latin -> letra maiúscula A, B, C, D, (…)

Vejamos alguns exemplos de como definir no CSS os marcadores de listas ordenadas (ol):

ol { list-style-type: decimal }

ol { list-style-type: lower-alpha }

ol { list-style-type: lower-roman }

Se quisermos marcar os itens dessa lista usamos o elemento li

Para iniciar uma lista ordenada devemos usar o elemento ol.
Esta lista deve ser formada por uma sequencia de itens para mostrar uma posição em sequência.
Para marcar os itens desta lista com numeração sequencial devemos usar o elemento li.
Devemos abrir o início da lista com as tags <ol>.
Depois, cada item da lista deve estar entre tags <li> e </li>
e no final devemos encerrar a lista ordenada com a tag de fechamento </ol>

Exemplo:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

list-style-image

Especifica um imagem como marcador de item de lista.
Os valores podem ser:
none -> nenhum marcador
url -> url(endereço-da-imagem) -> imagem como marcador da lista

O list-style pode conter duas combinações (image e type) ao mesmo tempo.
Um endereço URL pode ser combinado com outro valor.
Exemplo:

ul { list-style: url(endereço-da-imagem) circle }

No exemplo acima, o valor ‘circle‘(circunferência/bolinha vazia) será usado quando a imagem não estiver disponível.

list-style-position

Especifica a posição do marcador da lista. Define a maneira como o marcador de lista é posicionado em relação ao conteúdo da lista.
Os tipo de posicionamentos são:
outside -> marcador fora do alinhamento do texto
inside -> marcador alinhado com texto

ul.inside{list-style-position: inside;}

ul.outside{list-style-position: outside;}

É muito importante que você defina a propriedade ‘list-style‘ em elementos marcados ou seletores específicos que deverão ter características de marcadores como lista ordenada ou lista não ordenada.
Você deve especificar onde colocar um marcador de item de lista.
Se você simplesmente definir os atributos genericamente a ul ou ol, todos os estilos aplicados às listas, serão aplicados também a todos os demais elementos que contiver ul , ol e li.
Pois a herança irá transferir o ‘list-style‘ dos elementos ol e ul para os elementos li e os estilos serão aplicados a todos os elementos que usar a linguagem de marcação HTML:
<ol> </ol>
<ul> </ul>
<li> </li>
Por isso você deve especificar o estilo para uma lista de determinado elemento ou seletor, usando a propriedade list-style para especificar o tipo de marcador.
Por exemplo:

.sidebar ul {list-style-type: disc;}

.sidebar ol { list-style-type: decimal }

Desta forma o estilo de marcação de lista será aplicado somente aos itens da lista na sidebar.

É fundamental você entender um pouco mais sobre esta propriedade, pois muitos arquivos javascript que utilizamos no blog possuem atributos para objetos de lista, assim como o elemento “Menu”, por exemplo.
Se você notar, todo “Menu”, possui a marcação html <li> </li> para abrir e fechar os itens da lista, que neste exemplo são as listas de links.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

10 Comentários

  1. Augusto Gomes Santos disse:

    No caso se eu quiser mudar a cor da list, eu usaria “list-style-type-color” ou algo assim?

  2. Sandro disse:

    #menu { width: 800px;}
    #menu ul {margin:0; padding:0}
    #menu ul li {list-style: none; margin:2px;}
    #menu ul li a{ display:block}
    ….
    Nao especifiquei o cod todo.. existe a formatacao e mesmo usando o abaixo para tentar diferenciar a sub-lista, estasempre pega a formatacao da lista principal…

    #menu ul li ul li a{}

    tenho feito menus e coisa tal funcionando normal.. o unico problema é que a altura e o stilo se aplica igual a todas as LI dentro da div menu.. e quando um LI no Menu tiver tiver uma sub-lista (li ul li)queria aplicar um tamanho diferente.. mas já tentei um monte de coisa e nada que funcione.

    Sabe me dar uma dica de onde encontro exemplos? acho que nao estou sabendo procurar..

    Obrigado!

  3. Rafa-Kun disse:

    Poderia ensinar como colocar um único caracter (ex: *,#, @) como list-style?

  4. .:: Clau ::. disse:

    Luis Henriques
    Releia com mais atenção o tutorial que já tem essa informação.

  5. Luis Henriques disse:

    Clau, neste post você citou que pode-se criar um lista dentro de outra. Como se faz isso?

  6. Felipe Correia disse:

    Agora ensina a Propriedade CSS Background! 😀

  7. .:: Clau ::. disse:

    gerardown.net,
    Bruno Punk

    Obrigada pelos comentários.

  8. Bruno||Punk disse:

    Vlw ae, estava precisando entender melhor o que estava modificando ^^

  9. Bruno||Punk disse:

    Nossa eu ja tinha entendido como funcionava mais não tudo exatamente vlw ae ^^

  10. gerardown.net disse:

    Valeuu, otimo Post!!
    Adorei personalizei a lista do meu blog e ficou muito legal! Muito Obrigado! se vc poder dar uma olhada e dar sua opinião… eu iria ficar grato, sua opinião é muito importante para min! 😀

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.