Les feuilles de style en cascade ou CSS définissent l'apparence du Web tel que nous le connaissons. Alors que HTML et JavaScript se concentrent sur le côté fonctionnel du Web, CSS s'occupe des aspects visuels de celui-ci.
Après avoir appris à créer des pages Web statiques avec HTML, il est temps de découvrir comment les styliser et les rendre présentables avec CSS. Et notre aide-mémoire sur les propriétés CSS3 ci-dessous peut vous aider ! Il couvre la syntaxe essentielle que vous devez connaître dans CSS3, qui est la dernière version de CSS.
Une connaissance pratique de CSS vous aide à personnaliser les couleurs, les polices, les bordures, les arrière-plans, les mises en page et bien plus encore sur les pages Web de manière simplifiée. De plus, il est également utile lors de la conception d'applications Web et mobiles.
TÉLÉCHARGEMENT GRATUIT : Cette aide-mémoire est disponible sous forme de PDF téléchargeable de notre partenaire de distribution, TradePub. Vous devrez remplir un court formulaire pour y accéder pour la première fois seulement. Téléchargez la feuille de triche des propriétés CSS3 essentielles.
L'aide-mémoire des propriétés CSS3 essentielles
Raccourci | Action | Propriétés d'arrière-plan backgroundDéfinit une variété de propriétés d'arrière-plan dans une déclaration.background-attachmentSpécifie si l'image d'arrière-plan est fixe ou défile avec la page Web.background-colorDéfinit la couleur d'arrière-plan d'un élément sur la page Web.background-imageDéfinit l'image d'arrière-plan d'un élément.background-clipSpécifie comment jusqu'où les images d'arrière-plan ou la couleur s'étendent pour un élément.background-originSpécifie la zone de positionnement des images d'arrière-plan.background-positionDéfinit l'origine d'une image d'arrière-plan.background-repeatSpécifie comment l'image d'arrière-plan est carrelée.background-sizeSpécifie la taille de l'arrière-plan images.
Propriétés de bordure borderDéfinit la largeur, le style et la couleur de la bordure pour les quatre côtés d'un élément.border-bottomDéfinit la largeur, le style et la couleur de la bordure inférieure d'un élément.border-bottom-colorDéfinit la couleur de la bordure inférieure d'un élément. border-bottom-left-radiusDéfinit la forme du coin inférieur gauche de la bordure d'un élément.border-bottom-right-radiusDéfinit la forme du coin inférieur droit de la bordure d'un élément.border-bottom-styleDéfinit le style du bas border of an element.border-bottom-widthDéfinit la largeur de la bordure inférieure d'un élément.border-colorDéfinit la couleur de la bordure sur les quatre côtés d'un élément.border-imageSpécifie comment une image doit être utilisée à la place de les styles de bordure.border-image-outsetSpécifie la quantité par laquelle la zone d'image de bordure s'étend au-delà de la zone de bordure.border-image-repeatSpécifie comment l'image de bordure est carrelée.border-image-sliceSpécifie les décalages vers l'intérieur de l'image-border.border -image-sourceSpécifie l'emplacement de l'image à utiliser sa border.border-image-widthSpécifie la largeur de l'image-border.border-leftDéfinit la largeur, le style et la couleur de la bordure gauche d'un élément.border-left-colorDéfinit la couleur de la bordure gauche d'un élément.border -left-styleDéfinit le style de la bordure gauche d'un élément.border-left-widthDéfinit la largeur de la bordure gauche d'un élément.border-radiusDéfinit la forme des coins de bordure d'un élément.border-rightDéfinit la largeur, le style, et la couleur de la bordure droite d'un élément.border-right-colorDéfinit la couleur de la bordure droite d'un élément.border-right-styleDéfinit le style de la bordure droite d'un élément.border-right-widthDéfinit la largeur de la bordure d'un élément.border-styleDéfinit le style de la bordure sur les quatre côtés d'un élément.border-topDéfinit la largeur, le style et la couleur de la bordure supérieure d'un élément.border-top-colorDéfinit la couleur du haut border of an element.border-top-left-radiusDéfinit la forme du coin supérieur gauche de la bordure d'un element.border-top-ri ght-radiusDéfinit la forme du coin supérieur droit d'un élément.border-top-styleDéfinit le style de la bordure supérieure d'un élément.border-top-widthDéfinit la largeur de la bordure supérieure d'un élément.border-widthDéfinit la largeur de la bordure sur les quatre côtés d'un élément.
Propriétés de couleur colorDéfinit et définit la couleur du texte.opacityDéfinit la transparence d'un élément.
Propriétés de la dimension hauteurDéfinit la hauteur d'un élément.max-heightDéfinit la hauteur maximale d'un élément.max-widthDéfinit la largeur maximale d'un élément.min-heightDéfinit la hauteur minimale d'un élément.min-widthDéfinit la largeur minimale d'un élément.widthSpécifie la largeur d'un élément.
Propriétés de contenu générées contentInsère le contenu généré.quotesSpécifie les guillemets pour les citations intégrées.counter-resetCrée ou réinitialise un ou plusieurs compteurs.counter-incrementIncrémente une ou plusieurs valeurs de compteur.
Mise en page de boîte flexible align-contentSpécifie l'alignement des éléments du conteneur flexible.align-itemsSpécifie l'alignement par défaut des éléments.align-selfSpécifie l'alignement des éléments sélectionnés.flexSpécifie les composants d'une longueur flexible.flex-basisSpécifie la taille principale initiale de l'élément flexible.flex- direction Spécifie la direction des éléments flexibles. l'élément se rétrécira par rapport aux autres éléments à l'intérieur du conteneur flexible.flex-wrapSpécifie si les éléments flexibles doivent être enveloppés ou non.justify-contentSpécifie comment les éléments flexibles sont alignés le long de l'axe principal du conteneur flexible après que les longueurs flexibles et les marges automatiques ont été resolve.orderSpécifie l'ordre dans lequel les éléments flexibles sont affichés et disposés dans un conteneur flexible.
Propriétés de la police fontDéfinit une variété de propriétés de police dans une déclaration, telles que font-style, font-variant, font-weight, font-size/line-height et font-family.font-familyDéfinit une liste de polices pour element.font-sizeDefines la taille de la police du texte.font-size-adjustPréserve la lisibilité du texte en cas de repli de la police.font-stretchSélectionne une police normale, condensée ou étendue à partir d'une police.font-styleDéfinit le style de police du texte.font-variantSpécifie la font variant.font-weightSpécifie l'épaisseur de la police du texte.
Propriétés de la liste list-styleDéfinit le style d'affichage d'une liste et des éléments de liste.list-style-imageSpécifie l'image à utiliser comme marqueur d'élément de liste.list-style-positionSpécifie la position du marqueur d'élément de liste.list-style-typeSpécifie le style de marqueur pour un élément de liste.
Propriétés de la marge marginDéfinit la marge sur les quatre côtés de l'élément.margin-bottomDéfinit la marge inférieure de l'élément.margin-leftDéfinit la marge gauche de l'élément.margin-rightDéfinit la marge droite de l'élément.margin-topDéfinit la marge supérieure de l'élément .
Propriétés de mise en page multi-colonnes column-countSpécifie le nombre de colonnes dans un élément multi-colonnes.column-fillSpécifie comment les colonnes seront remplies.column-gapSpécifie l'écart entre les colonnes dans un élément multi-colonnes.column-ruleSpécifie une ligne droite, ou "règle", à tracer entre chaque colonne dans un élément multi-colonnes.column-rule-colorSpécifie la couleur des règles tracées entre les colonnes dans une disposition multi-colonnes.column-rule-styleSpécifie le style de la règle tracée entre les colonnes dans un multi-colonne -column layout.column-rule-widthSpécifie la largeur de la règle tracée entre les colonnes dans une disposition multi-colonnes.column-spanSpécifie le nombre de colonnes sur lesquelles un élément s'étend dans une disposition multi-colonnes.column-widthSpécifie la largeur optimale de la colonnes dans un élément à plusieurs colonnes. contourDéfinit la largeur, le style et la couleur des quatre côtés du contour d'un élément.outline-colorDéfinit la couleur du contour.outline-offsetDéfinit l'espace entre un contour et le bord de la bordure d'un élément.outline-styleDéfinit un style pour un contour .outline-widthDéfinit la largeur du contour.
Propriétés de rembourrage paddingDéfinit le rembourrage sur les quatre côtés de l'élément.padding-bottomDéfinit le rembourrage sur le côté inférieur d'un élément.padding-leftDéfinit le rembourrage sur le côté gauche d'un élément.padding-rightDéfinit le rembourrage sur le côté droit d'un élément. padding-topDéfinit le remplissage en haut d'un élément.Propriétés d'impressionpage-break-afterInsère un saut de page après un élément.page-break-beforeInsère un saut de page avant un élément.page-break-insideInsère un saut de page à l'intérieur d'un élément.
Propriétés du tableau border-collapseSpécifie si les bordures des cellules du tableau sont connectées ou séparées.border-spacingDéfinit l'espacement entre les bordures des cellules du tableau adjacentes.caption-sideSpécifie la position de la légende du tableau.empty-cellsAffiche ou masque les bordures et les arrière-plans des cellules vides du tableau.table-layoutSpécifie un algorithme de mise en page du tableau.border-collapseSpécifie si les bordures des cellules du tableau sont connectées ou séparées.
Propriétés du texte directionDéfinit le sens du texte/sens d'écriture.tab-sizeSpécifie la longueur du caractère de tabulation.text-alignDéfinit l'alignement horizontal du contenu en ligne.text-align-lastSpécifie comment la dernière ligne d'un bloc ou une ligne juste avant un saut de ligne forcé est aligné lorsque l'alignement du texte est justifié.text-decorationSpécifie la décoration ajoutée au texte.text-decoration-colorSpécifie la couleur de la text-decoration-line.text-decoration-lineSpécifie le type de décorations de ligne ajoutées à l'élément.text- decoration-styleSpécifie le style des lignes spécifiées par la propriété text-decoration-linetext-indentIndente la première ligne de text.text-justifySpécifie la méthode de justification à utiliser lorsque la propriété text-align est définie sur justifier.text-overflowSpécifie comment le texte le contenu sera affiché lorsqu'il débordera du bloc containers.text-shadowApplique une ou plusieurs ombres au contenu textuel d'un élément.text-transformTransforme la casse du texte.line-heightDéfinit la hauteur entre een lignes de texte.vertical-alignDéfinit le positionnement vertical d'un élément par rapport à la ligne de base du texte actuel.letter-spacingDéfinit l'espacement supplémentaire entre les lettres.word-spacingDéfinit l'espacement entre les mots.white-spaceSpécifie comment l'espace blanc à l'intérieur de l'élément est géré. word-breakSpécifie comment couper les lignes dans les mots.word-wrapSpécifie s'il faut couper les mots lorsque le contenu dépasse les limites de son conteneur.
Transform Properties backface-visibilitySpécifie si le côté "arrière" d'un élément transformé est visible ou non face à l'utilisateur. pour la propriété de perspective.transformApplique une transformation 2D ou 3D à un élément.transform-originDéfinit l'origine de la transformation d'un élément.transform-styleSpécifie comment les éléments imbriqués sont rendus dans l'espace 3D.
Propriétés de transition transition Définit la transition entre deux états d'un élément. l'effet doit être appliqué.transition-timing-functionSpécifie la courbe de vitesse de l'effet de transition.
Propriétés de formatage visuel displaySpécifie comment un élément est affiché à l'écran.positionSpécifie comment un élément est positionné.topSpécifie l'emplacement du bord supérieur de l'élément positionné.rightSpécifie l'emplacement du bord droit de l'élément positionné.bottomSpécifie l'emplacement du bord inférieur de l'élément positionné .leftSpécifie l'emplacement du bord gauche de l'élément positionné.floatSpécifie si une boîte doit flotter ou non.clearSpécifie le placement d'un élément par rapport aux éléments flottants.z-indexSpécifie un ordre de superposition ou d'empilement des éléments positionnés. contenu qui dépasse la zone de contenu de l'élément.overflow-xSpécifie comment gérer le contenu lorsqu'il dépasse la largeur de la zone de contenu de l'élément.overflow-ySpécifie comment gérer le contenu lorsqu'il dépasse la hauteur de la zone de contenu de l'élément.resizeSpécifie si un est redimensionnable par l'utilisateur.clipDéfinit la zone de découpage.visibilitéSpécifie si oui ou non un n élément est visible.cursorSpécifie le type de curseur.box-shadowApplique une ou plusieurs ombres portées à la boîte de l'élément.box-sizingModifie le modèle de boîte CSS par défaut.
Propriétés d'animation animationSpécifie le comportement de toutes les animations.animation-delaySpécifie quand l'animation commencera avec un retard.animation-directionSpécifie si l'animation doit être lue en avant, en arrière ou en cycles alternés.animation-durationSpécifie le nombre de secondes ou de millisecondes qu'une animation doit prendre pour terminer un cycle.animation-fill-modeSpécifie comment une animation CSS doit appliquer des styles à sa cible avant et après son exécution.animation-iteration-countSpécifie le nombre de fois qu'un cycle d'animation doit être joué avant de s'arrêter.animation-nameSpécifie le nom de @keyframes définit les animations qui doivent être appliquées à l'élément sélectionné.animation-play-stateSpécifie si l'animation est en cours d'exécution ou en pause.animation-timing-functionSpécifie comment une animation CSS doit progresser sur la durée de chaque cycle.
Aller au-delà des bases du CSS
Une fois que vous avez maîtrisé les éléments de base du CSS, nous vous recommandons de mettre à niveau vos compétences CSS et d'expérimenter ces exemples de code CSS. Essayez également d'apprendre JavaScript pour amener vos pages Web à un nouveau niveau d'étourdissement.
Crédit image :Nick Karvounis sur Unsplash
[
]
