Bert
Bos, Coordenador das atividades das
CSSCopyright © 1994–2022 W3C® Privacy policy
Created 17 January 2001;
Last updated qui 10 fev 2022 05:40:52
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
Ver index para todas as dicas.
Nesta página:
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"
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:
Isso pode parecer suficiente, mas se a lista tiver mais de nove itens o resultado será como mostrado a seguir:
Mas, é óbvio que iremos preferir assim:
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
CSSCreated 17 January 2001;
Last updated qui 10 fev 2022 05:40:52