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

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn