1 Propriétés de formatage de texte
Police, taille et décorations
| Type | Nom | Valeurs possibles |
|---|
| Nom de police
| font-family | Indiquer les noms de polices possibles par ordre de préférence. Code:
font-family: "Arial Black", Arial, Verdana, serif; |
| Taille du texte
| font-size | Indique la taille du texte.Valeurs possibles :
* px (pixels)
* % (pourcentage, 100% = normal)
* em (taille relative, 1.0 = normal)
* ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
nom de taille :
* xx-small : extra petit
* x-small : très petit
* small : petit
* medium : moyen
* large : large
* x-large : très large
* xx-large : extra large |
| Gras
| font-weight | bold : gras
bolder : plus gras
lighter : plus fin
normal : pas gras (par défaut)
Italique font-style italic : italique
oblique : autre façon de mettre en italique
normal : normal (par défaut) |
| Décoration
| text-decoration | underline : souligné
overline : ligne au-dessus
line-through : barré
blink : clignotant
none : normal (par défaut)
Petites capitales font-variant small-caps : petites capitales
normal : normal (par défaut) |
| Capitales
| text-transform | uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal (par défaut) |
Alignement
| Type | Nom | Valeurs possibles |
|---|
| Alignement horizontal
| text-align | left : à gauche (par défaut)
center : centré
right : à droite
justify : texte justifié (prend toute la largeur de la page) |
| Alignement vertical | vertical-align | s’utiliser dans des tableaux, ou dans des éléments
inline eux-mêmes contenus dans un élément inline.
top : en haut
middle : au milieu
bottom : en bas |
| Hauteur de ligne | line-height | Indiquer une valeur en pixels (px) ou en (%) |
| Alinéa
| text-indent | Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes.Les paragraphes commenceront avec le retrait que vous avez indiqué. |
| Césure | white-space | normal : le passage à la ligne est automatique (par défaut)
nowrap : pas de passage à la ligne automatique, sauf si une balise xHTML comme <br />
est présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source |
2. Propriétés de couleur et de fond
| Type | Nom | Valeurs possibles |
|---|
| Couleur de texte
| color | Indiquer une couleur avec l'une des méthodes suivantes :
1. En tapant le nom de la couleur en anglais (black, blue, green, white, red...).
2. En indiquant la couleur en hexadécimal (#CC48A1)
3. En indiquant la couleur en RGB : rgb (128, 255, 0) |
| Couleur de fond | background-color | Même fonctionnement que color. Mai pour définit la couleur de fond du texte |
| Image de fond
| background-image | Indiquer l'url de l'image (notation absolue ou relative) Code :
background-image:url("images/fond.png )
ou
background-image:url("http://www.monsite.com/images/fond.png"); |
| Fond fixé
| background-attachment | fixed : le fond reste fixe quand on descend plus bas sur la page
scroll : le fond défile avec le texte (par défaut) |
| Répétition du fond
| background-repeat | repeat : le fond se répète (par défaut)
repeat-x : le fond ne se répète que sur une ligne, horizontalement
repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois |
| Position du fond
| background-position | 2 façons de faire :
1. En notant une distance en px ou %, par rapport au coin en haut à gauche. Code :
background-position:20px 100px; /* 20 px à droite, 100px en bas */
2. En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale :
top : en haut, verticalement
center : au milieu, verticalement
bottom : en bas, verticalement
left : à gauche, horizontalement
center : au centre, horizontalement
right : à droite, horizontalement
Code :
background-position : bottom right; |
3. Propriétés des balises
| Type | Nom | Valeurs possibles |
|---|
| Largeur | width | Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur) |
| Hauteur | height | Idem |
| Largeur minimale | min-width | Indiquer une valeur, en pixels par exemple. |
| Largeur maximale | max-width | Idem |
| Hauteur minimale | min-height | Idem |
| Hauteur maximale | max-height | Idem |
| Marge en haut | margin-top | Indiquer une valeur comme 20px, 1.5em... |
| Marge à gauche | margin-left | Idem |
| Marge à droite | margin-right | Idem |
| Marge en bas | margin-bottom | Idem |
| Marge intérieure en haut | padding-top | Indiquer une valeur comme 20px, 1.5em... |
| Marge intérieure à gauche | padding-left | Idem |
| Marge intérieure à droite | padding-right | Idem |
| Marge intérieure en bas | padding-bottom | Idem |
| Epaisseur de la bordure | border-width | Indiquer une valeur en px. |
| Couleur de la bordure | border-color | Indiquer une valeur de couleur |
| Type de bordure
| border-style | none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D |
| Bordure à gauche
| border-left | Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple. Code :
border-left: 2px solid red; |
| Bordure en haut | border-top | Idem |
| Bordure à droite | border-right | Idem |
| Bordure en bas | border-bottom | Idem |
4. Propriétés de positionnement et d'affichage
| Type | Nom | Valeurs possibles |
|---|
| Type d'élément
| display | none : l'élément ne sera pas affiché
block : l'élément devient de type "block"
inline : l'élément devient de type "inline"
list-item : l'élément devient de type "élément de liste à puce" |
| Affichage | visibility | hidden : masqué
visible : visible (par défaut)
display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque seulement l'élément. |
| Limiter les dimensions | overflow | visible : tout l'élément sera affiché (par défaut).
hidden : l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée.
scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites. Le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte.
auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. |
| Flottant | float | left : flottant à gauche
right : flottant à droite
none : pas de flottant (par défaut) |
| Stopper un flottant | clear | left : supprime l'effet d'un flottant à gauche précédent
right : supprime l'effet d'un flottant à droite précédent
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut) |
| Type de positionnement
| position | absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas dans la page.
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal (par défaut) |
| Position par rapport au haut | top | Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif. |
| Position par rapport au bas | bottom | Idem |
| Position par rapport à gauche | left | Idem |
| Position par rapport à droite | right | Idem |
| Ordre d'affichage | z-index | En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre.
Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant. |
5. Propriétés des listes
| Type | Nom | Valeurs possibles |
|---|
| Type de liste | list-style-type | Pour les listes non ordonnées (<ul>) :
* disc : un disque noir (par défaut).
* circle : un cercle.
* square : un carré.
* none : aucune puce ne sera utilisée.
Pour les listes ordonnées (<ol>) :
* decimal : des nombres 1, 2, 3, 4,… (par défaut)
* decimal-leading-zero : des nombres commençant par zéro (01, 02, 03,...). Ne fonctionne pas sur Internet Explorer
* upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
* lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
* upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
* lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
* lower-greek : numérotation grecque. Ne fonctionne pas sur Internet Explorer |
| Position en retrait | list-style-position | inside : sans retrait
outside : avec retrait (par défaut) |
| Puce personnalisée | list-style-image | Indiquer l'url de l'image qui servira de puce. Code :
list-style-image: url("images/puce.png"); |
6. Propriétés des tableaux
| Type | Nom | Valeurs possibles |
|---|
| Type de bordure | border-collapse | collapse : les bordures du tableau et des cellules sont mélangées.
separate : les bordures du tableau et des cellules sont séparées (par défaut). |
| Cellules vides | empty-cells | show : les bordures des cellules vides sont affichées.
collapse : les cellules vides sont masquées (pardéfaut). |
| Position du titre
| caption-side | Indique la position du titre du tableau, défini via la balise <caption>
top : en haut du tableau
bottom : en bas du tableau
left : à gauche du tableau
right : à droite du tableau |
7. Propriétés du Curseur de souris
| Type | Nom | Valeurs possibles |
|---|
| Curseur de souris
| cursor | auto : curseur automatique (par défaut)
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un lien
text : curseur utilisé quand on pointe sur du texte
wait : curseur sous forme desablier
progress : standard + sablier
e-resize : flèche vers l'est
w-resize : flèche vers l'ouest
n-resize : flèche vers le nord
s-resize : flèche vers le sud
sw-resize : flèche vers le sud-ouest
ne-resize : flèche vers le nord-est
move : curseur en forme de croix, indiquant un déplacement possible
se-resize : flèche vers le sud-est
help : curseur en forme de point d'interrogation, indiquant une aide
nw-resize : flèche vers le nord-ouest
url : curseur personnalisé, de type .cur ou .ani. Code :
cursor: url("images/curseur.cur"); |
Retourner au haut de la page..
|
et 
Annuaire généraliste
Glaneur.fr
royaume