Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-SemDerivados CC BY-NC-ND. Você possui a permissão para visualizar e compartilhar, desde que atribua os créditos do autor. Não poderá alterá-los e nem utilizá-los para fins comerciais.
Atribuição-SemDerivações-SemDerivados
CC BY-NC-ND
Cursos / Informática para Internet / Autoria Web / Aula
As propriedades que estilizam listas possibilitam a escolha de diferentes marcadores para listas ordenadas e não ordenadas, inclusive definir uma figura como marcador, e definir a posição do marcador. As propriedades e valores relacionados às listas estão listados no Quadro 4, a seguir.
| Propriedade | Descrição | Valor |
| list-style | Define todas as propriedades; deve-se seguir uma ordem | list-style-image list-style-position list-style-type |
| list-style-image | Especifica uma imagem como marcador | URL none |
| list-style-position | Especifica se o marcador deve aparecer indentado com o texto acima (outside) ou mais para direita (inside). | inside outside |
| list-style-type | Especifica o tipo de marcador: os quatro primeiros para listas não ordenadas e os demais para listas ordenadas. | none (sem marcador) disc (círculo pintado) circle (círculo) square (quadrado) decimal (1, 2, 3, ...) decimal-leading-zero(01, 02, 03, ...) armenian georgian(an, ban, gan, ...) lower-alpha (a, b, c, d, e, ...) upper-alpha(A, B, C, D, E, ...) lower-greek(alpha, beta, gamma, ...) lower-latin(a, b, c, d, e, ...) upper-latin (A, B, C, D, E, ...) lower-roman(i, ii,iii, iv, …) upper-roman(I, II, III, IV, ...) |
A propriedade list-style-type define o marcador de item; os possíveis valores para listas não ordenadas e ordenadas são mostrados na tabela acima.
Para definir uma imagem como marcador dos itens de uma lista, é necessário usar a propriedade list-style-image e indicar onde e qual arquivo com a imagem será usado. Veja o seguinte exemplo:
ul { list-style-image: url('nomeDoArquivo.gif'); }
A propriedade list-style pode ser usada no lugar das anteriores para definir todas as propriedades. Os valores devem estar na seguinte ordem (pode-se omitir alguns deles):
1º list-style-type
2º list-style-position
3º list-style-image
A Figura 5 ilustra alguns exemplos de estilização para listas. Perceba que foram definidas 6 classes para que cada lista possa ser estilizada de uma maneira diferente.
See the Pen autoria_web_5f5_listas by Materiais (@materiais) on CodePen.
Lembre-se de que você também pode atribuir cores tanto para letras quanto para o plano de fundo, além de modificar o tipo de fonte e inserir links nos itens das listas. Você pode ainda criar bordas para esses elementos, como na última lista mostrada na Figura 5. Nesse exemplo, a lista foi estilizada com a seguinte regra:
Nessa regra, as propriedades border-style: groove e border-color:#CD5C5C definem o tipo de borda e a cor, enquanto a propriedade background-color dá uma cor para o plano de fundo, resultando no efeito mostrado na Figura 5. Você aprenderá mais sobre bordas na próxima aula.
Então? Animado com a quantidade de possibilidades diferentes para estilizar textos e links? Isso é só o começo! Pois, na próxima aula, você aprenderá como estilizar tabelas e como usar as cores de maneira apropriada.
Versão 5.3 - Todos os Direitos reservados