De Wiki_Libre.

Cette page regroupe une liste non exhaustive de code CSS :

Propriétés de formatage de texte

Police

font-family

Les différentes polices seront choisies par ordre de préférence. Les guillemets sont à utiliser pour une police comportant des espaces. Il est préférable de toujours finir par la police "serif" ou "sans serif", celle-ci étant reconnue par défaut.

font-gamily : arial, "Times New Roman", "Trebuchet MS", Verdana, serif;

Taille

font-size

Taille de la police :

• px : pixels
• % : pourcentages (base : 100%)
• em : taille relative (base : 1.0)
• xx-small : très très petit
• x-small : très petit
• small : petit
• medium : moyen
• large : large
• x-large : très large
• xx-large : très très large

Formatage

font-weight

Mise en gras. 4 valeurs possibles :

• bold : gras
• bolder : plus gras
• lighter : plus fin
• normal : non gras (défaut)

font-style

Mise en italique. 3 valeurs possibles :

• italic : italique
• oblique : idem
• normal : non italique (défaut)

text-decoration

Mise en décoration. 5 valeurs :

• underline : souligné
• overline : ligne au-dessus
• line-through : barré
• blink : clignotant (ne fonctionne pas sous IE)
• none : normal (défaut)

font-variant

Petites capitales. 2 valeurs :

• small-caps : minuscules
• normal : normal

text-transform

Changer la casse. 4 valeurs :

• uppercase : tout en majuscules
• lowercase : tout en minuscules
• capitalize : 1ère lettre en majuscule
• none : normal (défaut)

font

Meta-propriété de police. Cela permet de regrouper sous une seule propriété une ou plusieurs des sous-propriétés suivantes :

• font-weight : gras
• font-size : taille de la police
• font-style : italique
• font-variant : petites capitales
• font-family : nom de police

Alignement

text-align

Alignement horizontal. 4 valeurs :

• left : à gauche
• center : centré
• right : à droite
• justify : justifié

vertical-align

Alignement vertical (à utiliser dans les cellules d'un tableau. 3 valeurs :

• top : en haut
• middle : au milieu
• bottom : en bas

line-height

Hauteur de lignel. 2 valeurs :

• px : pixels
• % : pourcentages

text-indent

Alinéa (px)

word-spacing

Espace entre les mots (px)

letter-spacing

Espace entre les lettres (px)

letter-spacing

Césure. 3 valeurs :

• normal : pas de passage automatique à la ligne (défaut)
• nowrap : pas de passage automatique à la ligne sauf si balise
  
• pre : passage à la ligne fait comme il a été saisi dans le code source (= <pre> )

Propriétés de couleur et de fond

Couleur

color

Couleur de texte. 3 possibilités :

• nommage :
  • white : blanc
  • silver : argent
  • gray : gris
  • black : noir
  • red : rouge
  • maroon : marron
  • lime : citron vert
  • green : vert
  • yellow : jaune
  • olive : olive
  • blue : bleu
  • navy : marin
  • funchsia : fushia
  • purple : pourpre
  • aqua : eau
  • teal : bleu-vert

• hexadécimal :
  • #FFFFFF : blanc

• RGB :
  • rgb(250,0,0) : rouge

background-color

Couleur de fond

Image de fond

background-image

Image de fond

background-image: url("../images/fond.png");

background-attachment

Fixation de fond. 2 valeurs :

• fixed : fond fixe
• scroll : le fond défile avec la page (défaut)

background-position

Position de fond. 2 façons :

• px ou % :

background-position: 10px 500px; /* 10px du bord "gauche" - 500px du bord "haut" */

• valeurs prédéfinies :
  • vertical :
    • top : en haut
    • center : au centre
    • bottom : en bas

• • horizontal :
    • left : à gauche
    • center : au centre
    • right : à droite

background-position: top left; /* 1en haut à gauche */

background

Meta-propriétés

• background-image : image de fond
• background-attachment : fixation de fond
• background-repeat : répétition du fond
• background-position : position du fond

Propriétés des boites

Dimensions

width

Largeur. 3 valeurs :

• px : pixels
• % : en pourcentage
• auto : s'adapte suivant le texte placé à l'intérieur

height

Hauteur

min-width

Largeur minimale [ne fonctionne pas sous IE]

max-width

Largeur maximale [ne fonctionne pas sous IE]

min-height

Hauteur minimale [ne fonctionne pas sous IE]

max-height

Hateur maximale [ne fonctionne pas sous IE]

Marges extérieures

[ne fonctionne pas sous IE]

margin-top

Marge en haut. 3 valeurs :

• px : pixels
• em : taille relative
• % : pourcentage

margin-bottom

Marge en bas

margin-left

Marge à gauche

margin-right

Marge à droite

margin

Méta-propriété de marge. 1 à 4 valeurs :

• 1 valeur :
  • marge haut, bas, gauche, droite

margin: 5px 10px 3px 15px;

• 2 valeurs :
  • marge haut et bas
  • marge gauche et droite

• 3 valeurs :
  • marge haut
  • marge gauche et droite
  • marge bas

• 4 valeurs :
  • marge haut
  • marge droite
  • marge bas
  • marge gauche

Marges intérieures

padding-top

Marge inférieure en haut.

padding-bottom

Marge inférieure en bas

padding-left

Marge inférieure à gauche

padding-right

Marge inférieure à droite

padding

• 1 valeur :
  • marge inférieure haut, bas, gauche, droite

• 2 valeurs :
  • marge inférieure haut et bas
  • marge inférieure gauche et droite

• 3 valeurs :
  • marge inférieure haut
  • marge inférieure gauche et droite
  • marge inférieure bas

• 4 valeurs :
  • marge inférieure haut
  • marge inférieure droite
  • marge inférieure bas
  • marge inférieure gauche

Bordures

border-width

Epaisseur de la bordure

border-color

Couleur de la bordure

border-style

Type de bordure. 9 valeurs :

• none : pas de bordure (défaut)
• hidden : bordure cachée
• solid : ligne pleine
• double : ligne double (bordure : 3px minimum)
• dashed : tirets
• dotted : pointillés
• inset : effet 3D "enfoncé"
• outset : effet 3D "surélevé"
• ridge : autre effet 3D

border-top

Bordure en haut. 3 types :

• épaisseur
• couleur
• type

border-bottom

Bordure en bas

border-left

Bordure à gauche

border-right

Bordure à droite

border

Méta-propriété de bordure

Propriétés de positionnement et d'affichage

Affichage

display

Type d'élément. 4 valeurs :

• none : ne s'affiche pas
• block : devient de type "block"
• inline : devient de type "inline"
• list-item : devient élément de liste à puce (="<li>")

visibility

Affichage. 2 valeurs :

• hidden : masqué
• visible : visible (défaut)

clip

Affichage d'une seule partie. Cela permet de spécifier la zone visible d'un élément (rogne le texte). 3 valeurs :

• auto : masqué
• rect(0px, 50px, 50px, 0px) :
  • début de la zone visible verticale
  • fin de la zone visible horizontale
  • fin de la zone visible verticale
  • début de la zone visible horizontale
• inherit : hérite de son parent

overflow

Limiter les dimensions. 4 valeurs :

• visible : élément affiché (défaut)
• hidden : élément coupé s'il dépasse les limites définies par "height" et width"
• scroll : barres de défilement si l'élément dépasse les limités définies par "height" et width"
• auto : gestion automatique par le navigateur internet

Positionnement

float

Flottant. 3 valeurs :

• left : à gauche
• right : à droite
• none : non-flottant (défaut)

clear

Stopper un flottant. 4 valeurs :

• left : supprime l'effet d'un flottant précédent à gauche
• right : supprime l'effet d'un flottant précédent à droite
• both : supprime l'effet d'un flottant précédent, gauche ou droite
• none : ne supprimer rien (défaut)

position

Type de positionnement. 4 valeurs :

• absolute : position absolue par rapport au coin haut gauche de la page

• fixed : position fixe [ne fonctionne pas sous IE]
• relative : position relative par rapport à la position de l'élément en lui-même
• static : positionnement normal (défaut)

Pour absolute, fixed et relative, 4 valeurs (px, %, em) :

• • top : en haut
  • bottom : en bas
  • left : à gauche
  • right : à droite

z-index

Si le z-index du 1er élément est supérieur au second, alors le 1er élément sera affiché devant le 2nd (z-index : de 1 et 100)

Propriétés de listes

list-style-type

Type de liste

• liste non-ordonnée (<ul>)
  • disc : disque noir (défaut)
  • circle : cercle
  • square : carré
  • none : aucune puce
• liste ordonnée (<ol>)
  • decimal : 1, 2, 3, 4 (défaut)
  • decimal-leading-zero : 01, 02, 03, 04 [ne fonctionne pas sous IE]
  • upper-roman : I, II, III, IV (défaut)
  • lower-roman : i, ii, iii, iv (défaut)
  • upper-alpha : A, B, C, D (défaut)
  • lower-alpha : a, b, c, d (défaut)
  • lower-greek : numérotation grecque [ne fonctionne pas sous IE]
  • none : aucune puce

Propriétés de tableaux

border-collapse

Type de bordure. 2 valeurs :

• collapse : bordures collées
• separate : bordures séparées (défaut)

empty-cells

Cellules vides. 2 valeurs :

• show : cellules vides affichées
• collapse : cellules vides masquées (défaut)

caption-side

Position du titre (via la balise <caption>). 4 valeurs :

• top : haut du tableau
• bottom : bas du tableau
• left : gauche du tableau
• right : droite du tableau

Autres propriétés

cursor

Curseur de la souris. 7 valeurs :

• auto : curseur automatique (défaut)
• default : curseur standard
• pointer : curseur en forme de main
• text : curseur utilisé quand on pointe sur du texte
• help : curseur en forme de "?"
• move : curseur en forme de croix
• url : curseur personnalisé (.cur ou .ani)

8 valeurs en fonction de l'orientation du curseur :

• n-resize : flèche vers le nord
• ne-resize : flèche vers le nord-est
• e-resize : flèche vers l'est
• se-resize : flèche vers le sud-est
• s-resize : flèche vers le sud
• sw-resize : flèche vers le sud-ouest
• w-resize : flèche vers l'ouest
• nw-resize : flèche vers le nord-ouest

Pseudo-formats

:hover

Propriétés quand on pointe dessus [ne fonctionne que pour les liens sous IE]

:active

Au moment du clic

:focus

Lorsque le lien est sélectionné [ne fonctionne pas sous IE]

:visited

Lorsque la page a été vue

:first-letter

Change la 1ère lettre

:first-line

Change la 1ère ligne

:before

Change la partie avant le texte avec la valeur content

.question:before
{
content: "Question : ";
text-decoration: underline;
}

:after

Change la partie après le texte avec la valeur content

.question:after
{
content: " ?";
}