Style CSS :

Des outils qui façonnent le contenu des pages

• Largeur : largeur } auto/ initiale

• hauteur : hauteur } min/ max

• inherit : conserve la mesure déjà définie

• marge : haut/gauche/droite/bas

• padding : espace entre le contenu interne et externe

• box sizing : renvoie l'élément aux tailles prédéfinies

Couleurs en CSS

• RGB : Valeurs comprises entre 0 et 255 pour définir les tons de rouge, vert et bleu, séparés par une virgule. Exemple:

#rgb{
   color: rgb(250, 30, 70);
}

La valeur 250 représente le rouge, 30 représente le vert et 70 représente le bleu, ce qui dans ce cas donnerait quelque chose de similaire à :

• RGBA : Très similaire au RVB, mais le facteur de transparence est ajouté, qui varie entre 0 et 1 ;
• HEX : Hexadécimal défini entre 0 et 9, et A à F, où F est la valeur la plus élevée, suivant un modèle similaire au RVB. Exemple:

00FF00 -> Vert
FF0000 -> Rouge
0000FF -> Bleu

#hex{
  color: #03BB76;
}

Cela donnerait quelque chose comme :

• HSL (teinte, saturation, luminosité) : définition de la couleur à travers sa teinte (0 rouge, 120 vert, 240 bleu), saturation (0% ton gris, 100% pleine couleur), luminosité (0 % noir , 100% blanc) - Il existe également le HSLA, qui s'appuie sur le facteur alpha (0 à 1) pour mesurer le niveau de transparence. Exemple:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

Cette programmation donnerait une couleur complètement verte, mais vous pouvez rechercher d'autres tons à l'aide de la roue chromatique HSL.

Fonds

• couleur d'arrière-plan : couleur d'arrière-plan unie
• background-image : image de référence en arrière-plan
• gradient linéaire : gradient linéaire
• radial-gradient : dégradé circulaire
• répéter : effet de répétition

background-size : définit la taille de l'arrière-plan de l'élément, accompagné des paramètres :

• auto : réglage automatique
• cover : couvre tout l'espace de l'élément
• contain : redimensionnez le contenu pour que l'image complète/non recadrée apparaisse
• value : définit la taille de l'image à l'intérieur de l'élément

Répétition background-repeat : définit l'axe sur lequel l'image se répète :

• répéter : maximum de répétitions possibles
• répéter-x : répète uniquement sur l'axe x (horizontal)
• répéter-y : répète uniquement sur l'axe y (vertical)
• space : se répète sur les deux axes sans être coupé avec des espaces
• rond : se répète dans toutes les directions sans être coupé, juste redimensionné
• no-repeat : pas de répétitions

Position d'arrière-plan : positionnement des images d'arrière-plan
centre, gauche, droite, x%,y%

background-attachment : comment l'image se comportera en fonction de la fenêtre du navigateur

• corrigé : ne bouge pas
• scroll : il est fixé à un objet
• local : "fait défiler" à côté du contenu

background-origin : définit la zone de positionnement de l'image

• padding-box : coin d'origine à côté du remplissage
• border-box : l'image commence à côté de la zone extérieure de la bordure
• content-box : inférieur au remplissage, aligné sur le contenu de l'élément

background-flip : Définit si la couleur de l'élément recouvre ou non les bords

• padding-box : aligné sur le rembourrage
• border-box : aligné sur la bordure
• content-box : remplit la zone de contenu
• clip-text : fond dans le texte (la couleur doit être transparente)

background-bland-mode : effets sur le fond des éléments

Bords

• border-width : taille qu'aura la bordure
• border-style : type de bordure
• border-color : couleur de la bordure
• border-radius : arrondit la bordure

image-bordure

• source : définir le chemin de l'image
• largeur : largeur de l'image de la bordure
• répéter : contrôler si l'image se répète ou non
• début : distance du bord de l'élément
• tranche : diviser en régions

Contenu (image ou vidéo)

object-fit : Comment se comporte le contenu d'un élément dans la boîte établie

• remplir : remplir tout l'espace et déformer
• contenir : il ne sera pas déformé, mais il rentrera dans les mesures établies
• cover : remplit tout l'espace sans déformer
• none : ignore les mesures de l'objet parent et utilise ses mesures d'origine
• réduction : plus petit réglage de l'image sans distorsion

position-objet : image centrale

• axes x et axe y
• gauche, droite, centre, haut, bas