CSS - Essentiels

Unités de mesure

Elles permettent de dimensionner le texte et le contenu^[1].

absolues
relatives

1. MDN - Concevoir pour tous les utilisateurs - Taille de police

Unités de mesure absolues

Indépendantes de la taille d’écran et des paramètres utilisateur.

Quel problème voyez-vous ?

        .conteneur {
            width: 800px; /* Largeur fixe */
            margin: 20px auto;
            padding: 20px;
            background-color: lightgray;
        }

        .texte {
            font-size: 18px; /* Taille fixe */
            padding: 10px; /* Padding fixe */
            margin: 15px; /* Marge fixe */
            background-color: white;
            border: 2px solid black;
        }

<section class="conteneur">
    <p class="texte">Ce texte utilise px pour la taille de police, paddin et margin. Essaye de zoomer ou de l'afficher
        sur un écran plus
        petit. Ca ne s'ajustera pas !
    </p>
</section>

Unités de mesure relative

Unités de mesure relative de taille de police

Basées sur la police de l’élément racine (<body>)

rem

Basée sur la police de l’élément conteneur

em

`rem`

Unité de mesure relative à la taille par défaut du texte (à la racine).

2rem signifie 2 fois la taille de texte par défaut.

Si la font-size au niveau du body est 16px, alors

1.5rem sera
- 24px (1.5 * 16)
2rem sera
- 32px (16 * 2)

`em`

Unité de mesure relative à la taille courante du texte de l’élément parent.

Démo : unité de mesure absolue

<body style="font-size: 10px">
Le texte par défaut fait 10px.
<p style="font-size: 1.5em">
    Premier paragraphe (1)
</p>
<section style="font-size: 2em">
    <h2 style="font-size: 2em">
        Titre de la section (2)
    </h2>
    <p>
        Paragraphe de section (3)
    </p>
    <footer style="font-size: 0.5em">
        Texte du pied de page de section (4)
    </footer>
</section>
</body>

Quelle taille de texte ?

1	Premier paragraphe : (10px * 1.5 = 15px)
2	Titre de la section : (10px * 2 * 2 = 40px)
3	Paragraphe de section : (10px * 2 * = 20px)
4	Texte du pied de page de section : (10px * 2 * 0.5 = 10px)

Pourcentage - `%`

Quand appliqué à du texte.

Unité de mesure relative à la taille courante du texte de l’élément parent.

Démo : unité de mesure pourcent

<body style="font-size: 20px">
La taille du texte de base est 20px.
<p style="font-size: 150%">
    Dans le paragraphe 1, (1)
    les <em style="font-size: 200%">termes importants</em> (2)
    sont plus gros.
</p>
<p style="font-size: 200%">
    Dans le paragraphe 2, (3)
    les termes <s style="font-size: 50%">qui ne sont plus pertinents </s> (4)
    sont plus petits.
</p>
</body>

Quelle taille de texte ?

1	"Dans le paragraphe 1" : (20px * 150% = 30px)
2	"termes importants" : (20px * 150% * 200% = 60px)
3	"Dans le paragraphe 2" : (20px * 200% = 40px)
4	"qui ne sont plus pertinents" : (20px * 200% * 50% = 20px)

Equivalence `em` et pourcent

1em équivaut à 100% , 2em équivaut à 200% …

rem pour font-size

Démo : unité de mesure relative

        /* La taille de police est 16px par défaut, donc 1rem = 16px */
        body {
            font-size: 1rem; /* Ca passe à l'échelle avec les paramètres utilisateur */
            line-height: 1.6;
            font-family: Arial, sans-serif;
        }

        .conteneur {
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 10px;
            background-color: lightgray;
        }

        h1 {
            font-size: 2rem; /* 32px si la taille par défaut est 16px */
            margin-bottom: 1rem;
        }

        p {
            font-size: 1.25rem; /* 20px */
        }

        .bouton {
            display: inline-block;
            font-size: 1.5rem;
            padding: 0.75rem 1.5rem;
            background-color: darkblue;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .bouton:hover {
            background-color: navy;
        }

<section class="conteneur">
    <h1>Texte zoomable et accessible avec rem</h1>
    <p>Ce texte s'ajuste automatiquement si l'utilisateur change leur taille de police par défaut dans les paramètres
        par défaut du navigateur.</p>
    <a href="#" class="bouton">Essaye d'augmenter la taille de ta police!</a>
</section>

em pour mettre à l’échelle des composants

Démo : mise à l’échelle au sein d’un composant avec em

        body{
            font-family: Arial, sans-serif;
            background-color: #F4F4F4;
            text-align: center;
            padding: 2rem;
        }

        .conteneur {
            font-size: 16px; /* taille de texte de base */
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: auto;
        }

        button {
            font-size: 1.2em; /* 1.2 fois la taille de texte du parent (16px * 1.2 = 19.2px */
            padding: 1em 2em; /* Le padding passe à l'échelle avec la taille de texte */
            background-color: darkblue;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .large-conteneur {
            font-size: 20px; /* Maintenant le padding, texte vont passer à l'échelle */
            margin-top: 1rem;
        }

<section class="conteneur">
    <h2>Conteneur par défaut</h2>
    <button>Clique moi</button>
</section>

<section class="conteneur large-conteneur">
    <h2>Conteneur mis à l'échelle</h2>
    <button>Clique moi</button>
</section>

Propriétés raccourcies (shorthand properties)

Certaines propriétés peuvent être raccourcies ^[1].

body{
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
}

Propriété raccourcie

body{
    margin: 0;
}

Certains éditeurs de code/plugins vous permettent de passer d’un style à l’autre

1. https://developer.mozilla.org/fr/docs/Web/CSS/CSS_cascade/Shorthand_properties

Modèle de boîte (Box Model)

Figure 1. Représentation (interactive) du modèle de boîte dans les dev tools

De l’extérieur vers l’intérieur

margin : marge externe
border : bordure
padding : remplissage
contenu

Zone de contenu

Le contenu "réel" de l’élément
Dimensions
- largeur width du contenu
- hauteur height du contenu

`padding` - Zone de remplissage

Propriétés padding-* ^[1]

padding-top
padding-bottom
padding-left
padding-right
padding : propriété raccourcie

Expérimental (basé sur la direction du texte)

padding-block-start, padding-block-end
padding-block ^[2]
padding-inline-start, padding-inline-end
padding-inline ^[2]

section {
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px;

    padding: 1px 2px 3px 4px;
}

section {
    padding-top: 2rem;
    padding-right: 3rem;
    padding-bottom: 2rem;
    padding-left: 3rem;

    padding: 2rem 3rem;
}

section {
    padding-top: 3rem;
    padding-right: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;

    padding: 3rem;
}

1. MDN - CSS padding

2. Expérimental

`border` - Zone de bordure

Propriétés border-*-width ^[1]

border-top-width
border-bottom-width
border-left-width
border-right-width
border : propriété raccourcie

Autres propriétés de bordure ^[2]

border-*-style
border-*-color
border-radius (pour arrondir)

section{
    /* style */
    border: solid;

    /* largeur | style */
    border: 2px dotted;

    /* style | couleur */
    border: outset #f33;

    /* largeur | style | couleur */
    border: medium dashed green;
    /* Valeurs globales */
    border: inherit;
    border: initial;
    border: unset;

    border-radius: 1rem;
}

1. MDN - CSS border-width

2. MDN - CSS border

`border-*-width` - Valeurs

/* Valeurs avec un mot-clé */
border-width: thin;
border-width: medium;
border-width: thick;

/* Une largeur pour chaque côté */
/* Valeur de type <length> */
border-width: 5px;

/* côtés haut et bas | côtés gauche et droit */
border-width: 2px 1.5em;

/* côté haut | côtés gauche et droit | côté bas */
border-width: 1px 2em 1.5cm;

/* haut | droite | bas | gauche */
border-width: 1px 2em 0 4rem;

/* Valeurs globales */
border-width: inherit;
border-width: initial;
border-width: unset;

La zone de bordure, délimitée par le bord de la bordure, étend la zone de remplissage pour inclure les bordures de l’élément. Ses dimensions sont la largeur de la boîte de bordure et la hauteur de la boîte de bordure.

L’épaisseur des bordures est déterminée par les propriétés border-width et la propriété abrégée border. Si la propriété box-sizing est définie sur border-box, la taille de la zone de bordure peut être explicitement définie avec les propriétés width, min-width, max-width, height, min-height et max-height. Lorsqu’un arrière-plan (background-color ou background-image) est défini sur une boîte, il s’étend jusqu’au bord extérieur de la bordure (c’est-à-dire qu’il passe sous la bordure dans l’ordre des couches). Ce comportement par défaut peut être modifié avec la propriété CSS background-clip.

`margin` - Zone de marge

Propriétés margin-* ^[1]

margin-top
margin-bottom
margin-left
margin-right
margin : propriété raccourcie

Basé sur la direction du texte

margin-block-start, margin-block-end
margin-block ^[2]
margin-inline-start, margin-inline-end
margin-inline ^[2]

/* La propriété s'applique aux quatre côtés */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* haut | horizontal | bas */
margin: 1em auto 2em;

/* haut | droit | bas | gauche */
margin: 2px 1em 0 auto;

/* Valeurs globales */
margin: inherit;
margin: initial;
margin: unset;

La zone de marge, délimitée par le bord de la marge, étend la zone de bordure pour inclure une zone vide utilisée pour séparer l’élément de ses voisins. Ses dimensions sont la largeur de la boîte de marge et la hauteur de la boîte de marge.

La taille de la zone de marge est déterminée par les propriétés margin-top, margin-right, margin-bottom, margin-left et la propriété abrégée margin. Lorsque la fusion des marges se produit, la zone de marge n’est pas clairement définie car les marges sont partagées entre les boîtes.

Enfin, notez que pour les éléments en ligne non remplacés, l’espace occupé (la contribution à la hauteur de la ligne) est déterminé par la propriété line-height, même si les bordures et le remplissage sont toujours affichés autour du contenu.

1. MDN - CSS margin

2. Expérimental

Aligner avec margin

Une méthode traditionnelle pour aligner du contenu en bloc (on verra d’autres méthodes avec flexbox par la suite).

Pour un élément de bloc avec une largeur fixe

Appliquer margin-left: auto alignera le bloc à droite ^[1]
Appliquer margin-right: auto alignera le bloc à droite ^[2]
Appliquer margin-left: auto et margin-right: auto alignera le bloc au centre ^[3]

    section{
        border: 1px solid;
        max-width: 15rem;
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .align-left{
        margin-right: auto;
    }
    .align-right{
        margin-left: auto;
    }
    .align-center{
        margin-left: auto;
        margin-right: auto;
    }

<body>

<section class="align-left">Section A</section>
<section class="align-right">Section B</section>
<section class="align-center">Section C</section>
</body>

1. la marge prend tout l’espace disponible à gauche

2. la marge prend tout l’espace disponible à droite

3. la marge prend tout l’espace disponible à gauche et à droite

Fusion des marges

Dans certains cas les marges verticales sont fusionnées ^[1].

1. MDN - CSS : Fusion des marges

box-sizing content-box

section {
    width: 160px;
    height: 80px;
    padding: 20px;
    border: 8px solid red;
    background: yellow;
}
.content-box {
    box-sizing: content-box;
    /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
    Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
    Largeur de la boîte de contenu : 160px
    Hauteur de la boîte de contenu : 80px */
}

<section class="content-box">Content box</section>

Démo : border-box et content-box

box-sizing: content-box; est la valeur par défaut.

https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing En CSS, la largeur et la hauteur affectées à un élément s’appliquent par défaut à la boîte de contenu (content box) de l’élément. Si l’élément possède une bordure (border) ou du remplissage (padding), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l’écran. Cela signifie qu’il faut ajuster les valeurs de hauteur et de largeur afin qu’elles permettent d’ajouter n’importe quelle bordure ou n’importe quel remplissage qui serait ajouté par la suite.

La propriété box-sizing peut être utilisée afin d’ajuster ce comportement :

content-box est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.

border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c’est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.

box-sizing border-box

section {
    width: 160px;
    height: 80px;
    padding: 20px;
    border: 8px solid red;
    background: yellow;
}
.border-box {
    box-sizing: border-box;
    /* Largeur totale : 160px
    Hauteur totale : 80px
    Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
    Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
}

<section class="border-box">Border box</section>

Démo : border-box et content-box

Il est souvent utile de définir box-sizing à border-box aux éléments de mise en page.

* {
    box-sizing: border-box;
}

Propriété `display`

display ^[1] ^[2]

définit le type d’affichage de l’élément

none : le contenu n’apparait pas
block : force l’élément à devenir un élément de bloc (ex. comme un <div>)
inline : force l’élément à devenir un élement en ligne (ex. comme un <span>)
inline-block : donne les propriétés de inline tout en permettant de définir
flex / inline-flex : l’élement devient un conteneur de boîte flexible (flexbox) ^[3]
grid / inline-grid: l’élément devien un conteneur de grille ^[3]

1. MDN - CSS : display

2. MDN - Référence CSS : display

3. Sera approfondi dans une autre partie du cours

overflow - Ca dépend, ça dépasse

css overflow ca depend ca depasse

Un débordement a lieu (overflow) quand la taille du contenu dépasse ^[1] ^[2] celle du contenant (par ex. si des barres de défilement apparaissent).

MDN - CSS : overflow - exemples

1. MDN - Apprendre : Débordements de contenu (overflow)

2. MDN - CSS : overflow

overflow (débordements de contenu)

Propriétés

overflow-x : dépassement sur l’axe horizontal
overflow-y : dépassement sur l’axe vertical
overflow : raccourcie (combine x et y)

Valeurs les plus courantes

visible : (défaut) le contenu qui dépasse de la boite peut s’afficher en dehors de celle-ci
scroll: affiche toujours une barre de défilement
auto : (geré par le navigateur) le plus souvent, affiche une barre de défilement seulement si le contenu dépasse de la boîte
hidden : le contenu qui dépasse n’est pas visible (pas de barre de défilement)

background

Propriétés déterminant l’arrière-plan d’un élément (couleur, image, origine, taille, répétition, etc.).

background-color : couleur de l’arrière-plan
background-image : image de l’arrière-plan (utilisé avec la fonction css url())
- background-origin : orgine de l’arrière-plan dans le modèle de boîte
- background-attachment : détermine si l’image d’arrière-plan est fixée ou non
- background-clip : la façon dont l’arrière-plan s’étend dans le modèle de boîte
- background-position : position des images d’arrière-plan relative à l’origine
- background-repeat : si et comment l’image d’arrière-plan se répète
- background-size : taille des images d’arrière-plan