Cheatsheet : CSS
CheatSheet CSS : Guide complet, résumé, aide-mémoire, tutoriel et conseils clés pour apprendre et maîtriser CSS efficacement et rapidement.
MAJ en 10 chapitres
Syntaxe
selecteur {
proprieteA: valeur;
proprieteB: valeur;
}selecteur= qui ?propriete= quoi ?valeur= comment ?
Lier du CSS
<link href="path/to/app.css" rel="stylesheet">Commentaire
/* Je suis un commentaire */Sélecteur
Permet de cibler un élément HTML.
/* PRINCIPAUX */
mabalise { ... } /* Par balise */
.ma-classe { ... } /* Par class */
#mon-identifiant { ... } /* Par id */
/* SECONDAIRES */
[attribut], [attribut="valeur"] { ... } /* Par attribut */
* { ... } /* Toutes les balises */* : utile pour réinitialiser le CSS du navigateur
Sélection multiple
La virgule permet de cumuler des sélecteurs (se traduit par et).
h2, h3 { ... }Combinateur
Combiner des sélecteurs pour des sélections plus précises.
/* DESCENDANTS : "p" enfants d'une "div" */
div p { ... }
/* FILS : "p" fils directs d'une "div" */
div > p { ... }
/* VOISINS DIRECTS : "p" JUSTE après une "div" */
div + p { ... }
/* VOISINS GENERAUX : "p" après une "div" */
div ~ p { ... }Le combinateur espace (descendants) est de loin le plus utilisé
Peudo-classe
Déclenchement lorsque l’élément est dans un état spécifique.
/* Au survol de l'élément */
element:hover { ... }
/* Lorsqu'un élément est actif */
element:active { ... }
/* Si un lien a déjà été visité */
element:visited { ... }
/* Au focus de l'élément */
element:focus { ... }activecorrespond souvent à la durée d’enfoncement d’un clicfocuss’applique principalement sur les champs de formulaire
Peudo-élément
Cible certaines parties d’un élément.
/* 1ère ligne */
element::first-line { ... }
/* 1ère lettre de la 1ère ligne */
element::first-letter { ... }
/* Contenu sélectionnée par l'utilisateur */
element::selection { ... }
/* Crée un élément 1er/dernier enfant d'un autre */
element::before { ... }
element::after { ... }before et after : utiles pour créer des éléments décoratifs
Variables
Rassembler les valeurs de son design system.
/* Déclaration */
:root {
--color-primary: #5b47f0;
}
/* Utilisation */
a {
color: var(--color-primary);
}Couleur
selecteur {
/* Couleur du texte */
color: #5b47f0;
/* Couleur de fond */
background-color: rgb(218, 30, 97);
}Couleur définie par :
- Mot-clé :
red,blue… - Code RGB :
rgb(100, 0, 20),rgba(0, 0, 0, 0.5)… - Code Héxadécimal :
#5b47f0,#f95050… - Code HSL :
hsl(39, 100%, 50%)…
Taille
selecteur {
font-size: 1.5rem;
}Défini en unité absolue (px, mm, cm, in…) ou relative (%, em, rem, vw, vh…)
Graisse
selecteur {
font-weight: 900;
}100(très fin) …900(très gras)- bold =
700et regular =400
Famille de typo
selecteur {
font-family: "Lucida Console", Courier, monospace;
}- Si plusieurs typos définies, cherche à charger la 1ère, se rabat sur la suivante si échec
- Toujours finir avec une famille de typo (
serif,sans-serif,monospace…) - Ecrire entre guillemets une typo constituée de plusieurs mots
Hauteur de ligne
selecteur {
line-height: 40px;
}Mêmes unités que pour la font-size
Ombre
selecteur {
/* Ombre de texte */
text-shadow: 5px 2px 3px rgba(0, 0, 0, 0.2);
/* Ombre de boîte */
box-shadow: 5px 2px 10px 20px rgba(0, 0, 0, 0.2);
}Valeurs :
- Décalage horizontal (x)
- Décalage vertical (y)
- Rayon de flou
- Rayon de propagation (
box-shadowuniquement) - Couleur de l’ombre
Espacement textuels
selecteur {
/* Entre les lettres */
letter-spacing: 2px;
/* Entre les mots */
word-spacing: 4px;
}Alignement du texte
selecteur {
text-align: center;
}justify courant en print mais déconseillé sur le web
Affichage
Influence l’affichage et le placement des éléments.
selecteur {
display: block;
}Valeurs fréquentes : block, inline, inline-block, grid et flex
Bordure
selecteur {
/* Style */
border-style: solid;
/* Couleur */
border-color: black;
/* Epaisseur */
border-width: 3px;
border: solid black 3px; /* Raccourci */
}Styles les plus courants : solid, dashed, dotted
Arrondi de bordure
selecteur {
border-radius: 20px;
border-top-left-radius: 50%;
}border-radius>=hauteur élément / 2: arrondi parfait50%: transforme un élément carré en cercle
Marge interne
Marge interne à une boîte.
selecteur {
padding: 20px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
/* top|right|bottom|left */
padding-top: 20px;
}1valeur : tous les côtés2valeurs : haut/bas, droite/gauche3valeurs : haut, droite/gauche, bas4valeurs : haut, droite, bas, gauche
Marge externe
Marge externe à une boîte.
selecteur {
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
/* top|right|bottom|left */
margin-top: 20px;
}1valeur : tous les côtés2valeurs : haut/bas, droite/gauche3valeurs : haut, droite/gauche, bas4valeurs : haut, droite, bas, gauche
Largeur
selecteur {
min-width: 250px;
width: 100%;
max-width: 500px;
}Hauteur
selecteur {
min-height: 25%;
height: 50%;
max-height: 75%;
}100vh : prend toute la hauteur de l’écran (viewport)
Média-queries
Conditionner le style selon les caractéristiques du périphérique / l’environnement d’affichage.
/* > 768px */
@media screen and (min-width: 768px) { ... }
/* < 1280px */
@media screen and (max-width: 1280px) { ... }
/* Entre 768px et 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) { ... }min-widthà privilégier pour le “mobile-first”- Média-queries principalement utilisées sur la largeur de l’écran.
Grid
/* PARENT */
.grid {
display: grid;
/* 4 colonnes : 400px 1/3 1/3 1/3 */;
grid-template-columns: 300px repeat(3, 1fr);
gap: 10px;
align-items: center;
}
/* ENFANTS */
.grid > .col-1 { grid-column: span 1; }
.grid > .col-2 { grid-column: span 2; }
.grid > .col-3 { grid-column: span 3; }justify-*: alignement sur l’axe en lignealign-*: alignement sur l’axe en blocgrid-column: span x: s’étend sur x colonnes
Flex
/* PARENT */
.flex {
display: flex;
gap: 10px;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
}
/* ENFANTS */
/* Taille initiale */
.flex > * {
flex-basis: 100px;
}
/* Facteurs d'étirement variables */
.flex > .xl { flex-grow: 1; }
.flex > .xxl { flex-grow: 2; }
.flex > .xxxl { flex-grow: 3; }
/* Aucun rétrecissement */
.flex > .no-reduction { flex-shrink: 0; }flex-direction: rowpar défautjustify-*: alignement sur l’axe principalalign-*: alignement sur l’axe transversalflex-wrap: indique si retour à la ligne
Position
Positionnement par rapport au flux de la page, à la fenêtre ou d’autres éléments.
.container {
position: relative;
z-index: 10;
}
.container .item {
position: absolute;
top: 0;
right: 100px;
}- Element positionné avec
relative,absolute,fixedousticky top,right,bottometleft: déplacement des éléments positionnész-index: contexte d’empilement relatif (nombre faible = arrière plan et nombre élevé = premier plan)