Dando continuidade a nossa série Aprendendo HTML/CSS, hoje estudaremos as propriedades CSS List. Ele é responsável pela personalização das lista do blog, as quais: lista com marcadores e lista numerada. Bom, hoje o artigo será um pouco grande por que esta propriedade requer muita paciência e principalmente atenção! Vamos lá.
List-Style:
Para especificar o estilo para uma lista, devemos usar a propriedade list-style para especificar o tipo de marcador. Nela podemos definir e aplicar atributos como tipo de marcador(style-type), imagem do marcador(style-image) e posição(style-position).
Especifica um estilo para o marcador, como quadrado ou redondo para a lista.
Os marcadores para uma lista são:
none > sem marcador
disc > círculo (bola cheia)
circle > circunferência (bola 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>:
Para facilitar:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
No CSS atribuímos ao elemento ul o marcador "Square"(por exemplo), devemos colocar desse modo:
ul {list-style-type: square;}
Neste caso, todos os elementos com lista que iniciará com o elemento ul, estará com o quadrado cheio. Veja a imagem:
Em uma lista ordenada(numerada), 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 numerada 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, (...)
Veja os exemplos de como definirmos o CSS nos marcadores de lista numerada:
ol { list-style-type: decimal }ol { list-style-type: lower-alpha }ol { list-style-type: lower-roman }
Para iniciar uma lista numerada 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 numerada com a tag de fechamento </ol>.
Para facilitar:
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
list-style-image
Especifica uma imagem substituindo os elementos(circle, square...).
Os valores podem ser:
none > nenhum marcador
url > url(endreço-da-sua-imagem) > imagem como marcador da lista.
O list-type pode conter duas combinações(image e type) ao mesmo tempo, isto é, a imagem pode ser combinada com qualquer valor. Exemplo:
ul { list-style: url(endereço-da-imagem) circle }
O elemento circle, será usado quando a imagem estará ausente.
list-style-position
Define o alinhamento da marcação entre o texto ou fora do texto.
Os tipos de posicionamentos são:
outside > marcador fora do alinhamento do texto
inside > marcador alinhado com texto.
Para facilitar:
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.
Pronto, assim facilita o que acontece em blogs que você vai e encontra essas personalizações em CSS. Ela também ajudará a você criar seus templates personalizados. Caso você ainda não entendeu ou restou dúvidas, fique a vontade e deixe seu comentário.
Postagens Relacionadas:
Postar um comentário