Como fazer balas CSS menores

Folhas de estilo em cascata fornecem um conjunto de ferramentas para personalizar e controlar a aparência do site da sua empresa. Alterar o estilo de marcadores em uma lista não ordenada é tão simples quanto usar “list-style-type:” para especificar um círculo, quadrado ou disco. Também é possível substituir uma imagem para personalizar ainda mais marcadores de lista. O tamanho dos marcadores da lista, no entanto, é determinado pelo tamanho da fonte atual. Para controlar o tamanho exato dos pontos de marcador da página para complementar a aparência de um site ou a imagem de marca, você precisará usar o pseudoelemento ": before".

1

Abra o arquivo CSS em um editor de texto.

2

Especifique o tamanho da fonte e a família para o corpo da página da Web. Para este exemplo, use:

corpo {font-family: Verdana, Arial, Helvética, sans-serif; tamanho da fonte: 14pt; }

Essas duas instruções definem o tipo de letra da página como fontes sem serifas comumente disponíveis, com um tamanho de 14 pontos. A única maneira de ter certeza de que seus marcadores são menores do que o texto que acompanha é especificar o tamanho da fonte em vez de confiar em uma configuração padrão do navegador.

3

Redefina o estilo de lista não ordenado para nenhum com a instrução:

ul {estilo de lista: nenhum; }

Essa instrução novamente substitui os padrões do navegador para redefinir o estilo de lista não ordenado para "nenhum".

4

Insira o símbolo a ser usado para o marcador e especifique o tamanho da fonte para usar assim:

ul li: antes de {content: "•"; tamanho da fonte: 10pt; }

O pseudoelemento “: before” insere um elemento de marcador na frente do conteúdo de cada item da lista. A instrução "tamanho da fonte" especifica um marcador de 10 pontos, um pouco menor, como o marcador de lista. Ajuste o tamanho conforme necessário para sua página da Web.

Gorjeta

  • Você deve especificar a família e o tamanho da fonte para a página e redefinir o estilo de lista para nenhum. Observe que não há espaço entre os dois pontos e a palavra "antes". O código ASCII para o ponto de referência padrão é “•” ou “& bull” (sem as aspas).

Aviso

  • Os tamanhos de marcadores, juntamente com muitas outras personalizações CSS, não são bem suportados em navegadores mais antigos. Na maioria dos casos, quando um navegador não suporta um método CSS, ele é ignorado e o navegador exibe o conteúdo no modo padrão.

Recomendado