Listes, boîte de dialogue Générateur de style

Article
08/21/2008

Mise à jour : novembre 2007

La page Listes de la boîte de dialogue Générateur de styles vous permet de définir les attributs de style d'une feuille de style en cascade (CSS) qui mettent en forme des listes créées à l'aide des balises <OL> et <UL>. Vous pouvez appliquer ces attributs directement aux éléments HTML ou les ajouter aux règles de style CSS.

Pour appliquer des attributs de liste directement aux éléments HTML de votre page

Ouvrez votre document HTML en mode Design dans le Concepteur HTML et sélectionnez les éléments à mettre en forme.
Cliquez sur Style dans le menu Format pour ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez Listes dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Listes, Générateur de styles apparaît dans le volet droit.

Lorsque vous mettez en forme des éléments sélectionnés en mode Design, les attributs de style CSS sont insérés en ligne dans le code HTML de votre page. Passez en mode HTML afin de vérifier les nouveaux attributs de style qui ont été insérés.

Pour ajouter des attributs de listes à une règle de style CSS définie dans une feuille de styles externe

Ouvrez une feuille de style externe existante et placez le point d'insertion entre les accolades ({ }) qui suivent le sélecteur du style souhaité.
Cliquez sur Générer un style dans le menu Styles pour ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez Listes dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Listes, Générateur de styles apparaît dans le volet droit.

Remarque :
Le menu Styles apparaît lorsque vous ouvrez une feuille de style CSS externe pour la modifier. Dans le menu Styles, l'option Générer un style devient disponible lorsque vous placez le point d'insertion entre les accolades qui suivent le sélecteur d'une règle de style.

Une classe de style CSS définie dans une feuille de style externe peut être appliquée à un élément au sein de l'élément <BODY> d'une page Web en affectant le sélecteur de style CSS comme propriété CLASS de l'élément.

Les options disponibles dans la page Listes du Générateur de styles sont les suivantes.

Tâches

Éléments d'interface

Listes

Définit les attributs du type de liste : liste à puces ou sans puces. Les attributs s'appliquent généralement aux styles qui affectent les balises <LI></LI> ou <OL></OL> . Sélectionnez <Non défini> (aucune option choisie), À puces ou Sans puce. Par exemple, si vous sélectionnez Sans puce, le code suivant est ajouté :

LIST-STYLE-TYPE:none

Puces

Les attributs répertoriés dans le tableau suivant mettent en forme des puces. Les puces incluent les nombres, les lettres, les chiffres romains, les images de puces standard (Cercle, Disque, Carré) et les images de puces personnalisées.

Remarque :
Les différents styles de puces deviennent disponibles lorsque vous sélectionnez le type de liste Avec puces.

Style
Définit les attributs qui contrôlent le style de la puce. Huit styles sont disponibles. Vous avez le choix entre <Non défini> (aucune option choisie), Cercle, Disque, Carré, (1 2 3 4...), (i ii iii iv...), (I II III IV…), (a b c d...) ou (A B C D…). Par exemple, si vous sélectionnez À puces comme type de liste et Carré comme style, le balisage CSS suivant est inséré :

LIST-STYLE-TYPE:square
Position
Définit les attributs qui contrôlent la position de la puce par rapport au texte. Deux formats différents sont disponibles pour la position du texte. Sélectionnez <Non défini> (aucune option choisie), Externe (le texte est en retrait) ou Interne(le texte n'est pas en retrait). Par exemple, si vous sélectionnez Carré comme style, À puces comme type de liste et Externe (le texte est en retrait) comme position, le balisage CSS suivant est inséré :

LIST-STYLE-TYPE:square; list-style-position:outside
Puce personnalisée
Permet de sélectionner une image comme style de puce, plutôt que l'un des huit styles disponibles. Lorsque vous sélectionnez Puce personnalisée, les options Image et Aucune sont disponibles.
Image
Permet de sélectionner une image comme style de puce. Entrez le chemin d'accès et le nom de l'image dans le champ ou cliquez sur le bouton de sélection (...) afin d'ouvrir la boîte de dialogue Sélectionner l'image de la puce et recherchez l'emplacement de l'image. Par exemple, si vous sélectionnez À puces comme type de liste, Externe (le texte est en retrait) comme position et Puce personnalisée comme style de puce, puis entrez bullet.jpg dans le champ Image, le balisage CSS suivant est inséré :

LIST-STYLE-POSITION:outside

LIST-STYLE-IMAGE:url (bullet.jpg)
Aucune
Sélectionne None pour la valeur image du style de puce. Par exemple, si vous sélectionnez À puces comme type de liste, Externe (le texte est en retrait) comme position et Puce personnalisée comme style de puce, puis entrez bullet.jpg dans le champ Image, le balisage CSS suivant est inséré :

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)

Si vous revenez ensuite à la boîte de dialogue Générateur de style et sélectionnez Aucune pour l'option Puce personnalisée, le balisage CSS suivant est inséré :

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none