Cours 10¶
Rappel de l'inspecteur¶
- Faire un clic droit sur la souris 🖱️ et choisir l'option Inspecter.
- Utiliser le raccourci clavier ⌨️
- Windows Ctrl+Shift+I ou F12
- Mac Cmd+Option+I ou F12
Dans l'onglet Elements, non seulement on voit le DOM, mais on peut :
- voir les styles de la page
- voir le modèle de boîte
- voir les styles des états interactifs (:hover, :focus, :active)
Aussi, rappelez-vous, on peut chercher dans le DOM. Il suffit de faire le raccourci Ctrl+F.
Astuce importante
Dans la partie des styles, cliquer sur une valeur numérique permet de la modifier, mais ce n'est pas tout ! Appuyer sur les flèches (haut et bas) permet de modifier certaines des valeurs.
Sélecteurs avancés¶
Plus (A + B)¶
Sélectionne l’élément B qui suit immédiatement A (dans le même parent).
<p class="note">Note 1</p>
<p class="intro">Intro</p>
<p class="note">Note 2</p>
<p class="note">Note 3</p>
/* vise Note 2 */
.intro + .note {
color: black;
}
Tilde (A ~ B)¶
Sélectionne tous les B qui suivent A (dans le même parent), pas nécessairement adjacents.
<p class="note">Note 1</p>
<p class="intro">Intro</p>
<p class="note">Note 2</p>
<p class="note">Note 3</p>
/* vise Note 2 et Note 3*/
.intro ~ .note {
color: black;
}
Plus grand que (A > B)¶
Sélectionne les enfants directs B de A (pas les petits-enfants).
<ul class="menu">
<li>
<a href="#">Lien 1</a>
</li>
<li>
<span>
<a href="#">Lien 2</a>
</span>
</li>
<li>
<a href="#">Lien 3</a>
</li>
</ul>
/* Sélectionne Lien 1 et Lien 3 */
li > a {
color: black;
}
Propriété overflow¶
La propriété overflow définit comment gérer le dépassement du contenu d'un élément dans son bloc.
| Propriété | Effet |
|---|---|
overflow: visible; |
(défaut) Le contenu déborde et reste visible. |
overflow: hidden; |
Le contenu excédentaire est coupé. |
overflow: scroll; |
Toujours afficher des barres de défilement. |
overflow: auto; |
Affiche des barres si nécessaire. |
overflow-x / overflow-y |
Axe spécifique (horizontal/vertical). |
.carte {
width: 240px;
height: 140px;
padding: 12px;
overflow: auto; /* Affiche les scrollbars si ça déborde */
}
text-overflow¶
La propriété text-overflow définit le comportement du contenu textuel qui dépasse son contenant.
La valeur la plus utilisée est ellipsis. Elle permet de tronquer le texte et d'ajouter un … à la fin de la chaîne de caractères.
.tronque {
width: 16rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Affiche … si ça déborde */
}
Propriété box-sizing¶
La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément sont calculées.
| Valeur | Description |
|---|---|
content-box |
valeur par défaut, largeur exclut padding et border |
border-box |
largeur inclut padding et border (recommandée 👌) |
Pourquoi se casser la tête
Ajoutez systématiquement ce style dans vos projets. Ça évite beaucoup de problèmes quant aux hauteurs et largeurs des éléments de la page.
* {
box-sizing: border-box;
}
Propriété vertical-align¶
La propriété vertical-align définit l'alignement vertical d'un élément en display inline, inline-block ou table-cell.
Valeurs : baseline, top, middle, bottom, text-top, text-bottom, super, sub.
C'est souvent utile pour aligner des images dans un texte. Voici un exemple :
4px
N'oubliez pas que les éléments en display: inline-block; ont un espace à droite de 4px.
Il n'est donc pas possible d'aligner deux inline-block de 50% de large un à côté de l'autre. Il faut souvent réduire la taille des colonnes.
Propriété float ☁️¶
La propriété float permet à un élément de flotter à gauche ou à droite à l'intérieur de son conteneur. Elle permet aussi au texte et aux autres éléments en ligne de s’enrouler autour.
img.flotte-juste-pas {
float: none; /* par défaut */
}
img.flotte-a-droite {
float: right;
}
img.flotte-a-gauche {
float: left;
}
Wikipedia
La notion de float est omniprésente sur le site Wikipedia.org
Propriété clear¶
Empêche un élément de monter à côté d’un float.
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
Propriété position¶
La propriété position définit la façon dont un élément est positionné. Les propriétés top, right, bottom, left déterminent son emplacement final.
Par défaut, les éléments ont position: static. Ils suivent le flow de la page et ne répondent pas aux propriétés top, right, bottom et left.
p {
position: static; /* Par défaut */
}
relative¶
L’élément occupe l’espace normal, mais il peut être décalé visuellement avec les propriétés top, right, bottom et left.
.exemple-de-position-relative {
position: relative;
top: 10px;
left: 10px;
}
Propriété z-index¶
Maintenant qu'on parle de positionnement et de chevauchement, il est temps de parler du concept de profondeur.
La propriété z-index définit la profondeur d'un élément positionné en relative, absolute, fixed ou sticky.
Plus le chiffre du z-index est bas (les négatifs sont permis), plus son ordre d'affichage sera vers l'arrière.
.salut {
position: relative;
z-index: 10;
}
.bonjour {
position: relative;
z-index: 20;
}
absolute¶
Les éléments en position: absolute quittent le flow de la page et se positionnent par rapport à l’ancêtre positionné le plus proche.
<div class="une-position-relative">
<img src="..." alt="...">
</div>
.une-position-relative {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
fixed¶
Semblable à absolute, mais référencé au viewport (la fenêtre). Reste fixe au défilement.
sticky¶
Se comporte comme static puis devient fixe lorsque le défilement atteint la valeur de top/left/right/bottom.
Quelques considérations
Pour que ça fonctionne, il faut que le parent ait une hauteur plus grande que l'enfant en sticky.
Il faut aussi spécifier la valeur top
Finalement, aucun ancêtre doit avoir la propriété overflow configurée à autre chose que visible ou clip.
Exercices¶
Exercice interactif - CSS
Sélecteurs avancés, mais tout aussi pulpeux
Exercice interactif - CSS
Schrödinger
Exercice interactif - Inspecteur
Unlock
Exercice - CSS
Mr. Sandwich
Exercice - CSS
Firewatch