[retour à la page principale]
Cliquez ici pour voir le code de cette page

Tableau des attributs CSS

Voici un tableau qui te donne les différents attributs à utiliser...

Type
Fonctions Attributs Valeurs
Bordures
Couleur de Bordure border-color:valeur;
border-top-color:valeur;
border-right-color:valeur;
border-bottom-color:valeur;
border-left-color:valeur;
Une couleur (nom, rgb, hexadécimal)
Épaisseur de Bordure border-width:valeur;
border-top-width:valeur;
border-right-width:valeur;
border-bottom-width:valeur;
border-left-width:valeur;
thin | medium | thick | valeur numérique
Style de Bordure border-style:valeur;
border-top-style:valeur;
border-right-style:valeur;
border-bottom-style:valeur;
border-left-style:valeur;
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Tous les attributs border:valeur;
border-top:valeur;
border-right:valeur;
border-bottom:valeur;
border-left:valeur;
valeur = width style color (ex : border: thick groove red;)
Listes
Puce : image list-style-image:url(URI);
 L'image doit être en .gif ou .jpg (list-style-image:url(puce.jpg);)
Position list-style-position:valeur;
 inside (avec retrait) | outside (sans retrait)
Type list-style-type:valeur;
 none ou :
<ol> :
  • cjk-ideographic : idéogrammes
  • decimal : 1,2,...
  • decimal-leading-zero : 01,02,...
  • hebrew : hébraïque
  • hiragana : japonais
  • hiragana-iroha : japonais
  • katakana : japonais
  • katakana-iroha : japonais
  • lower-alpha : a, b, ...
  • lower-greek : grec
  • lower-roman : i, ii, ...
  • upper-alpha : A, B, ...
  • upper-roman : I, II, ...
<ul> : disc | circle | square
Tous les attributs list-style:valeur;
 valeur = type position image
Arrière plan
Attache background-attachment:valeur;
 fixed | scroll (bouge avec la page)
Couleur background-color:valeur;
 Une couleur (nom, rgb, hexadécimal)
Image background-image:url(URI);
 L'image doit être en .gif ou .jpg (background-image:url(puce.jpg);)
Position background-position:valeur;
 top | center | middle | bottom | left | right | val1 val2 (val1 : distance haut, val2 : distance gauche)
Répétition background-repeat:valeur;
 repeat | repeat-x | repeat-y | no-repeat
Tous les attributs background:valeur;
 valeur = image repeat attachment position
Tableaux
Bordure border-collapse:valeur;
 collapse | separate
Cellules vides empty-cells:valeur;
 collapse | show
Espace bordure border-spacing:valeur;
 Valeur numérique
Largeur table-layout:valeur;
 fixed | auto
Titre caption-side:valeur;
 top | right | bottom | left
Textes
Alignement vertical vertical-align:valeur;
 top | middle | bottom | baseline | sub | super | text-top | text-bottom
Alignement horizontal text-align:valeur;
 left | center | right | justify
Césure white-space:valeur;
 normal | pre (comme dans l'éditeur) | nowrap (pas de césure automatique)
Couleur du texte color:valeur;
 Une couleur (nom, rgb, hexadécimal)
Décoration du texte text-decoration:valeur;
 underline | overline | line-through | blink | none
Espacement des mots word-spacing:valeur;
 Valeur numérique
Espacement des signes letter-spacing:valeur;
 Valeur numérique
Étirement du texte font-stretch:valeur;
 wider | narrower | condensed | semi-condensed | extra-condensed | ultra-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded | normal
Indentation text-indent:valeur;
 Valeur numérique
Interligne line-height:valeur;
 Valeur numérique
Poids font-weight:valeur;
 lighter | normal | bold | bolder | 100 | 200 | ... |900
Police font-family:valeur1,valeur2,...;
 Nom des polices désirées (ordre de préférence)
Style font-style:valeur;
 italic | oblique | normal
Taille font-size:valeur;
 xx-small | x-small | small | smaller | medium | larger | large | x-large | xx-large | valeur numérique
Transformation du texte text-transform:valeur;
 capitalize | uppercase | lowercase | none
Variante font-variant:valeur;
 normal | small-caps (petites capitales)
Tous attributs font:valeur;
 valeur = family style variant size weight height
Marges extérieures
Séparément margin-top:valeur;
margin-right:valeur;
margin-bottom:valeur;
margin-left:valeur;
Valeur numérique
Marges margin:valeur;
 Valeur :
  • val1 : pour tous
  • val1 val2 : top/bottom right/left
  • val1 val2 val3 : top right/left bottom
  • val1 val2 val3 val4 : top right bottom left
Marges intérieures
Séparément padding-top:valeur;
padding-right:valeur;
padding-bottom:valeur;
padding-left:valeur;
Valeur numérique
Marges padding:valeur;
 Valeur numérique pour tous
Mise en page
Direction du texte direction:valeur;
 ltr | rtl (de droite à gauche)
Élément qui dépasse overflow:valeur;
  • visible : le conteneur est agrandi pour tout afficher
  • hidden : ce qui dépasse est caché
  • scroll : une barre de défilement apparaît
  • auto
Hauteur et largeur width:valeur;
min-width:valeur;
max-width:valeur;
height:valeur;
min-height:valeur;
max-height:valeur;

 Valeurs numériques.
Mode d'affichage display:valeur;
 block | inline | list-item | none (pas de place réservée)
Mode tableau display:valeur;
  • table : comme <table> en html
  • inline-table : <table> incorporé au contenu
  • table-header-group : comme <thead> en html
  • table-caption : comme <caption> en html
  • table-row-group : comme <tbody> en html
  • table-row : comme <tr> en html
  • table-column : comme <col> en html
  • table-column-group : comme <td> en html
  • table-footer-group : comme <tfoot> en html
Placement flottant float:valeur;
 left | right
Poursuite du texte sous un float clear:valeur;
 left | right | both | none
Position du calque z-index:valeur;
 Nombre élevé : au dessus...
Positions de départ top:valeur;
right:valeur;
bottom:valeur;
left:valeur;

 Positionnement à partir du haut, droite, ... Valeurs numériques.
Type de positionnement position:valeur;
  • absolute : positionnement absolu à partir du bord de l'élément parent qui peut défiler
  • fixed : positionnement absolu à partir du bord de l'élément parent qui ne peut pas défiler
  • relative : positionnement relatif mesuré à partir de la position normale
  • static : normal
Visibilité visibility:valeur;
 visible | hidden (place réservée)
Visibilité : carré clip:rect(valeur);
 valeur = top right bottom left