Aide-mémoire CSS rapide et pratique de Toptal

Publié: 2022-03-11

Les feuilles de style en cascade, ou CSS en abrégé, sont un langage de feuille de style écrit dans un langage de balisage. CSS définit la présentation, l'apparence et les éléments de formatage des documents Web, tels que la mise en page, les couleurs et les polices.

La syntaxe CSS est complète, et il n'est pas facile de toujours connaître la syntaxe exacte, ni de connaître toutes les propriétés CSS disponibles et les valeurs correspondantes. Pour aider les développeurs et concepteurs CSS, Toptal a créé un guide de référence rapide et l'a proposé à la communauté en téléchargement gratuit. Le guide de référence CSS comprend la syntaxe CSS, les sélecteurs, propriétés, tailles et unités les plus importants, ainsi que d'autres informations CSS utiles dans un format court et informatif. Nous espérons que vous trouverez la feuille de triche CSS une ressource précieuse.

Vous pouvez également consulter les pages de ressources Toptal pour obtenir des informations supplémentaires sur les erreurs CSS courantes, un guide d'embauche CSS, des questions d'entretien CSS et des conseils et meilleures pratiques CSS.

Cliquez ici pour télécharger la feuille de triche CSS

Aide-mémoire CSS

Syntaxe		Modèle de boîte
/* Commentaires */ @type de support { sélecteur { valeur de la propriété; } } Remarque : le type de média est facultatif
Style en ligne <balise>
Style intégré <tête> <style type="text/css"> sélecteur { propriété : valeur ; } </style> </head>
Feuille de style externe <tête> <link rel="feuille de style" type="text/css" href="style.css" /> </tête>		Des boites
		marge	marge supérieure marge droite marge inférieure marge-gauche

Sélecteurs		rembourrage	rembourrage rembourrage à droite fond de rembourrage rembourrage gauche
*	Tous les éléments
étiqueter	Tous les éléments de balise	frontière	border-top bordure droite Bordure du bas bordure-gauche
étiqueter *	Tous les éléments dans la balise
étiquette étiquette2	tag2 éléments dans la balise	couleur de la bordure	border-top-color border-right-color border-bottom-color border-left-color
étiquette, étiquette2	Tous les éléments tag et tag2
balise > balise2	tag2 est un enfant de tag	style de bordure	border-top-style style bordure droite style bordure inférieure style bordure gauche
balise + balise2	tag2 précédé de tag
.classer	Éléments avec la classe 'class'	largeur de la bordure	border-top-width border-right-width border-bottom-width bordure-gauche-largeur
tag.classe	Toutes les balises avec la classe 'classe'
#identifiant	Élément avec l'identifiant 'id'	Taille et couleurs
tag#id	Balise avec l'identifiant 'id'	Tailles relatives	em \| rem \| ex \| ch vw \| vh \| vmin \| vmax \| %
Pseudo-sélecteurs
:actif	Ajoute du style à l'élément actif	Tailles absolues	cm \| millimètre \| dans pixels \| pt \| pc
:après	Ajoute du contenu après l'élément
:avant de	Contenu des annonces avant l'élément	Couleurs	Hex #ff00ff
:premier enfant	Ajoute du style au premier enfant		RVB RVB (255,0,255)
:première lettre	Ajoute du style au premier caractère	Positionnement
:Première ligne	Ajoute du style à la première ligne	position	absolu \| fixe \| relatif \| statique \| hériter
:se concentrer	Ajoute du style à l'élément ciblé
:flotter	Ajoute du style lorsque la souris est survolée	flotter	gauche \| droite \| aucun \| hériter
:lien	Ajoute du style au lien non visité
:a visité	Ajoute du style au lien visité	en haut à droite, en bas à gauche	Définit le décalage à partir du bord
Texte
famille de polices	Spécifie la famille de polices	dégager	gauche \| droite \| les deux \| aucun \| hériter
taille de police	Spécifie la taille de la police
le style de police	normale \| italique \| oblique \| hériter	affichage	Spécifie le placement des éléments dans le flux de documents

variante de police	normale \| petites capitalisations \| hériter	débordement	visibles \| caché \| faire défiler \| automatique \| hériter
Police de caractère -poids	normale \| gras \| plus audacieux \| briquet \| entier (100-900) \| hériter
		visibilité	visibles \| caché \| effondrer \| hériter
Couleur	Définit la couleur du texte
hauteur de la ligne	normale \| entier \| % \| hériter	indice z	automatique \| entier \| hériter
aligner le texte	gauche \| droite \| centre \| justifier \| hériter	Dimensions
		la taille	automatique \| entier \| % \| hériter
texte- décoration	aucun \| souligner \| surligner \| passe-ligne \| clignoter \| hériter	hauteur maximum	aucun \| entier \| % \| hériter
		largeur maximale	aucun \| entier \| % \| hériter
retrait du texte	entier \| % \| hériter	hauteur min	entier \| % \| hériter
texte- transformer	aucun \| capitaliser \| majuscule \| minuscule \| hériter	largeur min	entier \| % \| hériter
		largeur	automatique \| entier \| % \| hériter
verticale -aligner	entier \| % \| ligne de base \| sous \| superbe \| haut \| milieu du haut du texte \| bas \| texte en bas \| hériter	Autre
		Contexte	Format: fond (couleur) (image) (répéter) (position)
blanche -espacer	normale \| maintenantrap \| pré \| pré-ligne \| pré-emballage \| hériter
		le curseur	Définir le type de curseur
espacement des mots	normale \| longueur \| hériter	devis	Définir le type de guillemets