Règles CSS pour personnaliser l'apparence d'une liste sur une page html. Propriété de style de liste (type, image, position). Règle de style liste CSS préfabriquée

Bonjour, chers lecteurs du site blog. Aujourd'hui, il y aura un autre article dans la tirelire. Il se concentrera sur la conception utilisant les règles des feuilles de style en cascade. Tout est très simple ici, mais j'ai néanmoins décidé de consacrer un article séparé à ce sujet.

Un peu plus tôt, nous avons déjà réussi à découvrir comment, comment et comment travailler avec. Eh bien, un peu plus tôt, nous avons examiné en détail toutes sortes et leurs diverses combinaisons pour indiquer exactement cet élément de code HTML pour lequel certaines propriétés de style devront être appliquées.

Style de liste - conception de listes en code HTML

Ainsi, dans le langage de balisage de style, il existe trois règles distinctes commençant par list-style, qui servent à configurer apparence des listes (numérotées ou à puces) dans le code des documents web. De plus, il existe une règle de style liste CSS préfabriquée, qui vous permet de réduire légèrement la quantité de code. Mais tout d’abord.

Ce que nous allons maintenant considérer peut être utilisé à la fois pour Éléments HTML LI, et pour les éléments Ul et Ol (respectivement listes à puces et listes numérotées). Quelle sera la différence entre l’utilisation du style liste pour ces balises ?

En effet, vous pouvez savoir si une propriété est héritée ou non sur le site du validateur (lire à ce sujet sur le lien fourni) dans la section dédiée à la spécification des feuilles de style en cascade. Dans la colonne « Hérité », « Oui » apparaîtra en regard des règles héritées :

Commençons avec type de style de liste, qui permet de définir le type de marquage pour éléments individuels Liste HTML. Les valeurs suivantes sont valables pour cette règle :

  1. Aucun - aucun marquage ne sera effectué (list-style-type : aucun ; appliqué à cet élément et il n'a donc pas de marqueur)
  2. Le disque est un cercle rempli (list-style-type:disc; est utilisé pour cette ligne)
  3. Cercle - cercle comme marqueur
  4. Carré - un carré comme marqueur
  5. Décimal - Chiffres arabes (list-style-type:decimal;)
  6. alphabétique inférieur - minuscule
  7. alpha-majuscule - lettres latines majuscules
  8. chiffre romain inférieur : chiffres romains minuscules
  9. upper-roman - Chiffres romains en majuscules

Selon vous, qu'est-ce qui a été utilisé pour créer la liste juste au dessus, Ul ou Ol ? Question piège. Il s'avère que ce n'est plus important, même si dans ce cas particulier j'ai utilisé Ol, mais en le changeant en Ul, l'apparence restera la même, car elle est définie pour chaque élément avec son propre Valeur CSS règles de type de style de liste.

En fait, Ul et Ol ne diffèrent que par leur comportement par défaut (marques Ul et numéros Ol). Mais si vous le souhaitez, vous pouvez facilement transformer un style de liste en un autre en utilisant le type de style de liste. La police utilisée pour marquer les chiffres ou les lettres est exactement la même que celle que vous avez définie pour le contenu des balises LI. Par exemple, en changeant la couleur de la police de la liste, nous changerons et couleur du marqueur:

  1. Modification de la couleur du texte (list-style-type:lower-roman;color:red) et modification de la couleur du marqueur

Passons à la propriété CSS suivante - position-style-liste. En l'utilisant, vous pouvez définir la position (placement) de la zone avec le marqueur. Il n'y a que deux valeurs possibles pour cela :

Ceux. Essentiellement, dans list-style-position, nous indiquons où la zone avec les marqueurs doit être placée - à l'extérieur de l'élément LI (à l'extérieur) ou à l'intérieur de celui-ci (à l'intérieur). Par défaut, la zone avec le marqueur est hors limites, c'est-à-dire la valeur à l'extérieur est utilisée.

Voyons cela avec un exemple. Dans le premier élément de la liste, j'écrirai spécifiquement list-style-position:inside et nous verrons ce qui se passe :

  1. Ici tout est par défaut
  2. Voici à quoi ressemblera le placement d’une zone de marqueur avec l’intérieur. Veuillez noter que la deuxième ligne de cet élément et le marqueur sont situés au même niveau
  3. Ici tout est par défaut

Image de style liste et règle CSS préfabriquée

Ensuite, nous avons List-style-image - vous permet de spécifier une image qui sera utilisée comme marqueur. Cette règle est définie sur None par défaut (c'est-à-dire qu'aucune image n'est utilisée comme marqueur), mais vous pouvez écrire la fonctionnalité Url() en spécifiant le chemin d'accès à l'image, qui fera ensuite office de marqueur dans cette liste :

Cela pourrait ressembler à ceci :

Image de style liste : url(https://site/images/list_star.png) ;

  1. Ici tout est par défaut
  2. Voilà à quoi pourrait ressembler l’utilisation d’une image comme marqueur. Il est clair que vous pouvez choisir une image plus adaptée à cet effet.
  3. Par exemple, comme ici.

Comme vous vous en souvenez, dans l'article sur j'ai dit que les images appartiennent à des éléments en ligne (en fait, pour le navigateur, c'est la même lettre, mais parfois très grande).

Ici, l'image remplace le marqueur (lettres ou chiffres). Dans ce cas, la hauteur de la ligne avec l'élément de liste sera augmentée si vous insérez une grande image comme marqueur (comme cela s'est produit dans le deuxième élément de l'exemple donné juste au-dessus).

Dans la fonctionnalité d'image de style de liste, vous pouvez spécifier les deux images. Si l'image ne se charge pas, le marqueur ou la numérotation par défaut sera utilisé, ou ce qui est spécifié dans le type de style de liste pour cet élément de liste.

Pour écrire les trois règles CSS décrites ci-dessus en une seule, vous pouvez utiliser le style Liste, qui est un style préfabriqué pour la conception de listes. L'ordre dans lequel les valeurs sont spécifiées n'a pas d'importance. Les valeurs que vous ne spécifiez pas dans le style Liste seront explicitement interprétées par le navigateur avec les valeurs par défaut.

Où puis-je voir les valeurs par défaut ? Oui, tout est là - dans la spécification CSS du validateur W3C dans la colonne « Valeur initiale » en face des propriétés qui vous intéressent :

Les valeurs des propriétés individuelles dans la règle préfabriquée de style liste sont séparées par des espaces. L'emplacement, comme déjà mentionné, n'est pas important :

En pratique, cela pourrait ressembler à ceci :

Style de liste : à l'intérieur de l'URL en haut-romain (https://site/images/list_star.png) ;

Vous pouvez utiliser les valeurs dans n'importe quel ordre et dans n'importe quel nombre (en commençant par un). À propos, les menus sont le plus souvent créés sur des sites Web à l'aide de listes, et la propriété List-style est utilisée pour pour supprimer des marqueurs des listes de menus, qui y sont complètement inutiles :

Type de style de liste : aucun ;

Style de liste : aucun ;

Bonne chance à toi! A bientôt sur les pages du site blog

Vous pourriez être intéressé

Affichage (bloc, aucun, en ligne) en CSS - définit le type d'affichage des éléments HTML sur la page Web Comment configurer la couleur d'arrière-plan alternée des lignes de tableaux, listes et autres éléments HTML du site à l'aide de la pseudo-classe nième enfant
Flotter et effacer en CSS - outils de mise en page de blocs
Positionnement à l'aide de la règle Z-index et CSS Cursor pour changer le curseur de la souris
Position (absolue, relative et fixe) - façons de positionner les éléments HTML en CSS (règles gauche, droite, haut et bas)
À quoi sert CSS, comment connecter des feuilles de style en cascade à Document HTML et la syntaxe de base de ce langage
Propriétés CSS text-decoration, vertical-align, text-align, text-indent pour la décoration de texte en HTML
Règles de police (poids, famille, taille, style) et hauteur de ligne pour le style des polices en CSS
Arrière-plan en CSS (couleur, position, image, répétition, pièce jointe) - tout pour définir la couleur d'arrière-plan ou l'image d'arrière-plan des éléments HTML
CSS - qu'est-ce que c'est, comment les feuilles de style en cascade se connectent-elles Code HTML en utilisant le style et le lien
Priorités en CSS et leur augmentation en raison de l'importance, de la combinaison et du regroupement des sélecteurs, des styles utilisateur et auteur

Définit l'adresse d'une image qui sert de marqueur de liste. Cette propriété est héritée, donc pour les éléments de liste individuels, la valeur none est utilisée pour restaurer le marqueur.

information brève

Syntaxe

image-style-liste : aucun | URL (<адрес>)

Désignations

DescriptionExemple
<тип> Indique le type de la valeur.<размер>
UN BLes valeurs doivent être sorties dans l'ordre spécifié.<размер> && <цвет>
Un | BIndique que vous devez sélectionner une seule valeur parmi celles proposées (A ou B).normale | en minuscule
Un || BChaque valeur peut être utilisée indépendamment ou avec d'autres dans n'importe quel ordre.largeur || compter
Groupes de valeurs.[ récolte || croix]
* Répétez zéro ou plusieurs fois.[,<время>]*
+ Répétez une ou plusieurs fois.<число>+
? Le type, le mot ou le groupe spécifié est facultatif.en médaillon ?
(UN B)Répétez au moins A, mais pas plus de B fois.<радиус>{1,4}
# Répétez une ou plusieurs fois séparées par des virgules.<время>#

Valeurs

none Désactive l'image comme marqueur pour l'élément parent. url Chemin relatif ou absolu vers le fichier graphique. La valeur peut être spécifiée entre guillemets simples, doubles ou sans guillemets.

Exemple

image de style de liste

  • Il est facile de vérifier qu’une transformation affine est monotone.
  • La preuve stabilise de manière décisive l’intégrale de courbe négative, démontrant clairement le non-sens de ce qui précède.
  • La série entière, en première approximation, déforme inutilement la bande de Möbius multidimensionnelle, d'où découle l'égalité à prouver.

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Utilisation de la propriété list-style-image

Modèle objet

Un objet.style.listStyleImage

spécification

Chaque spécification passe par plusieurs étapes d'approbation.

  • Recommandation - La spécification a été approuvée par le W3C et est recommandée comme norme.
  • Recommandation du candidat ( Recommandation possible) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre la norme.
  • Recommandation proposée Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
  • Brouillon de travail - Une version plus aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
  • Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
  • Brouillon ( Projet de spécification) - la première version préliminaire de la norme.

Navigateurs

Navigateurs

Les notations suivantes sont utilisées dans la table du navigateur.

Dans ce chapitre, nous étudierons les attributs de style utilisés pour définir options de paragraphe. Les paragraphes au sens large du terme - qui comprennent à la fois les titres et listes, des balises d'adresse et des guillemets volumineux. En général, les éléments de bloc abordés au chapitre 2 et conçus pour structurer le texte.

Enfin, nous examinerons deux attributs de style très spécifiques qui nous permettent de définir l'affichage d'un élément de page Web (c'est-à-dire s'il est basé sur des blocs ou en ligne) et de rendre l'élément invisible. Ces attributs de style sont rarement utilisés et uniquement en conjonction avec certains comportements (voir Partie III).

Options de sortie de texte

Nous commencerons par les attributs de style qui contrôlent sortie de texte dans des éléments de bloc structurant le texte. Il y en a très peu. Et ils ne s'appliquent tous qu'aux éléments de bloc.

L'attribut de style text-align spécifie l'alignement horizontal du texte :

text-align : gauche|droite|centre|justifier|hériter

Les valeurs disponibles ici sont gauche (alignée à gauche ; comportement normal du navigateur Web), droite (alignée à droite), centre (centre) et justifier (alignement complet).

Exemples:

P (alignement du texte : justifier)
H1 (alignement du texte : centre)

L'attribut de style text-indent spécifie l'indentation de la « ligne rouge » :

retrait du texte:<отступ "красной строки">

Les valeurs d'indentation absolues et relatives (par rapport à la largeur du paragraphe) sont autorisées ici. Par défaut, le retrait de la ligne rouge est nul. Notez que l'attribut de style text-indent ne prend pas en charge la valeur d'héritage.

Exemple:

P (retrait du texte : 5 mm)

Désormais, les paragraphes auront une « ligne rouge ».

Listes parmi les éléments de bloc, ils se distinguent. Principalement dû au fait que, d'une part, ils contiennent d'autres éléments de bloc (éléments individuels), et d'autre part, ils incluent des marqueurs et des numérotations, qui sont placés par le navigateur Web lui-même. Nous allons maintenant parler des marqueurs et de la numérotation, ou plus précisément des attributs de style destinés à définir leurs paramètres.

L'attribut de style list-style-type spécifie le type de puces ou la numérotation des éléments de liste :

type de style de liste : disque | cercle | carré | décimal | décimal en tête-zéro |

bas-romain|haut-romain|bas-grec|inférieur-alpha|inférieur-latin|

alpha-supérieur|latin supérieur|arménien|géorgien|aucun|hériter

Comme vous pouvez le constater, de nombreuses valeurs sont disponibles pour cet attribut de style. Ils représentent à la fois différents types de marqueurs et différentes méthodes de numérotation.

Marqueur de disque en forme de cercle noir (comportement habituel pour les listes à puces).

Cercle - marqueur en forme de cercle lumineux.

Carré - marqueur en forme de carré. Il peut être clair ou sombre, selon le navigateur Web.

Décimal - numérotation avec des chiffres arabes (comportement habituel pour les listes numérotées).

Décimal-zéro en tête - numérotation en chiffres arabes de 01 à 99 avec un zéro non significatif.

Romain inférieur - numérotation en petits chiffres romains.

Romain supérieur - numérotation en grands chiffres romains.

Grec inférieur - numérotation en petites lettres grecques.

Alphabétique inférieur et latin inférieur - numérotation en petites lettres latines.

Alpha supérieur et latin supérieur - numérotation en lettres latines majuscules.

Arménien - numérotation utilisant des chiffres arméniens traditionnels.

Géorgien - numérotation utilisant des chiffres géorgiens traditionnels.

Aucun - il n'y a pas de marqueur ni de numérotation (comportement habituel pour les non-listes).

SUR UNE NOTE

Nous n'avons examiné que les valeurs d'attribut de type style de liste fournies par CSS 3. Cependant, CSS 2 a fourni plusieurs valeurs supplémentaires qui sont toujours prises en charge par les navigateurs Web. Vous pouvez les trouver sur la page Web https://developer.mozilla.org/en/CSS/list-style-type.

L'attribut de style list-style-type peut être défini pour les deux listes, et pour les éléments de liste individuels. Dans ce dernier cas, une liste est créée dans laquelle les éléments ont des marqueurs ou une numérotation différents. Parfois, cela peut s'avérer utile.

Voici la définition d’une liste à puces avec un marqueur carré :

UL (type de style de liste : carré)

Et dans le listing 9.1, nous avons défini le même marqueur pour l'un des éléments de la liste à puces.

L'attribut de style list-style-image vous permet de spécifier n'importe quelle image graphique comme marqueur pour les éléments de liste (créer un marqueur graphique). Dans ce cas, la valeur de l'attribut style list-style-type, s'il est spécifié, est ignorée :

image-style-liste : aucun|<интернет-адрес файла изображения>|hériter

L'adresse Internet du fichier de marqueur graphique est spécifiée dans le même format que l'adresse Internet du fichier image de fond (voir chapitre 8) :

UL ( liste-style-image : url(/markers/dot.gif) )

La valeur none supprime le marqueur graphique et renvoie un marqueur simple et non graphique. C'est un comportement normal.

L'attribut de style list-style-image peut également être défini à la fois pour les listes elles-mêmes et pour leurs éléments individuels.

L'attribut de style list-style-position vous permet de spécifier l'emplacement d'une puce ou une numérotation dans un élément de liste :

position de style de liste : à l'intérieur | à l'extérieur | hériter

Deux valeurs sont disponibles :

À l'intérieur - le marqueur ou la numérotation est, pour ainsi dire, à l'intérieur de l'élément de liste, ils en font partie ;

À l'extérieur - marqueur ou numérotation déplacé à l'extérieur de l'élément liste(c'est un comportement normal).

On ne sait pas pourquoi cet attribut de style est nécessaire, car listes, dans lesquels le marqueur ou la numérotation est placé en dehors des points, sont plus faciles à lire. Eh bien, puisqu'il est présent dans le standard CSS, qu'il en soit ainsi...

Exemple:

OL ( liste-style-position : à l'intérieur )

Une propriété universelle qui permet de définir simultanément le style du marqueur, sa position et l'image qui sera utilisée comme marqueur de liste.

information brève

Désignations

DescriptionExemple
<тип> Indique le type de la valeur.<размер>
UN BLes valeurs doivent être sorties dans l'ordre spécifié.<размер> && <цвет>
Un | BIndique que vous devez sélectionner une seule valeur parmi celles proposées (A ou B).normale | en minuscule
Un || BChaque valeur peut être utilisée indépendamment ou avec d'autres dans n'importe quel ordre.largeur || compter
Groupes de valeurs.[ récolte || croix]
* Répétez zéro ou plusieurs fois.[,<время>]*
+ Répétez une ou plusieurs fois.<число>+
? Le type, le mot ou le groupe spécifié est facultatif.en médaillon ?
(UN B)Répétez au moins A, mais pas plus de B fois.<радиус>{1,4}
# Répétez une ou plusieurs fois séparées par des virgules.<время>#

Valeurs

Toute combinaison de trois valeurs qui déterminent le style des marqueurs, elles sont séparées par un espace. Les combinaisons de valeurs doivent se suivre dans l'ordre indiqué : vient d'abord le type de marqueur, puis la position et l'image. Aucune des valeurs n'est obligatoire, celles qui ne sont pas utilisées peuvent donc être omises.

Exemple

style de liste

  • Polynôme multivarié
  • Série normale absolument convergente
  • Intégrale d'une fonction
  • Extremum colinéaire d'une fonction

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Application de la propriété de style liste

Modèle objet

Un objet.style.listStyle

spécification

Chaque spécification passe par plusieurs étapes d'approbation.

  • Recommandation - La spécification a été approuvée par le W3C et est recommandée comme norme.
  • Recommandation du candidat ( Recommandation possible) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre la norme.
  • Recommandation proposée Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
  • Brouillon de travail - Une version plus aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
  • Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
  • Brouillon ( Projet de spécification) - la première version préliminaire de la norme.

Navigateurs

Navigateurs

Les notations suivantes sont utilisées dans la table du navigateur.

espacement des lettres hauteur de ligne style de liste marge hauteur max largeur max hauteur min largeur min contour débordement remplissage position à droite aligner le texte décoration du texte indenter le texte transformer le texte haut aligner verticalement la largeur des espaces blancs espacement des mots indice z
  • Référence HTML Cours HTML Cours vidéo sur la création de sites Web

    • Propriété LIST-STYLE

    Propriété Valeurs Etc* Hc*
    style de liste [liste-style-image ; position de style de liste ; type de style de liste], hérite * +
    type de style de liste disque, cercle, carré, décimal, zéro décimal, lowel-roman, supérieur-romain, lowel-latin, supérieur-latin, arménien, géorgien, aucun, hériter * +
    position-style-liste à l'intérieur, à l'extérieur, hériter * +
    image de style de liste URL, aucune, hérite * +

    Propriété Style de liste— une forme abrégée de propriétés d'écriture qui définissent tous les styles de marqueur pour les éléments de la liste. Ces propriétés s'appliquent aux listes numérotées et à puces : elles doivent être considérées séparément. La forme courte de la notation ne peut comporter aucune propriété individuelle, mais l'ordre dans lequel elles sont écrites doit être respecté : type du marqueur - sa position - chemin de l'image.

    Champ d'application* : liste les éléments et tous autres pour lesquels la valeur de la propriété Afficher est élément de liste.

    Type de style de liste

    Jeux de propriétés type de marqueur pour chaque élément de la liste. Les types de puces diffèrent pour les listes à puces et numérotées.

    Valeurs:

    disque— marqueur de points.
    cercle- marqueur de cercle.
    carré— marqueur carré.
    décimal— Chiffres arabes : 1, 2, 3….
    décimal-avant-zéro- Chiffres arabes commençant à zéro : 01, 02, 03... 09.
    Lowel-romance- Numérotation romaine en minuscules.
    haut-romain- Numérotation romaine en majuscule.
    lowel-latin— lettres latines minuscules : a, b, c….
    latin supérieur— lettres majuscules latines : A, B, C….
    arménien- Numérotation arménienne.
    géorgien- Numérotation géorgienne.
    aucun- annulation.
    hériter

    L'exemple utilise deux différentes significations propriétés Type de style de liste:

    Position de style de liste

    La propriété spécifie l'emplacement du marqueur de l'élément. Soit le marqueur est à l'intérieur de l'élément, soit à l'extérieur de celui-ci.

    Valeurs:

    à l'intérieur— le marqueur est situé à l'intérieur de l'élément de liste.
    dehors— le marqueur est déplacé en dehors du bloc de texte.
    hériter- héritage d'un élément parent.

    L'exemple montre clairement la différence entre les valeurs à l'intérieur Et dehors propriétés Position de style de liste:

    Image de style liste

    La propriété spécifie le chemin d'accès à l'image qui servira de marqueur pour un élément numéroté ou liste à puces. L'emplacement de l'image du marqueur peut être contrôlé à l'aide de la propriété Position de style de liste.

    Valeurs:

    URL- le moyen de fichier graphique.
    aucun— annule l'image du marqueur, par exemple, pour l'élément parent.
    hériter- héritage d'un élément parent.

    Ul (list-style-image : url(papka/find.png); list-style-position:inside ;)

    Dans l'exemple, nous avons utilisé une image comme marqueur petite taille, qui démontre clairement les capacités de la propriété Image de style liste: