Tâche
Masquer l'affichage des marqueurs dans la liste.
Solution
À cette fin, la propriété de style list-style-type est utilisée avec la valeur none . Il doit être ajouté au sélecteur UL ou LI comme indiqué dans l'exemple 1.
Exemple 1 : Liste sans puces
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Nord
- Sud
- Ouest
- Est
Le résultat de cet exemple est présenté sur la Fig. 1.
Riz. 1. Liste sans puces
Bien que les marqueurs ne soient pas affichés dans la liste, le texte est toujours décalé vers la droite. Pour contrôler la position des éléments de la liste, le sélecteur UL dans cet exemple a ajouté les propriétés margin-left et padding-left. Deux propriétés au lieu d'une sont nécessaires pour afficher le résultat de la même manière dans différents navigateurs.
Les propriétés de liste CSS vous permettent de :
- Définir différents puces pour les listes ordonnées
- Définir différentes puces pour les listes non ordonnées
- Définir une image comme marqueur d'élément de liste
Liste
Il existe deux types de listes en HTML :
- listes non ordonnées - les éléments de la liste sont marqués avec des marqueurs
- listes ordonnées - les éléments de la liste sont marqués par des chiffres ou des lettres
Avec l'aide de CSS, les listes peuvent être mieux stylisées et les images peuvent être utilisées comme puces pour les éléments de la liste.
Divers marqueurs d'éléments de liste
Le type de puce d'un élément de liste est spécifié à l'aide de la propriété list-style-type :
Certaines valeurs de propriétés de type style de liste sont destinées aux listes non ordonnées et d'autres aux listes ordonnées.
Image en tant que marqueur d'élément de liste
Pour spécifier une image comme marqueur d'élément de liste, utilisez la propriété list-style-image :
L'exemple ci-dessus ne s'affiche pas de la même manière dans tous les navigateurs. IE et Opera afficheront le marqueur d'image légèrement plus haut que Firefox, Chrome et Safari.
Si vous souhaitez que l'image du marqueur soit placée de la même manière dans tous les navigateurs, une solution multi-navigateurs est expliquée ci-dessous.
Solution multi-navigateurs
L'exemple suivant rend l'image du marqueur de la même manière dans tous les navigateurs :
Exemple d'explication :
- Pour ul :
- Définition de list-style-type sur none - pour supprimer le marqueur d'élément de liste
- Définition des propriétés de remplissage et de marge sur 0px (pour la compatibilité entre navigateurs)
- Pour Li :
- Définition de l'URL de l'image et de la valeur no-repeat (pour que l'image ne soit affichée qu'une seule fois)
- Positionner l'image à l'emplacement souhaité (gauche de 0px et bas de 5px)
- Définition de l'indentation à gauche pour le texte dans une liste
Liste – Propriété abrégée (abrégée)
Vous pouvez également spécifier toutes les propriétés de la liste dans une seule propriété. C'est ce qu'on appelle la propriété sténographique (ou sténographie).
La propriété raccourcie des listes est la propriété list-style :
Lors de l'utilisation de la propriété raccourcie, l'ordre des valeurs est le suivant :
- type de style de liste
- list-style-position (voir explication ci-dessous - dans le tableau des propriétés CSS)
- image de style de liste
Peu importe si l'une des valeurs ci-dessus est manquante, tant que toutes les autres valeurs sont dans l'ordre spécifié.
L'article présente plusieurs méthodes qui permettent de définir un marqueur spécifique pour une liste non numérotée, et indique également leurs avantages et inconvénients.
Si vous analysez n'importe quel site, vous découvrirez que le contenu contient très souvent des listes de toutes sortes : menus, listes de produits, etc. Dans le code HTML, la balise est responsable d'une liste numérotée, et la balise d'une liste à puces. liste.
Il convient également de noter que dans la pratique, les listes à puces sont beaucoup plus courantes, mais elles présentent un petit inconvénient. Le marqueur dans la liste apparaît différemment selon le navigateur que vous utilisez. Pour un designer sérieux, c'est un problème.
Pour éliminer cet effet négatif, vous devez annuler la sortie du marqueur à l'aide de la propriété list-style :
ol, ul ( style de liste : aucun ; )
Cela commence la formation d'une liste avec des marqueurs et des icônes uniques. Vous trouverez ci-dessous les manières les plus courantes de présenter des icônes d'éléments de liste qui sont uniques et cohérentes dans tous les navigateurs.
Des marqueurs à travers des images
La manière la plus courante et la plus simple de spécifier un marqueur pour une liste consiste à utiliser une image d’arrière-plan (la propriété background). La méthode est basée sur la spécification dans la table de style de l'image d'arrière-plan des éléments de la liste, ainsi que de la propriété padding, qui réserve de l'espace pour le nouveau marqueur. Ci-dessous un exemple de code :
ul ( style de liste : aucun ; ) li ( arrière-plan : url (chemin d'accès à l'image) sans répétition ; remplissage à gauche : 20 px ; )
Cette méthode plaît par son caractère unique, car elle vous permet de définir absolument n'importe quel marqueur sous la forme d'une image. Voici à quoi ressemblera notre code dans le navigateur :
Le principal côté positif de cette méthode est qu’elle est 100 % compatible avec tous les navigateurs, mais malgré cela, il y a un petit inconvénient. Utiliser une image est un appel supplémentaire au serveur.
Marqueurs utilisés avant
Il existe une option où vous pouvez vous passer d'une image, si les conditions de conception le permettent. Ceci est très souvent autorisé lors de la conception du contenu principal, lorsque la liste est marquée des éléments les plus simples, comme un carré ( ) ou une flèche ( →). Ainsi, nous sommes arrivés au point que tout caractère spécial approprié peut servir de marqueur.
Ensuite, la question se pose de savoir comment insérer des caractères spéciaux dans les éléments de la liste. Bien sûr, pas à la main, sinon ce serait un processus très long et fastidieux, et cela demanderait également beaucoup de main d'œuvre. Un pseudo-élément nous aidera à sortir de cette situation avant, dont l'utilisation est liée à un sélecteur spécifique, ce qui nous permet d'automatiser notre processus d'attribution de marqueurs à partir de caractères spéciaux. Cette solution convient à la plupart des navigateurs, en tenant compte du fait que pour IE, elle sera écrite expression.
Vous trouverez ci-dessous un exemple de code qui produit une liste à puces avec un tiret :
li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: avant( content: " \201 3" ; }
En pratique, nous obtenons l'image suivante :
Permettez-moi de vous rappeler que dans des conditions réelles, les hacks sont liés à des commentaires conditionnels.
Lors de l'utilisation de cette méthode, l'essentiel est de connaître le codage de l'icône requise. Il convient également de noter que pour l'expression, les caractères spéciaux sont écrits sous forme de combinaison numérique ou de code mnémonique. Quant à la propriété content, dans ce cas, une barre oblique est placée en premier, puis le code hexadécimal est écrit.
Utilisation de insertAdjacentHTML
La méthode ci-dessus ne fonctionne pas toujours correctement dans le légendaire IE (malgré le hack). Plus précisément, les « béquilles » de ce navigateur ne sont pas entièrement développées. Une méthode plus efficace est basée sur insertAdjacentHTML, voici le code de cette méthode :
li( //z-index : expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }
Marqueurs dessinés par les propriétés CSS
Certains marqueurs carrés peuvent être dessinés à l'aide de certaines propriétés CSS. Par exemple, un carré avec un remplissage coloré est dessiné à l'aide de la propriété background-color, et un carré en forme de cadre est dessiné à l'aide de la propriété border (d'ailleurs, un carré avec un remplissage peut être dessiné de cette manière) . Exemple d'entrée dans un fichier CSS :
li( //z-index : expression (runtimeStyle.zIndex = 1, ce. intérieurHTML = "" + ceci. interneHTML) /* hack pour e6 et 7 */) li : avant, . listMarkerBackColor (couleur d'arrière-plan : #539127 ; largeur : 7px ; hauteur : 7px ; contenu : "" ; float : gauche ; marge : 6px 6px 0 0 ; débordement : caché ; ) html . listMarkerBackColor (marge-droite : 1px ; /* correction d'un petit bug dans IE6 */ }
Ainsi, un marqueur dessiné avec des propriétés CSS ressemblera en pratique à ceci :
Utiliser avant et premier enfant en combinaison
Cette méthode est souvent utilisée lors de la création de fils d’Ariane sur un site Web. Pour ceux qui ne savent pas de quoi nous parlons, regardez l’exemple ci-dessous.
Dans ce cas, chaque lien est séparé les uns des autres par un caractère spécial, mais il ne doit y avoir aucun caractère spécial avant le premier élément. Une pseudo-classe nous y aidera premier enfant, qui accède uniquement au premier élément de la liste. Dans le code, ça devrait ressembler à ça
HTML
< ul> < li>< a href= "#" >maison < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Code valide lors de l'utilisation de target= "_blank"
li:avant( contenu : " \21 92" ; ) li : premier-enfant : avant (contenu : "" ; )
Il convient également de noter que cette technique est utilisée non seulement pour le fil d’Ariane, mais également pour les listes à puces classiques, en fonction du cahier des charges.
Dans quels navigateurs ça marche ?
| 6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | - | - |
conclusions
En résumé, on peut noter le fait que l'utilisation du pseudo-élément before est justifiée et rationnelle dans le contenu principal, puisqu'il n'y a pas d'exigences particulières pour la conception des listes. Ceci, à son tour, réduira la charge sur le serveur, par rapport à l'option lors de l'utilisation d'une image. Et si vous notez également le fait que le contenu principal peut contenir de nombreuses listes à puces, alors la différence peut devenir plus significative. Mais les images bénéficient grandement en termes de solutions de conception de marqueurs.
La forme standard des listes à puces et numérotées ne contient pas toutes les options pour leur présentation. Grâce au CSS, vous pouvez transformer ces listes comme vous le souhaitez. Un certain nombre de propriétés peuvent être utilisées pour définir le style des listes. Ci-dessous, nous examinerons chaque propriété séparément.
Type de style de liste : modifier la puce/la numérotation
Si vous devez remplacer le point standard ou les puces en chiffres arabes par autre chose, vous pouvez utiliser la propriété CSS list-style-type et ses valeurs supplémentaires (voir tableau) :
Note: Le tableau montre uniquement les valeurs principales. Une liste plus complète (numérotation géorgienne et arménienne, chiffres romains, lettres grecques, etc.) est disponible.
Exemple d'écriture de code CSS :
Ul ( type de style de liste : cercle ; )
Capture d'écran : options de numérotation des puces/listes
Image de style liste : image de marqueur
En plus des marqueurs ci-dessus, vous pouvez définir vos propres marqueurs graphiques à l'aide d'un fichier avec l'image requise. Pour ce faire, vous aurez besoin d'une propriété CSS list-style-image et d'une valeur indiquant l'URL de l'image. Exemple d'entrée de style :
Ul ( liste-style-image: url(images/star.png); )
Capture d'écran : exemples de vos propres marqueurs graphiques
Position de style de liste : position de la puce/numérotation
Pour la propriété CSS list-style-position, qui spécifie la position des puces/numérotations par rapport au texte, il existe deux valeurs : outside et inside . La valeur par défaut est à l'extérieur - cela signifie que le marqueur/numéro est affiché comme s'il était séparé du texte de la liste, tandis qu'avec la valeur à l'intérieur, le marqueur/numéro est situé à l'intérieur du bloc de texte et est enroulé autour du texte.
Vous trouverez ci-dessous un exemple d'entrée de style :
Ul ( liste-style-position: à l'intérieur; )
Capture d'écran pour mieux comprendre les significations de l'extérieur et de l'intérieur
Style liste : tous ensemble
En utilisant une seule propriété de style liste CSS, vous pouvez écrire tout ce qui précède sur une seule ligne, c'est-à-dire définir immédiatement le type de puces/numérotation et leur emplacement par rapport au texte. Ce code sera plus concis et plus pratique. Vous trouverez ci-dessous deux exemples de la façon d'écrire ce style :
/* numérotation en lettres majuscules latines à l'intérieur du bloc de texte : */ ol ( list-style : upper-latin inside; ) /* marqueurs graphiques à l'extérieur du bloc de texte : */ ul ( list-style : url(images/star.png ) dehors; )
Nous continuons à étudier CSS propriétés de divers éléments. Et dans cette leçon, nous parlerons de la conception des listes. Les listes sont utilisées assez souvent dans la pratique, ces propriétés doivent donc être mémorisées.
Type régulier de marqueur
Et tout d’abord, définissez l’apparence des marqueurs. Les marqueurs de liste sont différents. En cours sur HTML Listes numérotées montre comment modifier les marqueurs à l'aide d'un attribut taper . Mais sachant CSS cet attribut n'est plus nécessaire, puisque tout cela se fait beaucoup plus facilement grâce à la feuille de style CSS.
Pour démontrer, créons une liste en utilisant CSS. Peu importe lequel liste numérotée ou liste non numérotée, depuis l'utilisation de la propriété type de style de liste nous pouvons ajouter des marqueurs ou les supprimer.
HTML
- Liste non ordonnée
- Liste non ordonnée
- Liste non ordonnée
- Liste non ordonnée
Et ainsi, une liste régulière a été créée, et par défaut elle avait des marqueurs sous forme de cercles remplis. Et très souvent la question se pose, comment supprimer les marqueurs de liste?
Supprime un marqueur d'une liste à l'aide de la propriété type de style de liste et lui attribuer une valeur aucun . Il s’agit de l’option la plus populaire pour supprimer des marqueurs d’une liste. Et pour la liste, nous définirons la même propriété.
Ul( type-style-liste : aucun ; )
Maintenant, si nous actualisons la page, nous verrons que cette propriété a supprimé des marqueurs de la liste.
- aucun - Supprime les marqueurs de la liste
- cercle - Marqueur en forme de cercle
- disque" - Marqueur en forme de cercle rempli. Valeur par défaut
- carré - Marqueur en forme de carré
- arménien - Numérotation arménienne
- décimal - Marqueur sous forme de chiffre
- décimal-avant-zéro - Chiffres avec un "0" avant le début (01, 02, 03, etc.)
- géorgien - Numérotation géorgienne
- alpha inférieur - (a, b, c, d, e, etc.)
- grec inférieur - (alpha, bêta, gamma, etc.)
- bas-latin - (a, b, c, d, e, etc.)
- Romance inférieure - (i, ii, iii, iv, v, etc.)
- alpha supérieur - (A, B, C, D, E, etc.)
- latin supérieur - (A, B, C, D, E, etc.)
- roman supérieur - (I, II, III, IV, V, etc.)
- hériter - La valeur doit être héritée de l'élément parent
Ce sont tous des types de puces pour les listes. Les quatre premiers types sont les plus courants, les autres types sont assez rarement utilisés.
Eh bien, par exemple, sélectionnons et définissons un marqueur sous la forme de grands chiffres romains. Cela se fait simplement : à la place de la valeur aucun mettre le nom de notre marqueur roman supérieur .
Ul( list-style-type: supérieur-romain; )
Si vous actualisez la page, les listes sous forme de marqueurs comportent désormais des grands chiffres romains. Voici comment modifier l'apparence des marqueurs de liste en définissant l'apparence souhaitée via la propriété type de style de liste .
Marqueur d'image
Le deuxième point, assez important, et marqueur fréquemment utilisé, est une image sous forme de marqueur. Vous devez souvent utiliser un marqueur sous la forme d'une belle image et les variantes habituelles des marqueurs présentées CSS inapproprié. Des images sont utilisées pour cela. Et cela se fait en utilisant une propriété spéciale appelée image de style de liste . Cela indiquera au navigateur que notre marqueur sera une image.
Prenez n'importe quelle photo sur Internet en taille (15pxx15px), que vous prévoyez d'utiliser comme marqueur et placez-le dans le dossier précédemment créé avec les images images. Après cela, la propriété reste image de style de liste spécifiez le chemin d'accès à l'image et le navigateur remplacera l'image au lieu du marqueur.
DANS CSS le chemin est spécifié à l'aide d'un mot-clé URL() . Entre parenthèses nous indiquons le chemin d'accès à l'image ../images/Nom de l'image.jpg , par rapport à la feuille de style.
Autrement dit, qu'est-ce que cela signifie concernant la feuille de style ? Notre feuille de style - fichier style.css , est dans le catalogue CSS, et la photo est dans le catalogue images. Cela signifie que le navigateur doit indiquer qu'il doit d'abord quitter le répertoire. CSS, cela se fait comme ceci : ../ , puis allez dans le répertoire avec l'image images et ensuite seulement, trouvez l'image souhaitée.
Ul( list-style-image: url(../images/Nom du marqueur image.jpg); )
Si vous avez spécifié le chemin correct vers l'image, le navigateur chargera votre image à la place des marqueurs habituels.
Lorsque vous utilisez des images comme marqueur, vous aurez besoin de connaître une propriété supplémentaire, responsable de l'emplacement du marqueur d'image. Pour voir comment fonctionne cette propriété, nous faisons un cadre rouge pour tous les éléments
Ul li( bordure : 2px solide #ff0000; )
Maintenant, si vous regardez, votre marqueur d'image est situé à l'extérieur de l'élément de liste, le même cadre que nous avons créé ci-dessus. Par conséquent, il arrive parfois que vous ayez besoin que le marqueur soit à l’intérieur d’un élément de liste. C'est pourquoi il y a une propriété position-style-liste , qui est initialement défini sur dehors , c'est-à-dire définir des marqueurs à l'extérieur de l'élément.
Pour intégrer un marqueur à l'intérieur d'un élément, utilisez la valeur à l'intérieur . Maintenant, si vous définissez cette propriété sur à l'intérieur , alors le marqueur sera à l'intérieur de l'élément de liste et le cadre rouge nous le montre clairement.
Ul( list-style-image: url(../images/Nom du marqueur image.jpg); list-style-position:inside; ) ul li( border: 2px solid #ff0000; )
C’est ainsi que fonctionnent ces trois propriétés. Il existe également une version abrégée de la notation qui combine toutes ces propriétés.
Autrement dit, la propriété est indiquée style de liste puis, dans l'ordre, les valeurs du type de marqueur, de la position du marqueur et, si nécessaire, du chemin d'accès à l'image, qui sera le marqueur. Et nous obtenons l’image suivante :
Ul( list-style: inside url(../images/Nom du marqueur image.jpg); )
C'est ainsi qu'est rédigée une version abrégée des règles relatives à l'apparition des listes. Cette entrée indique que le marqueur doit être à l'intérieur de l'élément et que le marqueur sera la même image
C'est tout avec les listes, mais passez un peu plus de temps sur les listes, entraînez-vous en installant divers marqueurs et découvrez comment tout cela fonctionne. DANS démo les options pour les paramètres des marqueurs seront affichées, où vous pourrez, par comparaison, vérifier l'exactitude de votre travail.
