Tutoriel CSS

CSS

Découvez les bases du CSS dans ce tutoriel.

HTML HTML5 Dreamweaver Bootstrap PHP

Les listes en CSS

Dans ce tutoriel, nous allons aborder la gestion des listes ordonnées et non ordonnées.

Spécifier le type et reformater une liste ordonnée ou non ordonnée

list-style-type: circle;

Les principales valeurs possibles pour les listes non ordonnées (Liste à puce) :

  • disc : Puce en forme de disque
  • circle : Puce en forme de cercle
  • square : Puce en forme de carré
  • lower-alpha : Lettre en minuscule
  • upper-alpha : Lettre en majuscule
  • none : Rien n'est affiché avant votre texte)

Les principales valeurs possibles pour les listes ordonnées :

  • decimal : Avec une valeur numérique
  • lower-roman : En chiffre romain en minuscule
  • upper-roman : En chiffre romain en majuscule

je vous ai donné la liste des valeurs les plus nutiles, Il en existe bien d'autres, je vous laisse le soin de les découvrir

Exemple

  • Liste à puce avec comme valeur circle
  • Liste à puce avec comme valeur circle

Code CSS

ul
 list-style-type: circle;
  }

Mettre une image à la place d'une puce ou de l'item

list-style-image:

Valeurs possibles :

  • url (Chemin vers l'image)
  • none (Pas d'image)

Exemple

  • Liste à puce modifiée avec une image
  • Liste à puce modifiée avec une image

Code CSS

ul{
 list-style-image:url(images/arrow.gif);>
}

list-style-position

list-style-position:

Valeurs possibles :

  • inside (lors d'un retour à la ligne automatique, le texte s'aligne au début de la puce)
  • outside (lors d'un retour à la ligne automatique, le texte s'aligne à la fin de la puce)
  • inherit (Hérite de la propriété de son parent)

Exemple

  • Liste à puce classique
  • Liste à puce classique
  • Liste à puce avec comme valeur outside
  • Liste à puce avec comme valeur outside
  • Liste à puce avec comme valeur inside
  • Liste à puce avec comme valeur inside

Code CSS

ul{ /* Liste à puce avec la valeur inside */
list-style-position: inside ;
}