Accueil

Aide-mémoire Essential CSS3 Properties

Added 2019-10-19


Les feuilles de style en cascade ou CSS définissent l'apparence du Web telle que nous la connaissons. Alors que HTML et JavaScript se concentrent sur le côté fonctionnel du Web, CSS en traite les aspects visuels.

Besoin d'aide pour naviguer dans le monde qu'est CSS3?Téléchargez notre "aide-mémoire sur les propriétés essentielles de CSS3" aujourd'hui!

Après avoir appris à créer des pages Web statiques avec HTML, il est temps de découvrir comment les styler 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 à 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 présentations et bien plus encore sur les pages Web. 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 en tant quePDF 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échargerAide-mémoire Essential CSS3 Properties.

Aide-mémoire Essential CSS3 Properties

Raccourciaction
Propriétés de fond
ContexteDéfinit une variété de propriétés d’arrière-plan dans une déclaration.
pièce jointeSpécifie si l'image d'arrière-plan est fixe ou défile avec la page Web.
Couleur de l'arrière planDéfinit la couleur d'arrière-plan d'un élément sur la page Web.
image de fondDéfinit l’image d’arrière-plan d’un élément.
clip de fondSpécifie dans quelle mesure les images ou la couleur d'arrière-plan s'étendent pour un élément.
fond d'origineSpécifie la zone de positionnement des images d'arrière-plan.
position de fondDéfinit l'origine d'une image d'arrière-plan.
Répétition du fondSpécifie comment l'image d'arrière-plan est carrelée.
taille de fondSpécifie la taille des images d'arrière-plan.
Propriétés de la frontière
frontièreDéfinit la largeur, le style et la couleur de la bordure pour les quatre côtés d'un élément.
Bordure du basDéfinit la largeur, le style et la couleur de la bordure inférieure d'un élément.
couleur de bordureDéfinit la couleur de la bordure inférieure d'un élément.
frontière-bas-gauche-rayonDéfinit la forme du coin inférieur gauche d'un élément.
border-bottom-right-radiusDéfinit la forme du coin inférieur droit d'un élément.
style bas de bordureDéfinit le style de la bordure inférieure d'un élément.
border-bottom-widthDéfinit la largeur de la bordure inférieure d'un élément.
couleur de la bordureDéfinit la couleur de la bordure sur les quatre côtés d'un élément.
image de bordureSpécifie comment une image doit être utilisée à la place des styles de bordure.
border-image-outsetSpécifie le montant par lequel la zone d'image de la bordure s'étend au-delà de la zone de la bordure.
border-image-repeatSpécifie comment l'image de bordure est mise en mosaïque.
bordure-image-trancheSpécifie les décalages entrants de la bordure de l'image.
border-image-sourceSpécifie l'emplacement de l'image à utiliser comme bordure.
border-image-widthSpécifie la largeur de la bordure de l'image.
frontière gaucheDéfinit la largeur, le style et la couleur du bord gauche d'un élément.
couleur frontière-gaucheDéfinit la couleur du bord gauche d'un élément.
style gaucheDéfinit le style du bord gauche d'un élément.
border-left-widthDéfinit la largeur du bord gauche d'un élément.
rayon de la frontièreDéfinit la forme des coins de la bordure d'un élément.
frontière droiteDéfinit la largeur, le style et la couleur du bord droit d'un élément.
couleur de bordure droiteDéfinit la couleur du bord droit d'un élément.
style à la frontièreDéfinit le style du bord droit d'un élément.
border-right-widthDéfinit la largeur du bord droit d'un élément.
style de bordureDéfinit le style de la bordure sur les quatre côtés d'un élément.
bordure supérieureDéfinit la largeur, le style et la couleur de la bordure supérieure d'un élément.
border-top-colorDéfinit la couleur du bord supérieur d'un élément.
rayon en haut à gaucheDéfinit la forme du coin supérieur gauche d'un élément.
bord-haut-droite-rayonDéfinit la forme du coin supérieur droit d'un élément.
style de bordureDéfinit le style de la bordure supérieure d'un élément.
border-top-widthDéfinit la largeur du bord supérieur d'un élément.
largeur de la bordureDéfinit la largeur de la bordure sur les quatre côtés d'un élément.
Propriétés de la couleur
CouleurDéfinit et définit la couleur du texte.
opacitéDéfinit la transparence d'un élément.
Propriétés de la dimension
la tailleDéfinit la hauteur d'un élément.
hauteur maximumDéfinit la hauteur maximale d'un élément.
largeur maximaleDéfinit la largeur maximale d'un élément.
hauteur minDéfinit la hauteur minimale d'un élément.
largeur minDéfinit la largeur minimale d'un élément.
largeurSpécifiez la largeur d'un élément.
Propriétés du contenu généré
contenuInsère le contenu généré.
citationsSpécifie les guillemets pour les citations incorporées.
remise à zéroCrée ou réinitialise un ou plusieurs compteurs.
contre-incrémentIncrémente une ou plusieurs valeurs de compteur.
Disposition de la boîte flexible
aligner le contenuSpécifie l'alignement des éléments du conteneur flexible.
align-itemsSpécifie l'alignement par défaut pour les éléments.
aligner soiSpécifie l'alignement pour les éléments sélectionnés.
fléchirSpécifie les composants d'une longueur flexible.
base flexibleSpécifie la taille principale initiale de l'élément flex.
flex directionSpécifie la direction des éléments flexibles.
flex-flowUne propriété abrégée pour les propriétés flex-direction et flex-wrap.
Flex-GrowSpécifie la croissance de l'élément Flex par rapport aux autres éléments à l'intérieur du conteneur Flex.
flex-shrinkSpécifie comment l'élément flex se contractera par rapport aux autres éléments à l'intérieur du conteneur Flex.
flex-wrapSpécifie si les éléments flexibles doivent être bouclés ou non.
justifier le contenuSpécifie comment les éléments flexibles sont alignés le long de l'axe principal du conteneur flex après la résolution des longueurs flexibles et des marges automatiques.
ordreSpécifie l'ordre dans lequel les éléments flex sont affichés et disposés dans un conteneur flex.
Propriétés de la police
Police de caractèreDéfinit une variété de propriétés de police dans une déclaration, telles que le style de police, la variante de police, l'épaisseur de police, la taille de police / la hauteur de ligne et la famille de polices.
famille de policesDéfinit une liste de polices pour element.
taille de policeDéfinit la taille de la police pour le texte.
police-taille-ajusterPréserve la lisibilité du texte lors du repliement de la police.
étirement de la policeSélectionne une face normale, condensée ou développée à partir d'une police.
le style de policeDéfinit le style de police pour le texte.
variante de policeSpécifie la variante de police.
poids de la policeSpécifie le poids de la police du texte.
Propriétés de la liste
style de listeDéfinit le style d'affichage pour une liste et des éléments de liste.
liste-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.
type de listeSpécifie le style de marqueur pour un élément de liste.
Propriétés de la marge
margeDéfinit la marge sur les quatre côtés de l'élément.
marge inférieureDéfinit la marge inférieure de l'élément.
marge gaucheDéfinit la marge gauche de l'élément.
marge droiteDéfinit la marge droite de l'élément.
haut de la margeDéfinit la marge supérieure de l'élément.
Propriétés de disposition multi-colonnes
nombre de colonnesSpécifie le nombre de colonnes dans un élément multi-colonne.
remplissage de colonneSpécifie comment les colonnes seront remplies.
écart de colonneSpécifie l'espace entre les colonnes d'un élément multi-colonne.
règle de colonneSpécifie une ligne droite, ou "règle", à tracer entre chaque colonne dans un élément multi-colonne.
colonne-règle-couleurSpécifie la couleur des règles dessinées entre les colonnes dans une présentation multi-colonnes.
style de règle de colonneSpécifie le style de la règle dessinée entre les colonnes dans une présentation multi-colonnes.
colonne-règle-largeurSpécifie la largeur de la règle dessinée entre les colonnes dans une mise en page multicolonne.
colonne-spanSpécifie le nombre de colonnes d'un élément sur une mise en page à plusieurs colonnes.
largeur de colonneSpécifie la largeur optimale des colonnes dans un élément multi-colonne.
ColonnesUne propriété abrégée permettant de définir les propriétés de largeur de colonne et de nombre de colonnes.
nombre de colonnesSpécifie le nombre de colonnes dans un élément multi-colonne.
Propriétés de contour
contourDéfinit la largeur, le style et la couleur des quatre côtés du contour d'un élément.
contour-couleurDéfinit la couleur du contour.
contour décaléDéfinissez l'espace entre un contour et le bord d'un élément.
style de contourDéfinit un style pour un contour.
contour-largeurDéfinit la largeur du contour.
Propriétés du rembourrage
rembourrageDéfinit le remplissage sur les quatre côtés de l'élément.
rembourrage en basDéfinit le remplissage à la base d'un élément.
rembourrage gaucheDéfinit le remplissage à gauche d'un élément.
rembourrage à droiteDéfinit le remplissage à droite d'un élément.
rembourrageDéfinit le remplissage sur le dessus d'un élément.
Propriétés d'impression
page-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 dans un élément.
Propriétés du tableau
effondrement de la frontièreSpécifie si les bordures des cellules du tableau sont connectées ou séparées.
espacement des borduresDéfinit l'espacement entre les bordures des cellules de tableau adjacentes.
côté légendeSpécifie la position de la légende de la table.
cellules videsAffiche ou masque les bordures et les arrière-plans des cellules de tableau vides.
disposition de la tableSpécifie un algorithme de présentation de table.
effondrement de la frontièreSpécifie si les bordures des cellules du tableau sont connectées ou séparées.
Propriétés du texte
directionDéfinit la direction du texte / direction de l'écriture.
taille de l'ongletSpécifie la longueur du caractère de tabulation.
aligner le texteDé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ée lorsque text-align est justifié.
texte-décorationSpécifie la décoration ajoutée au texte.
texte-décoration-couleurSpécifie la couleur de la ligne de décoration de texte.
texte-decoration-lineSpécifie le type de décorations de lignes ajoutées à l'élément.
style de décoration de texteSpécifie le style des lignes spécifiées par la propriété text-decoration-line
retrait du texteIndente la première ligne de texte.
justifier le texteSpécifie la méthode de justification à utiliser lorsque la propriété text-align est définie sur justification.
débordement de texteSpécifie le mode d'affichage du contenu du texte lorsqu'il déborde des conteneurs de bloc.
ombre de texteApplique une ou plusieurs ombres au contenu textuel d'un élément.
transformation de texteTransforme la casse du texte.
hauteur de la ligneDéfinit la hauteur entre les lignes de texte.
alignement verticalDéfinit le positionnement vertical d'un élément par rapport à la ligne de base du texte actuel.
l'espacement des lettresDéfinit l'espacement supplémentaire entre les lettres.
espacement des motsDéfinit l'espacement entre les mots.
espace blancSpécifie comment l'espace blanc à l'intérieur de l'élément est géré.
mot-pauseSpécifie comment rompre les lignes dans les mots.
Word WrapSpécifie s'il faut rompre les mots lorsque le contenu dépasse les limites de son conteneur.
Propriétés de transformation
visibilité arrièreSpécifie si le côté "arrière" d'un élément transformé est visible face à l'utilisateur.
perspectiveDéfinit la perspective à partir de laquelle tous les éléments enfants de l'objet sont visualisés.
origine-perspectiveDéfinit l'origine (le point de fuite de l'espace 3D) de la propriété de perspective.
transformerApplique une transformation 2D ou 3D à un élément.
transformer-origineDéfinit l'origine de la transformation pour un élément.
transformer-styleSpécifie comment les éléments imbriqués sont rendus dans l'espace 3D.
Propriétés de la transition
transitionDéfinit la transition entre deux états d'un élément.
délai de transitionSpécifie quand l’effet de transition commencera.
durée de transitionSpécifie le nombre de secondes ou de millisecondes qu'un effet de transition devrait prendre.
propriété de transitionSpécifie les noms des propriétés CSS auxquelles un effet de transition doit être appliqué.
fonction de synchronisation de transitionSpécifie la courbe de vitesse de l'effet de transition.
Propriétés de formatage visuel
afficherSpécifie comment un élément est affiché à l'écran.
positionSpécifie comment un élément est positionné.
HautSpécifie l'emplacement du bord supérieur de l'élément positionné.
droiteSpécifie l'emplacement du bord droit de l'élément positionné.
basSpécifie l'emplacement du bord inférieur de l'élément positionné.
la gaucheSpécifie l'emplacement du bord gauche de l'élément positionné.
flotteSpécifie si une boîte doit flotter ou non.
clairSpécifie l'emplacement d'un élément par rapport aux éléments flottants.
z-indexSpécifie un ordre de superposition ou d'empilement pour les éléments positionnés.
débordementSpécifie le traitement du contenu qui déborde de la zone de l'élément.
débordement-xSpécifie comment gérer le contenu lorsqu'il déborde de la largeur de la zone de contenu de l'élément.
débordement-ySpécifie comment gérer le contenu lorsqu'il dépasse la hauteur de la zone de contenu de l'élément.
redimensionnerSpécifie si un élément est redimensionnable ou non par l'utilisateur.
agrafeDéfinit la région de découpage.
visibilitéSpécifie si un élément est visible ou non.
le curseurSpécifie le type de curseur.
boîte ombreApplique une ou plusieurs ombres portées à la zone de l'élément.
taille de la boîteModifie le modèle de boîte CSS par défaut.
Propriétés de l'animation
animationSpécifie le comportement de toutes les animations.
délai d'animationSpécifie quand l'animation commencera avec un délai.
animation-directionSpécifie si l'animation doit être lue en avant, en arrière ou en alternance.
animation-duréeSpécifie le nombre de secondes ou de millisecondes requis par une animation pour terminer un cycle.
mode de remplissage d'animationSpé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.
nom-animationSpécifie le nom des animations @keyframes définies à appliquer à l'élément sélectionné.
animation-play-stateSpécifie si l'animation est en cours d'exécution ou en pause.
animation-minuterie-fonctionSpécifie comment une animation CSS doit progresser sur la durée de chaque cycle.

Aller au-delà des bases du CSS

Crédit d'image:Nick Karvounis surUnsplash






Nuage de tags

Choix de L'éditeur


Thomas Becket

Je suis un écrivain indépendant qui couvre la programmation et les logiciels.
Je suis étudiant en informatique et je m'intéresse à la programmation, aux logiciels et à la technologie
Gadgets technologiques et critiques 2019