Liste des propriétés CSS

Propriétés de polices
Propriété Valeur Description
font-family Police précise (Arial, Times, Verdana)
Famille (serif, sans-serif, fantasy, monospace, cursive)
Définit un ou plusieurs noms 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.
font-style normal, italic, oblique Définit le style d'écriture
font-weight lighter, normal, bold ou bolder.
valeur numérique (100, 200, 300, 400, 500, 600, 700, 800, 900)
Définit la graisse (épaisseur) de la police
font-size xx-small, x-small, small, medium, large, x-large, xx-large
taille en points (pt), cm, %
Définit la taille de la police
font-variant normal, small-caps Définit une variante (petites majuscules)
font font: Verdana, Arial, bold italic 8px; Raccourci permettant de mettre toutes les propriétés
Texte et paragraphes
Propriété Valeur Description
color "#RRGGBB" Définit la couleur du texte
line-height line-height: 12pt; Définit l'interligne
text-align left, center, right ou justify Définit l'alignement du texte
text-indent text-indent: 5px; Définit l'indentation (retrait du texte)
text-decoration blink (clignotement), underline (souligné), line-through (barré), overline (surligné) ou none (aucune décoration) Définit une décoration
text-shadow text-shadow: 1px 2px 4px black; 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é Valeur 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 Affichage (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 duquel 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 duquel un renvoi en page précédente est effectué
Pseudo-formats
Propriété Description
:link Dans le cas où l'élément a est un lien (car il peut aussi être une ancre)
:active Dans le cas où le visiteur clique sur le lien
:visited Dans le cas où la page a déjà été visitée
:hover Dans le cas où la souris pointe sur le lien
:focus Dans le cas où le focus est sur le lien (ou le champ d’un formulaire)
:first-letter Permet de définir un style sur la première lettre du bloc uniquement
:first-line Permet de définir le style de la première ligne
:before Place du contenu avant le contenu du bloc
:after Place du contenu après le contenu du bloc
 Valid XHTML 1.0 Strict !CSS niveau 3 Valide !
© 2005 - 2010 | Dernière modification le 13/05/2017 à 23:25