Les feuilles de style en cascade (CSS) définissent l'apparence du Web moderne. Si HTML et JavaScript gèrent la structure et l'interactivité, CSS s'occupe de tous les aspects visuels.
Après avoir maîtrisé les pages Web statiques en HTML, passez à l'étape suivante : stylisez-les avec CSS. Notre aide-mémoire des propriétés CSS3 essentielles, ci-dessous, couvre la syntaxe clé de CSS3, la version la plus avancée.
Une maîtrise pratique de CSS permet de personnaliser couleurs, polices, bordures, arrière-plans, mises en page et bien plus. Indispensable pour le développement Web et mobile.
TÉLÉCHARGEMENT GRATUIT : Obtenez ce guide en PDF téléchargeable via notre partenaire TradePub. Un formulaire rapide unique suffit pour l'accès. Téléchargez l'aide-mémoire CSS3 maintenant.
Aide-mémoire des Propriétés CSS3 Essentielles
Propriétés d'arrière-plan
- background : Définit une variété de propriétés d'arrière-plan en une déclaration.
- background-attachment : Spécifie si l'image d'arrière-plan est fixe ou défile avec la page.
- background-color : Définit la couleur d'arrière-plan d'un élément.
- background-image : Définit l'image d'arrière-plan d'un élément.
- background-clip : Spécifie jusqu'où s'étendent les images ou la couleur d'arrière-plan.
- background-origin : Spécifie la zone de positionnement des images d'arrière-plan.
- background-position : Positionne l'origine d'une image d'arrière-plan.
- background-repeat : Spécifie comment carrelée l'image d'arrière-plan.
- background-size : Définit la taille des images d'arrière-plan.
Propriétés de bordure
- border : Définit largeur, style et couleur de la bordure pour les quatre côtés.
- border-bottom : Bordure inférieure (largeur, style, couleur).
- border-bottom-color : Couleur de la bordure inférieure.
- border-bottom-left-radius : Forme du coin inférieur gauche.
- border-bottom-right-radius : Forme du coin inférieur droit.
- border-bottom-style : Style de la bordure inférieure.
- border-bottom-width : Largeur de la bordure inférieure.
- border-color : Couleur des bordures sur les quatre côtés.
- border-image : Utilise une image à la place des styles de bordure.
- border-image-outset : Extension de la zone d'image de bordure.
- border-image-repeat : Carrelage de l'image de bordure.
- border-image-slice : Décalages intérieurs de l'image de bordure.
- border-image-source : Image source pour la bordure.
- border-image-width : Largeur de l'image de bordure.
- border-left : Bordure gauche (largeur, style, couleur).
- border-left-color : Couleur bordure gauche.
- border-left-style : Style bordure gauche.
- border-left-width : Largeur bordure gauche.
- border-radius : Forme des coins de bordure.
- border-right : Bordure droite (largeur, style, couleur).
- border-right-color : Couleur bordure droite.
- border-right-style : Style bordure droite.
- border-right-width : Largeur bordure droite.
- border-style : Style des bordures sur quatre côtés.
- border-top : Bordure supérieure (largeur, style, couleur).
- border-top-color : Couleur bordure supérieure.
- border-top-left-radius : Coin supérieur gauche.
- border-top-right-radius : Coin supérieur droit.
- border-top-style : Style bordure supérieure.
- border-top-width : Largeur bordure supérieure.
- border-width : Largeur des bordures sur quatre côtés.
Propriétés de couleur
- color : Définit la couleur du texte.
- opacity : Définit la transparence d'un élément.
Propriétés de dimension
- height : Définit la hauteur d'un élément.
- max-height : Hauteur maximale.
- max-width : Largeur maximale.
- min-height : Hauteur minimale.
- min-width : Largeur minimale.
- width : Largeur d'un élément.
Propriétés de contenu généré
- content : Insère du contenu généré.
- quotes : Spécifie les guillemets pour citations.
- counter-reset : Crée ou réinitialise des compteurs.
- counter-increment : Incrémente des valeurs de compteur.
Mise en page de boîte flexible (Flexbox)
- align-content : Alignement des éléments du conteneur flexible.
- align-items : Alignement par défaut des éléments.
- align-self : Alignement d'éléments sélectionnés.
- flex : Composants d'une longueur flexible.
- flex-basis : Taille initiale principale.
- flex-direction : Direction des éléments flexibles.
- flex-grow : Expansion relative.
- flex-shrink : Rétrécissement relatif.
- flex-wrap : Enveloppe les éléments flexibles.
- justify-content : Alignement le long de l'axe principal.
- order : Ordre d'affichage des éléments.
Propriétés de police
- font : Raccourci pour style, variant, weight, size/line-height, family.
- font-family : Liste de polices pour l'élément.
- font-size : Taille de la police.
- font-size-adjust : Préserve la lisibilité en cas de fallback.
- font-stretch : Sélectionne police normale/condensée/étendue.
- font-style : Style de police (italic/oblique).
- font-variant : Variante de police.
- font-weight : Épaisseur de la police.
Propriétés de liste
- list-style : Style d'affichage de liste.
- list-style-image : Image comme marqueur.
- list-style-position : Position du marqueur.
- list-style-type : Style de marqueur.
Propriétés de marge
- margin : Marge sur les quatre côtés.
- margin-bottom : Marge inférieure.
- margin-left : Marge gauche.
- margin-right : Marge droite.
- margin-top : Marge supérieure.
Propriétés de mise en page multi-colonnes
- column-count : Nombre de colonnes.
- column-fill : Remplissage des colonnes.
- column-gap : Écart entre colonnes.
- column-rule : Ligne entre colonnes.
- column-rule-color : Couleur de la règle.
- column-rule-style : Style de la règle.
- column-rule-width : Largeur de la règle.
- column-span : Extension sur colonnes.
- column-width : Largeur optimale des colonnes.
Propriétés de contour
- outline : Largeur, style et couleur du contour.
- outline-color : Couleur du contour.
- outline-offset : Espace entre contour et bordure.
- outline-style : Style du contour.
- outline-width : Largeur du contour.
Propriétés de rembourrage (padding)
- padding : Rembourrage sur quatre côtés.
- padding-bottom : Rembourrage inférieur.
- padding-left : Rembourrage gauche.
- padding-right : Rembourrage droit.
- padding-top : Rembourrage supérieur.
Propriétés d'impression
- page-break-after : Saut de page après élément.
- page-break-before : Saut de page avant élément.
- page-break-inside : Saut de page à l'intérieur.
Propriétés de tableau
- border-collapse : Bordures des cellules jointes ou séparées.
- border-spacing : Espacement entre bordures de cellules.
- caption-side : Position de la légende.
- empty-cells : Affiche/masque bordures de cellules vides.
- table-layout : Algorithme de mise en page.
Propriétés de texte
- direction : Sens d'écriture.
- tab-size : Longueur de tabulation.
- text-align : Alignement horizontal.
- text-align-last : Alignement dernière ligne.
- text-decoration : Décoration du texte.
- text-decoration-color : Couleur de décoration.
- text-decoration-line : Type de ligne de décoration.
- text-decoration-style : Style des lignes.
- text-indent : Indentation première ligne.
- text-justify : Méthode de justification.
- text-overflow : Gestion débordement texte.
- text-shadow : Ombres sur texte.
- text-transform : Transformation casse.
- line-height : Hauteur de ligne.
- vertical-align : Alignement vertical.
- letter-spacing : Espacement lettres.
- word-spacing : Espacement mots.
- white-space : Gestion espaces blancs.
- word-break : Coupure lignes dans mots.
- word-wrap : Coupure mots si dépassement.
Propriétés de transformation
- backface-visibility : Visibilité face arrière transformée.
- perspective : Perspective 3D.
- transform : Transformation 2D/3D.
- transform-origin : Origine de transformation.
- transform-style : Rendu éléments imbriqués en 3D.
Propriétés de transition
- transition : Transition entre états.
- transition-timing-function : Courbe de vitesse.
Propriétés de formatage visuel
- display : Affichage de l'élément.
- position : Positionnement.
- top/right/bottom/left : Emplacements des bords positionnés.
- float : Flottement de boîte.
- clear : Placement par rapport aux flottants.
- z-index : Ordre de superposition.
- overflow(-x/-y) : Gestion débordement contenu.
- resize : Redimensionnable par utilisateur.
- clip : Zone de découpage.
- visibility : Visibilité élément.
- cursor : Type de curseur.
- box-shadow : Ombres portées sur boîte.
- box-sizing : Modèle de boîte.
Propriétés d'animation
- animation : Comportement des animations.
- animation-delay : Délai de démarrage.
- animation-direction : Direction de lecture.
- animation-duration : Durée d'un cycle.
- animation-fill-mode : Styles avant/après exécution.
- animation-iteration-count : Nombre de cycles.
- animation-name : Nom des @keyframes.
- animation-play-state : Lecture ou pause.
- animation-timing-function : Progression temporelle.
Aller au-delà des bases de CSS
Une fois les bases acquises, perfectionnez vos compétences CSS avec des exemples avancés. Découvrez aussi JavaScript pour des sites interactifs époustouflants.
Crédit image : Nick Karvounis sur Unsplash
[
]
