HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutoriel CSS

CSS ACCUEIL Présentation CSS Syntaxe CSS Sélecteurs CSS CSS Comment faire Commentaires CSS Couleurs CSS
Couleurs RVB HEX LGV
Arrière-plans CSS
Couleur de l'arrière plan Image de fond Répétition du fond Pièce jointe d'arrière-plan Raccourci d'arrière-plan
Bordures CSS
Les frontières Largeur de la bordure Couleur de la bordure Côtés de bordure Raccourci de bordure Bordures arrondies
Marges CSS
Marges Margin Collapse
Rembourrage CSS CSS Hauteur/Largeur Modèle de boîte CSS Aperçu CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texte CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Polices CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Icônes CSS Liens CSS Listes CSS CSS Tables
Table Borders Table Size Table Alignment Table Style Table Responsive
Affichage CSS CSS Max-width Poste CSS Index Z CSS Débordement CSS Flottant CSS
Float Clear Float Examples
Bloc en ligne CSS Alignement CSS Combinateurs CSS Pseudo-classe CSS Pseudo-élément CSS Opacité CSS Barre de navigation CSS
Navbar Vertical Navbar Horizontal Navbar
Listes déroulantes CSS Galerie d'images CSS Sprites d'image CSS Sélecteurs d'attributs CSS Formulaires CSS Compteurs CSS Mise en page du site Web CSS Unités CSS Spécificité CSS CSS !important Fonctions mathématiques CSS

CSS avancé

Coins arrondis CSS Images de bordure CSS Arrière-plans CSS Couleurs CSS Mots-clés de couleur CSS Dégradés CSS
Linear Gradients Radial Gradients Conic Gradients
Ombres CSS
Shadow Effects Box Shadow
Effets de texte CSS Polices Web CSS Transformations CSS 2D Transformations 3D CSS Transitions CSS Animation CSS Info-bulles CSS CSS Style Images Réflexion d'image CSS Ajustement d'objet CSS Position d'objet CSS Masquage CSS Boutons CSS Pagination CSS CSS plusieurs colonnes Interface utilisateur CSS Variables CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionnement des boîtes CSS Requêtes média CSS Exemples CSS MQ Boîte flexible CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS réactif

RWD Introduction Fenêtre RWD Affichage de la grille RWD Requêtes multimédia RWD Images RWD Vidéos RWD Cadres RWD Modèles RWD

Grille CSS

Grille d'introduction Conteneur de grille Élément de grille

CSS SASS

Tutoriel SASS

Exemples CSS

Modèles CSS Exemples CSS CSS Quiz Exercices CSS Certificat CSS

Références CSS

Référence CSS Sélecteurs CSS Fonctions CSS Audit de référence CSS Polices sécurisées pour le Web CSS CSS animable Unités CSS Convertisseur CSS PX-EM Couleurs CSS Valeurs de couleur CSS Valeurs CSS par défaut Prise en charge du navigateur CSS

Couleurs CSS

❮ Précédent Suivant ❯

CSS prend en charge plus de 140 noms de couleurs, valeurs HEX, valeurs RVB , valeurs RVBA, valeurs HSL, valeurs HSLA et opacité.

Couleurs RVBA

Les valeurs de couleur RGBA sont une extension des valeurs de couleur RGB avec un canal alpha - qui spécifie l'opacité d'une couleur.

Une valeur de couleur RGBA est spécifiée avec : rgba(red, green, blue, alpha). Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).

RVBa (255, 0, 0, 0,2);
RVBa (255, 0, 0, 0,4);
RVBa (255, 0, 0, 0,6) ;
RVBa (255, 0, 0, 0,8);

L'exemple suivant définit différentes couleurs RGBA :

Exemple

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

Couleurs HSL

HSL signifie Hue, Saturation et Lightness.

Une valeur de couleur HSL est spécifiée avec : hsl(hue, saturation, lightness).

  1. La teinte est un degré sur la roue chromatique (de 0 à 360) :
    • 0 (ou 360) est rouge
    • 120 est vert
    • 240 est bleu
  2. La saturation est une valeur en pourcentage : 100 % est la pleine couleur.
  3. La légèreté est aussi un pourcentage ; 0 % est sombre (noir) et 100 % est blanc.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

L'exemple suivant définit différentes couleurs HSL :

Exemple

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Couleurs HSLA

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un canal alpha - qui spécifie l'opacité d'une couleur.

Une valeur de couleur HSLA est spécifiée avec : hsla(hue, saturation, lightness, alpha), où le paramètre alpha définit l'opacité. Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).

hsla (0, 100 %, 30 %, 0,3);
hsla (0, 100 %, 50 %, 0,3);
hsla (0, 100 %, 70 %, 0,3);
hsla (0, 100 %, 90 %, 0,3);

L'exemple suivant définit différentes couleurs HSLA :

Exemple

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Opacité

La propriété CSS opacitydéfinit l'opacité de l'ensemble de l'élément (la couleur d'arrière-plan et le texte seront opaques/transparents).

La opacityvaleur de la propriété doit être un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).

rgb(255, 0, 0);opacité:0.2;
rgb(255, 0, 0);opacité:0.4;
rgb(255, 0, 0);opacité:0.6;
rgb(255, 0, 0);opacité:0.8;

Notez que le texte ci-dessus sera également transparent/opaque !

L'exemple suivant montre différents éléments avec opacité :

Exemple

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

Testez-vous avec des exercices

Exercer:

Insérez la valeur de couleur RGBA pour une couleur d'arrière-plan entièrement rouge de l'élément <h1>, sans transparence.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ Précédent Suivant ❯