Définit un ou plusieurs nom de polices ou de familles de polices.
Si plusieurs polices sont définies, la première trouvée sur le système
de l'utilisateur sera utilisée.
Définit l'ombrage texte, respectivement décalage à droite, en bas, rayon de l'effet de flou et couleur.
text-transform
uppercase (majuscule), lowercase (minuscule) ou capitalize (première lettre en majuscule)
Définit la casse du texte
white-space
normal (passage à la ligne automatique), pre (idem saisie), nowrap (pas de passage à la ligne automatique)
Césure
word-spacing
word-spacing: 6px;
Définit l'espacement des mots
width
En points (pt), pouces (in), en cm, en pixels (px), ou en %
Définit la longueur d'un élément de texte ou d'une image
height
En points (pt), pouces (in), en cm, en pixels (px), ou en %
Définit la hauteur d'un élément de texte ou d'une image
Couleurs et arrière plan
Propriété
Valeur
Description
background-color
"#RRGGBB"
Définit la couleur d'arrière plan
background-image
url(http://url)
Définit l'image d'arrière-plan
background-repeat
repeat, repeat-x, repeat-y, no-repeat
Définit la façon de répéter l'arrière-plan
background-attachment
scroll, fixed
Spécifie si l'image reste fixe avec les déplacements de l'écran
background-position
top, middle, bottom, left, center ou right
Position de l'image par rapport au coin supérieur gauche
background
background: url(test.jpg) fixed repeat;
Raccourci pour les propriétés d'arrière-plan
Marges
Propriété
Exemple
Description
margin-top
margin-top: 5px;
Valeur de la marge supérieure
margin-right
margin-right: 0.5em;
Valeur de la marge de droite
margin-bottom
margin-bottom: 2pt;
Valeur de la marge inférieure
margin-left
margin-left: 0;
Valeur de la marge de gauche
margin
margin: 5px 0.5em 2pt 0;
Raccourci pour les propriétés de marge
Bordures
Propriété
Valeur
Description
border[-top -left -bottom -right]-width
En points (pt), pouces (in), en cm, en pixels (px), ou en %
Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite]
border[-top -left -bottom -right]-color
border-left-color: #RRGGBB;
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), double (double et remplie) ou ridge (en 3D)
Style de la bordure [supérieure, de gauche, inférieure ou de droite]
border-collapse
collapse separate
Effet » 3D » ou non
border
border: 1px 0 0 2px dotted green;
Raccourci global les propriétés de bordure
Espaces intérieurs
Propriété
Valeur
Description
padding-top
padding-top: 3px;
Espace intérieur entre l'élément et la bordure supérieure
padding-right
padding-right: 0.25em;
Espace intérieur entre l'élément et la bordure droite
padding-bottom
padding-bottom: 0;
Espace intérieur entre l'élément et la bordure inférieure
padding-left
padding-left: 2pt;
Espace intérieur entre l'élément et la bordure gauche
padding
padding: 3px 0.25em 0 2pt;
Raccourci vers l'ensemble des propriétés d'espace intérieur
Tableaux
Propriété
Valeur
Description
border-collapse
separate ou collapse
Fusion des bordures des cellules (collapse) ou non (separate)
border-spacing
border-spacing: 4px;
Espacement des cellules
caption-side
top, bottom, left ou right
Positionnement de la légende du tableau
empty-cells
show ou collapse
Affichae (show) ou masquage (collapse) des cellules vides
table-layout
fixed (indépendamment du contenu des cellules) ou auto (selon le contenu des cellules)
Largeur fixe ou variable
speak-headers
alwats (systématiquement avant chaque cellule) ou once (une seule fois)
Propriété pour sourds et malentendants indiquant le comportement lors de la lecture des
cellules d'en-tête d'un tableau
Listes
Propriété
Valeur
Description
list-style-type
decimal, upper-roman, lower-latin, disc, circle, square ou none
Type de puces et de numérotation
list-style-image
list-style-image: url(image.png);
Permet de personnaliser les puces avec une image
list-style-position
inside ou outside
Spécifie le retrait des puces
list-style
Raccourci vers les propriétés de liste
Mise en page
Propriété
Valeur
Description
@page
@page(size: portrait)
Définit la mise en page de l'impression
size
auto, landscape ou portrait
Format de l'impression
margin-top
margin-top: 3 cm;
Marge supérieure
margin-right
margin-right: 1.5 cm;
Marge de droite
margin-bottom
margin-right: 1 cm;
Marge inférieure
margin-left
margin-left: 2 cm;
Marge de gauche
marks
crop (traits de coupe), cross (repère de montage), none (pas de marque)
Traits de coupe et repères de montage
page-break-before
Always, avoid
Force le saut de page avant un élément
page-break-after
Always, avoid
Force le saut de page après un élément
orphans
orphans: 2;
Evite les lignes orphelines en fin de page. Définit le nombre de ligne minimal à partir un renvoi en page suivante est effectué
widows
widows: 1;
Evite les lignes veuves en début de page. Définit le nombre de ligne minimal à partir un renvoi en page précédente est effectué
Cet article est régulièrement mis à jour par des experts sous la direction de Jean-François Pillou, fondateur de CommentCaMarche et directeur délégué au développement numérique du groupe Figaro.
