#3 – 05 et 12 NOVEMBRE 2019

Au programme aujourd’hui :

Quelques notions spécifiques en CSS

1/ Les pseudo-class : first-child / last-child

Si on met ça en application :

Quelle intérêt pour quelle utilisation ?

Résultat :

Maintenant que vous comprenez la pseudo-class : first-class, il est sans doute très facile d’imaginer la pseudo-class : last-child

Résultat :

2/ Les Media-Queries ou l’art de contrôler l’affichage en fonction des types d’appareils :

Ces instructions sont issues de la vague de nouveautés de CSS3. On ne parle pas ici de nouvelles instructions, mais plutôt d’une mise en place de règles spécifiques et conditionnelles.

On fait appel aux Media Queries pour contrarier les affichages sur certains appareils (Devices) ou types d’écrans. Il est possible de modifier l’ensemble des caractéristiques d’affichage comme , positionnement, la taille et la couleur des textes,… On peut même faire disparaitre certains éléments qui ne seraient pas utiles ou pertinents sur de plus petits écrans (Vidéo, diaporama ou slideshow,…).

Exemples :

Plus précisément !

Il est important de noter la codification de ces nouvelles règles.
Attention aux accolades !!!

Pour appliquer les Media Queries à son site web, 2 possibilités :

A/ Créer une partie dédiée aux contraintes spécifiques dans son fichier CSS habituel (ex : monstyle.css) placé dans la partie <head> de son fichier HTML (<link rel= »stylesheet » href= »monstyle.css » />)

B/ Créer un fichier CSS spécifique (ex : responsive.css) et ajouter une ligne de code spécifique dans la partie <head> de son fichier HTML (<link rel= »stylesheet » media= »screen and (max-width: 1280px) » href= »responsive.css » />)

A vous de jouer !

NOUVEL EXERCICE HTML + CSS // Bienvenue dans le mode « Responsive design »