đź§ľ 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