CSS

Cascading Style Sheets

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.

Comme pour HTML, CSS a commencé petit et grandit au fil des versions. La première version a vu le jour vers 1996. Il s’agissait de CSS1, suivie de CSS2 qui était le plus populaires jusqu’à l’apparition de HTML5 qui a intégré de nouvelles fonctionnalités qui ont emmené à développer la version 3 de CSS (dite CSS3) qui est le standard le plus utilisé actuellement. On utilise même le terme HTML5/CSS3 pour désigner les deux technologies qui vont alors ensemble.

CSS est un langage coté client, c’est à dire que sa syntaxe est comprise par le navigateur qui l’exécute avec le HTML.

Vous aurez besoin d’un éditeur (le même dont vous vous êtes servi pour écrire du HTML) et un navigateur de votre choix pour les tests. Cependant je vous recommande de tester vos codes sur plusieurs navigateurs pour voir le résultat sur les différents moteurs de rendu célèbres.

1-Mettez en place du CSS

Où écrit-on le CSS ?

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :

1-1-dans un fichier .css (méthode la plus recommandée) ;

1-2-dans l’en-tête <head> du fichier HTML ;

1-3-directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).

1-1-Dans un fichier .css (exemple style.css)

Il suffit juste d’ajouter la balise </link> au fichier Html dans la partie <head>.

Fichier index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML et CSS</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h3>Qu'est-ce que le Lorem Ipsum?</h3>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise
          en page avant impression. Le Lorem Ipsum est le faux texte standard
         de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des
         morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que
    </p>
</body>
</html>

Fichier style.css

h3
{
    color: darkblue;
}
p{
    font-size: 20px;
}

1-2- Dans l’en-tête <head> du fichier HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML et CSS</title>
    <style>
        p{
            font-size: 20px;
        }
        h3
        {
            color: darkblue;
        }
    </style>
</head>
<body>
<h3>Qu'est-ce que le Lorem Ipsum?</h3>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise
    en page avant impression. Le Lorem Ipsum est le faux texte standard
    de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des
    morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que
    </p>
</body>
</html>

1-3- Directement dans les balises du fichier HTML via un attribut style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML et CSS</title>
</head>
<body>
<h3 style="color: darkblue">Qu'est-ce que le Lorem Ipsum?</h3>
<p style="font-size: 20px">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise
    en page avant impression. Le Lorem Ipsum est le faux texte standard
    de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des
    morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que
</p>
</body>
</html>

Même résultat pour les trois cas, mais la 1^er méthode est la plus recommandée.

2-Sélecteurs CSS

Pour la suite du tutoriel je vais utiliser la 1^ère méthode.

Appliquer un style : sélectionner une balise

Pour appliquer un style, je sélectionne la balise et j’applique le style.

balise

{

propriete1: valeur1;

propriete2: valeur2;

propriete3: valeur3;

}

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

Des noms de balises : on écrit les noms des balises dont on veut modifier l’apparence. Par exemple, si je veux modifier l’apparence de tous les paragraphes <p>, je dois écrire p.
Des propriétés CSS : les » effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d’indiquer la couleur du texte, font-size qui permet d’indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS .
Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color , il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc.

h3
{
    color: darkblue;
}
p{
    font-size: 20px;
}

Appliquer un style à plusieurs balises :

h3,p

{

    color: darkblue;

}

Des commentaires dans du CSS

Donc, pour faire un commentaire, c’est facile ! Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.

/*
style.css
---------
 */
h3,p
{
    color: darkblue; /* j'applique le même style aux deux balises*/
}

Appliquer un style : class et id

On peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :

l’attribut class ;
l’attribut id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML et CSS</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<h3>Qu'est-ce que le Lorem Ipsum?</h3>
<p class="introduction">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise

    en page avant impression. Le Lorem Ipsum est le faux texte standard

    de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des

    morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que
</p>
</body>
</html>

/*
style.css
---------
 */
.introduction
{
    color: darkblue;
    font-size: 30px;
}

Résultat dans le Navigateur

Les balises universelles

<span> </span>: c’est une balise de type inline, c’est-à-dire une balise que l’on place au sein d’un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s’utilise donc au milieu d’un paragraphe.
<div></div>: c’est une balise de type block, qui entoure un bloc de texte. Les balises<p> <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d’un design, comme nous le verrons plus tard.

Les selecteurs qu’on a vu jusqu ‘ à present :

p
{    

}
h1,em
{    

}
.class
{    

}
.id
{  

}

Les sélecteur avancés :

* : sélecteur universel

*
{

}

A B : une balise contenue dans une autre

h3 em
{

}

A + B : une balise qui en suit une autre

h3 + em
{

}

A[attribut] : une balise qui possède un attribut

a[title]
{

}

D’autres sélecteurs existent !

3-Formatez du texte

3-1-La taille :

Une taille absolue :

font-size: 16px;

Une valeur relative : Il y a plusieurs moyens d’indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci :

xx-small x-small small medium large x-large xx-large.

3-2-La police :

balise
{
    font-family: police1, police2, police3, police4;
}

Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :

Arial ;
Arial Black ;
Comic Sans MS ;
Courier New ;
Georgia ;
Impact ;
Times New Roman ;
Trebuchet MS ;
Verdana.

p
{
    font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

3-3-Italique, gras, souligné…

Mettre en italique :

h2
{
    font-style: italic;
}

Mettre en gras :

h1
{
    font-weight: bold;
}

Soulignement et autres décorations :

La propriété texte-decoration permet de souligner, surligner ou barrer un texte. Voici les différentes valeurs possibles:

underline: Le texte est souligné (comme le ferait la balise HTML <u>).
overline: Le texte est surligné. La ligne se trouvera donc en dessus du texte, mais c’est rarement utilisé.
line-through: Le texte est barré. La ligne passe à travers le texte comme le ferait la balise HTML <s>).
none: Aucune décoration ne sera appliquée au texte (toutes les lignes seront retirées).

h1
{
    text-decoration: blink;
}
.souligne
{
    text-decoration: underline;
}
.barre
{
    text-decoration: line-through;
}
.ligne_dessus
{
    text-decoration: overline;
}

La propriété text-transform permet de convertir le texte en minuscule, majuscule ou capitalisé. Les différentes valeurs sont:

lowercase: Permet de convertir tous les caractères en minuscule.
uppercase: Permet de convertir tous les caractères en majuscule.
capitalize: Permet de convertir le premier caractère de chaque mot en majuscule et laisser les autres sans transformation.

3-4-alignement

Comme son nom l’indique, la propriété text-align permet d’aligner le texte au sein de son conteneur. Les différentes valeurs que l’on peut lui attribué ne vous sont pas étrangères:

left: C’est la valeur par défaut, elle permet d’aligner le texte (ou d’autres objets comme les images) à gauche du conteneur.
right: Pour placer le contenu à droite.
center: Sert à center le contenu.
justify: Permet de justifier le contenu en l’étalant sur toute la longueur de la ligne. Nous aurons donc les lignes (d’un paragraphe par exemple) qui finissent toutes à la même position.

h1
{
    text-align: center;
}

p
{
    text-align: justify;
}

.signature
{
    text-align: right;
}

4-Ajoutez de la couleur et un fond

4-1-Couleur du texte

On va utiliser la propriété color

Pour décrire une couleur en CSS, il existe plusieurs méthodes:

Nom de la couleur en anglais: A l’instar de HTML, on peut décrire une couleur par son nom. Or, ce n’est pas très pratique comme méthode car peu de couleurs ont réellement de noms, alors qu’ils en existent plus de 16 millions en tout.
Code hexadécimal: Comme pour le HTML, on peut définir une couleur par le code hexadécimal .
Code décimal (ou RGB): En CSS, une autre méthode pour définir les couleurs existe. Il s’agit d’indiquer le code décimal de la couleur. Le principe reste le même que pour le codage hexadécimal, mais les codes sont exprimés à la base décimale dont les nombres seront, cette fois, compris entre 0 et 255. A titre d’exemple, le code du rouge est : rgb(255,0,0). Les valeurs dans les parenthèses représentent respectivement les couleurs primaires rouge, vert et bleu.
Code RGBA: Depuis la version 3 de CSS, une nouvelle méthode pour décrire les couleurs est apparue. Il s’agit de RGBA. Cette notation permet de prendre en compte le degré de transparence (le A pour Alpha). Les trois premiers paramètres de RBGA désignent les couleurs primaires et le quatrième indique le degré de transparence de la couleur appliquée. Il est compris entre 0 (pour totalement transparent) et 1 (pour totalement opaque), et peut avoir deux chiffres après la virgule. Par exemple, rgba(255,0,0,0.5) désigne un rouge translucide.

a-Indiquer le nom de la couleur

La figure suivante vous montre les seize couleurs que vous pouvez utiliser en tapant simplement leur nom.

Les seize noms de couleurs utilisables en CSS

p{
    color: blue;
}

b- La notation hexadécimale

p
{
    color: #FFFFFF;
}

c- La méthode RGB

p
{
    color: rgb(240,96,204);
}

4-2-Couleur de fond

La propriété css background-color

body
{
    background-color: black; /* Le fond de la page sera noir */
    color: white; /* Le texte de la page sera blanc */
}

4-3-Images de fond

La propriété background-image sert à insérer une image en arrière-plan de l’objet souhaité. En utilisant la syntaxe suivante: background-image: url (« chemin_de_l_image »). Le chemin de l’image peut être absolu ou relatif à partir de l’emplacement où est déclaré le style.

Il faut noter que l’image est appliquée en arrière-plan avec sa taille réelle. Si elle est plus grande que l’objet qui l’accueille alors elle sera tronqué et si elle est plus petite alors elle sera répétée jusqu’à ce que tout le fond de l’objet soit couvert.

body
{
    background-image: url("nom_de_l_image.png");
}

Options disponibles pour l’image de fond

On peut compléter la propriété background-image que nous venons de voir par plusieurs autres propriétés qui permettent de changer le comportement de l’image de fond.

Background-attachment : fixer le fond

La propriété CSS background-attachment permet de » fixer » le fond. L’effet obtenu est intéressant car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :

fixed : l’image de fond reste fixe ;
- scroll : l’image de fond défile avec le texte (par défaut).

· Background-repeat : répétition du fond

Par défaut, l’image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriété background-repeat:

repeat: C’est la valeur par défaut. Elle permet de répéter l’image sur la largeur et la hauteur de l’objet.
repeat-x: Sert à répéter l’image seulement sur la largeur de l’objet.
repeat-y: Sert à répéter l’image seulement sur la hauteur de l’objet.
no-repeat: Avec cette valeur, l’image est appliquée une seule fois sans répétition. Par défaut elle sera placée sur le coin haut à gauche de l’objet.

body
{
    background-image: url("soleil.png");
    background-repeat: no-repeat;
}

4-4-La transparence

Propriété css opacity

p
{
    opacity: 0.6;
}

5-Créez des bordures et des ombres

1-Bordures standard

Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS vous permettent de modifier l’apparence de vos bordures :

border-width : la largeur de bordure
border-color : la couleur
Border-style : le type

h1
{
    border: 3px blue dashed;
}

En haut, à droite, à gauche, en bas…

border-top
border-bottom
bordure-left
border-right

p
{
    border-left: 2px solid black;
    border-right: 2px solid black;
}

2-Bordures arrondies

Border-radus

Les valeurs correspondent aux angles suivants dans cet ordre : en haut à gauche ;

en haut à droite ;
en bas à droite ;
en bas à gauche.

p
{
    border-radius: 10px 5px 10px 5px;
}

3-Les ombres

Nous allons ici découvrir deux types d’ombres :

les ombres des boîtes ;
les ombres du texte.
- Box-shadow : les ombres des boites.

La propriété Box-shadow s’applique à tout le bloc et prend quatre valeurs dans l’ordre suivant :

le décalage horizontal de l’ombre ;
le décalage vertical de l’ombre ;
l’adoucissement du dégradé ;
la couleur de l’ombre.

Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :

p
{
    box-shadow: 6px 6px 0px black;
}

Text-shadow : l’ombre du text

Avec Text-shadow ,vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la même façon que Box-shadow : décalage, adoucissement et couleur.

p
{
    text-shadow: 2px 2px 4px black;
}

6-Créez des apparences dynamiques

C’est une de ses forces : le CSS nous permet aussi de modifier l’apparence des éléments de façon dynamique, c’est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée. Nous allons faire appel à une fonctionnalité puissante du CSS : les pseudo-formats.

Nous verrons dans ce chapitre comment changer l’apparence :

au survol ;
lors du clic ;
lors du focus (élément sélectionné) ;
lorsqu’un lien a été consulté.

1-Au survol

a:hover /* Apparence au survol des liens */
{
    text-decoration: underline;
    color: green;
}

2-Au clic et lors de la sélection

a:active /* Quand le visiteur clique sur le lien */
{
    background-color: #FFCC66;
}

3- Lorsque le lien a déjà été consulté

a:visited /* Quand le visiteur a déjà vu la page concernée */
{
    color: #AAA; /* Appliquer une couleur grise */
}

7-Gestion des positions et transformation des éléments

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.

Les positions

En CSS, il est possible de placer un élément n’importe où dans le document peut importer l’endroit où il est déclaré en HTML.

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 la 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.

Exemple :

<style>
        div {
            width: 300px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 40px;
            top: 30px;
        }
</style>

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.

Exemple :

<style>
        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;
        }
</style>

Transformation des éléments

Deux types de balise : inline et block

les balises inline (comme <span>,<b>,<img>…….) n’engendre pas de retour à la ligne automatique et occupent juste assez d’espace pour qu’ils s’affichent correctement.

Les balises de type block constituent un « bloc». Il engendre le retour à la ligne automatique qui survient avant et après ce type de balises. Elle occupe toute la largeur de la page même si son contenu n’est pas aussi large.

Exemple :

Code HTML

<div>Balise DIV</div>
  <span>Balise SPAN</span>
  <h1>Balise H1</h1>
  <b>Balise FONT</b>

Code CSS

<style>
        div {
            background-color: #6666FF;
        }
        span {
            background-color: #FFFF00;
        }
        h1 {
            background-color: #FF8800;
        }
        font {
            background-color: #AAAAAA;
        }
    </style>

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.

Exemple :

Code HTML

<div>Balise DIV</div>
<span>Balise SPAN</span>

Code CSS

<style>
        div {
            background-color: #6666FF;
            width: 50%;
            height: 100px;
        }

        span {
            background-color: #FFFF00;
            width: 50%;
            height: 100px;
        }
    </style>

Seules les balises de type block sont redimensionnables. Les balises inline ignorent les styles de redimensionnement à l’exception des images et les champs de formulaire.

Propriété display

On peut changer le type de balise de inline à block et inversement, est ce avec la propriété 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).

Exemple :

Code HTML

<div>Balise DIV</div>
<span>Balise SPAN</span>

Code CSS

<style>
        div {
            background-color: #6666FF;
            width: 50%;
            height: 100px;
            display: inline;
        }

        span {
            background-color: #FFFF00;
            width: 50%;
            height: 100px;
            display: block;
        }
    </style>

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.

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é.

Pour comprendre le principe, mieux vaut un exemple.

Code HTML

    <img src="imagecss.jpg" />
<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 />

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 />

Résultat :

On applique CSS

<style>
        img {
            float: left;
        }
    </style>

On obtient :

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="imagecss.jpg" />Texte de référence.

Code CSS

<style>
        img {
            vertical-align: middle;
        }
    </style>

8-Flexbox – les boites flexibles

Il y a plusieurs façons de mettre en page un site. Au fil du temps, plusieurs techniques ont existé :

Au début, les webmasters utilisaient des tableaux HTML pour faire la mise en page.
Puis, CSS est apparu et on a commencé à faire une mise en page à l’aide de la propriété float.
Aujourd’hui, on utilise b : Flexbox !

Les boites flexibles en CSS (Flexbox)

En général, il y a deux types d’objets en HTML, des objets inline et des objets block.

Les objets inline: sont des objets qui occupent juste l’espace nécessaire pour leur affichage, il ne génère pas de retour à la ligne automatique et ne sont pas redimensionnables en CSS (sauf quelques exceptions comme les blaises <img /> ou <input />). C’est le cas des balises <span>, <b>, <i>…
Les objets block: sont des objets qui par défaut occupent la ligne entière (ou block de plusieurs lignes) et engendrent ainsi un retour à la ligne avant et après. C’est le cas des balises <div>, <form>, <p>, <header>, <nav>…

Si on souhaite avoir un objet redimensionnable et qu’on peut mettre sur une ligne qui contient déjà un autre objet (inline) alors une solution a été proposée en CSS3; il s’agit de display: inline-block. D’autres solutions sont aussi possibles et la plus célèbre est le flottement (float).

Cependant, avec ces solutions là (display: inline-block ou float:left/right) la mise en page de plusieurs objets sur la même ligne s’avère difficile à maitriser. Des fois, un minuscule pixel de plus peut faire s’écrouler tout le design. Mais une solution magique a été introduite en CSS, il s’agit de Flexbox ou boites flexibles.

Qu’est-ce qu’une flexbox?

Une flexbox (pour flexible box ou boite flexible) est un conteneur qui renferme des éléments (inline ou block) de telle sorte à ce que ces éléments-là soient emboités d’une manière flexible sans générer de débordement ou de retour à la ligne incontrôlé.

En gros une flexbox permet:

La distribution des éléments horizontalement ou verticalement en spécifiant comment gérer les espaces restants.
L’aligenement des éléments d’une manière fluide et personnalisée.
L’organisation des éléments dans un ordre qui peut être différent de celui établi par le flux du DOM.

Rendre un conteneur flexible

Généralement, les conteneurs sont de type block comme c’est le cas pour les balises <div>, <section>, <aside>… Afin de les rendre flexibles (ou flexbox) il faut changer leur propriété CSS display comme ceci:

  élément {
        display: flex;
    }

Ainsi tous les éléments enfants de l’élément flexbox seront réalignés par défaut de manière à ce qu’ils soient tous sur la même ligne (même s’ils sont de type block).

Exemple

Code HTML

<div id="flexbox">
        <div class="enfant1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla nesciunt quisquam, facere officiis, nobis dolore maxime officia earum deserunt ut cum quasi ducimus cupiditate eos pariatur molestias sed voluptatem dolores.</div>
        <div class="enfant2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum nam cum dignissimos maiores veniam, doloribus mollitia provident accusantium impedit nihil rem ipsa obcaecati aperiam animi enim? Optio odit excepturi at.</div>
        <div class="enfant3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos non ab illum nisi rem eum aperiam, sequi dolorum nesciunt, consequuntur saepe nemo rerum? Recusandae suscipit aperiam laborum quidem dolore debitis.</div>
    </div>

Code CSS

<style>
         #flexbox{
             display:flex; 
         }
         .enfant1
         {
            background-color: blue;
            padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px;
         }
         .enfant2
         {
            background-color: rgb(228, 120, 19);
            padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px;
         }
         .enfant3
         {
            background-color: rgb(187, 239, 14);
            padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px;
         }

    </style>

Aller plus loin avec flexbox

Définition de l’axe principal: propriété flex-direction

Un conteneur quelconque dispose de deux axes, un axe principal et un axe secondaire qui, par défaut, correspondent respectivement aux axes horizontal et vertical.

Dans l’exemple précédent nous avons vu que les éléments ont été distribué horizontalement après l’application de la propriété display:flex sur le parent. En effet, il s’agit là de l’axe principal.

La propriété que l’on peut appliquer sur le conteneur pour changer la direction par défaut de l’axe principal est flex-direction et qui peut prendre les valeurs suivantes:

row: qui est la valeur par défaut, est qui distribue les éléments enfant sur l’axe horizontal dans l’ordre de flux (par défaut, de gauche à droite). Si vous appliquez l’attribut HTML dir:rtl alors l’alignement sera effectuée de droite à gauche.
column: dans ce cas la distribution des éléments enfant sera effectuée sur l’axe vertical de haut en bas.
row-reverse: la distribution sera faite suivant l’axe horizontal mais dans l’ordre inversé.
column-reverse: la distribution sera faite suivant l’axe vertical mais dans l’ordre inversé (du bas vers le haut).

Exemple:

#flexbox{
             display:flex; 
             flex-direction:row-reverse;
 }

Alignement sur l’axe principal: propriété justify-content

Pour aligner les éléments sur l’axe principal on fait appel à la propriété justify-content et peut prendre les valeurs suivantes:

flex-start: (valeur par défaut) les éléments enfant seront alignés l’axe principal dans l’ordre normal du flux au début du conteneur.
flex-end: les éléments enfant seront alignés à la fin du conteneur.
space-between: les éléments seront répartis sur tout l’axe principal, si leur largeur combinée est inférieur à celle du conteneur alors un espacement sera placé entre deux enfants voisins d’une manière régulière.
space-around: les éléments seront répartis sur tout l’axe principal, si leur largeur combinée est inférieur à celle du conteneur alors un espacement sera placé autour de tous les enfants.
center: les éléments seront centrés dans le conteneur.