Feuilles de style CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Feuilles de style CSS (Cascading Style Sheets) Niveau recommandé pour le cours de Feuilles de style CSS (Cascading Style Sheets) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 7: Gestion des positions et transformation des éléments

Toutes les pages

Les positions

En CSS, il est possible de placer un élément n'importe où dans le document peut importe l'endroit où il est déclaré en HTML. Par exemple, si dans le code HTML nous avons déclaré deux balises <div> qu'on retiendra pas les noms div1 et div2 de telle sorte à ce que la div1 soit déclarée avant la div2, alors il est logique que quand on affichera le résultat sur le navigateur, la div1 sera placée avant la div2.

Avec les propriétés CSS qui gèrent les positions, et sans toucher au code HTML, on peut mettre la balise div1 après la balise div2, voir on peut les superposer de telle sorte que l'une survole l'autre etc...

La propriété position permet de rendre l'ordre d'affichage des objets indépendant de l'ordre de leur déclaration en HTML. Elle peut avoir plusieurs valeurs:
  • static: Il s'agit de al valeur par défaut qui n'applique aucun positionnement particulier à l'objet et celui-ci est intégré normalement à l'emplacement décrit par le flux.
  • absolute: Cette valeur permet de rendre la position de l'objet absolue. On peut donc l'afficher n'importe où, mais ce n'est pas tout. Le faire de déclarer le style position:absolute sur un objet, procure à celui ci la possibilité de survoler les autres objets. Il peut donc cacher un texte ou une image totalement ou partiellement selon l'endroit exacte où on l'a placé.
  • relative: Cette valeur permet de décaler l'affichage d'un objet par rapport à son emplacement naturel (celui décrit par HTML).
  • fixed: Cette valeur permet de fixer un élément sur la page même si celle ci est défilée à l'aide des barres de défilement.
  • sticky: Il s'agit d'une position qui alterne entre static et fixed. Si on spécifie la propriété top à l'objet positionné en sticky, alors tant que sa position verticale est supérieure à la valeur spécifiée il est statique, et s'il passe en dessous de cette valeur alors il devient fixed.

Pour pouvoir placer les objet là on l'on souhaite, il faut en plus de la propriété position utiliser d'autre propriétés CSS qui permettent de spécifier les coordonnées. De cette manière on peut déclarer avec précision l'emplacement de chaque objet auquel on a appliqué la propriété position.

Le système de coordonnées

Quand on parle de coordonnées, on pense à un repère. Le repère n'est en fait rien d'autre que l’écran de l'utilisateur (ou la fenêtre du navigateur pour être plus précis). L'origine du repère n'est pas (tel qu'on la appris en Mathématiques) le coin bas à gauche, mais le coin haut à gauche du navigateur. Le sens positif horizontalement est vers la droite et verticalement vers le bas. Pour spécifier le x et le y on fait appel aux propriétés CSS left, top, right et bottom.
  • left: exprime le nombre de pixels qui séparent l’extrémité gauche de l'objet du coté gauche du navigateur.
  • top: exprime le nombre de pixels qui séparent l’extrémité supérieure de l'objet du haut du navigateur.
  • right: exprime le nombre de pixels qui séparent l’extrémité droite de l'objet du coté droit du navigateur.
  • bottom: exprime le nombre de pixels qui séparent l’extrémité inférieure de l'objet du bas du navigateur.

Simple non?
Voilà une figure qui résume cela:

Positions CSS


Exemple:
div{
   width:300px;
   height:200px;
   background-color:orange;
   position:absolute;
   left:40px;
   top:30px;
}
Avec ce code, si du texte (ou autre contenu) était déjà à l'emplacement indiqué par les coordonnées, alors il serait caché par la balise <div>.
Notez que les positions les les systèmes de coordonnées s'appliquent uniquement aux conteneurs (div, header, footer...). Si vous voulez les appliquer à une image par exemple, il faut donc la mettre dans un conteneur et appliquer à celui-ci le style souhaité.
Imaginez maintenant que nous disposons de deux balises <div>. Toutes les deux ont une position absolue, et les coordonnées spécifiées en CSS les mèneront à se croiser (l'une survolera l'autre totalement ou partiellement). Laquelle sera en dessus de l'autre? (ou plutôt, laquelle cacherait l'autre?)

Par défaut, la dernière qui a été déclarée en HTML sera placée en dessus. C'est logique après tout. Mais CSS renferme une propriété qui permet de changer cela sans toucher au HTML. C'est l'axe des Z, ou l'axe virtuel qui sort de l'écran.

Propriété z-index

La propriété z-index permet de spécifier la valeur Z sur l'axe (virtuel) sortant de l'écran. Il a comme valeur un nombre entier. Plus la valeur de z-index est grande plus l'objet est placé au premier plan.

Exemple:
nav{
   width:20px;
   height:30px;
   position:fixed;
   left:0;
   top:0;
   z-index:2;
}
section{
   width:500px;
   height:400px;
   position:absolute;
   left:0;
   top:0;
   z-index:1;
}
Dans ce cas, quelque soit l'ordre de déclaration des objet dans le code HTML, la balise <nav> sera en dessus de la balise <section>.
Les coordonnées left, top, right, bottom et z-index s'appliquent uniquement sur les balises positionnées à l'aide la propriété position.

Transformation des éléments

Vous vous souvenez probablement des éléments inline et block. En guise de rappel, les éléments de type inline occupent juste assez d'espace pour qu'ils s'affichent correctement. Par exemple la balise <span> est de type inline. Elle n'engendre pas de retour à la ligne automatique car elle se contente de l'espace nécessaire pour que ce qu'elle contient (texte ou autre objet) s'affiche convenablement. C'est le cas pour les balises <b>, <i>, <img>...

Les balises de type block constituent un "bloc". Comme la balise <div> elle occupe toute la largeur de la page même si son contenu n'est pas aussi large. C'est ce qui explique le retour à la ligne automatique qui survient avant et après ce type de balises. Les balises <header>, <footer>, <p> et bien d'autres font aussi partie de cette famille.

Pour mieux voir la différence entre les deux familles, appliquons leurs des arrière plan et voyons ce que cela donne.

Code HTML:
<div>Balise DIV</div>
<span>Balise SPAN</span>
<h1>Balise H1</h1>
<font>Balise FONT</font>
Code CSS:
div{
   background-color:#6666FF;
}
span{
   background-color:#FFFF00;
}
h1{
   background-color:#FF8800;
}
font{
   background-color:#AAAAAA;
}
Le résultat est:
Balise DIV
Balise SPAN

Balise H1

Balise FONT
Vous voyez maintenant que les balises inline ont un arrière plan qui s'étale juste sur la larguer du contenu alors que pour les block l'arrière plan s'allonge jusqu'à la fin de la ligne.

Choisissons maintenant une balise de chaque famille et essayons de modifier leur largeur et leur hauteur.

Code HTML:
<div>Balise DIV</div>
<span>Balise SPAN</span>
Code CSS:
div{
   background-color:#6666FF;
   width:50%;
   height:100px;
}
span{
   background-color:#FFFF00;
   width:50%;
   height:100px;
}
Voilà ce que ça donne:
Balise DIV
Balise SPAN
Ce n'est pas à quoi vous attendez? En effet, c'est tout à fait normal. Seules les balises de type block sont redimensionnables. Les balises inline ignorent les style de redimensionnement à l'exception des images et les champs de formulaire.

Propriété display

Heureusement, CSS a plus d'un tour dans son sac. Il a prévu des styles qui transforment les balises, c'est à dire qu'on peut rendre la balise <span> de type block et la balise <div> de type inline et cela s'applique sur toutes les balises HTML. La propriété magique qui rend cet exploit possible s'appelle display.

La propriété display peut accueillir les valeurs suivantes:
  • inline: permet de transformer une balise HTML en type inline.
  • block: permet de transformer une balise HTML en type block.
  • none: permet de faire disparaître l’élément HTML. L’élément aura l'air comme s'il n'a pas été déclaré dans le code HTML.
  • inline-block: cette valeur a été introduite en CSS3. Elle permet de réunir les principales caractéristiques de chacune des types inline et block. Si on applique la propriété display:inline-block à un élément, il n'engendre pas de retour automatique à la ligne (comme les inline), et peut être redimensionné (comme les block).

On va modifier le dernier code pour mettre en pratique la transformation des éléments.

Code HTML:
<div>Balise DIV</div>
<span>Balise SPAN</span>
Code CSS:
div{
   background-color:#6666FF;
   width:50%;
   height:100px;
   display:inline;
}
span{
   background-color:#FFFF00;
   width:50%;
   height:100px;
   display:block;
}
Voilà ce que ça donne:
Balise DIV
Balise SPAN

Propriété float

Nous avons vu dans la dernière partie qu'on peut rendre les balises block des inline et inversement, mais leur ordre de déclaration sera respecté lors de l'affichage (à moins d'utiliser la propriété position). Cependant, il existe une autre méthode qui permet de ne pas toujours respecter l'ordre de déclaration des éléments lors de l'affichage (dans le jargon de HTML/CSS on parle de faire sortir l'élément du flux normal). Il s'agit de la propriété float.

Pour comprendre le principe, mieux vaut un exemple.

Supposons que nous voulons afficher un grand titre, suivi d'un long texte suivi par une image. Le code HTML serait des plus simples:
<h1>CSS c'est quoi?</h1>
CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.<br />
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.<br />
<img src="images/footerlogo.png" />
Le résultat après exécution ressemblera à cela:

CSS c'est quoi?

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
Appliquons maintenant la propriété float à l'image (sans toucher le code HTML). Le code CSS ressemblerai à ceci:
img{
   float:left;
}
Si on exécute le dernier code on aura ce résultat:

CSS c'est quoi?

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.
C'est ça ce que l'on appelle retirer l'élément du flux normal. En effet, dans le flux normal, l'image est censée s'afficher en bas comme pour le premier exemple. Mais avec le style float:left l'image est placée au début à gauche, et tout les autres éléments (grand titre et texte) sont répartis autour.

La propriété float peut accueillir les valeurs suivantes:
  • left: l'objet flotte à gauche et les autres éléments se répartiront autour.
  • right: l'objet flotte à droite et les autres éléments se répartiront autour.
  • none: aucun flottement n'est appliqué.

Il faut savoir que le propriété float est la coqueluche des intégrateurs. Elle facilite tellement la mise en page d'un document HTML. Dans ce site d'ailleurs je l'ai utilisé à plusieurs reprises. Cependant, des fois elle donne des résultats imprévisibles car tout le contenu restant sera influencé par l'élément flottant et poursuivra son écoulement à droite ou à gauche du flottant au long de sa hauteur. Pour palier ce problème on fait appel à une autre propriété. J'ai nommé clear.

Propriété clear

La propriété clear sert à annuler l'effet d'un élément flottant sur l'élément sur laquelle elle est appliquée. Elle peut avoir comme valeur:
  • left: cesse l'effet d'un flottant à gauche (float:left) sur l'élément courant.
  • right: cesse l'effet d'un flottant à droite(float:right) sur l'élément courant.
  • both: cesse l'effet d'un flottant à gauche ou à droite (float:left ou float:right) sur l'élément courant. C'est d'ailleurs la valeur la plus utilisée.

Propriété vertical-align

La propriété vertical-align définit l'alignement vertical d'un élément de type inline ou d'une cellule d'un tableau. Elle peut accepter plusieurs valeurs dont voici les plus utiles:
  • baseline: C'est la valeur par défaut, elle aligne la base de l'élément avec la base du texte contenu dans son parent.
  • top: Aligne le haut de l'élément avec le haut du texte contenu dans son parent. Dans le cas d'un tableau, il aligne l’élément en haut de la cellule.
  • bottom: Aligne le bas de l'élément avec le bas du texte contenu dans son parent. Dans le cas d'un tableau, il aligne l'élément en bas de la cellule.
  • middle: Aligne le milieu de l'élément avec le milieu du texte (considéré en minuscules) contenu dans son parent. Dans le cas d'un tableau, il centre verticalement l'élément dans la cellule.


Exemple:

Code HTML:
<img src="images/footerlogo.png" />Texte de référence.
Code CSS:
img{
   vertical-align:middle;
}
Ce qui donne le résultat:
Texte de référence.

Flottement et positionnement des éléments en vidéo



Quiz (Pour tester vos connaissances)
  1. La propriété clear:both
cesse l'effet d'un flottant à gauche seulement
cesse l'effet d'un flottant à droite seulement
cesse l'effet d'un flottant à gauche ou à droite
  1. Si on veut placer un menu de navigation devant tous les objets de la page de telle sorte qu'il soit toujours visible même si on fait défiler la page, on doit
lui appliquer un positionnement absolute avec le plus grand z-index déclaré pour le document.
lui appliquer un positionnement relative avec le plus grand z-index déclaré pour le document.
lui appliquer un positionnement fixed avec le plus grand z-index déclaré pour le document.
  1. La propriété vertical-align permet de positionner verticalement n'importe quelle balise.
Oui
Non
  1. La valeur inline-block de la propriété display
permet à l'élément transformé d'être redimensionné sans engendrer de retour à la ligne
permet à l'élément transformé d'ignorer le redimensionnement sans engendrer de retour à la ligne
permet à l'élément transformé d'appliquer un retour à la ligne automatiquement
  1. L'élément positionné qui dispose de la plus grande valeur de la propriété z-index
est placé devant tous les éléments du document
est placé devant tous les éléments de type inline seulement
est placé devant tous les éléments de type block seulement