Les propriétés CSS3
Sur cette page, vous trouverez tous les groupes de propriétés CSS3 avec des références et de courtes descriptions.
Liste des Propriétés CSS3
Les Propriétés d’animation
| La propriété | La description |
|---|---|
| animation | Anime (passe progressivement d’un style à un autre) les propriétés CSS avec des valeurs discrètes. |
| animation-delay | Spécifie quand une animation va démarrer. |
| animation-direction | Définit comment l’animation doit être jouée : vers l’avant, vers l’arrière ou en alternance. |
| animation-duration | Définit la durée (en secondes ou en millisecondes) qu’une animation prend pour compléter un cycle d’animation. |
| animation-fill-mode | Définit un style à l’élément, lorsque l’animation n’est pas exécutée (avant qu’elle commence, après qu’elle se termine, ou les deux). |
| animation-iteration-count | Définit combien de fois l’animation doit être jouée. |
| animation-name | Définit le nom de la règle @keyframes, que vous voulez appliquer. Elle a deux valeurs: none et keyframename. |
| animation-play-state | Spécifie si l’animation est en cours ou en pause. |
| animation-timing-function | Définit comment l’animation progressera pendant la durée de chaque cycle, et non pendant toute l’animation. |
| @keyframes | La règle @keyframes est la base pour les animations keyframe, utilisées pour animer (passer progressivement d’un style à un autre) de nombreuses propriétés CSS. |
Les Propriétés de Fond
| La propriété | La description |
|---|---|
| background-clip | Spécifie la distance entre les propriétés background-color et background-image. |
| background-origin | Spécifie la zone de positionnement de l’arrière-plan de la propriété background-image. |
| background-size | Définit la taille de l’image de fond. |
Les Propriétés de Bordure
| La propriété | La description |
|---|---|
| border-bottom-left-radius | Définit la forme ronde du coin inférieur-gauche de l’élément. |
| border-bottom-right-radius | Définit l’arrondissement du coin inférieur-droit de l’élément. |
| border-image | Permet de spécifier une image comme bordure autour d’un élément. |
| border-image-outset | Spécifie la quantité, par laquelle l’image de bordure est étendue au-delà de la boîte de bordure de l’élément. |
| border-image-repeat | Spécifie si la propriété border-image sera arrondie, répétée ou étirée. |
| border-image-slice | Spécifie comment couper l’image, spécifiée par la propriété border-image-source, en neuf régions : quatre coins, quatre bords, une partie centrale. |
| border-image-source | Définit l’image source, pour créer l’image de bordure d’un élément. |
| border-image-width | Définit la largeur de l’image de bordure. |
| border-radius | Fait des coins arrondis pour le bord extérieur d’un élément. |
| border-top-left-radius | Définit l’arrondissement du coin supérieure-gauche de l’élément. Il existe trois types d’arrondissement. |
| border-top-right-radius | Définit la forme ronde du coin supérieur-droit de l’élément. Il y a trois types d’arrondissement. |
Les Propriétés de Couleur
| La propriété | La description |
|---|---|
| opacity | Spécifie la transparence d’un élément. |
Mise en Page de la Boîte Flexible
| La propriété | La description |
|---|---|
| align-content | Aligne les lignes d’un conteneur flex, lorsqu’il y a de l’espace disponible verticalement (sur l’axe transversal). |
| align-items | Définit l’alignement par défaut pour les éléments flex. Il est le même, que la propriété justify-content , mais la version verticale.. |
| flex | Spécifie les composants d’une longueur flexible. |
| flex-basis | Définit la taille initiale principale de l’élément flexible. |
| flex-direction | Définit l’axe principal d’un conteneur flex et l’ordre, dans lequel les éléments flex apparaissent. |
| flex-flow | Une propriété raccourcie pour les propriétés flex-wrap et flex-direction . |
| flex-grow | Spécifie combien l’élément va croître, par rapport au reste des éléments du conteneur flex. |
| flex-shrink | Spécifie combien l’élément va rétrécir par rapport au reste des éléments du conteneur flex. |
| flex-wrap | Specifies if the flexible items should wrap or not. |
| justify-content | Aligne les éléments, lorsque les éléments n’utilisent pas tout l’espace disponible horizontalement. |
| order | Spécifie l’ordre d’un élément flexible à l’intérieur du conteneur flex ou grille. |
Les propriété de Police
| La propriété | La escription |
|---|---|
| font-size-adjust | Contrôle la taille de la police, lorsque la première police sélectionnée n’est pas disponible. |
| font-stretch | Rend le texte plus étroit ou plus large. |
Les propriétés de Mise en Page Multi-colonnes
| La propriété | La description |
|---|---|
| column-count | Spécifie si la propriété border-image sera arrondie, répétée ou étirée.. |
| column-fill | Contrôle le contenu de l’élément, lorsqu’il est divisé en colonnes. |
| column-gap | Définit la longueur de l’écart entre les colonnes. |
| column-rule | Définit le style, la largeur et la couleur de la règle entre les colonnes. |
| column-rule-color | Définit la couleur de la règle. |
| column-rule-style | Définit le style de la règle entre les colonnes. |
| column-rule-width | Définit la largeur de la règle entre les colonnes. |
| column-span | Spécifie si l'élément s'étend sur une colonne ou toutes les colonnes. . |
| column-width | Définit la largeur des colonnes. |
| columns | Une propriété raccourcie pour les propriétés column-count et column-width. |
Les Propriétés de Contour
| La propriété | La description |
|---|---|
| outline-offset | Spécifie l’espace entre un contour et le bord d’un élément. |
Les Propriétés de Texte
| La propriété | La description |
|---|---|
| tab-size | Définit la largeur d’un caractère d’onglet. |
| text-align-last | Définit l’alignement de la dernière ligne du texte. |
| text-decoration-color | Définit la couleur de la décoration de texte. |
| text-decoration-line | Spécifie le type de ligne, qui sera utilisé pour la décoration de texte. |
| text-decoration-style | Spécifie le style de la décoration de texte. |
| text-justify | Définit l'attitude de l’espacement entre les mots ou les caractères. |
| text-overflow | Spécifie comment le texte en ligne débordant doit être signalé à l’utilisateur. |
| text-shadow | Permet d’ajouter des ombres au texte. |
| column-width | Définit la largeur des colonnes. |
| word-break | Spécifie où les lignes doivent être brisées. |
| word-wrap | Permet de briser les lignes en mots, de manière à s’adapter à son contenant. |
Les Propriétés de Transformation
| La propriété | La description |
|---|---|
| backface-visibility | Spécifie si la face arrière d’un élément doit être visible ou non. |
| perspective | Donne à un élément positionné en 3D une certaine perspective et détermine la distance entre le plan z=0. |
| perspective-origin | Définit la position à laquelle l’utilisateur regarde l’élément positionné en 3D. |
| transform | Spécifie la transformation bidimensionnelle ou tridimensionnelle de l’élément. |
| transform-origin | Permet de modifier la position de la transformation des éléments. |
| transform-style | Spécifie comment les éléments enfants sont rendus dans l’espace tridimensionnel (3D). |
Les Propriétés de Transition
| La propriété | La description |
|---|---|
| transition | Une propriété raccourcie pour les propriétés suivantes: transition-property, transition-duration, transition-timing-function, transition-delay |
| transition-delay | Spécifie quand l’effet de transition doit commencer. |
| transition-duration | Spécifie la durée de l’animation de transition. |
| transition-property | Spécifie les noms des propriétés pour la transition. |
| transition-timing-function | Spécifie l'instance de la transition sur sa durée, permettant de changer la vitesse. |
Propriétés de Formatage Visuel
| La propriété | La description |
|---|---|
| overflow-x | Spécifie si le contenu doit être caché, visible ou défile horizontalement, lorsque le contenu déborde des bords gauche et droit de l’élément. |
| overflow-y | Spécifie si le contenu doit être caché, visible ou défile verticalement, lorsque le contenu déborde des bords supérieurs et inférieurs de l’élément. |
| resize | Spécifie comment l’élément est redimensionnable. |
| box-shadow | Permet d’implémenter plusieurs ombres autour de la boîte en spécifiant des valeurs pour la couleur, la taille, le flou, le décalage et l’encart. |
| box-sizing | Définit le calcul de la largeur et de la hauteur d’un élément, s’ils comprennent la rembourrage et les bordures. |
Pratiquez vos connaissances
Quelles sont les nouvelles propriétés introduites dans CSS3 par rapport à CSS2?
Correcte!
Incorrecte!