list-style em HTML5 CSS3. Vídeo 95

Nós já vimos a propriedade list-style-image (Marcadores de listas com imagens, vídeo 92) ela insere imagens nos itens de uma lista, vimos também 21 exemplos de marcadores de listas em HTML (propriedade list-style-type) e em nossa videoaula anterior vimos a propriedade list-style-position que configura a posição horizontal dos itens de uma lista, ou da lista toda, isso depende de como você a configura.

Mas você não precisa usar duas propriedades diferentes para configurar minimamente a sua lista.

E nesta videoaula que é a quarta seguida sobre propriedades do CSS3 que configuram nossas listas ou itens de listas em HTML vemos a propriedade list-style que no fim das contas pode configurar a sua lista com dois valores diferentes.

Em um documento HTML criamos classes diferentes pois os sites em si são "grandes" e podemos utilizar a mesma tag varias vezes, por isso esse exemplo é feito configurando classes. Foi criado apenas uma lista com três itens nessa lista, os dois primeiros itens tem classes (diferentes) e para cada classe eu demonstro um exemplo de uso da propriedade list-style, que como disse a três parágrafos atrás, pode substituir as propriedades list-style-image, list-style-type e list-style-position. Podendo inserir valores de duas dessas propriedades ao mesmo tempo.

Código fonte HTML:

Código fonte CSS:

Depois dos : (dois pontos) da propriedade list-style você insere o valor da propriedade list-style-position e depois o valor da propriedade list-style-image ou list-style-type. Simples né.

Ainda tem alguma dúvida? Assista ao vídeo.

Assista ao vídeo: