As 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 do marcador 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 os marcadores da lista. O tamanho dos marcadores da lista, entretanto, é determinado pelo tamanho da fonte atual. Para controlar o tamanho exato dos marcadores da página para complementar a aparência de um site ou 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 do corpo da página da web. Para este exemplo, use:
body {font-family: Verdana, Arial, Helvetica, sans-serif; tamanho da fonte: 14pt; }
Essas duas instruções definem o tipo de letra da página para fontes sans-serif 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 os acompanha é especificar o tamanho da fonte em vez de depender de uma configuração padrão do navegador.
3
Redefina o estilo de lista não ordenada para nenhum com a instrução:
ul {estilo de lista: nenhum; }
Esta declaração mais uma vez substitui os padrões do navegador para redefinir o estilo de lista não ordenada para “nenhum”.
4
Insira o símbolo a ser usado para o marcador e especifique o tamanho da fonte a ser usado da seguinte forma:
ul li: antes de {conteúdo: "•"; tamanho da fonte: 10pt; }
O pseudo-elemento “: before” insere um elemento marcador na frente do conteúdo de cada item da lista. A declaração “font-size” especifica um marcador ligeiramente menor, de 10 pontos, como o marcador da lista. Ajuste o tamanho conforme necessário para sua página da web.