Introduction aux langages HTML et CSS
Les unités de mesure absolues ne dépendent pas d’un paramètre extérieur (largeur de l’écran, valeurs définies préalablement, etc.)
À l’exception du pixel, ces unités de mesure seront essentiellement utilisées pour l’impression.
Les unités de mesure relatives sont définies au regard d’un paramètre extérieur (taille de l’écran, zone d’affichage, taille du texte définie pour un élément parent, etc.)
pourcentage : relative à une fraction de l’élément parent
Ces unités de mesure relatives permettent de travailler à l’échelle. En modifiant le paramètre de référence, le design s’adapte automatiquement.
Par défaut, les éléments sont placés les uns à la suite des autres. La propriété position permet de sortir les éléments de ce flux normal en modifiant leur position.
{position: static} : valeur par défaut
Un élément positionné de manière relative est proche d’un élément statique, simplement il devient possible de modifier sa position par l’intermédiaire des propriétés top, bottom, left et right. Des chevauchements sont alors possibles.
{position: relative; top: 30px; left: 10px;}
Le positionnement absolu fait sortir un élément du flux normal de la page.
{position: absolute}
Les propriétés top, bottom, left et right modifient la position de l’élément non plus au regard de sa position relative dans la mise en page du document, mais au regard du contexte défini par son conteneur.
Si aucun ancêtre n’a vu sa position modifiée, l’élément sera positionné relativement à la zone d’affichage. Si on souhaite modifier ce contexte de positionnement, il suffit d’attribuer à un ancêtre, au regard duquel on souhaite positionner notre élément, la propriété position: relative
Le positionnement fixe est proche du positionnement absolu, à la différence que les éléments sont toujours placés au regard de la fenêtre du navigateur.
{position: fixed}
Ainsi, même lors du défilement de la page, les éléments restent fixes !
Le positionnement adhérent est entre le positionnement relatif et le positionnement fixe.
{position: sticky}
C’est-à-dire qu’un élément adhérent garde une position relative jusqu’à un certain point, à partir duquel il adopte une position fixe.
La propriété z-index peut être utiliser pour modifier l’ordre d’empilement lié aux chevauchement
{z-index: 1}
Plus la valeur de z-index est importante et plus l’élément sera sur le dessus de la pile.
La propriété float permet aussi de sortir des éléments du flux normal du document afin de les rendre flottants.
{float: none} : valeur par défaut (les éléments s’empilent les uns au dessus des autres)
Lorsque l’on utilise la propriété {float: left}, l’élément devient flottant et est placé sur le côté gauche, les éléments qui le suivent et qui contiennent du texte vont alors de disposer autour de lui.
On observe la même chose avec la propriété {float: right}, l’élément devenant flottant du côté droit.
La propriété float requiert une disposition block ou flex. Ainsi les éléments inline ou inline-block par exemple verront leur propriété display modifiée.
Si l’on souhaite forcer un élément à se placer sous un élément flottant, on peut faire appel à la propriété clear.
{clear: both}
Les conteneurs flexibles vont nous permettre d’agencer les blocs qui structurent notre page plus facilement.
Téléchargez le fichier tp_css_3 sur cours en ligne et dézippez le
Commencez par lier le fichier css flexbox.css à la page web index.html
L’utilisation des flexbox nécessite d’identifier des conteneurs à l’intérieur desquels on va retrouver des éléments.
Au sein de notre page index.html, nous avons un <article> contenant plusieurs <section>. Si on ouvre ce fichier dans un navigateur, les différentes sections s’affichent les unes en dessous des autres.
Commençons par ajouter une classe “conteneur” à l’élément <article>, puis dans flexbox.css ajoutons une nouvelle règle pour cet élément afin de le rendre flexible {display: flex;}.
Sauvegardez vos fichiers et recharger votre onglet dans le navigateur qu’observez-vous ?
Maintenant que notre conteneur est flexible, certaines propriétés peuvent lui être appliquées.
La première est flex-direction, qui permet de définir l’axe selon lequel seront disposés les items du conteneur. Cette propriété peut prendre les valeurs row | row-reverse | column | column-reverse. Ajoutez cette propriété au conteneur et testez les différentes valeurs avant d’organiser le contenu selon l’axe de votre choix.
La seconde propriété est justify-content. Elle définit comment doit être réparti l'espace entre et autour des items du conteneur, selon l'axe choisi précédemment. Les principales valeurs sont start | end | center | flex-start | flex-end |space-between | space-around | stretch. De même, ajoutez cette propriété à notre conteneur et testez les différentes valeurs avant de sélectionner la valeur space-between
La propriété align-content permet d’organiser le contenu selon l’axe secondaire (vertical dans notre cas). Il est ainsi possible par exemple de centrer le contenu verticalement avec la valeur center.
La propriété flex-wrap rend possible la mise en place d’un retour à la ligne automatique des items avec les valeurs wrap | wrap-reverse. Choisissez l’une ou l’autre de ces valeurs pour notre conteneur, puis redimensionnez la fenêtre de votre navigateur.
Cette propriété est très intéressante dans le cadre d’un site responsive qui doit s’adapter à différentes tailles d’écran !
Enfin, la propriété gap détermine la taille des espaces entre nos items. Fixer une valeur à votre convenance.
Les items d’un conteneur disposent également de propriétés. Il est possible par exemple de déterminer l’ordre d’affichage (order) ou encore leur faculté à occuper l’espace vacant (flex-shrink).
Dans le fichier index.html laisser uniquement trois items dans le conteneur et attribuez leur une classe différente à chacun (p. exemple un, deux, trois).
Changez l’ordre d’affichage du premier item à l’aide de la propriété order (p. exemple .un {order: 2;}). Order prend des valeurs numériques (1, 2, 3, etc.).
Supprimez cette propriété et modifiez maintenant l’ordre de l’item .deux afin qu’il s’affiche en premier (.deux {order: 1;}). Que se passe-t-il ?
Il est important de noter que l’ordre n’a d’effet que sur les autres éléments ordonnés. Si un élément frère n'est pas ordonné, cet élément sera placé en premier dans l'ordre où il apparaît dans le DOM. Pour dépasser ce cas de figure, il convient d’utiliser des valeurs négatives pour order ( .deux {order: -1;})
Ajoutez la propriété flex-grow à l’item du milieu. Flex-grow prend également une valeur numérique. Que se passe-t-il ?
La propriété flex-grow correspond au facteur d’expansion d’un item. À l'inverse, il existe la propriété flex-shrink, correspondant au facteur de rétrécissement.