CSS3 : guide de référence

CSS3 : guide de référence des propriétés et de leurs valeurs

Publié le 22 janvier 2017

Les feuilles de styles, ou Cascading Style Sheets en anglais, sont connues sous l’abréviation de CSS. Ce langage permet de gérer la présentation des documents HTML, il est recommandé par le fameux W3C (World Wide Web Consortium), au même titre que le HTML ou le XML.

Dans cet article, nous allons vous réexpliquer brièvement à quoi servent les CSS et ensuite vous donner la liste de tous les groupes de CSS avec leurs différentes propriétés et leurs usages. Si vous voulez en savoir plus et voir les CSS fonctionner, nous vous invitons à consulter nos articles dédiés.

 

En bref…

Le but de la CSS est de séparer la structure d’un document HTML de sa présentation : HTML sert à structurer le contenu, CSS sert à mettre en forme plus facilement un contenu structuré. La mise en forme s’applique grâce à des styles sur de nombreux éléments : le positionnement, la police, les couleurs, les bordures, les arrière-plans, les animations…

Si votre site comporte plusieurs pages, LE gros avantage de la CSS est la possibilité d’avoir une feuille de style séparée. Si vous voulez changer la couleur et la taille de vos titres h1 par exemple, il vous suffit de l’écrire dans la css et ils se changeront dans tout le site, plus besoin d’aller les changer manuellement dans chaque page. Quel gain de temps !

Un autre avantage des CSS est de pouvoir gérer des règles différentes pour chaque support d’affichage : un navigateur classique, une télévision, un support mobile – tablette ou smartphone -, un lecteur braille…

Le but de cet article n’est pas de vous donner un cours sur les CSS et comment les écrire, il existe de très bons tuto pour cela mais de vous présenter un guide des CSS, afin que vous puissiez voir tout ce qui s’offre à vous. Amusez-vous bien !

 

Tous les groupes de CSS

La liste de CSS que nous vous proposons ci-dessous n’est pas exhaustive mais elle est déjà très complète. Elle peut vous donner des idées de choses que vous pensiez impossibles ou complexes mais qui, en fait, sont faciles à mettre en oeuvre avec les CSS.

Nous les avons regroupés par catégories. Pour les CSS qui vous paraissent inconnues, n’hésitez pas à utiliser le super site Can I use afin de vérifier la compatibilité de la CSS avec les navigateurs. La colonne CSS dans nos tableaux indique la version de CSS de la propriété : CSS1, CSS2 ou CSS3.

Couleurs

PROPRIETÉDESCRIPTIONCSS
colorspécifie la couleur du texte1
opacitypermet de jouer sur le niveau de transparence et d’opacité3

Arrière-plans

PROPRIETÉDESCRIPTIONCSS
backgroundsuper propriété qui en regroupe 8 autres en une seule1
background-attachmentdéfinit si la position d’une image d’arrière-plan par rapport à la page1
background-blend-modedéfinit la fusion entre chaque calque d’arrière-plan3
background-clippermet de définir les limites de l’arrière-plan à l’intérieur de la boîte3
background-colorspécifie la couleur de l’arrière-plan1
background-imagepermet de définir une ou plusieurs images comme arrière-plan1
background-origindétermine la manière dont les images d’arrière-plan sont positionnées3
background-positionspécifie la position d’une image d’arrière-plan1
background-position-xdéfinit la position horizontale initiale de l’arrière-plan3
background-position-ydéfinit la position verticale initiale de l’arrière-plan3
background-repeatmontre la façon dont une image d’arrière-plan sera répétée1
background-sizedéfinit la taille d’une image d’arrière-plan3

Bordures

PROPRIETÉDESCRIPTIONCSS
bordersuper propriété qui regroupe les propriétés border en une seule1
border-bottomsuper propriété qui regroupe les propriétés border-bottom en une seule1
border-bottom-colordéfinit la couleur de la bordure inférieure1
border-bottom-left-radiusdéfinit la forme du coin en bas à gauche3
border-bottom-right-radiusdéfinit la forme du coin en bas à droite3
border-bottom-styledéfinit le style de la bordure inférieure1
border-bottom-widthdéfinit la largeur de la bordure inférieure1
border-colordéfinit la couleur des 4 bordures1
border-imagesuper propriété qui regroupe les propriétés border-image en une seule3
border-image-outsetdécrit l’espace dont l’image dépasse de la boîte de bordure3
border-image-repeatdécrit la répétition de l’image de bordure3
border-image-slicepermet de découper l’image fournie en 9 régions3
border-image-sourcespécicifie le chemin d’accès à l’image de bordure3
border-image-widthdéfinit la largeur de l’image de bordure3
border-leftsuper propriété qui regroupe les propriétés border-left en une seule1
border-left-colordéfinit la couleur de la bordure gauche1
border-left-styledéfinit le style de la bordure gauche1
border-left-widthdéfinit la largeur de la bordure gauche1
border-radiussuper propriété qui regroupe les 4 propriétés border-radius en une seule3
border-rightsuper propriété qui regroupe les propriétés border-right en une seule1
border-right-colordéfinit la couleur de la bordure droite1
border-right-styledéfinit le style de la bordure droite1
border-right-widthdéfinit la largeur de la bordure droite1
border-styledéfinit le style des 4 bordures1
border-topsuper propriété qui regroupe les propriétés border-top en une seule1
border-top-colordéfinit la couleur de la bordure supérieure1
border-top-left-radiusdéfinit la forme du coin en haut à gauche3
border-top-right-radiusdéfinit la forme du coin en haut à droite3
border-top-styledéfinit le style de la bordure supérieure1
border-top-widthdéfinit la largeur de la bordure supérieure1
border-widthdéfinit la largeur des 4 bordures1
box-decoration-breakdéfinit le comportement des bordures et arrière-plans lorsque la boîte est fragmentée3
box-shadowpermet de faire des ombres sur les bordures3

Modèles de boîtes simples

PROPRIETÉDESCRIPTIONCSS
bottomdéfinit la place d’un élément positionné par rapport au bas2
clearindique si un élément peut être situé à côté d’éléments flottants ou en dessous1
clip-pathempêche une portion d’un élément d’être affichée en définissant une région de rognage3
displaydéfinit la façon dont un élément HTML doit être affiché1
floatdéfinit si une boîte doit flotter ou non1
heightdonne une hauteur à un élément1
leftdéfinit la place d’un élément positionné par rapport à la gauche2
margindéfinit les 4 marges dans une seule propriété1
margin-bottomdéfinit la marge inférieure d’un élément1
margin-leftdéfinit la marge à gauche d’un élément1
margin-rightdéfinit la marge à droite d’un élément1
margin-topdéfinit la marge supérieure d’un élément1
max-heightdéfinit la hauteur maximum d’un élément2
max-widthdéfinit la largeur maximum d’un élément2
min-heightdéfinit la hauteur minimum d’un élément2
min-widthdéfinit la largeur minimum d’un élément2
overflowpermet de rogner un contenu et d’afficher des barres de défilement2
overflow-xdéfinir un mécanisme de rognage si le contenu dépasse horizontalement3
overflow-ydéfinir un mécanisme de rognage si le contenu dépasse verticalement3
paddingdéfinit les 4 marges intérieures dans une seule propriété1
padding-bottomdéfinit la marge intérieure inférieure d’un élément1
padding-leftdéfinit la marge intérieure à gauche d’un élément1
padding-rightdéfinit la marge intérieure à droite d’un élément1
padding-topdéfinit la marge intérieure supérieure d’un élément1
positionprécise la méthode de positionnement d’un élément2
rightdéfinit la place d’un élément positionné par rapport à la droite2
topdéfinit la place d’un élément positionné par rapport au haut2
visibilitydéfinit si un élément est visible ou non2
widthspécifie la largeur d’un élément1
vertical-alignpermet d’aligner un élément dans la hauteur1
z-indexdéfinit l’ordre d’affichage d’éléments superposés2

Modèles de boîtes flexibles

Si vous souhaitez avoir plus d’info et des exemples de boîtes flexibles, consultez notre article : utiliser Flexbox pour faire sa mise en page.

PROPRIETÉDESCRIPTIONCSS
align-contentpermet de positonner plusieurs lignes dans votre conteneur flexible3
align-itemspermet de définir l’alignement de vos éléments le long de l’axe secondaire3
align-selfsert à faire une exception d’alignement pour un élément3
flexsuper propriété qui regroupe flex-grow, flex-shrink et flex-basis3
flex-basisdéfinit la taille par défaut d’un élément3
flex-directiondéfinit l’axe principal, le sens d’affichage horizontal ou vertical des éléments3
flex-flowraccourci pour regrouper flex-direction et flex-wrap3
flex-growpermet de jouer sur la taille d’un élément flex si nécessaire3
flex-shrinkpermet de rétrécir un élément flex si nécessaire3
flex-wrapdemande aux éléments d’aller à la ligne lorsque la place manque3
justify-contentdéfinit l’alignement le long de l’axe principal3
orderpermet de changer l’ordre des éléments3

Textes

PROPRIETÉDESCRIPTIONCSS
hanging-punctuationspécifie si une marque de ponctuation peut être placée en dehors du bloc de contenu3
hyphensindique au navigateur comment gérer les traits d’union lors des sauts de ligne3
letter-spacingjoue sur l’espacement entre les caractères d’un texte1
line-breakdéfinit la façon dont les sauts de ligne sont gérés3
line-heightdéfinit la hauteur des lignes1
overflow-wrapdéfinit si le navigateur peut ou non faire la césure à l’intérieur d’un mot3
tab-sizeadapte la largeur utilisée pour représenter le caractère de tabulation3
text-alignprécise la position d’un texte dans l’axe horizontal1
text-align-lastdécrit la façon dont la dernière ligne d’un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée3
text-combine-uprightdéfinit comment combiner des caractères afin qu’ils ne prennent la place que d’un seul caractère3
text-indentdéfinit l’espace horizontal qui doit être laissé avant le début d’un texte1
text-justifyspécifie la méthode de justication quand un texte est justifié3
text-transformdéfinit la façon d’utiliser les lettres capitales dans un texte1
white-spacedécrit la façon dont les blancs sont gérés au sein d’un élément1
word-breakdécrit la façon dont la césure s’applique pour les passages à la ligne3
word-spacingdéfinit la règle d’espacement utilisée entre les balises et les mots1
word-wrappermet de casser de long mots incassables sur 2 lignes3
text-decorationspécifie la décoration apportée à un texte1
text-decoration-colorspécifie la couleur de la décoration apportée à un texte3
text-decoration-linespécifie le type de ligne d’un text-docoration3
text-decoration-stylespécifie le style de ligne d’un text-docoration3
text-shadowpermet de mettre une ombre à un texte3
text-underline-positionjoue sur la position d’un soulignement quand le texte est souligné avec text-decoration3

Polices

PROPRIETÉDESCRIPTIONCSS
fontsuper propriété qui regroupe les propriétés font en une seule1
font-familyspécifie la police d’un texte1
font-feature-settingspermet de contrôler les fonctionnalités typographiques des polices OpenType3
font-kerningcontrôle le crénage de la police ; c’est-à-dire l’espace créé entre les lettres3
font-language-overridepermet de contrôler l’utilisation des glyphes spécifiques à une langue pour une police3
font-sizeprécise la taille d’un texte1
font-size-adjustpermet de préciser la taille des lettres en majuscules par rapport aux minuscules3
font-stretchpermet de contrôler l’étirement entre les caractères d’un texte3
font-styleprécise le style d’un texte1
font-synthesisindique au navigateur s’il peut synthétiser la graisse ou la mise en italique des polices3
font-variantsuper propriété qui regroupe les propriétés font-variant en une seule1
font-variant-alternatesdécrit la façon dont les blancs sont gérés au sein d’un élément3
font-variant-capscontrôle l’utilisation de glyphes alternatifs3
font-variant-east-asiancontrôle l’utilisation des glyphes alternatifs pour les scripts japonais, chinois et d’Asie orientale3
font-variant-ligaturescontrôle quelles ligatures et formes contextuelles sont utilisées dans les texes3
font-variant-numericpermet de contrôler l’utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux3
font-variant-positionpermet d’utiliser des glyphes de plus petite taille positionnés en exposant ou en indice3
font-weightspécifie la graisse d’un texte1

Modes d’écriture

PROPRIETÉDESCRIPTIONCSS
directionprécise le sens de l’écriture2
text-orientationspécifie l’orientation du texte sur une ligne3
text-combine-uprightdéfinit comment intégrer une combinaison de plusieurs caractères dans l’espace alloué à un seul caractère3
unicode-bidiassociée à la propriété direction, permet de gérer du texte bidirectionnel3
writing-modedéfinit l’orientation du texte et la direction selon laquelle le bloc grandit3

Tables

PROPRIETÉDESCRIPTIONCSS
border-collapsedétermine si les bordures d’un tableau sont séparées ou fusionnées2
border-spacingdéfinit la distance entre les bordures de cellules adjacentes2
caption-sidepermet de choisir l’emplacement de la légende d’un tableau2
empty-cellsdéfinit la façon l’affichage des bordures et de l’arrière-plan des cellules sans contenu visible2
table-layoutdéfinit la disposition des cellules, lignes et colonnes d’un tableau2

Listes et Compteurs

PROPRIETÉDESCRIPTIONCSS
counter-incrementpermet d’augmenter la valeur d’un compteur CSS d’une valeur donnée2
counter-resetpermet de réinitialiser un compteur CSS avec une valeur donnée2
list-stylesuper propriété qui regroupe les propriétés list en une seule1
list-style-imagedéfinit l’image utilisée comme puce devant les éléments de listes1
list-style-positionpermet de définir la position du marqueur de liste par rapport à la boîte1
list-style-typepermet de définir l’apparence d’un élément de liste1

Animations

PROPRIETÉDESCRIPTIONCSS
animationsuper propriété qui regroupe les propriétés d’animation en une seule3
animation-delaydéfinit la durée d’attente avant de démarrer une animation3
animation-directionindique le sens dans lequel les cycles de l’animation doivent être joués3
animation-durationdéfinit la durée d’une animation pour parcourir un cycle3
animation-fill-modeindique le style d’un élément avant et après l’animation3
animation-iteration-countindique le nombre de répétition de l’animation3
animation-namedéfinit une liste d’animations qui doivent être appliquées à l’élément ciblé3
animation-play-statedétermine si une animation est en cours d’exécution ou si elle est en pause3
animation-timing-functionspécifie la courbe d’accélération de l’animation3

Transformations

PROPRIETÉDESCRIPTIONCSS
backface-visibilitypermet d’indiquer si la face arrière d’un élément doit être visible lorsqu’elle est orientée vers l’utilisateur3
perspectivespécifie la façon dont un élément 3D doit être vu3
perspective-originspécifie la position initiale d’un élément 3D3
transformpermet d’appliquer une transformation à un élément 2D ou 3D3
transform-originpermet de modifier l’origine du repère pour les transformations d’un élément3
transform-styledétermine si les éléments-fils d’un élément sont positionnés en 2D ou 3D3

Transitions

PROPRIETÉDESCRIPTIONCSS
transitionsuper propriété qui regroupe les propriétés de transition en une seule3
transition-propertydésigner les noms des propriétés CSS sur lesquelles une transition doit être appliquée3
transition-durationdéfinit le nombre de secondes ou de millisecondes que doit durer une transition3
transition-timing-functiondécrit la courbe d’accélération d’une transition3
transition-delaydéfinit la durée d’attente avant de démarrer une transition3

Interface utilisateur

PROPRIETÉDESCRIPTIONCSS
box-sizingpermet de modifier le modèle de boîte par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments3
contentutilisé avec les pseudo-éléments ::before et ::after afin de générer le contenu d’un élément2
cursordéfinit la forme du curseur lorsque le pointeur est au-dessus de l’élément2
nav-downindique où aller lorsqu’on utilise la flèche basse du pavé de navigation3
nav-indexdéfinit l’ordre de tabulation d’un élément3
nav-leftindique où aller lorsqu’on utilise la flèche gauche du pavé de navigation3
nav-rightindique où aller lorsqu’on utilise la flèche droite du pavé de navigation3
nav-upindique où aller lorsqu’on utilise la flèche haute du pavé de navigation3
outlinesuper propriété qui regroupe les propriétés outline en une seule2
outline-colorpermet de définir la couleur avec laquelle on trace le conteur de l’élément2
outline-offsetdéfinit l’espace entre la bordure dessinée par outline et le bord de la boîte de bordure3
outline-stylepermet de définir la mise en forme utilisée pour dessiner une bordure2
outline-widthdéfinit la largeur d’une bordure (outline)2
resizepermet de contrôler le caractère redimensionnable d’un élément3
text-overflowdétermine la façon dont le textel qui dépasse d’une boîte est signalé pour les utilisateurs3

Multi-colonnes

PROPRIETÉDESCRIPTIONCSS
break-afterdécrit la façon dont la page, la colonne ou la région se fragmente après la boîte générée3
break-beforedécrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée3
break-insidedécrit la façon dont la page, la colonne ou la région se fragmente dans la boîte générée3
column-countdécrit le nombre de colonnes d’un élément3
column-fillpermet de contrôler la façon dont le contenu est réparti entre les colonnes3
column-gappermet de définir l’espace entre les colonnes3
column-rulepermet de définir l’affichage d’une ligne droite entre chaque colonne3
column-rule-colorpermet de définir la couleur de la ligne tracée entre les colonnes3
column-rule-stylepermet de définir le style de la ligne tracé entre plusieurs colonnes3
column-rule-widthpermet de définir la largeur du trait tracé entre les colonnes3
column-spanermet de définir sur combien de colonnes un élément doit s’étendre3
column-widthpermet de suggérer une largeur de colonne optimale3
columnssuper propriété qui regroupe column-width et column-count3
widowslorsqu’un paragraphe s’étend sur 2 pages, il définit le nombre minimum de lignes qui peuvent être laissées en haut de la deuxième page3

Media paginé

PROPRIETÉDESCRIPTIONCSS
orphansnombre minimum de lignes qui doivent rester en bas de pages dans un conteneur de bloc2
page-break-afterpermet d’ajuster les sauts de page placés après l’élément courant2
page-break-beforepermet d’ajuster les sauts de page placés avant l’élément courant2
page-break-insideajuste la façon dont sont appliqués les sauts de page au sein de l’élément courant2

Contenu généré

PROPRIETÉDESCRIPTIONCSS
marksutilisé pour afficher des marques de coupure ou des croix d’alignement3
quotesindique la façon dont les agents utilisateurs doivent afficher les marques indiquant les citations2

Effets de filtres

Si vous souhaitez voir les filtres en action, consultez notre article : appliquer des filtres à des images en css3.

PROPRIETÉDESCRIPTIONCSS
filterpermet d’appliquer des filtres et d’obtenir des effets graphiques de flou, de saturation…3

Images et éléments remplacés

PROPRIETÉDESCRIPTIONCSS
image-orientationpermet de faire une rotation sur une image3
image-renderingfournit une indication au navigateur la façon de redimensionner les images3
image-resolutionprécise la résolution intrinsèque des images3
object-fitdéfinit la façon dont le contenu d’un élément remplacé doit s’adapter à son parent3
object-positiondétermine l’alignement d’un élément replacé au sein de sa boîte3

Masques

PROPRIETÉDESCRIPTIONCSS
maskpermet de modifier la visibilité d’un élément en le masquant partiellement ou complètement3
mask-typedéfinit si un masque sera utilisé comme un masque de luminance ou comme un masque de transparence3

 

Conclusion

Voilà, vous avez de quoi vous amuser maintenant, vous allez pouvoir personnaliser votre site à loisir !

Nous espérons que cet article vous aura été utile, n’hésitez pas à le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. N’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*