✅ Listes et menus en CSS3

Table des matières

À créer des menus dynamiques pour nos pages Web Il est très courant aujourd'hui de programmer en HTML5, puis de lui donner un aspect personnel à travers CSS3 que c'est un langage basé sur des feuilles de style, c'est-à-dire que le code qui donne la forme, la couleur et la structure à notre page va dans un fichier séparé encodé à l'extérieur de la page elle-même que nous écrivons.

Tout d'abord, nous allons voir comment faire des listes, car après tout un menu est une liste qui est stylisée pour la rendre visiblement plus élégante. De cette façon, nous sommes structurés en Html comme une liste de liens, puis nous mettons déjà une apparence personnalisée avec CSS3.

Il existe deux types de listes, ordonnées et non ordonnées. Si nous allons utiliser une liste pour configurer ultérieurement un menu, il est fort probable que nous utiliserons une liste non ordonnée, cependant, nous verrons les options.

Ils sont créés exactement de la même manière, la seule différence réside dans le mot réservé, qui pour le commandé sera

Le code HTML est le suivant :


Premier élément
Deuxième élément
Troisième élément


Premier élément
Deuxième élément
Troisième élément

1. Premier élément
2. Deuxième élément
3. Troisième élément

Ou exactement la même chose sans l'ordinal d'abord :

Premier élément
Deuxième élément
Troisième élément

En HTML, il existe certains pré-formats lorsque nous créons une liste, c'est-à-dire qu'il y a une certaine marge, couleur de police, puce, remplissage, etc. qui apparaît par défaut lors de la création de notre liste. La mauvaise chose est que visuellement ça n'a pas l'air très bien, la bonne chose est qu'il est extrêmement facile de le changer à notre guise grâce au CSS.

Nous allons commencer par regarder les différents types de vignettes que nous pouvons placer sur notre menu. Par défaut, chaque élément de la liste est précédé d'un cercle noir. Cependant nous pouvons mettre des carrés, des ronds vides ou une image de notre fichier.

Le code pour modifier la puce en CSS3 est le suivant :

 #menu {list-style-type: square;}

Pour modifier la marge à l'aide du menu exemple, c'est aussi simple que d'utiliser ce code en CSS3:

 #menu {marge : 0px;}

 #menu {marge : 0px; rembourrage : 2px ; }

Code CSS3

 #menu {bordure: 2px;}

En plus de l'épaisseur, la bordure est un domaine qui a de nombreuses possibilités, on peut choisir un style, une couleur, un dégradé… et on va voir quelques options.

Style de bordure
En commençant par le style de bord, style de bordure, les possibilités les plus utilisées sont :

RienCela supprime le bord lui-même. C'est l'option par défaut, donc normalement lorsque nous créons des listes pour nos menus, aucune bordure n'apparaîtra à moins que nous ne le spécifiions.

SolideC'est le bord qui peut être le plus utilisé. C'est une bordure continue, de couleur noire.
CachéO caché est une autre option dans laquelle nous ne visualisons aucun bord, car ils sont cachés. Cependant, à des fins de programmation, il existe. Il est utilisé pour délimiter les bordures avec d'autres cellules ou tableaux adjacents même si nous ne voulons pas qu'une bordure épaisse soit vue.
crêteNous mettrons cet avantage si nous voulons qu'il se démarque du reste. Donne l'impression que la bordure est placée un niveau au-dessus du reste à l'écran.
DébutComme le précédent, il s'agit d'un bord saillant, cependant cela ne semble pas être un niveau au-dessus de la surface de l'écran que ce qu'il porte à l'intérieur.
RainureContrairement à la crête avec ce style de bordure, il semble que l'élément soit enfoncé en dessous du reste.
EncartDe la même manière que Groove, ce bord ne semble pas enfoncé mais se situe en fait un niveau en dessous du reste.
PointéAvec ce style, nous générons une bordure formée d'une ligne pointillée, noire par défaut, et d'espaces.
DoubleComme le mot le dit lui-même, il s'agit d'une double bordure, formée de deux lignes noires continues séparées par un espace.

en pointilléIl s'agit d'un type spécial de bordure similaire aux pointillés, sauf que les points deviennent des lignes plus grandes, c'est-à-dire qu'il s'agit d'une sorte de ligne brisée.

Comme avec border, avec border-style, nous pouvons choisir de définir la frontière d'un côté, à la fois, la limite supérieure, la limite inférieure ou toutes. Si nous n'écrivons qu'une valeur, elle est mise sur tous les bords, et si nous écrivons deux options au lieu d'une, la première est pour les bords supérieur et inférieur et la seconde est pour les côtés.

Maintenant, avec cela nous avons défini la bordure, la taille et le style, cependant le menu reste très simple et pas très joli visuellement parlant. Nous pouvons vouloir des menus verticaux, car ils sont créés par défaut, mais si nous voulons qu'ils soient horizontaux, nous devons ajouter le mot-clé float pour que chaque élément de la liste soit placé à côté du suivant.

J'explique cela un peu plus en détail, chaque élément de la liste que nous avons codé avec "li" a par défaut le comportement d'un élément de bloc, c'est-à-dire qu'après avoir été placé il génère un saut de ligne et empêche le placement d'un autre élément à ses côtés. Si nous voulons placer chaque élément de notre liste à côté du précédent, nous devons éliminer ce comportement de bloc.

Pour cela le code serait le suivant :

 #menu {liste-style : aucun; marge : 0px ; remplissage : 0 ; } #menu li {marge : 2px; rembourrage : 2px ; bordure : 2px solide ; flotteur : gauche ; }

menu horizontal

Maintenant, si nous voulons que notre liste agisse comme un menu et nous redirige où nous voulons, nous devons ajouter un lien vers nos éléments. C'est très simple. Dans notre code dans le Html, nous ajoutons ce qui suit :


Premier élément
Deuxième élément
Troisième élément

Enfin, nous verrons certaines des options pour l'apparence.

Propriétés du texte
LargeurSi nous voulons mettre une largeur fixe. Par exemple largeur : 100 px ;
Texte-décorSi nous voulons que le texte de notre élément soit décoré d'une manière ou d'une autre. Il existe de nombreuses possibilités mais les plus courantes sont :

souligner: si on veut que tout soit souligné
surligner: même chose que le soulignement met une ligne dans tout le texte, mais cette fois au lieu du dessous ci-dessus.
cligner: Créez du texte qui brille, qui clignote comme une lumière par intermittence.
ligne à travers: Nous écrirons cette option si nous voulons que notre texte soit barré.
rien: c'est une redondance puisque par défaut le texte vient avec cette valeur, sans aucune décoration. Cependant, il sera parfois utile si nous voulons revenir à l'option initiale après avoir utilisé un effet à l'aide d'une ressource appelée hover que nous verrons ensuite.

Aligner le texteC'est le sens dans lequel le contenu de nos éléments de bloc sera publié, attention, pas le texte lui-même, ce que nous verrons plus tard avec la propriété direction. Les options sont très simples : gauche si on veut qu'il aille de gauche, droite si on veut qu'il aille de droite à gauche, centre si on veut que le texte soit centré et justifier si on veut que le texte soit justifié.

DirectionAvec cette option, nous allons définir la direction du texte que nous écrivons, dans ce cas il n'y a que deux options :

ltr: qui est celui qui apparaît par défaut dans les navigateurs, puisqu'à l'exception de certaines langues dans lesquelles il s'écrit de droite à gauche, il est habituel d'écrire de gauche à droite, ce qui définit cette option.
rtl: c'est l'autre directionnalité possible du texte, de droite à gauche que nous utiliserons si nous voulons écrire des textes arabes par exemple.

Retrait du texteQu'il provienne de l'indentation ou de la tabulation est une propriété qui se charge d'établir ledit critère dans la première ligne de nos éléments de bloc, ainsi que dans les tableaux. Il y a trois options :

mesure
Pourcentage
hériter

En eux, si nous utilisons un pourcentage, nous ferons référence à la largeur de l'élément dans lequel il se trouve.
Aussi dans chacun d'eux, nous pouvons utiliser des chiffres positifs ou négatifs de l'une des unités de mesure qui existent pour css3, pixels, ems …

Transformation de texteDernière propriété liée au texte que nous allons voir qui concerne les majuscules et minuscules :

capitaliser: avec cette option, seule la première lettre de chaque mot sera affichée en majuscules.
majuscule: affiche tout le texte en majuscules.
minuscule- Affiche tout le texte en minuscules.
rien: laisse le texte tel qu'il a été écrit. C'est celui qui vient par défaut.

Espacement des motsBien qu'il ne traite pas directement du texte, il le fait sur l'espace que nous laissons entre les mots. Ses valeurs peuvent être "normales" ou une mesure valide. Si on met une mesure, sa valeur s'ajoute à la mesure normale qui est celle qui vient par défaut.

Passons maintenant aux propriétés de la police.

Propriétés de la police
Police de caractèreCette propriété est la plus complète de toutes celles liées à la police, et elle dispose de plusieurs options quant à son utilisation. Tout d'abord, vous pouvez commencer avec une, deux, trois ou aucune des valeurs "font-style", "font-variant" et "Font-weight".

Ensuite, nous devons mettre la taille de la lettre avec "font-size" éventuellement suivi de l'espacement qui est donné avec "line-height" et se terminant toujours par le type de famille de polices "font-family". Enfin, vous devrez mettre une des valeurs suivantes :

légende- Pour les boutons ou les listes déroulantes, c'est-à-dire pour les champs et les champs de formulaire.
menu: si nous allons configurer des menus déroulants ou d'autres types de menus.
icône: pour les textes affichés sous les icônes.
messagerie- Pour les boîtes de dialogue, qu'il s'agisse de pop-ups d'erreur, de pop-ups d'information, etc.
statut-baA : pour les barres d'état des fenêtres.
petit-caption - Pour les champs de formulaire et les contrôles de petite taille.

Dans la propriété font, nous avons utilisé d'autres options que nous n'avons pas encore vues et que nous expliquerons ci-dessous :

Le style de policeAvec lui, nous définirons le le style de police. Les valeurs qu'il peut avoir sont "normales", qui est la valeur par défaut, "italique" si on veut que notre lettre soit en italique, c'est-à-dire en italique; ou "oblique" si on veut avoir la lettre oblique, qui est une sorte d'italique où seuls les caractères sont inclinés et pas tous comme en italique.

Variante de policeNous l'utiliserons pour établir le variantes de police et nous n'avons que deux options, la "normale" qui est celle qui vient par défaut, et la variante "petites majuscules", également appelée petites majuscules, qui donne aux lettres majuscules la même taille que les lettres minuscules.

Police-poidsC'est l'une des propriétés les plus utilisées puisqu'avec elle nous pouvons contrôler l'épaisseur des lettres (attention, ce n'est pas la même que la taille de chaque lettre que nous verrons plus tard). Numériquement parlant il a 9 options qui sont les centaines de 100 à 900, soit 100, 200, 300, 400, 500, 600, 700, 800 et 900. Il y a aussi des valeurs écrites, la "normale" qui équivaut à 400 , "bold" qui correspond à 700 et qui est ce que l'on appellerait bold et qui curieusement n'apparaissait pas en font-style mais ici. Il y a aussi les valeurs "plus gras" ou "plus léger" et parfois d'autres comme "moyen" ou "lourd" qui sont affectées à des valeurs numériques en fonction du nombre d'épaisseurs que possède la police.

Taille de policeAvec cette propriété si nous contrôlerons la taille de la police. Quatre valeurs sont disponibles, "taille absolue", "taille relative", "unité de pourcentage" et "unité de mesure". Il existe de nombreuses unités de mesure absolues et relatives définies en css telles que em, qui est la plus utilisée dans cette propriété, ex, px,%, in, cm, mm, pt ou pc. En plus de ces mesures, certains mots fonctionnent et peuvent être utilisés tels que xx-small pour le plus petit, x-small, small, medium, large, x-large ou xx-large pour le plus grand. Ces six mots correspondent aux tailles des différentes balises de titre html de

à

et ce sont des tailles de mesure absolues, elles auront donc toujours la même apparence, quel que soit le navigateur ou la résolution de l'écran. Les mots "plus petit" et "plus grand" peuvent également être utilisés comme mesures relatives qui dépendront de la taille de la police de l'élément qui le contient.

Hauteur de la ligneIl est déjà défini dans les propriétés du texte.
Famille de policesPropriété largement utilisée que nous vous permet de choisir la police de caractères ou la police. Nous mettons d'abord le nom de la police, ou la police, et éventuellement il peut être suivi par d'autres noms de police au cas où notre navigateur ou système n'aurait pas le premier ou ne le prendrait pas en charge. Il n'y a pas de type de police par défaut, car cela dépend de notre navigateur, bien qu'un très courant soit "Times New Roman". Certaines valeurs de type de police générique peuvent être « serif » où certaines polices telles que Times New Roman, Garamond, Georgia ou Cambria sont incluses; "Sans-serif" et ses types Verdana, Arial, Tahoma, Helvetica ou Futura. "Monospace" et ses exemples Courier New ou Monaco entre autres. Et "fantaisie" avec les types Comic sans ou Impact. Bien sûr, il existe de nombreuses autres polices de caractères parmi lesquelles nous pouvons choisir.

L'espacement des lettresAvec cela, nous pouvons contrôler l'espace entre les lettres, et cela fonctionne exactement de la même manière que son analogue d'espacement des mots des propriétés de texte, avec les valeurs "normales" et une mesure valide.

CouleurEnfin, nous verrons le propriété de la couleur que l'on veut mettre dans notre texte. Par défaut, il est noir. Il y a plusieurs façons de choisir la couleur, l'une d'elles est à travers les 17 mots de couleurs différentes qu'il y a : aqua, noir, rouge, jaune, bleu, fuchsia, vert, citron vert, orange, gris, marron, olive, marine, violet , argent, bleu sarcelle et blanc.

Une autre option consiste à mettre une couleur de Pourcentage RVB, il s'agit simplement de préciser trois pourcentages correspondant aux couleurs rouge ®, vert (G) et bleu (B) :

 couleur : rvb (22 %, 76 %, 14 %); (Les 3 pourcentages n'ont pas à donner 100%)

Une autre façon est de RVB décimal qui fonctionne exactement de la même manière que le pourcentage RVB mais au lieu de mettre trois valeurs en pourcentage elles sont mises sous forme de valeurs décimales :