CSS para criar listas atraentes

• Pode 16, 2024

As listas são um ótimo elemento de design da web porque permitem uma leitura fácil pelo usuário final. A maioria dos usuários deseja respostas rapidamente, e apenas visualiza um site inicialmente para ver se ele responde à pergunta. Isto é especialmente verdade se eles entrarem no seu site por meio de um mecanismo de pesquisa.

O uso de tags e listas de cabeçalhos é uma ótima maneira de permitir que as pessoas vejam com facilidade o conteúdo principal do seu site. Se eles acham que as listas e subtítulos são interessantes, há uma chance maior de que eles permaneçam no seu site. Obviamente, isso leva a taxas de rejeição reduzidas e ajuda a melhorar a credibilidade e a classificação do seu site nos mecanismos. Qualquer coisa que melhore a legibilidade, facilitando a leitura dos olhos, sempre beneficiará um site. Um ótimo design sempre mantém a legibilidade em mente.

CSS é uma maneira fácil e muito eficaz de criar listas elegantes com marcadores personalizados (marcadores). Você pode incluir formas diferentes ou gráficos personalizados simples que se encaixam no logotipo, cores ou tema do seu site. Por exemplo, em um site de passeios fantasmas, criei um pequeno ícone fantasma usado na barra de navegação lateral e em itens de lista não ordenados na página principal. Era simples, mas muito bonito e vinculado ao tema dos sites, destacando esses elementos da página.

Outras vezes, os marcadores podem desviar o conteúdo importante de uma lista. Nesse caso, uma propriedade de estilo de lista "nenhuma" pode ser usada para remover os marcadores gerados automaticamente.

Propriedades do estilo de lista

Use a propriedade tipo de estilo de lista para selecionar o tipo de marcador que aparece com cada item da lista. Os valores disponíveis são disco, círculo, quadrado, decimal, baixo-romano, alto-romano, baixo-grego, baixo-latim, alto-latim, baixo-alfa, alto-alfa e nenhum.

Para especificar sua própria imagem como marcador, use a propriedade list-style-image da seguinte maneira:

ul {imagem do estilo de lista: url (imagename.jpg);
posição do estilo da lista: fora;
}

O URL é relativo à folha de estilo e deve apontar para a pasta onde está sua imagem. Nesse caso, a imagem estaria na mesma pasta que o arquivo css e html. Se você colocar suas imagens em uma pasta separada, inclua isso também: url (images / imagename.jpg)

Posições dos marcadores

Você também pode personalizar a posição dos marcadores. No exemplo acima, a propriedade outside faz o marcador aparecer fora da área de conteúdo.
list-style-position: inside permite que o marcador dentro da área de conteúdo seja executado no conteúdo da lista.

Técnica taquigráfica

Outra maneira rápida de formatar uma lista usando CSS é a técnica abreviada. Com este método, todas as propriedades da lista são especificadas em uma única propriedade:

ul
{
estilo de lista: URL do círculo ("image.gif");
}

no método abreviado, todos os valores devem aparecer em uma ordem especificada da seguinte maneira:

tipo de estilo de lista
posição do estilo da lista (dentro, fora)
lista-estilo-imagem

Não importa se você pula um valor, desde que os outros permaneçam na ordem correta.

Listas personalizadas são muito úteis e o CSS as torna fáceis de alcançar. Detalhes simples transformam sites médios em sites com melhor desempenho.

Instruções De Vídeo: Should You Spend Time on Meta Tags? (Pode 2024).