Aide-mémoire Essential CSS3 Properties
Publicité
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 Propriétés CSS3 essentielles" dès aujourd'hui!Une fois que vous avez 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 format PDF téléchargeable auprès 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 Essential Cheat Sheet sur les propriétés CSS3.
Aide-mémoire Essential CSS3 Properties
Raccourci | action |
---|---|
Propriétés de fond | |
Contexte | Définit une variété de propriétés d’arrière-plan dans une déclaration. |
pièce jointe | Spécifie si l'image d'arrière-plan est fixe ou défile avec la page Web. |
Couleur de l'arrière plan | Définit la couleur d'arrière-plan d'un élément sur la page Web. |
image de fond | Définit l'image d'arrière-plan d'un élément. |
clip de fond | Spécifie dans quelle mesure les images ou la couleur d'arrière-plan s'étendent pour un élément. |
fond d'origine | Spécifie la zone de positionnement des images d'arrière-plan. |
position de fond | Définit l'origine d'une image d'arrière-plan. |
Répétition du fond | Spécifie comment l'image d'arrière-plan est carrelée. |
taille de fond | Spécifie la taille des images d'arrière-plan. |
Propriétés de la frontière | |
frontière | Définit la largeur, le style et la couleur de la bordure pour les quatre côtés d'un élément. |
Bordure du bas | Définit la largeur, le style et la couleur de la bordure inférieure d'un élément. |
couleur de bordure | Définit la couleur de la bordure inférieure d'un élément. |
frontière-bas-gauche-rayon | Définit la forme du coin inférieur gauche d'un élément. |
border-bottom-right-radius | Définit la forme du coin inférieur droit d'un élément. |
style bas de bordure | Définit le style de la bordure inférieure d'un élément. |
border-bottom-width | Définit la largeur de la bordure inférieure d'un élément. |
couleur de la bordure | Définit la couleur de la bordure sur les quatre côtés d'un élément. |
image de bordure | Spécifie comment une image doit être utilisée à la place des styles de bordure. |
border-image-outset | Spécifie le montant par lequel la zone d'image de la bordure s'étend au-delà de la zone de la bordure. |
border-image-repeat | Spécifie comment l'image de bordure est mosaïque. |
bordure-image-tranche | Spécifie les décalages entrants de la bordure de l'image. |
border-image-source | Spécifie l'emplacement de l'image à utiliser comme bordure. |
border-image-width | Spécifie la largeur de la bordure de l'image. |
frontière gauche | Définit la largeur, le style et la couleur du bord gauche d'un élément. |
couleur frontière-gauche | Définit la couleur du bord gauche d'un élément. |
style gauche | Définit le style du bord gauche d'un élément. |
border-left-width | Définit la largeur du bord gauche d'un élément. |
rayon de la frontière | Définit la forme des coins de la bordure d'un élément. |
frontière droite | Définit la largeur, le style et la couleur du bord droit d'un élément. |
couleur de bordure droite | Définit la couleur du bord droit d'un élément. |
style à la frontière | Définit le style du bord droit d'un élément. |
border-right-width | Définit la largeur du bord droit d'un élément. |
style de bordure | Définit le style de la bordure sur les quatre côtés d'un élément. |
bordure supérieure | Définit la largeur, le style et la couleur de la bordure supérieure d'un élément. |
border-top-color | Définit la couleur du bord supérieur d'un élément. |
rayon en haut à gauche | Définit la forme du coin supérieur gauche d'un élément. |
bord-haut-droite-rayon | Définit la forme du coin supérieur droit d'un élément. |
style de bordure | Définit le style de la bordure supérieure d'un élément. |
border-top-width | Définit la largeur du bord supérieur d'un élément. |
largeur de la bordure | Définit la largeur de la bordure sur les quatre côtés d'un élément. |
Propriétés de la couleur | |
Couleur | Définit et définit la couleur du texte. |
opacité | Définit la transparence d'un élément. |
Propriétés de la dimension | |
la taille | Définit la hauteur d'un élément. |
hauteur maximum | Définit la hauteur maximale d'un élément. |
largeur maximale | Définit la largeur maximale d'un élément. |
hauteur min | Définit la hauteur minimale d'un élément. |
largeur min | Définit la largeur minimale d'un élément. |
largeur | Spécifiez la largeur d'un élément. |
Propriétés du contenu généré | |
contenu | Insère le contenu généré. |
citations | Spécifie les guillemets pour les citations incorporées. |
remise à zéro | Crée ou réinitialise un ou plusieurs compteurs. |
contre-incrément | Incrémente une ou plusieurs valeurs de compteur. |
Disposition de la boîte flexible | |
aligner le contenu | Spécifie l'alignement des éléments du conteneur flexible. |
align-items | Spécifie l'alignement par défaut pour les éléments. |
aligner soi | Spécifie l'alignement pour les éléments sélectionnés. |
fléchir | Spécifie les composants d'une longueur flexible. |
base flexible | Spécifie la taille principale initiale de l'élément flex. |
flex direction | Spécifie la direction des éléments flexibles. |
flex-flow | Une propriété abrégée pour les propriétés flex-direction et flex-wrap. |
Flex-Grow | Spécifie la croissance de l'élément Flex par rapport aux autres éléments à l'intérieur du conteneur Flex. |
flex-shrink | Spécifie comment l'élément flex se contractera par rapport aux autres éléments à l'intérieur du conteneur Flex. |
flex-wrap | Spécifie si les éléments flexibles doivent être bouclés ou non. |
justifier le contenu | Spé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. |
ordre | Spé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ère | Dé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 polices | Définit une liste de polices pour element. |
taille de police | Définit la taille de la police pour le texte. |
police-taille-ajuster | Préserve la lisibilité du texte lors du repliement de la police. |
étirement de la police | Sélectionne une face normale, condensée ou développée à partir d'une police. |
le style de police | Définit le style de police pour le texte. |
variante de police | Spécifie la variante de police. |
poids de la police | Spécifie le poids de la police du texte. |
Propriétés de la liste | |
style de liste | Définit le style d'affichage pour une liste et des éléments de liste. |
liste-style-image | Spécifie l'image à utiliser comme marqueur d'élément de liste. |
list-style-position | Spécifie la position du marqueur d'élément de liste. |
type de liste | Spécifie le style de marqueur pour un élément de liste. |
Propriétés de la marge | |
marge | Définit la marge sur les quatre côtés de l'élément. |
marge inférieure | Définit la marge inférieure de l'élément. |
marge gauche | Définit la marge gauche de l'élément. |
marge droite | Définit la marge droite de l'élément. |
haut de la marge | Définit la marge supérieure de l'élément. |
Propriétés de disposition multi-colonnes | |
nombre de colonnes | Spécifie le nombre de colonnes dans un élément multi-colonne. |
remplissage de colonne | Spécifie comment les colonnes seront remplies. |
écart de colonne | Spécifie l'espace entre les colonnes d'un élément multi-colonne. |
règle de colonne | Spécifie une ligne droite, ou "règle", à tracer entre chaque colonne dans un élément multi-colonne. |
colonne-règle-couleur | Spécifie la couleur des règles dessinées entre les colonnes dans une présentation multi-colonnes. |
style de règle de colonne | Spécifie le style de la règle dessinée entre les colonnes dans une présentation multi-colonnes. |
colonne-règle-largeur | Spécifie la largeur de la règle dessinée entre les colonnes dans une mise en page multicolonne. |
colonne-span | Spécifie le nombre de colonnes d'un élément sur une mise en page à plusieurs colonnes. |
largeur de colonne | Spécifie la largeur optimale des colonnes dans un élément multi-colonne. |
Colonnes | Une propriété abrégée permettant de définir les propriétés de largeur de colonne et de nombre de colonnes. |
nombre de colonnes | Spécifie le nombre de colonnes dans un élément multi-colonne. |
Propriétés de contour | |
contour | Définit la largeur, le style et la couleur des quatre côtés du contour d'un élément. |
contour-couleur | Définit la couleur du contour. |
contour décalé | Définissez l'espace entre un contour et le bord d'un élément. |
style de contour | Définit un style pour un contour. |
contour-largeur | Définit la largeur du contour. |
Propriétés du rembourrage | |
rembourrage | Définit le remplissage sur les quatre côtés de l'élément. |
rembourrage en bas | Définit le remplissage à la base d'un élément. |
rembourrage gauche | Définit le remplissage à gauche d'un élément. |
rembourrage à droite | Définit le remplissage à droite d'un élément. |
rembourrage | Définit le remplissage sur le dessus d'un élément. |
Propriétés d'impression | |
page-break-after | Insère un saut de page après un élément. |
page-break-before | Insère un saut de page avant un élément. |
page-break-inside | Insère un saut de page dans un élément. |
Propriétés du tableau | |
effondrement de la frontière | Spécifie si les bordures des cellules du tableau sont connectées ou séparées. |
espacement des bordures | Définit l'espacement entre les bordures des cellules de tableau adjacentes. |
côté légende | Spécifie la position de la légende de la table. |
cellules vides | Affiche ou masque les bordures et les arrière-plans des cellules de tableau vides. |
disposition de la table | Spécifie un algorithme de présentation de table. |
effondrement de la frontière | Spécifie si les bordures des cellules du tableau sont connectées ou séparées. |
Propriétés du texte | |
direction | Définit la direction du texte / direction de l'écriture. |
taille de l'onglet | Spécifie la longueur du caractère de tabulation. |
aligner le texte | Définit l'alignement horizontal du contenu en ligne. |
text-align-last | Spé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écoration | Spécifie la décoration ajoutée au texte. |
texte-décoration-couleur | Spécifie la couleur de la ligne de décoration de texte. |
texte-decoration-line | Spécifie le type de décorations de lignes ajoutées à l'élément. |
style de décoration de texte | Spécifie le style des lignes spécifiées par la propriété text-decoration-line |
retrait du texte | Indente la première ligne de texte. |
justifier le texte | Spécifie la méthode de justification à utiliser lorsque la propriété text-align est définie sur justification. |
débordement de texte | Spécifie le mode d'affichage du contenu du texte lorsqu'il déborde des conteneurs de bloc. |
ombre de texte | Applique une ou plusieurs ombres au contenu textuel d'un élément. |
transformation de texte | Transforme la casse du texte. |
hauteur de la ligne | Définit la hauteur entre les lignes de texte. |
alignement vertical | Définit le positionnement vertical d'un élément par rapport à la ligne de base du texte actuel. |
l'espacement des lettres | Définit l'espacement supplémentaire entre les lettres. |
espacement des mots | Définit l'espacement entre les mots. |
espace blanc | Spécifie comment l'espace blanc à l'intérieur de l'élément est géré. |
mot-pause | Spécifie comment rompre les lignes dans les mots. |
Word Wrap | Spécifie s'il faut rompre les mots lorsque le contenu dépasse les limites de son conteneur. |
Propriétés de transformation | |
visibilité arrière | Spécifie si le côté "arrière" d'un élément transformé est visible face à l'utilisateur. |
perspective | Définit la perspective à partir de laquelle tous les éléments enfants de l'objet sont visualisés. |
origine-perspective | Définit l'origine (le point de fuite de l'espace 3D) de la propriété de perspective. |
transformer | Applique une transformation 2D ou 3D à un élément. |
transformer-origine | Définit l'origine de la transformation pour un élément. |
transformer-style | Spécifie comment les éléments imbriqués sont rendus dans l'espace 3D. |
Propriétés de la transition | |
transition | Définit la transition entre deux états d'un élément. |
délai de transition | Spécifie quand l’effet de transition commencera. |
durée de transition | Spécifie le nombre de secondes ou de millisecondes qu'un effet de transition devrait prendre. |
propriété de transition | Spécifie les noms des propriétés CSS auxquelles un effet de transition doit être appliqué. |
fonction de synchronisation de transition | Spécifie la courbe de vitesse de l'effet de transition. |
Propriétés de formatage visuel | |
afficher | Spécifie comment un élément est affiché à l'écran. |
position | Spécifie comment un élément est positionné. |
Haut | Spécifie l'emplacement du bord supérieur de l'élément positionné. |
droite | Spécifie l'emplacement du bord droit de l'élément positionné. |
bas | Spécifie l'emplacement du bord inférieur de l'élément positionné. |
la gauche | Spécifie l'emplacement du bord gauche de l'élément positionné. |
flotte | Spécifie si une boîte doit flotter ou non. |
clair | Spécifie l'emplacement d'un élément par rapport aux éléments flottants. |
z-index | Spécifie un ordre de superposition ou d'empilement pour les éléments positionnés. |
débordement | Spécifie le traitement du contenu qui déborde de la zone de l'élément. |
débordement-x | Spécifie comment gérer le contenu lorsqu'il déborde de la largeur de la zone de contenu de l'élément. |
débordement-y | Spécifie comment gérer le contenu lorsqu'il dépasse la hauteur de la zone de contenu de l'élément. |
redimensionner | Spécifie si un élément est redimensionnable ou non par l'utilisateur. |
agrafe | Définit la région de découpage. |
visibilité | Spécifie si un élément est visible ou non. |
le curseur | Spécifie le type de curseur. |
boîte ombre | Applique une ou plusieurs ombres portées à la zone de l'élément. |
taille de la boîte | Modifie le modèle de boîte CSS par défaut. |
Propriétés de l'animation | |
animation | Spécifie le comportement de toutes les animations. |
délai d'animation | Spécifie quand l'animation commencera avec un délai. |
animation-direction | Spécifie si l'animation doit être lue en avant, en arrière ou en alternance. |
animation-durée | Spécifie le nombre de secondes ou de millisecondes requis par une animation pour terminer un cycle. |
mode de remplissage d'animation | Spécifie comment une animation CSS doit appliquer des styles à sa cible avant et après son exécution. |
animation-iteration-count | Spécifie le nombre de fois qu'un cycle d'animation doit être joué avant de s'arrêter. |
nom-animation | Spécifie le nom des animations @keyframes définies à appliquer à l'élément sélectionné. |
animation-play-state | Spécifie si l'animation est en cours d'exécution ou en pause. |
animation-minuterie-fonction | Spé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 de CSS, nous vous recommandons de mettre à niveau vos compétences en CSS. Lancez vos projets CSS avec cet eBook GRATUIT! Lancez vos projets CSS avec cet eBook GRATUIT! Cet ebook gratuit fournit un grand nombre d'exemples basés sur CSS qui vous aideront à démarrer vos propres projets Web. En savoir plus et apprendre JavaScript Qu'est-ce que JavaScript et comment ça marche? Qu'est-ce que JavaScript et comment ça marche? Qu'est ce que le Javascript? C'est un langage de programmation utilisé pour améliorer les pages Web. Il comprend la mise à jour dynamique de pages Web, d'interfaces utilisateur, etc. Nous allons plonger dans ce que Javascript est tout au sujet. Lisez Plus pour amener vos pages Web à un nouveau niveau d'étourdissement.
Crédit d'image: Nick Karvounis sur Unsplash
Explorez plus au sujet de: Aide-mémoire, CSS, Web Design.