CSS pour créer des listes accrocheuses

• Avril 27, 2024

Les listes sont un excellent élément de conception Web car elles permettent une lecture facile par l'utilisateur final. La plupart des utilisateurs veulent des réponses rapidement et ne parcourront un site Web que pour voir s'il répond à leur question. Cela est particulièrement vrai s'ils entrent sur votre site Web via un moteur de recherche.

L'utilisation de balises de titre et de listes est un excellent moyen de permettre aux utilisateurs de voir facilement le contenu principal de votre site Web. S'ils estiment que les listes et les sous-titres sont intéressants, il y a plus de chances qu'ils restent sur votre site. Bien sûr, cela réduit les taux de «rebond» et contribue à améliorer la crédibilité et le classement de votre site Web dans les moteurs. Tout ce qui améliore la lisibilité et facilite la lecture des yeux bénéficiera toujours à un site Web. Un excellent design garde toujours à l'esprit la lisibilité.

CSS est un moyen simple et très efficace de créer des listes élégantes avec des puces personnalisées (marqueurs). Vous pouvez inclure différentes formes ou de simples graphiques personnalisés liés au logo, aux couleurs ou au thème de votre site Web. Par exemple, sur un site Web de visites fantômes, j'ai créé une petite icône fantôme qui était utilisée dans la barre de navigation latérale et sur les éléments de liste non ordonnés sur la page principale. C'était simple, mais très mignon et lié au thème des sites, ce qui faisait ressortir ces éléments de page.

D'autres fois, les balles peuvent distraire du contenu important d'une liste. Dans ce cas, une propriété de style de liste "none" peut être utilisée pour supprimer les marqueurs générés automatiquement.

Propriétés du style de liste

Utilisez la propriété de type style de liste pour sélectionner le type de marqueur qui apparaît avec chaque élément de liste. Les valeurs disponibles sont disque, cercle, carré, décimal, romain inférieur, romain supérieur, grec inférieur, latin inférieur, latin supérieur, alpha inférieur, alpha supérieur et aucune.

Pour spécifier votre propre image comme marqueur, utilisez la propriété list-style-image comme suit:

ul {list-style-image: url (imagename.jpg);
liste-style-position: extérieur;
}

L'URL est relative à la feuille de style et doit pointer vers le dossier où se trouve votre image. Dans ce cas, l'image serait dans le même dossier que le fichier css et html. Si vous placez vos images dans un dossier séparé, vous devez également l'inclure: url (images / imagename.jpg)

Positions des marqueurs

Vous pouvez également personnaliser la position des marqueurs. Dans l'exemple ci-dessus, la propriété outside fait apparaître la puce en dehors de la zone de contenu.
list-style-position: inside autorise la puce à l'intérieur de la zone de contenu afin qu'elle se retrouve dans le contenu de la liste.

Technique de sténographie

Un autre moyen rapide de formater une liste à l'aide de CSS est la technique de raccourci. Avec cette méthode, toutes les propriétés de liste sont spécifiées dans une seule propriété:

ul
{
style liste: cercle url ("image.gif");
}

dans la méthode abrégée, toutes les valeurs doivent apparaître dans un ordre spécifié comme suit:

type de liste
position de style liste (à l'intérieur, à l'extérieur)
image de style liste

Peu importe que vous ignoriez une valeur, tant que les autres restent dans le bon ordre.

Les listes personnalisées sont très utiles et CSS les rend faciles à réaliser. Des détails simples transforment les sites Web moyens en sites Web les plus performants.

Instructions Vidéo: The Art of Truth: Data Visualization and Infographics for Everyone (Avril 2024).