CSS 3

Objectifs

Maîtriser le langage CSS3 pour présenter les contenus Web de façon optimisée et adaptative.

Compétences visées

- Décrire et utiliser les outils de développement pour tester et déboguer le CSS

- Appliquer les règles de base de CSS pour styliser les éléments et lier les feuilles de style aux documents HTML

- Sélectionner et cibler des éléments avec des sélecteurs CSS3 en fonction de leur hiérarchie, attributs et états

- Formater les contenus Web en ajustant les attributs de texte, arrière-plan, alignement, et espacement

- Créer des mises en page en utilisant le modèle de boîtes Flexbox et la grille CSS3

- Définir et appliquer des animations CSS3

- Configurer des mises en page adaptatives en utilisant des sélecteurs CSS3 et tester les rendus sur divers appareils

Programme de la formation

Programme

- Rappels : les documents Web et les langages associés

• Historique des langages et technologies du Web


• Quel langage pour quel effet ?


• Editeurs dédiés et outils en ligne de tests


• Outils de débogage des navigateurs Web


• Documentations en ligne

- Concepts de base de CSS

• Présentation de CSS


• Anatomie des règles CSS


• Valeurs, types et unités en CSS


• Attributs raccourcis


• Liaison entre document HTML et feuilles de styles CSS

- Sélecteurs CSS3

• Les sélecteurs simples


• Concepts du DOM


• Les sélecteurs hiérarchiques


• Les sélecteurs liés aux attributs


• Les sélecteurs de position


• Les sélecteurs d'état


• Héritage et ordre d'application des règles CSS

- Mise en forme de contenus

• Attributs de texte et police


• Attributs d'arrière-plan


• Puces, numéros


• Attributs d'alignement et d'espacement

- Mise en page de documents

• Le modèle de boîtes de CSS


• Marges, bordures, dimensions


• La mise en page historique (positionnements naturels et habillages)


• Le flexbox


• La grille de CSS3


• Le positionnement absolu et l'empilement des éléments

- Animations

• Principes d'animation en CSS3


• Définition de scénarii d'animation


• Application d'un scénario d'animation à des éléments


• Avantages et inconvénients des animations purement CSS

- Mise en page adaptative CSS

• Principes de mise en page adaptative


• Les sélecteurs CSS3 utiles au design adaptatif


• Tester un document sur d'autres affichages que le navigateur Web

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique