Changer les marqueurs de liste CSS. Changer les puces de liste en CSS (avant la pseudo-classe)

La propriété list-style-position spécifie si la puce doit être positionnée à l'intérieur ou à l'extérieur des éléments de la liste. Cette propriété peut prendre deux valeurs :

• à l'extérieur - le marqueur est situé à gauche du contenu (c'est la valeur par défaut)
• à l'intérieur - le marqueur est situé à l'intérieur de l'élément de liste avec le contenu

Vous pouvez maintenant réécrire l'exemple précédent afin que l'indentation sur le côté gauche soit supprimée, mais que les marqueurs ne sortent pas du bord du navigateur :

• Café
• Thé

• Café
• Thé

• Café
• Thé

Dans l'exemple, une bordure a été ajoutée à chaque élément de la liste pour afficher visuellement les limites des éléments de la liste.

Aujourd'hui, nous allons découvrir comment les listes sont créées sur une page Web, quels marqueurs sont utilisés et tester différents styles pour modifier l'apparence.

Permettez-moi de vous rappeler comment les styles sont connectés à une page HTML :

Il existe des listes CSS à puces ou non ordonnées et numérotées.

Liste des marqueurs sont des images de formes différentes : cercles, carrés, choucas, etc. On les appelle aussi balles. Vous pouvez également utiliser vos propres dessins comme marqueurs pour la liste.

Liste numérotée représente la sortie des informations numérotées 1, 2, 3, etc.

Généralement, les marqueurs sont de simples cercles noirs, familiers à l'utilisateur, mais d'un autre côté, ils n'attirent pas beaucoup d'attention sur le texte.

Si vous décidez de remplacer ces tasses par des tasses de créateurs, alors vous devez maîtriser styliser une liste en utilisant CSS. C'est ce que nous allons faire aujourd'hui.

La base de toute liste est constituée du code de page Web suivant :

• Premier élément de la liste
• Deuxième élément de liste
• Dernier élément de la liste

Ce bloc ressemble à ceci :

• Premier élément de la liste
• Deuxième élément de liste
• Dernier élément de la liste

Style CSS des marqueurs de liste

Nous écrirons la sortie externe dans le fichier de styles style.css. Il peut être appelé différemment, mais avoir une extension .css.

Marqueurs CSS standards : cercle (cercle) - cercle non rempli, point (disque) - cercle rempli, carré (carré) - carré rempli.

Génère une liste en code CSS ul- avec son aide, nous définissons lesquels des marqueurs standards seront affichés sur la page.

Par exemple, affichons les listes à l'aide d'un cercle. L'entrée dans le fichier CSS ressemblera à ceci :

Ul (type-style-liste : cercle)

Mais il est souvent nécessaire de remplacer les marqueurs non pas dans toutes les listes affichées, mais uniquement dans certains blocs. Par exemple, changez les messages, mais pas les commentaires. Dans ce cas, le code ul ne devrait avoir aucune signification et le style de cercle ne doit être spécifié que pour les listes dans les publications. Voici à quoi ressemble le code sans la valeur :

Ul (type de style de liste : aucun)

Si vous ne trouvez pas le code dans le fichier CSS chargé d'afficher la liste dans le bloc dont vous avez besoin, alors utilisez le plugin pour Firefox - Firebug ou dans Google Chrom, faites un clic droit sur la page web du blog. Puis « afficher le code de l'élément ».

Par exemple, l'une des options permettant de modifier l'apparence de la liste dans les publications en un cercle standard, s'il n'y a pas de contenu pour le bloc ul:

Post-contenu ul (type de style de liste : cercle)

Ou un autre exemple :

#content-blok ul(list-style-type:square)

Cours complet « Pratique CSS »

]]> ]]>

La connaissance du CSS est nécessaire pour tout webmaster, car il s'agit d'un moyen universel de créer un design de haute qualité sans surcharger le code de la page.

Pour ceux qui veulent apprenez très rapidement des astuces de style CSS, ]]> recommander ]]> cours avancé "Pratique CSS" par Evgeniy Popov.

Articles suivants :

Marqueurs graphiques pour la liste.

Liste des retraits CSS.

Comment changer la couleur CSS d'un marqueur de liste afin que sa couleur soit différente de la couleur du texte.

Listes imbriquées. Comment faire une liste horizontale en CSS. Changez le style des listes numérotées.

Téléchargez de magnifiques marqueurs pour les listes de sites.

Utilisation de la boîte de dialogue Liste Vous pouvez modifier les options de liste à puces suivantes :

Caractère marqueur sur n’importe quel caractère des polices installées sur l’ordinateur.

La taille de la saillie.

La distance entre le symbole de puce et le texte.

Alignement.

À ces fins, vous devez entrer dans le menu Format – Liste et appuyez sur le bouton Changement, après quoi une boîte de dialogue s'ouvrira Modifier la liste à puces, présenté sur la fig. 4.25.

Riz. 4.25. Fenêtre de dialogue Modifier la liste à puces

Ci-dessous la liste de ses options :

Changer le format d'une liste numérotée

Des listes numérotées sont créées sur l'onglet Numéroté(Fig. 4.24). Si les formats de liste numérotée proposés ne conviennent pas à la conception d'un document particulier, vous pouvez créer votre propre format de liste en cliquant sur le bouton Changement dans la boîte de dialogue Liste sur l'onglet Numéroté. Cela ouvrira une fenêtre de dialogue Changementnumérotéliste(Fig. 4.26).

Riz. 4.26. Fenêtre de dialogue Modifier la liste numérotée

Vous trouverez ci-dessous les options de cette boîte de dialogue qui vous permettent de modifier le format de la liste numérotée.

Création de listes à plusieurs niveaux

Des types de listes plus complexes se retrouvent dans de nombreux types de documents. Ce sont les soi-disant multi-niveaux listes. Ils utilisent également soit des marquages, soit une numérotation, et parfois une combinaison des deux. Mais leur principale différence par rapport aux types de listes précédents est la présence de plusieurs niveaux. Selon le niveau, un symbole ou un numéro est attribué à chaque paragraphe.

Riz. 4.27. Languette Multi-niveaux Boîtes de dialogue Liste.

Les listes à plusieurs niveaux diffèrent des listes régulières par la présence de retraits. Une certaine indentation est considérée comme le niveau d'une telle liste.

La création d'une liste à plusieurs niveaux n'est possible qu'à l'aide d'une boîte de dialogue Liste. De plus, les niveaux sont fixés par l'interprète lui-même, en définissant certains retraits. Word analyse les indentations et, en fonction de leur taille, les numérote, créant ainsi des niveaux.

Vous pouvez créer des formats de numérotation modifiés pour différents niveaux d'une liste à plusieurs niveaux, mais un seul format de liste à plusieurs niveaux est autorisé par document.

Pour créer une liste à plusieurs niveaux, vous devez effectuer les étapes suivantes :

1. Déterminez un fragment du document censé être formaté sous forme de liste.

2. Créez des retraits pour chaque paragraphe à l'aide du bouton Augmenter le retrait sur la barre d'outils Mise en page(vous ne pouvez pas utiliser de tabulations lors de la création de retraits).

3. Sélectionnez le fragment de texte sélectionné.

4. Sélectionnez une équipe Format–Liste. Dans la fenêtre de dialogue Liste aller à l'onglet Multi-niveaux(Fig. 4.27).

5. Sélectionnez le type souhaité de liste à plusieurs niveaux parmi les options proposées. Cliquez sur D'ACCORD.

Aujourd'hui, toute personne doit avoir des compétences en informatique et maîtriser au moins un minimum de programmes. Le standard et le plus populaire incluent Microsoft Word. Lorsqu'ils travaillent dans Word, les utilisateurs sont confrontés à la nécessité de mettre en évidence certaines parties de texte pour plus de clarté. Très souvent, il est nécessaire d'insérer une liste dans un document. Il peut s'agir d'une liste à puces ou numérotée - l'utilisateur a la possibilité de naviguer en fonction de la situation.

Le programme vous permet de créer tous les documents, lettres et projets, en utilisant de nombreuses opportunités pour apprendre toutes les fonctions de Microsoft Word, vous devez y consacrer du temps, mais le résultat en vaut la peine.

Les listes sont nécessaires pour rendre le texte clair et expressif. Des listes numérotées et à puces à un seul niveau sont utilisées dans la plupart des documents. Dans les thèses et les articles scientifiques, une liste à plusieurs niveaux est utilisée.

Numérotation et marqueurs

Tout d'abord, vous devez sélectionner les paragraphes qui doivent être formatés sous forme de liste. Cela peut être fait à l'aide de la souris ou simplement en plaçant le curseur au début de la ligne à partir de laquelle la liste commencera.

Dans MS Word, il existe un onglet « Accueil » dans lequel vous pouvez sélectionner l'insertion souhaitée dans le groupe « Paragraphe ». L'utilisateur clique sur les boutons « Numérotation » ou « Marqueurs », puis utilise la règle pour définir les retraits. Cette méthode est très simple et directe, mais un utilisateur inexpérimenté peut rencontrer des difficultés cachées. Lorsque vous réinsérez des listes à puces et numérotées, vous devrez à nouveau modifier les retraits.

Dans le cas où il est nécessaire de formater chaque liste séparément et de modifier les paramètres de police, tous les utilisateurs du programme ne seront pas en mesure de corriger le texte et, de plus, cela nécessitera beaucoup de temps et d'efforts.

Listes numérotées

Chaque élément de la liste est mis en évidence par un numéro et la numérotation est automatiquement ajustée. Pour créer et modifier des listes, il y a un bouton « Numérotation » dans le groupe « Paragraphe ». Vous pouvez également utiliser la fonction « Numérotation » dans le menu contextuel du paragraphe sélectionné.

Options de liste :

• Le format numérique détermine quel caractère apparaîtra à côté de chaque élément.
• Le style de numérotation peut être sélectionné en fonction des caractéristiques d'un document particulier : chiffres arabes ou romains, majuscules, etc.
• Le champ « Valeur de départ » permet de sélectionner le numéro par lequel commencera la liste.
• Dans le cas où vous devez créer une liste similaire, mais la numéroter à nouveau, il est pratique d'utiliser la fonction « Démarrer une nouvelle liste ». Vous devez sélectionner les éléments et définir tous les paramètres.

Vous pouvez insérer automatiquement une liste numérotée. Pour ce faire, vous devez procéder comme suit :

• Au début du paragraphe, avant de saisir du texte, vous devez mettre « 1 », puis « Espace » ou Tab. Le paragraphe apparaîtra comme premier élément de la liste.
• En préfixant un paragraphe avec "1)" puis en appuyant sur Espace ou Tab, l'utilisateur créera un type de liste différent.
• Par analogie, des listes avec des lettres sont établies. Dans les lignes, vous devez saisir avec un point ou une parenthèse. Après chaque paragraphe, vous devez appuyer sur Espace ou Tab.

Créer automatiquement une liste à puces

Vous pouvez insérer une liste à puces dans Word comme suit :

• Au début d'un paragraphe, vous devez taper un astérisque ou un signe supérieur à, puis appuyer sur Espace ou Tab.
• Créez automatiquement une liste à puces. Vous pouvez l'activer en allant dans l'onglet "Fichier" et en sélectionnant le groupe "Options". Dans l'onglet « Orthographe », sélectionnez « Options de correction automatique ». Dans la section « AutoFormat », vous devez cocher les cases à côté des styles.

Vous pouvez créer une liste à puces des types suivants :

Liste à plusieurs niveaux

Les listes à puces et numérotées sont des éléments qui doivent être configurés selon les besoins de l'utilisateur dans un cas particulier. La structure peut être modifiée à l'aide de la fonction Définir une liste à plusieurs niveaux. Il est pratique de vérifier comment toutes les listes sont affichées dans le groupe « Listes dans les documents ». Pour modifier les paramètres de police de chaque police individuelle, une liste à plusieurs niveaux est associée aux styles de paragraphe.

Options clés pour configurer une liste à plusieurs niveaux

Lors de la création d'une liste composée de plusieurs niveaux, vous devez faire attention aux paramètres suivants :

• Sélection d'un niveau et d'un exemple de sa conception.
• Définition des paramètres de police ; si nécessaire, vous pouvez définir une partie constante du numéro.
• Sélectionnez le type de numérotation : symbole, image, lettres et autres options.
• Déterminer le niveau auquel la numérotation est mise à jour.
• Définissez l’indentation et le placement du texte.
• Options d'édition supplémentaires.
• Style de paragraphe correspondant et liste à plusieurs niveaux.

Les paramètres créés une fois peuvent être automatiquement appliqués aux listes suivantes. Mais si une modification est nécessaire, vous devrez travailler avec chaque liste séparément. Cet inconvénient peut paraître insignifiant, mais s'il y a un grand nombre de listes dans le texte, le formatage prendra beaucoup de temps.

Comment changer le style du marqueur ?

En cliquant sur le bouton « Marqueurs », vous pouvez sélectionner l'option qui convient dans ce cas. Pour cela, rendez-vous dans la zone « Bibliothèque » et cliquez dessus. Le type de numérotation se sélectionne de la même manière : dans la zone « Bibliothèque de numérotation ».

Pour transformer une liste numérotée ou à puces en texte dans Word, il vous suffit d'appuyer sur le bouton correspondant.

Chaque élément de texte peut être mis en évidence avec un marqueur spécial. Pour formater la liste selon les exigences d'un document spécifique, vous devez sélectionner la commande « Définir un nouveau marqueur ».

Après avoir maîtrisé toutes les fonctionnalités de Microsoft Word, travailler avec des documents sera un plaisir et vous n'aurez pas à passer beaucoup de temps à formater le texte. Une liste à puces, comme une liste numérotée, est incluse dans presque tous les documents et est souvent utilisée, il sera donc utile pour l'utilisateur du programme de se familiariser avec la création de listes de différents types.

Je souhaite changer le type de marqueur en un autre symbole. Comment faire?

En utilisant HTML ou CSS, vous pouvez définir l'un des trois types de marqueurs : disque (point), cercle (cercle), carré (carré). Vous devez ajouter ces valeurs au paramètre de style list-style-type, qui est spécifié pour le sélecteur UL ou LI.

• Cheburachka


• Géna Crocodile


• Shapokliak

La sélection et la définition de votre propre symbole de marqueur s'effectuent d'une manière tout à fait unique, via le pseudo-élément before. Tout d'abord, vous devez supprimer complètement les puces de la liste en définissant l'attribut style list-style-type sur none , puis ajouter le pseudo-élément before au sélecteur LI, séparé par deux points. La sortie du symbole elle-même est effectuée à l'aide du paramètre de contenu dont la valeur est le texte ou le code de caractère souhaité en Unicode.

• Cheburachka


• Géna Crocodile


• Shapokliak

Cet exemple masque le marqueur par défaut et ajoute un symbole + à la place.

Commentaire

Le pseudo-élément before ne fonctionne pas dans Internet Explorer, donc les marqueurs natifs n’apparaîtront pas dans Internet Explorer.

Pour définir un symbole délicat comme marqueur, vous pouvez utiliser Microsoft Word en sélectionnant le menu Insérer > Symbole... Après quoi, une fenêtre s'ouvrira, comme le montre la Fig. 1.

Riz. 1. Sélection d'un caractère dans Microsoft Word

Le code de caractère, surligné en couleur sur la figure, doit être saisi comme paramètre de contenu, en ajoutant une barre oblique devant lui. Par exemple, pour le symbole donné, vous devez spécifier le contenu : "\25aa" .