đź§ľ MEMO đź§ľ
Sélecteurs
Mémo
.title { // Sélectionner une classe
border: 1px solid red; // Mettre une bordure rouge
}
#mainTitle { // Sélectionner un ID
border: 1px solid blue; // Mettre une bordure bleue
}
body { // Sélectionner la balise body
border: 1px solid pink; // Mettre une bordure rose
}
body .title {
// Sélectionner la classe "title" dans la balise "body"
border: 1px solid green; // Mettre une bordure verte
}
Texte
Mémo
font-size: 1rem; // Définir la taille du texte
font-weight: lighter | normal | bold; // Définir l'épaisseur du texte
text-transform: lowercase | capitalize | uppercase; // Définir la casse du texte
text-decoration: underline | line-through; // Définir la casse du texte
font-style: italic | normal | oblique; // Définir la casse du texte
Display
Mémo
display: inline | inline-block | block; // Définir le mode d'affichage
Longueur & hauteur (width & height)
Mémo
width: 50% | 10rem | auto | fit-content; // Définir la longueur d'un élément
height: 50% | 10rem | auto | fit-content; // Définir la hauteur d'un élément
Box model (marges internes et externes)
Mémo
margin: 1rem; // Défini une marge extérieure de 10rem sur tous les côtés
margin: 1rem 5%;
// Défini une marge extérieure de 1rem verticalement (en haut et en bas) et 5% horizontalement (à droite et à gauche)
margin: 1rem 5% 3px auto;
// Défini la marge extérieure de chaque côté en partant du haut et en tournant le sens des aiguilles d'une montre : haut, droite, bas,
gauche
padding: 1rem; // Défini une marge intérieure de 10rem sur tous les côtés
padding: 1rem 5%;
// Défini une marge intérieure de 1rem verticalement (en haut et en bas) et 5% horizontalement (à droite et à gauche)
padding: 1rem 5% 3px auto;
// Défini la marge intérieure de chaque côté en partant du haut et en tournant le sens des aiguilles d'une montre : haut, droite, bas,
gauche
Backgrounds
Mémo
background-color: red | #F56E28 | rgb(245, 110, 40) | rgba(245, 110, 40, 1);
// Défini un fond de couleur
background-image: url('illustration.png');
// Défini une image en fond
background-size: cover | contain | auto | 100% 50% | top left;
// Défini la taille du fond
background-position: top | right | left | bottom | top left...;
// Défini la position du fond
background-repeat: repeat | no-repeat;
// Défini si un fond doit être répété
Flex
Mémo
display: flex;
// Défini le mode d'affichage en flex
flex-direction: row | column;
// Défini l'orientation de l'alignement
flex-wrap: wrap | no-wrap;
// Défini si le contenu doit retourner à la ligne si il n'y a plus de place
justify-content: flex-start | center | flex-end | space-between | space-around;
// Défini l'alignement sur l'axe horizontal ou vertical selon la flex-direction
align-items: flex-start | center | flex-end | stretch;
// Défini l'alignement sur l'axe horizontal ou vertical selon la flex-direction
Grid
Mémo
display: grid;
// Défini le mode d'affichage en grid
grid-template-columns:
repeat(1, 2fr) |
50% 50% |
3fr 9fr ;
// Défini les colonnes de la grille
grid-templates-rows:
repeat(1, 2fr) |
50% 50% |
3fr 9fr ;
// Défini les lignes de la grille
column-gap: 1rem;
// Défini l'espace entre les colonnnes
row-gap: 1rem;
// Défini l'espacement entre les lignes
gap: 1rem;
// Défini l'espacement entre les colonnes et les lignes
grid-column: 1 / span 2;
// Défini que l'élément prend 2 colonnes à partir de la première
grid-row: 1 / span 2;
// Défini que l'élément prend 2 lignes à partir de la première
Absolute
Mémo
// Un élément en position absolute se positionne par rapport à l'élément parent en relative le plus proche
display: absolute;
// Défini le mode d'affichage en absolute
display: relative;
// Défini le mode d'affichage en relative
top: 0 | 25% | 5rem
// Défini la position par rapport au haut de l'élément parent en relative
right: 0 | 25% | 5rem
// Défini la position par rapport au côté droit de l'élément parent en relative
left: 0 | 25% | 5rem
// Défini la position par rapport au côté gauche de l'élément parent en relative
bottom: 0 | 25% | 5rem
// Défini la position par rapport au bas de l'élément parent en relative
z-index: 0 | 9999999;
// Défini la priorité d'affichage, de 0 à l'infini
Fixed
Mémo
// Un élément en position fixed se positionne par rapport aux bordures de l'écran.
display: fixed;
// Défini le mode d'affichage en fixed
top: 0 | 25% | 5rem
// Défini la position par rapport au haut de l'élément parent en relative
right: 0 | 25% | 5rem
// Défini la position par rapport au côté droit de l'élément parent en relative
left: 0 | 25% | 5rem
// Défini la position par rapport au côté gauche de l'élément parent en relative
bottom: 0 | 25% | 5rem
// Défini la position par rapport au bas de l'élément parent en relative
z-index: 0 | 9999999;
// Défini la priorité d'affichage, de 0 à l'infini
Hover
Mémo
// Le hover est le fait de que la souris soit sur un élément.
.box {
background-color: #F3F7FD;
}
.box:hover {
// Sélectionner la classe "box" uniquement lors du hover
background-color: red; // Ce style s'appliquera uniquement lors du hover
// Toutes les propriétés peuvent être utilisées lors d'un effet hover
}
Transform
Mémo
// Le transform permet d'effectuer une transformation 2D et 3D sur un élément
transform:
rotate(180deg);
// Défini le degré de rotatation
transform:
translate(1rem, -1rem);
// Défini le décalage sur l'axe vertical et horizontal
transform: scale(1.25);
// Défini la taille de l'élément sur 1.25 fois sa taille (+25%)
transform:
rotate(180deg) translate(1rem, -1rem)
scale(1.25);
// Pour appliquer plusieurs transformations avec la propriété transform, il faut les mettre à la suite
Transitions
Mémo
// Une transition permet d'effectuer un changement de style progressivement afin de le voir
transition: propriété durée courbe délai; // Format de la propriété transition
transition:
all 1s linear;
// Transition sur tout, qui dure 1 seconde, avec une courbe linéaire
transition:
background-color .1s ease-in-out 1s;
// Transition sur le changement de couleur de fond uniquement, qui dure 0.1 seconde, avec une courbe lente au début et à la fin, et un délai de
1 seconde
transition:
background-color .1s ease-in-out,
width .1s ease-in-out;
// 2 transitions sur 2 propriétés uniquement, sur le même élément