Chargement...
CSS Properties Complete Reference
Ce guide complet des propriétés CSS est conçu pour fournir aux développeurs un accès rapide et exhaustif à toutes les propriétés CSS modernes. Que vous travailliez sur des sites web personnels, des blogs, des boutiques en ligne ou des applications complexes, ce guide vous permet de trouver facilement la syntaxe correcte, la description et des exemples pratiques. Les propriétés sont organisées par catégories telles que la mise en page, le modèle de boîte, les bordures, le fond, la typographie, Flexbox et Grid, pour faciliter la consultation et l'application immédiate lors du codage. Utilisez ce guide comme référence de travail pour coder plus efficacement et de manière cohérente.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | Contrôle le type d'affichage de l'élément | display: flex | Tous navigateurs |
| position | position: value | Définit la méthode de positionnement | position: absolute | Tous navigateurs |
| top | top: value | Décalage vertical | top: 10px | Tous navigateurs |
| right | right: value | Décalage horizontal depuis la droite | right: 20px | Tous navigateurs |
| bottom | bottom: value | Décalage vertical depuis le bas | bottom: 10px | Tous navigateurs |
| left | left: value | Décalage horizontal depuis la gauche | left: 20px | Tous navigateurs |
| z-index | z-index: number | Ordre de superposition | z-index: 999 | Tous navigateurs |
| float | float: value | Direction de flottement | float: left | Tous navigateurs |
| clear | clear: value | Annule le flottement | clear: both | Tous navigateurs |
| overflow | overflow: value | Gestion du débordement | overflow: hidden | Tous navigateurs |
| overflow-x | overflow-x: value | Débordement horizontal | overflow-x: scroll | Tous navigateurs |
| overflow-y | overflow-y: value | Débordement vertical | overflow-y: auto | Tous navigateurs |
| visibility | visibility: value | Visibilité de l'élément | visibility: hidden | Tous navigateurs |
| clip | clip: rect() | Découpe le contenu | clip: rect(0,50px,50px,0) | Tous navigateurs |
| vertical-align | vertical-align: value | Alignement vertical | vertical-align: middle | Tous navigateurs |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | Largeur de l'élément | width: 300px | Tous navigateurs |
| height | height: value | Hauteur de l'élément | height: 200px | Tous navigateurs |
| max-width | max-width: value | Largeur maximale | max-width: 100% | Tous navigateurs |
| min-width | min-width: value | Largeur minimale | min-width: 200px | Tous navigateurs |
| max-height | max-height: value | Hauteur maximale | max-height: 500px | Tous navigateurs |
| min-height | min-height: value | Hauteur minimale | min-height: 100px | Tous navigateurs |
| margin | margin: value | Marge externe | margin: 20px | Tous navigateurs |
| margin-top | margin-top: value | Marge supérieure | margin-top: 10px | Tous navigateurs |
| margin-right | margin-right: value | Marge droite | margin-right: 15px | Tous navigateurs |
| margin-bottom | margin-bottom: value | Marge inférieure | margin-bottom: 10px | Tous navigateurs |
| margin-left | margin-left: value | Marge gauche | margin-left: 15px | Tous navigateurs |
| padding | padding: value | Marge intérieure | padding: 15px | Tous navigateurs |
| padding-top | padding-top: value | Marge intérieure supérieure | padding-top: 10px | Tous navigateurs |
| padding-right | padding-right: value | Marge intérieure droite | padding-right: 20px | Tous navigateurs |
| padding-bottom | padding-bottom: value | Marge intérieure inférieure | padding-bottom: 10px | Tous navigateurs |
| padding-left | padding-left: value | Marge intérieure gauche | padding-left: 20px | Tous navigateurs |
| box-sizing | box-sizing: value | Calcul du modèle de boîte | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | Bordure complète | border: 2px solid #000 | Tous navigateurs |
| border-width | border-width: value | Épaisseur de bordure | border-width: 3px | Tous navigateurs |
| border-style | border-style: value | Style de bordure | border-style: dashed | Tous navigateurs |
| border-color | border-color: value | Couleur de bordure | border-color: red | Tous navigateurs |
| border-top | border-top: width style color | Bordure supérieure | border-top: 1px solid blue | Tous navigateurs |
| border-right | border-right: width style color | Bordure droite | border-right: 2px dotted red | Tous navigateurs |
| border-bottom | border-bottom: width style color | Bordure inférieure | border-bottom: 3px double green | Tous navigateurs |
| border-left | border-left: width style color | Bordure gauche | border-left: 1px solid gray | Tous navigateurs |
| border-radius | border-radius: value | Coins arrondis | border-radius: 10px | IE9+ |
| outline | outline: width style color | Contour de l'élément | outline: 2px solid red | Tous navigateurs |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | Fond complet | background: #fff url() no-repeat center | Tous navigateurs |
| background-color | background-color: value | Couleur de fond | background-color: #ff0000 | Tous navigateurs |
| background-image | background-image: url() | Image de fond | background-image: url('bg.jpg') | Tous navigateurs |
| background-repeat | background-repeat: value | Répétition de l'image | background-repeat: no-repeat | Tous navigateurs |
| background-position | background-position: value | Position de l'image | background-position: center top | Tous navigateurs |
| background-size | background-size: value | Dimension de l'image | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | Comportement de défilement | background-attachment: fixed | Tous navigateurs |
| background-clip | background-clip: value | Zone de peinture | background-clip: padding-box | IE9+ |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | Police complète | font: bold 16px/1.5 Arial | Tous navigateurs |
| font-family | font-family: name | Famille de police | font-family: 'Arial', sans-serif | Tous navigateurs |
| font-size | font-size: value | Taille du texte | font-size: 18px | Tous navigateurs |
| font-weight | font-weight: value | Épaisseur du texte | font-weight: bold | Tous navigateurs |
| font-style | font-style: value | Style du texte | font-style: italic | Tous navigateurs |
| line-height | line-height: value | Hauteur de ligne | line-height: 1.6 | Tous navigateurs |
| text-align | text-align: value | Alignement horizontal | text-align: center | Tous navigateurs |
| text-transform | text-transform: value | Transformation du texte | text-transform: uppercase | Tous navigateurs |
| text-decoration | text-decoration: value | Décoration du texte | text-decoration: underline | Tous navigateurs |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | Active flexbox | display: flex | IE10+ |
| flex-direction | flex-direction: value | Direction principale | flex-direction: column | IE10+ |
| justify-content | justify-content: value | Alignement axe principal | justify-content: space-between | IE10+ |
| align-items | align-items: value | Alignement axe transversal | align-items: center | IE10+ |
| flex | flex: grow shrink basis | Flexibilité des éléments | flex: 1 | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | Active grid | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | Colonnes | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | Lignes | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | Espacement | grid-gap: 20px 10px | IE10+ (-ms-) |
| justify-items | justify-items: value | Alignement horizontal | justify-items: center | IE10+ (-ms-) |
| align-items | align-items: value | Alignement vertical | align-items: center | IE10+ (-ms-) |
Quick Examples
css
CSS Code
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}
---Bonnes pratiques et conseils :
- Toujours spécifier des polices de secours dans font-family.
- Utiliser des unités relatives (em, rem, %) pour une meilleure réactivité.
- Minimiser l'utilisation de !important.
- Tester les propriétés CSS sur différents navigateurs.
- Utiliser les propriétés abrégées pour réduire la taille du fichier.
- Évaluer l'impact des animations complexes sur les performances.
- Valider le CSS avec des validateurs en ligne.
- Utiliser les variables CSS pour un code maintenable.
- Inclure les préfixes pour les propriétés expérimentales.
- Grouper les propriétés liées pour une meilleure organisation.
🧠 Testez Vos Connaissances
Prêt à Commencer
Reference Knowledge Check
Testez vos connaissances sur les propriétés CSS et leur utilisation.
3
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut