Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Nesta página:

Marcadores tipo bullet coloridos

Alguma vez você precisou colorir os marcadores de listas do tipo bullets com uma cor diferente do texto do item da lista tal como mostrado no exemplo a seguir?

No futuro 'o seletor ::marker' que hoje é uma proposta será incorporado às especificações e então poderemos declarar simplesmente '::marker {color: red}'. Contudo, nos dias atuais, para simular o efeito de bullets coloridos, é necessário declarar uma série de propriedades CSS.

Podemos criar uma imagem para o bullet e declarar: 'list-style: url(mybullet.png)'. Esta solução permite controle total sobre a cor e a forma do bullet. Mas, caso você decida aumentar ou diminuir o tamanho da fonte dos textos dos item da lista terá que criar uma nova imagem. O mesmo ocorre (criar nova imagem), caso você decida alterar a cor do bullet.

Assim é melhor usar texto tais como • ou ◦ ou ▪ que são mais fáceis de estilizar. É necessário substituir os marcadores padrão de listas (que não podem ser selecionados para estilização), por um bullet gerado, inserido e estilizado. Para isso é necessário primeiro retirar o "list style" padrão e a seguir usar o pseudo-elemento '::before' para inserir o bullet personalizado. Primeiro retire o marcador padrão conforme mostrado a seguir:

ul {list-style: none}

Depois insira o bullet personalizado:

li::before {content: "•"; color: red}

Assim você cria um bullet na cor vermelha, que não será posicionado exatamente no mesmo lugar do bullet padrão. É necessário mover o bullet para a esquerda sem mover o texto do item da lista que se encontra à direita do bullet. Uma das maneiras de obter esta movimentação é declarar para o bullet um comportamento 'inline-block' com determinada largura, digamos 1em, e a seguir movê-lo para a esquerda um comprimento igual a largura declarada, como mostrado a seguir:

li::before {content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}

É isso.

A propósito: havendo dificuldade em digitar na folha de estilo os bullets conforme mostrados anteriormente, use a codificação Unicode numérica: • = "\2022", ◦ = \25E6" and ▪ = "\25AA"

Marcadores tipo números coloridos

E para marcadores do tipo números? A ideia é a mesma: substituir os marcadores padrão de contagem númerica por conteúdos gerados, inseridos e estilizados. Além das propriedades usadas no exemplo do item anterior é necessário criar um contador. Suponha que o contador seja denominado 'li'. Primeiro devemos zerar o contador para o elemento OL como mostrado a seguir:

ol {list-style: none; counter-reset: li}

A seguir usamos o contador como conteúdo gerado, de maneira idêntica como fizemos anteriormente:

li::before {content: counter(li); color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}

Mais uma coisa: por tratar-se de um contador personalizado é necessário incrementá-lo conforme mostrado a seguir:

li {counter-increment: li}

O resultado final é como mostrado a seguir:

  1. Item um
  2. Item dois

Isso pode parecer suficiente, mas se a lista tiver mais de nove itens o resultado será como mostrado a seguir:

  1. Item um
  2. Item dois
  3. Item três
  4. Item quatro
  5. Item cinco
  6. Item seis
  7. Item sete
  8. Item oito
  9. Item nove
  10. Item dez

Mas, é óbvio que iremos preferir assim:

  1. Item um
  2. Item dois
  3. Item três
  4. Item quatro
  5. Item cinco
  6. Item seis
  7. Item sete
  8. Item oito
  9. Item nove
  10. Item dez

Para obter o efeito preferido são necessárias quatro alterações: deslocar os números mais um pouco para a esquerda, declarar margem direita com valor igual ao deslocamento extra para a esquerda, alinhar os números à direita e declarar a direção do texto 'rtl'. Por que 'rtl'? Explicaremos adiante. Observe a regra CSS para obter este efeito:

  .example ol li::before {content: counter(li); color: red;
    display: inline-block; width: 1em; margin-left: -1.5em;
    margin-right: 0.5em; text-align: right; direction: rtl}

Os números foram inseridos em um box com largura igual a 1em e alinhados à direita. Mas, se os números ocuparem uma largura maior que a largura do box eles estarão alinhados à esquerda e não à direita. Em CSS textos não ultrapassam (overflow) seus boxes à esquerda, a não ser em idiomas com escrita da direita para a esquerda, tais como, hebráico e árabe. Números não são letras hebráicas ou árabes e fluem da esquerda para a direita, contudo se declararmos nas CSS que os boxes que contêm os números são de direção 'rtl' eles fluirão da direita para a esquerda e seu overflow será à esquerda, resultando em marcadores númericos alinhados corretamente à direita.

(Se você não quiser usar a declaração ‘direction: rtl’, pode omití-la e declarar uma largura e uma margem esquerda maiores, por exemplo: ‘width: 2em; margin-left: -2.5em’. Estes valores criam um espaçamento suficiente para acomodar e alinhar uma sequência númerica até 999.)

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2018 W3C®

Created 17 January 2001;
Last updated qua 23 mai 2018 13:57:59 UTC

Idiomas

Sobre traduções