/* SÉLECTEURS DE BASE */
* { } /* Sélecteur universel */
h1 { } /* Sélecteur d'élément */
.ma-classe { } /* Sélecteur de classe */
#mon-id { } /* Sélecteur d'ID */
/* SÉLECTEURS COMBINÉS */
div p { } /* Descendant (p dans div) */
div > p { } /* Enfant direct (p enfant de div) */
h1 + p { } /* Frère adjacent (p après h1) */
h1 ~ p { } /* Frères généraux (tous les p après h1) */
/* SÉLECTEURS D'ATTRIBUTS */
[data-role] { } /* Élément avec attribut data-role */
[data-role="button"] { } /* Attribut avec valeur exacte */
[class^="btn-"] { } /* Attribut commençant par "btn-" */
[class$="-primary"] { } /* Attribut finissant par "-primary" */
[class*="button"] { } /* Attribut contenant "button" */
[title~="important"] { } /* Attribut contenant le mot "important" */
/* PSEUDO-CLASSES */
:hover { } /* Survol */
:focus { } /* Focus */
:active { } /* Actif (cliqué) */
:visited { } /* Lien visité */
:link { } /* Lien non visité */
:disabled { } /* Élément désactivé */
:checked { } /* Case cochée */
:first-child { } /* Premier enfant */
:last-child { } /* Dernier enfant */
:nth-child(2n) { } /* Enfants pairs */
:nth-child(odd) { } /* Enfants impairs */
:nth-child(3n+1) { } /* Chaque 3e enfant à partir du 1er */
:nth-of-type(2) { } /* 2e élément de ce type */
:first-of-type { } /* Premier de ce type */
:last-of-type { } /* Dernier de ce type */
:only-child { } /* Enfant unique */
:empty { } /* Élément vide */
:not(.classe) { } /* Négation */
:root { } /* Élément racine (html) */
/* PSEUDO-ÉLÉMENTS */
::before { } /* Contenu avant l'élément */
::after { } /* Contenu après l'élément */
::first-line { } /* Première ligne */
::first-letter { } /* Première lettre */
::selection { } /* Texte sélectionné */
::placeholder { } /* Texte d'espace réservé */
/* COULEURS */
color: red; /* Nom de couleur */
color: #ff0000; /* Hexadécimal */
color: #f00; /* Hexadécimal court */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGB avec transparence */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSL avec transparence */
color: currentColor; /* Couleur héritée */
color: transparent; /* Transparent */
/* ARRIÈRE-PLANS */
background-color: blue;
background-image: url('image.jpg');
background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
background-position: center top; /* left | center | right | top | bottom | % | px */
background-size: cover; /* auto | cover | contain | % | px */
background-attachment: fixed; /* scroll | fixed | local */
background-clip: border-box; /* border-box | padding-box | content-box */
background-origin: padding-box; /* border-box | padding-box | content-box */
/* ARRIÈRE-PLAN RACCOURCI */
background: url('img.jpg') no-repeat center/cover fixed;
/* DÉGRADÉS */
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to right, red, yellow, green);
background: radial-gradient(circle, red, blue);
background: conic-gradient(from 0deg, red, yellow, green, red);
/* POLICE */
font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: Courier, monospace;
font-size: 16px; /* px | em | rem | % | pt */
font-weight: bold; /* normal | bold | bolder | lighter | 100-900 */
font-style: italic; /* normal | italic | oblique */
font-variant: small-caps; /* normal | small-caps */
line-height: 1.5; /* normal | number | px | % */
/* POLICE RACCOURCI */
font: bold italic 16px/1.5 Arial, sans-serif;
/* TEXTE */
text-align: center; /* left | right | center | justify */
text-decoration: underline; /* none | underline | overline | line-through */
text-transform: uppercase; /* none | uppercase | lowercase | capitalize */
text-indent: 20px; /* Indentation première ligne */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
letter-spacing: 2px; /* Espacement entre lettres */
word-spacing: 5px; /* Espacement entre mots */
white-space: nowrap; /* normal | nowrap | pre | pre-line | pre-wrap */
text-overflow: ellipsis; /* clip | ellipsis */
overflow: hidden; /* visible | hidden | scroll | auto */
/* LISTES */
list-style-type: disc; /* disc | circle | square | decimal | none */
list-style-position: inside; /* inside | outside */
list-style-image: url('bullet.png');
list-style: square inside; /* Raccourci */
/* DIMENSIONS */
width: 300px; /* auto | px | % | em | rem | vw | vh */
height: 200px; /* auto | px | % | em | rem | vw | vh */
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 300px;
/* MODÈLE DE BOÎTE */
box-sizing: border-box; /* content-box | border-box */
/* MARGES EXTERNES */
margin: 10px; /* Toutes les marges */
margin: 10px 20px; /* Haut/bas | Gauche/droite */
margin: 10px 15px 20px 25px; /* Haut | Droite | Bas | Gauche */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
margin: 0 auto; /* Centrer horizontalement */
/* MARGES INTERNES */
padding: 10px;
padding: 10px 20px;
padding: 10px 15px 20px 25px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
/* BORDURES */
border: 2px solid red;
border-width: 2px; /* thin | medium | thick | px */
border-style: solid; /* none | solid | dashed | dotted | double */
border-color: red;
border-top: 1px solid black;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double yellow;
border-radius: 10px; /* Coins arrondis */
border-radius: 10px 20px 30px 40px; /* Coin par coin */
/* OMBRES */
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* Ombre interne */
box-shadow: 0 0 0 5px red, 0 0 0 10px blue; /* Ombres multiples */
/* POSITIONNEMENT */
position: static; /* static | relative | absolute | fixed | sticky */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
z-index: 100; /* Ordre d'empilement */
/* AFFICHAGE */
display: block; /* block | inline | inline-block | none */
display: flex; /* Flexbox */
display: grid; /* Grid */
display: table; /* table | table-cell | table-row */
visibility: hidden; /* visible | hidden */
opacity: 0.5; /* 0-1 | % */
/* FLOTTEMENT */
float: left; /* left | right | none */
clear: both; /* left | right | both | none */
/* DÉBORDEMENT */
overflow: hidden; /* visible | hidden | scroll | auto */
overflow-x: scroll; /* Débordement horizontal */
overflow-y: auto; /* Débordement vertical */
/* CONTENEUR FLEX */
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
flex-flow: row wrap; /* Raccourci pour direction + wrap */
justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: center; /* stretch | flex-start | flex-end | center | baseline */
align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */
gap: 20px; /* Espacement entre éléments */
row-gap: 20px; /* Espacement entre lignes */
column-gap: 10px; /* Espacement entre colonnes */
/* ÉLÉMENTS FLEX */
flex: 1; /* Raccourci pour grow shrink basis */
flex-grow: 1; /* Facteur de croissance */
flex-shrink: 0; /* Facteur de rétrécissement */
flex-basis: 200px; /* Taille de base */
align-self: flex-end; /* auto | flex-start | flex-end | center | baseline | stretch */
order: 2; /* Ordre d'affichage */
/* CONTENEUR GRID */
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Colonnes */
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
grid-template-columns: 200px auto 100px; /* Colonnes fixes et auto */
grid-template-rows: 100px 200px; /* Lignes */
grid-template-rows: repeat(2, minmax(100px, auto));
grid-template-areas: /* Zones nommées */
"header header header"
"sidebar content content"
"footer footer footer";
grid-gap: 20px; /* Espacement (obsolète) */
gap: 20px; /* Espacement moderne */
row-gap: 20px;
column-gap: 10px;
justify-items: center; /* start | end | center | stretch */
align-items: center; /* start | end | center | stretch */
justify-content: center; /* start | end | center | stretch | space-around | space-between | space-evenly */
align-content: center;
/* ÉLÉMENTS GRID */
grid-column: 1 / 3; /* De la colonne 1 à 3 */
grid-column: span 2; /* Étendre sur 2 colonnes */
grid-row: 2 / 4; /* De la ligne 2 à 4 */
grid-area: header; /* Zone nommée */
grid-area: 1 / 1 / 2 / 4; /* row-start / col-start / row-end / col-end */
justify-self: start; /* start | end | center | stretch */
align-self: end; /* start | end | center | stretch */
/* FONCTIONS GRID */
grid-template-columns: minmax(200px, 1fr) auto;
grid-template-columns: fit-content(300px);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fill, 200px);
/* TRANSFORMATIONS 2D */
transform: translate(50px, 100px); /* Déplacement */
transform: translateX(50px); /* Déplacement horizontal */
transform: translateY(100px); /* Déplacement vertical */
transform: scale(1.5); /* Mise à l'échelle */
transform: scaleX(2); /* Échelle horizontale */
transform: scaleY(0.5); /* Échelle verticale */
transform: rotate(45deg); /* Rotation */
transform: skew(30deg, 20deg); /* Inclinaison */
transform: skewX(30deg);
transform: skewY(20deg);
/* TRANSFORMATIONS 3D */
transform: perspective(1000px) rotateY(45deg);
transform: translate3d(50px, 100px, 200px);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
/* COMBINAISONS */
transform: translate(50px, 100px) rotate(45deg) scale(1.2);
transform-origin: center top; /* Point d'origine */
/* TRANSITIONS */
transition: all 0.3s ease; /* Propriété durée fonction délai */
transition: color 0.3s ease-in-out;
transition: width 2s, height 1s; /* Transitions multiples */
transition-property: opacity; /* all | none | propriété */
transition-duration: 0.5s; /* Durée */
transition-timing-function: ease-out; /* ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() */
transition-delay: 0.2s; /* Délai */
/* ANIMATIONS */
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
animation: slideIn 1s ease-out;
animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite; /* nombre | infinite */
animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
animation-fill-mode: forwards; /* none | forwards | backwards | both */
animation-play-state: paused; /* running | paused */
/* UNITÉS RELATIVES */
font-size: 1.2em; /* Relatif au parent */
font-size: 1.2rem; /* Relatif à la racine */
width: 50vw; /* 50% de la largeur de viewport */
height: 100vh; /* 100% de la hauteur de viewport */
font-size: 4vmin; /* 4% de la plus petite dimension */
font-size: 4vmax; /* 4% de la plus grande dimension */
/* MEDIA QUERIES */
@media screen and (max-width: 768px) {
/* Styles pour écrans ≤ 768px */
.container { width: 100%; }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* Styles pour tablettes */
.container { width: 90%; }
}
@media print {
/* Styles pour l'impression */
.no-print { display: none; }
}
@media screen and (orientation: landscape) {
/* Mode paysage */
}
@media screen and (orientation: portrait) {
/* Mode portrait */
}
@media screen and (min-resolution: 2dppx) {
/* Écrans haute résolution */
}
/* CONTENEUR QUERIES (Moderne) */
@container (min-width: 300px) {
.card { grid-template-columns: 1fr 1fr; }
}
/* VARIABLES CSS */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--border-radius: 4px;
--font-size-base: 16px;
}
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
font-size: var(--font-size-base, 14px); /* Valeur par défaut */
}
/* FILTRES */
filter: blur(5px);
filter: brightness(0.5); /* 0-1+ */
filter: contrast(2); /* 0-1+ */
filter: grayscale(100%); /* 0-100% */
filter: hue-rotate(90deg);
filter: invert(100%); /* 0-100% */
filter: opacity(50%); /* 0-100% */
filter: saturate(200%); /* 0-100%+ */
filter: sepia(100%); /* 0-100% */
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
filter: blur(2px) brightness(1.5) contrast(1.2); /* Multiples */
/* DÉCOUPAGE (CLIPPING) */
clip-path: circle(50%);
clip-path: ellipse(50% 60%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: inset(10px 20px 30px 40px);
/* MASQUES */
mask: url(mask.svg);
mask-image: linear-gradient(black, transparent);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
/* PROPRIÉTÉS LOGIQUES */
margin-inline-start: 20px; /* Début de ligne (LTR: gauche, RTL: droite) */
margin-inline-end: 20px; /* Fin de ligne */
margin-block-start: 10px; /* Début de bloc (haut) */
margin-block-end: 10px; /* Fin de bloc (bas) */
border-inline-start: 1px solid red;
padding-inline: 20px; /* Padding horizontal logique */
padding-block: 10px; /* Padding vertical logique */
/* SCROLL */
scroll-behavior: smooth; /* auto | smooth */
scroll-snap-type: x mandatory; /* none | x | y | block | inline + mandatory | proximity */
scroll-snap-align: start; /* none | start | end | center */
overflow-x: scroll;
scrollbar-width: thin; /* auto | thin | none */
/* COLONNES */
column-count: 3;
column-width: 200px;
column-gap: 20px;
column-rule: 1px solid #ccc;
break-inside: avoid; /* Éviter les coupures */
/* IMPRESSION */
page-break-before: always; /* auto | always | avoid | left | right */
page-break-after: avoid;
page-break-inside: avoid;
/* RÈGLES @IMPORT */
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto');
/* RÈGLES @FONT-FACE */
@font-face {
font-family: 'MaPolice';
src: url('mapolice.woff2') format('woff2'),
url('mapolice.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* auto | block | swap | fallback | optional */
}
/* FONCTIONS CSS */
calc(100% - 20px) /* Calculs */
min(50%, 300px) /* Valeur minimale */
max(200px, 20%) /* Valeur maximale */
clamp(16px, 4vw, 24px) /* Valeur contrainte (min, préférée, max) */
/* FONCTIONS DE COULEUR */
rgb(255, 0, 0)
rgba(255, 0, 0, 0.5)
hsl(0, 100%, 50%)
hsla(0, 100%, 50%, 0.5)
color-mix(in srgb, red 30%, blue) /* Mélange de couleurs (moderne) */
/* FONCTIONS D'IMAGE */
url('image.jpg')
linear-gradient(45deg, red, blue)
radial-gradient(circle at center, red, blue)
conic-gradient(from 0deg, red, yellow, green, red)
/* FONCTIONS DE FORME */
circle(50% at center)
ellipse(50% 25% at center)
polygon(0% 0%, 100% 0%, 50% 100%)
inset(10px 20px 30px 40px round 5px)
/* COMPTEURS */
counter-reset: section;
counter-increment: section;
content: "Section " counter(section) ": ";
/* VARIABLES AVEC FONCTIONS */
:root {
--base-size: 16px;
--large-size: calc(var(--base-size) * 1.5);
--responsive-size: clamp(14px, 2vw, 20px);
}