Comment créer son propre site - Le CSS

Lundi 7 avril 2025

Visiteurs : 13899

Le CSS

Les Propriétés CSS

Nous voici à un point important de la partie de CSS. En effet, vous avez pu voir quelques propriétés CSS dans les exemples mais le temps est venu de lister les propriétés CSS afin que vous puissiez faire vos propres styles sans trop de difficultés.

Les propriétés CSS sont nombreuses et contrairement aux autres sites que j'ai pu visiter lors ma propre formation, je préfère les lister selon leur utilisation.

Propriétés de texte
Propriété	Valeur	Description
color	couleur (voir CSS et couleurs)	Couleur du texte
line-height	entier ou réel	Interline
text-align	left, center, right ou justify	Alignement du texte
text-indent	entier ou réel	Indentation
text-decoration	blink (clignotement), underline (souligné), line-through (barré), overline (surligné) ou none (aucune décoration)	Décoration
text-transform	uppercase, lowercase ou capitalize	Transforme le texte en MAJUSCULE, minuscule ou Capitulé
white-space	normal (passage à la ligne automatique), pre (idem saisie), nowrap (pas de passage à la ligne automatique)	Césure
word-spacing	Entier ou réel	Espace entre les mots

Propriétés de police
Propriété	Valeur	Description
font-family	ex : Arial	Nom d'une police
font-style	normal, italic, oblique, lighter, normal, bold ou bolder	Style de la police
font-weight	valeur numérique (100, 200, 300, 400, 500, 600, 700, 800, 900)	Epaisseur (graisse) de la police
font-size	xx-small, x-small, small, medium, large, x-large ou xx-large	Taille de la police
font-variant	normal, small-caps	Définit une variante (petites majuscules)

Propriétés d'arrière plan
Propriété	Valeur	Description
background-attachment	scroll ou fixed	Spécifie si l'image reste fixe avec les déplacements de l'écran
background-color	couleur (voir CSS et couleurs)	Couleur de l'arrière plan
background-image	url(URL)	Image d'arrière plan.
background-position	top, middle, bottom, left, center ou right	Position de l'image par rapport au coin supérieur gauche
background-repeat	repeat, repeat-x, repeat-y, no-repeat	Manière de répéter l'image d'arrière plan

Propriétés de tableau
Propriété	Valeur	Description
border-collapse	separate ou collapse	Fusion des bordures des cellules (collapse) ou non (separate)
border-spacing	Entier oun réel	Espacement des cellules
caption-side	top, bottom, left ou right	Positionnement du titre du tableau
empty-cells	show ou collapse	Afficher (show) ou non (collapse) les cellules vides
table-layout	fixed (indépendamment du contenu des cellules) ou auto (selon le contenu des cellules)	Largeur fixe ou automatique

Propriétés de liste
Propriété	Valeur	Description
list-style-image	url(URL)	Personnaliser les puces avec une image
list-style-position	inside ou outside	Retrait des puces
list-style-type	decimal, upper-roman, lower-latin, disc, circle, square ou none	Type de puces et de numérotation

Propriétés de marge
Propriété	Valeur	Description
margin-bottom	Entier ou réel	Marge inférieure
margin-left	Entier ou réel	Marge de gauche
margin-right	Entier ou réel	Marge de droite
margin-top	Entier ou réel	Marge supérieure

Propriétés de bordure
Propriété	Valeur	Description
border[-top -left -bottom -right]-width	Entier	Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite]
border[-top -left -bottom -right]-color	couleur (voir CSS et couleurs)	Couleur de la bordure [supérieure, de gauche, inférieure ou de droite]
border[-top -left -bottom -right]-style	solid (pleine), dashed (en tirets), dotted (en pointillés) ou double (double et remplie)	Style de la bordure [supérieure, de gauche, inférieure ou de droite]

Propriétés d'espace intérieur
Propriété	Valeur	Description
padding-bottom	Entier	Espace intérieur entre l'élément et la bordure inférieure
padding-left	Entier	Espace intérieur entre l'élément et la bordure gauche
padding-right	Entier	Espace intérieur entre l'élément et la bordure droite
padding-top	Entier	Espace intérieur entre l'élément et la bordure supérieure