Rechercher
Boîte à outils
LANGUAGES

CSS

De Wiki_Libre

Cette page regroupe une liste non exhaustive de code CSS :

Sommaire

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: " ?";
}