Mémo CSS
Propriété Description Exemple
Sélecteurs
Sélecteur de p : sélectionne tous les
element
type paragraphes
Sélecteur de .btn : sélectionne les
.nom-de-classe
classe éléments avec la classe "btn"
#header : sélectionne
Sélecteur d'id #identifiant
l'élément avec l'id "header"
Sélecteur * : sélectionne tous les
*
universel éléments
div p : sélectionne tous les
Sélecteur
element1 element2 paragraphes à l'intérieur
descendant
d'un div
ul > li : sélectionne les
éléments li qui sont des
Sélecteur enfant element1 > element2
enfants directs d'un élément
ul
[type] : sélectionne tous les
Sélecteur
[attribut] éléments avec un attribut
d'attribut
"type"
Mémo CSS 1
Sélecteur [type=text]: sélectionne tous
d'attribut avec [attribut=valeur] les éléments avec un attribut
valeur "type" ayant la valeur "text"
Propriétés
générales
background-color:
Couleur de fond background-color: #ffffff;
valeur;
Couleur du texte color: valeur; color: #000000;
Police de
font-family: valeur; font-family: Arial, sans-serif;
caractères
Taille de la
font-size: valeur; font-size: 16px;
police
Gras font-weight: valeur; font-weight: bold;
Italique font-style: valeur; font-style: italic;
Souligné text-decoration: valeur; text-decoration: underline;
Mise en page
Largeur width: valeur; width: 300px;
Hauteur height: valeur; height: 200px;
margin: top right bottom
Marge margin: 10px 20px 10px 20px;
left;
padding: top right bottom
Rembourrage padding: 5px 10px 5px 10px;
left;
border: largeur style
Bordure border: 1px solid #000000;
couleur;
Position position: valeur; position: relative;
Flottant float: valeur; float: left;
box-shadow: h-offset v-
Effet de boîte box-shadow: 5px 5px 5px 5px
offset blur spread
d'ombre #888888;
couleur;
Flexbox
Conteneur Flex display: flex; display: flex;
Alignement
justify-content: valeur; justify-content: center;
horizontal
Mémo CSS 2
Alignement
align-items: valeur; align-items: center;
vertical
Direction flex-direction: valeur; flex-direction: row;
Grid
Conteneur Grid display: grid; display: grid;
Nombre de grid-template-columns: grid-template-columns: 100px
colonnes valeurs; 200px;
grid-template-rows:
Nombre de lignes grid-template-rows: 50px 100px;
valeurs;
Espace entre les
grid-gap: valeur; grid-gap: 10px;
cellules
Animations
@keyframes nom { règles; @keyframes fadeIn { from {
Keyframes
} opacity: 0; } to { opacity: 1; } }
animation: nom durée
animation: fadeIn 2s ease-in-out
Animation timing-function
3;
itération;
N'oublie pas d'adapter ces exemples en fonction de tes besoins
spécifiques et de la structure de ton site web.
Mémo CSS 3