Master 1 - mention Audiovisuel, Médias Interactifs Numériques, et Jeux - parcours Direction de Projets Numériques

Ressources utiles

Chaque ressource ci-dessous aborde une facette complémentaire de la conception numérique : HTML & CSS.
Vous pouvez les parcourir dans l’ordre proposé ou selon vos besoins du moment.

Voir tous les cours
RESSOURCES UTILES

Usages des techniques numériques
- CSS propriétés & valeurs -

INTERMÉDIAIRE

Description

Les propriétés et valeurs CSS constituent le vocabulaire fondamental du langage CSS.
Chaque propriété décrit un aspect visuel ou comportemental d’un élément HTML (couleur, taille, position, espace, flex, grid, animation…), et chaque valeur précise comment cette propriété doit s’appliquer.

Une déclaration CSS est la combinaison :
→ propriété CSS + valeur CSS
ex. color: #333;

La maîtrise de ce système permet :
– de contrôler précisément l’apparence d’une interface,
– de construire des mises en page flexibles et responsives,
– d’améliorer accessibilité, lisibilité et cohérence graphique,
– de comprendre le fonctionnement interne de frameworks (Bootstrap, Elementor…).

Ce document recense plus d’une centaine de propriétés CSS essentielles, organisées par famille fonctionnelle, pour servir de référence rapide.

Objectifs pédagogiques

  • Comprendre et utiliser les propriétés CSS
  • Structurer et mettre en forme une interface
  • Manipuler la typographie & les couleurs
  • Travailler les interactions & animations
  • Optimiser et améliorer l’expérience utilisateur
  • Utiliser des variables CSS

Sommaire

  1. Alignement → organiser l’emplacement et la superposition des éléments
  2. Affichage & Position → définir comment un élément occupe l’espace et se positionne
  3. Box Model → contrôler tailles, espacements, bordures et débordements
  4. Colonnes → organiser le contenu en colonnes automatiques
  5. Container Queries → adapter le style en fonction de la taille d’un conteneur
  6. Contenu & pseudo-éléments → générer du contenu et gérer les compteurs
  7. Couleurs & Fond → gérer couleurs, arrière-plans et transparence
  8. Divers / Performance → optimiser le rendu et la visibilité
  9. Défilement → contrôler comportements et repères de scroll
  10. Effets → appliquer filtres, transparence et mélanges
  11. Flexbox → créer des mises en page en une dimension
  12. Grid → structurer des layouts complexes en deux dimensions
  13. Interactions → gérer comportements au clic, au toucher ou à la sélection
  14. Listes → personnaliser l’apparence des listes
  15. Logiques d’écriture → adapter l’interface aux sens d’écriture
  16. Média → ajuster affichage des images et vidéos
  17. Outline → ajouter un trait externe sans modifier le box model
  18. Tableaux → maîtriser mise en forme des tables HTML
  19. Transformations → appliquer rotations, translations, déformations
  20. Transitions & Animations → créer des effets dynamiques
  21. Typographie → contrôler polices, tailles, espacements et décorations
  22. Variables CSS → définir des valeurs réutilisables

1. CSS propriétés & valeurs

1. Alignement

  1. clear
  2. float
  3. order
  4. z-index
  5. place-content / place-items / place-self

2. Affichage & Position 

  1. display
  2. position
  3. top / right / bottom / left
  4. visibility

3. Box Model 

  1. width / height / min/max-*
  2. margin / padding
  3. border / border-radius
  4. box-shadow
  5. box-sizing
  6. overflow / overflow-x / overflow-y

4. Colonnes

  1. column-count / column-width
  2. column-gap / column-rule-*
  3. columns

5. Container Queries 

  1. container
  2. container-name
  3. container-type

6. Contenu & pseudo-éléments

  1. content
  2. counter-*

7. Couleurs & Fond

  1. background-*
  2. color
  3. opacity
  4. clip-path
  5. image-rendering

8. Divers / Performance 

  1. contain
  2. content-visibility
  3. overscroll-behavior

9. Défilement 

  1. scroll-behavior
  2. scroll-snap-*
  3. scroll-margin / scroll-padding

10. Effets

  1. filter
  2. mix-blend-mode
  3. backdrop-filter

11. Flexbox

  1. flex / flex-grow / flex-shrink / flex-basis
  2. flex-direction / flex-wrap / flex-flow
  3. justify-content / align-items / align-content
  4. gap / row-gap / column-gap

12. Grid

  1. grid
  2. grid-template-*
  3. grid-auto-*
  4. grid-column / grid-row
  5. grid-area

13. Interactions

  1. cursor
  2. user-select
  3. pointer-events
  4. touch-action
  5. resize

14. Listes

  1. list-style / list-style-type
  2. list-style-image / list-style-position

15. Logiques d’écriture

  1. block-size / inline-size
  2. margin-inline / margin-block
  3. padding-inline / padding-block
  4. writing-mode
  5. direction

16. Média 

  1. object-fit
  2. object-position

17. Outline

  1. outline
  2. outline-offset

18. Tableaux

  1. border-collapse
  2. border-spacing
  3. caption-side
  4. table-layout

19. Transformations

  1. transform (rotate, scale, translate, skew)
  2. transform-origin
  3. transform-style
  4. perspective

20. Transitions & Animations

  1. transition-*
  2. animation-*
  3. @keyframes

21. Typographie

  1. font-*
  2. font-size / line-height
  3. text-align / text-decoration / text-transform
  4. white-space / word-break / hyphens
  5. letter-spacing

22. Variables CSS

  1. custom properties (--var)
  2. var()
Télécharger la ressource