Vous pouvez utiliser CSS pour créer des listes à puces et numérotées, et utiliser une image appropriée comme puce.
Table 1 répertorie les propriétés des éléments destinés à la création et à la modification de listes.
| Biens | Évaluer | Description | Exemple |
|---|---|---|---|
| type de liste | disque cercle carré décimal bas-romain supérieur-romain alpha inférieur alpha supérieur rien |
Type de marqueur. Les trois premiers sont utilisés pour créer une liste à puces et les autres sont utilisés pour créer une liste numérotée. | LI (type de style de liste: cercle) LI (type de style de liste: alpha supérieur) |
| image-style-liste | rien URL |
Définit le symbole de marqueur sur n'importe quelle image. | LI (image de style de liste: url (check.gif)) |
| position de style de liste | à l'extérieur à l'intérieur |
Sélection de la position du marqueur par rapport au bloc de lignes de texte. | LI (position de style de liste: à l'intérieur) |
| style liste | Une propriété universelle qui inclut simultanément toutes les propriétés ci-dessus. |
Depuis le tag
- ou
- Le titre doit être plus court que trois lignes.
- Lorsque vous nommez des sections, utilisez des termes déjà bien établis tels que livre d'or, chat, lien, page d'accueil et autres.
- Avant d'utiliser un terme ou un mot spécifique, décidez si le lecteur le comprendra.
- performance de tous les liens
- prise en charge de différents navigateurs
- lisibilité du texte
- performance de tous les liens
- prise en charge de différents navigateurs
- lisibilité du texte
- performance de tous les liens
- prise en charge de différents navigateurs
- lisibilité du texte
- première
- deuxième
- le troisième
- première
- deuxième
- le troisième
- première
- deuxième
- le troisième
- première
- deuxième
- le troisième
- première
- deuxième
- le troisième
- Liste non ordonnée
- Liste non ordonnée
- Liste non ordonnée
- Liste non ordonnée
- rien - Supprime les marqueurs de la liste
- cercle - Marqueur en forme de cercle
- disque " - Marqueur sous la forme d'un cercle plein. Valeur par défaut
- carré - Marqueur en forme de carré
- arménien - Numérotation arménienne
- décimal - Marqueur numérique
- zéro décimal - Les nombres avec "0" avant le début (01, 02, 03, etc.)
- géorgien - Numérotation géorgienne
- alpha inférieur - (a, b, c, d, e, etc.)
- bas-grec - (alpha, bêta, gamma, etc.)
- bas-latin - (a, b, c, d, e, etc.)
- Iower-romain - (i, ii, iii, iv, v, etc.)
- alpha supérieur - (A, B, C, D, E, etc.)
- latin supérieur - (A, B, C, D, E, etc.)
- supérieur-romain - (I, II, III, IV, V, etc.)
- hériter - La valeur doit être héritée de l'élément parent
- .
- Élément de liste
- Liste unique
- Listes originales
- ZORNET.RU - Pour Webmaster
- Une autre liste
- Élément de liste
- Liste unique
- Listes originales
- ZORNET.RU - Pour Webmaster
- Une autre liste
- Scripts pour uCoz
- Modèles pour uCoz
- Conception de site Web
- Styles pour le site
- Style CSS
- Le premier élément du site
- Deuxième élément pour le site
- Troisième élément pour le site
- Le quatrième élément pour le site
- Le cinquième élément du site
- qui agit comme son parent, vous pouvez définir le style des sélecteurs UL et LI. Ainsi, dans l'exemple 1, le sélecteur UL est utilisé et les paramètres de style sont définis pour lui.
Exemple 1. Création d'une liste à puces
Le résultat de cet exemple est illustré à la Fig. 1. Utilise des marqueurs carrés et leur placement externe par rapport au texte.
Chiffre: 1. Vue de la liste modifiée avec les styles
La propriété list-style-image est utilisée pour définir votre propre image comme marqueur, comme indiqué dans l'exemple 2.
Exemple 2. Utilisation d'images comme marqueur
Le résultat de cet exemple est illustré à la Fig. 2. Une petite image est utilisée comme marqueurs.
Chiffre: 2. Images comme marqueurs
Quelques exemples de création de différentes listes sont donnés dans le tableau. 2.
| Code HTML | Exemple |
|---|---|
| |
|
| Points à considérer lors du test d'un site: |
|
| Points à considérer lors du test d'un site: |
|
|
Liste numérotée avec chiffres arabes: |
|
|
Une liste numérotée avec des chiffres romains minuscules: |
|
|
Liste numérotée avec chiffres romains majuscules: |
|
|
Une liste numérotée avec des lettres latines minuscules: |
|
|
Une liste numérotée avec les majuscules de l'alphabet latin: |
Nous continuons à étudier CSS propriétés de divers éléments. Et dans cette leçon, nous parlerons de la conception des listes. Dans la pratique, les listes sont utilisées assez souvent, il faut donc se souvenir de ces propriétés.
Vue commune des marqueurs
Et le premier est de définir l'apparence des marqueurs. Les listes ont des marqueurs différents. En cours sur HTML Listes numérotées montre comment changer les marqueurs à l'aide de l'attribut taper ... Mais sachant CSS cet attribut n'est plus nécessaire, car tout cela se fait beaucoup plus commodément, grâce à la feuille de style CSS.
Pour démonstration, créons une liste en utilisant CSS... Peu importe lequel liste numérotée ou liste non ordonnée, depuis l'utilisation de la propriété type de liste nous pouvons ajouter des marqueurs ou les supprimer.
HTML
Ainsi, une liste régulière a été créée et, par défaut, des marqueurs ont été créés sous la forme de cercles remplis. Et très souvent la question se pose, comment supprimer des puces?
Suppression du marqueur de la liste à l'aide de la propriété type de liste et lui attribuer une valeur rien ... Il s'agit de l'option la plus courante pour supprimer des puces d'une liste. Et pour la liste, définissons la même propriété.
Ul (type de style de liste: aucun;)
Maintenant, si nous actualisons la page, nous verrons que cette propriété a supprimé les marqueurs de la liste.
Ce sont toutes sortes de puces pour les listes. Les quatre premiers types sont les plus courants, les autres sont 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 du sens rien mettre le nom de notre marqueur supérieur-romain .
Ul (type de style de liste: romain supérieur;)
L'actualisation de la page révèle de grands chiffres romains dans les listes à puces. De cette façon, vous pouvez modifier l'apparence des marqueurs de liste en définissant l'apparence souhaitée via la propriété type de liste .
Marqueur d'image
Le deuxième point, assez important, et un marqueur fréquemment utilisé est une image sous la forme d'un marqueur. Vous devez souvent utiliser un marqueur sous la forme d'une belle image et les options habituelles pour les marqueurs présentés CSS inapproprié. Pour cela, des images sont utilisées. Et cela se fait en utilisant une propriété spéciale appelée image-style-liste ... Cela indiquera au navigateur que nous aurons une image comme marqueur.
Prenez n'importe quelle photo sur Internet en taille (15 px x 15 px)que vous prévoyez d'utiliser comme marqueur et placez-le dans le dossier précédemment créé avec des images images... Après cela, la propriété reste image-style-liste spécifiez le chemin vers l'image et le navigateur remplacera l'image au lieu du marqueur.
DANS CSS le chemin est indiqué à l'aide du mot-clé uRL () ... Spécifiez le chemin d'accès à l'image entre crochets ../images/ Nom de l'image.jpg , par rapport à la feuille de style.
Autrement dit, qu'est-ce que cela signifie par rapport à la feuille de style? Notre feuille de style est un fichier style.css , se trouve dans le répertoire CSS, et l'image est dans le répertoire images... Cela signifie que le navigateur doit dire au navigateur de quitter le répertoire en premier. CSS, ceci est fait comme ceci: ../ , puis allez dans le répertoire avec l'image images et alors seulement trouver l'image désirée.
Ul (list-style-image: url (../ images / Nom du marqueur image.jpg);)
Si vous avez spécifié le chemin d'accès correct à l'image, le navigateur chargera votre image au lieu des marqueurs habituels.
Lorsque vous utilisez une image comme marqueur, vous devez connaître une autre propriété qui est responsable de la position du marqueur d'image. Pour voir comment cette propriété fonctionne, nous faisons un cadre rouge pour tous les éléments
Ul li (bordure: 2px solide # ff0000;)
Maintenant, si vous regardez, alors votre marqueur d'image est en dehors de l'élément de liste, le cadre même que nous avons créé ci-dessus. Par conséquent, il y a des moments où vous avez besoin que le marqueur soit à l'intérieur de l'élément de liste. Pour cela, il y a une propriété position de style de liste qui est initialement réglé sur à l'extérieur , c'est-à-dire définir des marqueurs en dehors de l'élément.
Pour incorporer le marqueur à l'intérieur de l'élément, utilisez la valeur à l'intérieur ... Maintenant, si vous définissez cette propriété sur valeur à 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 notation abrégée qui combine toutes ces propriétés.
Autrement dit, la propriété est spécifiée style liste puis, dans l'ordre, les valeurs du type de marqueur, la position du marqueur et, si nécessaire, le chemin vers 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 que s'écrit une version courte des règles relatives à l'apparence 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 prenez un peu plus de temps pour les listes, mais pratiquez-vous avec l'installation de divers marqueurs, sentez comment tout cela fonctionne. DANS démo des options pour les paramètres de marqueur seront affichées, où vous pouvez, par comparaison, vérifier l'exactitude de votre travail.
Listes CSS - un ensemble de propriétés responsables de la conception des listes. L'utilisation de listes HTML est très courante lors de la création des barres de navigation du site. Les éléments de liste représentent une collection d'éléments de bloc.
Avec les propriétés CSS standard, vous pouvez modifier l'apparence du marqueur de liste, ajouter une image pour le marqueur, et changer l'emplacement du marqueur... La hauteur du bloc de marqueur peut être définie avec la propriété line-height.
Styliser les listes avec des styles CSS
1. Type de marqueur de liste type de style de liste
La propriété modifie le type du marqueur ou supprime le marqueur pour les listes à puces et numérotées. Hérité.
| type de liste | |
|---|---|
| Valeurs: | |
| disque | Valeur par défaut. Le cercle plein est utilisé comme marqueur pour les éléments de la liste. |
| arménien | Numérotation arménienne traditionnelle. |
| cercle | Un cercle ouvert est utilisé comme marqueur. |
| cjk-idéographique | Numérotation idéographique. |
| décimal | 1, 2, 3, 4, 5, … |
| zéro décimal | 01, 02, 03, 04, 05, … |
| géorgien | Numérotation géorgienne traditionnelle. |
| hébreu | Numérotation juive traditionnelle. |
| Hiragana | Numérotation japonaise: a, i, u, e, o,… |
| Hiragana-iroha | Numérotation japonaise: i, ro, ha, ni, ho, ... |
| Katakana | Numérotation japonaise: A, I, U, E, O, ... |
| katakana-iroha | Numérotation japonaise: I, RO, HA, NI, HO, ... |
| alpha inférieur | a, b, c, d, e, ... |
| bas-grec | Symboles minuscules de l'alphabet grec. |
| bas-latin | a, b, c, d, e, ... |
| bas-romain | je, ii, iii, iv, v, ... |
| rien | Le marqueur est manquant. |
| carré | Un carré rempli ou non peint est utilisé comme marqueur. |
| alpha supérieur | A, B, C, D, E, ... |
| latin supérieur | A, B, C, D, E, ... |
| supérieur-romain | I, II, III, IV, V, ... |
| initiale | Définit la valeur de la propriété sur sa valeur par défaut. |
| hériter | Hérite de la valeur de propriété de l'élément parent. |
Syntaxe
Ul (type de style de liste: aucun;) ul (type de style de liste: carré;) ol (type de style de liste: aucun;) ol (type de style de liste: alpha-inférieur;) 
Chiffre: 1. Un exemple de conception de listes à puces et numérotées
2. Images pour les éléments de liste d'images de style liste
Vous pouvez utiliser des images et des remplissages en dégradé comme marqueur pour les éléments de liste. Hérité.
Syntaxe
Ul (image de style de liste: url ("images / romb.png");) ul (image de style de liste: gradient linéaire (# FF7A2F 0, # FF7A2F 50%, # FFB214 50%);) 
Chiffre: 2. Concevez une liste à puces à l'aide d'une image 
Chiffre: 3. Styliser une liste à puces avec un dégradé
3. Emplacement du marqueur de liste list-style-position
Cette propriété permet de positionner le marqueur à l'extérieur ou à l'intérieur du contenu de l'élément de liste. Hérité.
Bienvenue sur mon blog. Aujourd'hui, je voudrais aborder le sujet de la suppression des marqueurs des éléments de liste à puces (ul li) via css, car ils ne sont souvent pas nécessaires et n'interfèrent que dans la conception du site.
Suppression des marqueurs par défaut
Parfois, il vous suffit de les supprimer. Par exemple, lors de la décoration d'un menu ou autre chose. La propriété de type de liste ou de style de liste abrégé est responsable de l'affichage des marqueurs. La valeur par défaut est cercle, qui est un cercle rempli de noir. Pour le supprimer, il vous suffit d'écrire comme ceci:
Ul (
Type de style de liste: aucun;
}
Ul (
Style de liste: aucun;
}
Notez que la propriété est écrite dans la liste entière en général, et non dans ses éléments individuels. Il est très important. L'entrée ci-dessus supprime les puces de toutes les annonces sur votre site, mais il se peut que vous ayez plusieurs conceptions de liste.
Dans ce cas, les classes aideront à gérer leur style. Il vous suffit de raccrocher la classe de style pour les listes nécessaires et de les concevoir.
Comment mettre votre image de marqueur
Oui, oui, css vous permet de créer votre propre marqueur beaucoup plus attractif. Il peut également être défini en utilisant la propriété list-style-image, ou plus simplement en utilisant le style liste. La valeur entre parenthèses contient le chemin d'accès au fichier, et devant lui, vous devez mettre le mot-clé url.
Si vous décidez de changer les listes standard ul et li, ce sujet vous intéressera. Depuis ici, vous découvrirez plusieurs solutions originales. Ce qui vous aidera certainement à changer la vue standard en une vue unique, où va le style CSS, pour la conception des listes. L'avantage est que nous n'utiliserons qu'une seule classe dans tout, ce qui changera radicalement le look. En plus de ces paramètres, vous pouvez spécifier à quel numéro la liste doit commencer, ici vous pouvez tout faire vous-même. La valeur par défaut initiale pour les listes numérotées est sur la première ou la lettre A.Sur la base des bases, nous allons maintenant examiner de plus près les éléments utilisés pour donner une structure et une signification aux différentes parties de la conception. Si quelqu'un ne sait pas, ul et li sont de bien meilleures options que le texte brut, car lorsque le texte est enveloppé, en particulier sur un mobile, il est parfaitement en retrait et ne s'enroule pas autour du marqueur.
Les listes sont considérées comme un excellent moyen de présenter des informations sur les pages car elles sont faciles à lire et ont une belle apparence. Beaucoup de gens semblent penser que les puces sont de petites images, mais en réalité, elles sont toutes créées à l'aide d'un code HTML assez simple. Vous pouvez imbriquer différents types de listes les unes dans les autres si vous le souhaitez, n'oubliez pas de les fermer correctement. Vous pouvez jouer avec le texte que vous voulez dans toutes ces commandes de liste.
Vous devez également savoir que les listes contiennent initialement plusieurs éléments:
1
... Information désordonnée.
2
... Informations commandées.
3
... Définitions.
Premiers pas avec l'installation:
1. Option:
CSS
Ksangelopan (
marge: 19px 0 0;
rembourrage: 0;
style liste: aucun;
contre-réinitialisation: li;
}
.ksangelopan li (
bordure: 2px solide # 3575ad;
arrière-plan: # d7dee4;
position: relative;
marge inférieure: 17px;
rembourrage: 15px 9px;
}
.ksangelopan li: survol (
indice z: 1;
}
.ksangelopan li: avant (
bordure: 2px solide # 2270b3;
position: absolue;
haut: -14px;
rembourrage: 3px 9px;
taille de la police: 11px;
poids de la police: gras;
couleur: # 246eaf;
arrière-plan: # f2f4f7;
contre-incrément: li;
contenu: compteur (li);
-webkit-transition-duration: 0.4s;
durée de transition: 0,4 s;
}
.ksangelopan li: hover: avant (
arrière-plan: # 2672b3;
couleur: # f7f9fb;
-webkit-transform: translate (-11px, 0);
-ms-transform: translate (-11px, 0);
-o-transform: translate (-11px, 0);
transformer: traduire (-11px, 0);
}
.ksangelopan li: après (
teneur: "";
position: absolue;
durée de transition: 0,3 s;
-webkit-transition-property: largeur;
propriété de transition: largeur;
indice z: -1;
arrière-plan: #FFF;
hauteur: 100%;
gauche: 0;
haut: 0;
largeur: 0;
}
.ksangelopan li: hover: après (
largeur: 100%;
}
C'est toute l'installation.
2 Deuxième option:
CSS
Beleduzlopamges (
marge inférieure: 8px;
rembourrage: 0;
style liste: aucun;
contre-réinitialisation: li;
}
.beleduzlopamges li (
position: relative;
bordure: solide 2px # 195588;
arrière-plan: # eff3f7;
rembourrage: 15px 19px 15px 27px;
marge: 12px 0 12px 40px;
-webkit-transition-duration: 0,3 s;
durée de transition: 0,3 s;
}
.beleduzlopamges li: survol (
arrière-plan: #FFF;
}
.beleduzlopamges li: avant (
hauteur de ligne: 32px;
position: absolue;
haut: 4px;
à gauche: -39px;
largeur: 39px;
text-align: centre;
taille de la police: 16px;
poids de la police: gras;
couleur: # f9f5f5;
arrière-plan: # 275b88;
contre-incrément: li;
contenu: compteur (li);
durée de transition: 0,2 s;
}
.beleduzlopamges li: hover: avant (
largeur: 46px;
}
.beleduzlopamges li: après (
position: absolue;
gauche: 0;
haut: 4px;
teneur: "";
hauteur: 0;
largeur: 0;
bordure: 16px solide transparent;
couleur de la bordure gauche: # 275b88;
-webkit-transition-duration: 0,2 s;
durée de transition: 0,2 s;
}
.beleduzlopamges li: hover: après (
marge gauche: 6px;
}
L'échelle centrale peut être réglée indépendamment pour correspondre au style principal du site.
3 Troisième option:
CSS
Nizualisanelag (
rembourrage: 0;
style liste: aucun;
contre-réinitialisation: li;
}
.nizualisanelag li (
position: relative;
rembourrage: 9px 17px 17px 25px;
marge gauche: 39px;
durée de transition: 0,2 s;
curseur: pointeur;
poids de la police: gras;
couleur: # 343638;
}
.nizualisanelag li: avant (
bordure: 3px solide transparent;
hauteur de ligne: 35px;
position: absolue;
haut: 0;
gauche: -29px;
largeur: 41px;
text-align: centre;
taille de la police: 14px;
poids de la police: gras;
couleur: # 619dce;
contre-incrément: li;
contenu: compteur (li);
durée de transition: 0,3 s;
box-dimensionnement: border-box;
}
.nizualisanelag li: hover: before (
couleur: # 337AB7;
}
.nizualisanelag li: après (
position: absolue;
haut: 0;
gauche: -29px;
largeur: 41px;
hauteur: 41px;
bordure: solide 5px # 468bd0;
rayon de la frontière: 50%;
teneur: "";
opacité: 0,5;
-webkit-box-dimensionnement: border-box;
-moz-box-sizing: border-box;
box-dimensionnement: border-box;
}
.nizualisanelag li: hover: après (
animation: 500 ms entrée-sortie 0s rebondi;
opacité: 1;
}
@keyframes bounceIn (
0% {
opacité: 0;
transformée: scale3d (.3, .3, .3);
}
20% {
transformée: scale3d (1,3, 1,3, 1,3);
}
40% {
transformée: scale3d (.9, .9, .9);
}
60% {
opacité: 1;
transformée: scale3d (1,03, 1,03, 1,03);
}
80% {
transformée: scale3d (.97, .97, .97);
}
à (
opacité: 1;
transformée: scale3d (1, 1, 1);
}
}
Livré avec une belle animation.
4 Quatrième option:
CSS
Rembourrage: 0;
style liste: aucun;
}
.kudezamuden li (
rembourrage: 6px;
}
.kudezamuden li: avant (
padding-right: 11px;
poids de la police: gras;
couleur: # 4979a0;
contenu: "\\ 2606";
durée de transition: 0,4 s;
}
.kudezamuden li: hover: avant (
couleur: # 235e90;
contenu: "\\ 2605";
}
Comme dans les versions précédentes, seule l'icône elle-même a été modifiée.
En général, il s'agit d'une petite sélection de listes, cela donnera au webmestre de faire une belle liste sur le portail, où il pourra lui-même l'organiser davantage, comme il veut la voir.
Si vous avez besoin de placer des éléments dans une liste numérotée au lieu d'une liste à puces, alors le HTML ordonné sera utilisé ici. Cette liste est créée à l'aide de la balise ol. La numérotation commence à un et augmente de un pour chaque élément de liste ordonné suivant avec une balise li.
