Liste des proprits CSS

Proprits de formatage de texte

Police, taille et dcorations
Type Nom Valeurs possibles
Nom de police font-family
Indiquer les noms de polices possibles par ordre de prfrence :
font-family:police1, police2, police3;
Si le naviateur a la police 1, il l!utilisera" Sinon, il rearde s!il a la police 2, puis la police 3"""
#tilise$ des uillemets si le nom de la police comporte des espaces" %ssaye$ de tou&ours mettre comme
derni're police possible (serif( ou (sans-serif(
font-family: ()rial *lac+(, )rial, ,erdana, serif;
-aille du te.te font-si$e
Indiquer la taille du te.te, /lusieurs units sont possibles :
p. 0pi.els1
2 0pourcentae, 1332 4 normal1
em 0taille relative, 1"3 4 normal1
e. 0taille relative 5 la 6auteur de la lettre (.(" 1"3 4 normal1
nom de taille :
..-small : tr's tr's petit
.-small : tr's petit
small : petit
medium : moyen
lare : rand
.-lare : tr's rand
..-lare : tr's tr's rand
7ras font-8ei6t
bold : ras
bolder : plus ras
lighter : plus fin
normal : normal 0par dfaut1
Italique font-style
italic : italique
oblique : autre fa9on de mettre en italique
normal : normal 0par dfaut1
1:;
Type Nom Valeurs possibles
<coration te.t-decoration
underline : soulin
oerline : line au-dessus
line!through : barr
blin" : clinotant
none : normal 0par dfaut1
/etites capitales font-variant
small!caps : petites capitales
normal : normal 0par dfaut1
=apitales te.t-transform
uppercase : tout mettre en ma&uscules
lo#ercase : tout mettre en minuscules
capitali$e : dbut des mots en ma&uscules
none : normal 0par dfaut1
>a-proprit de police font
Indique$ dans n!importe quel ordre des valeurs possibles pour font-family, font-8ei6t, font-style, font-
si$e, font-variant
,ous n!?tes pas oblis de mettre une valeur pour c6acune de ces proprits
font:)rial, bold, 1@p.; mettra votre te.te en )rial, ras, 1@ pi.els
%lignement
Type Proprit Valeurs possibles
)linement 6ori$ontal te.t-alin
left : 5 auc6e 0par dfaut1
center : centr
right : 5 droite
&ustify : te.te &ustifi 0prend toute la lareur de la pae1
)linement vertical vertical-alin
) utiliser dans des cellules de tableau
top : en 6aut
middle : au milieu
bottom : en bas
Aauteur de line line-6ei6t Indiquer une valeur en pi.els 0p.1 ou en pourcentae 021
)lina te.t-indent
Indique$ une valeur en pi.els 0p.1 pour dfinir l!alina de vos pararap6es
,os pararap6es commenceront avec le retrait que vous ave$ indiqu
=sure 86ite-space
normal : le passae 5 la line est automatique 0par dfaut1
no#rap : pas de passae 5 la line automatique, sauf si une balise .A->B comme Cbr :D est prsente
pre : le passae 5 la line se fait comme le te.te saisi dans le code source 0comme balise .A->B CpreD1
2:;
Proprits de couleur et de fond
Couleur
Type Proprit Valeurs possibles
=ouleur de te.te color
Indiquer une couleur avec l!une des mt6odes suivantes :
- %n indiquant le nom de la couleur en anlais 0blac+, blue, reen, 86ite, red"""1
- %n indiquant la couleur en 6e.adcimal 0E==FG)11
- %n indiquant la couleur en H7* : rb 012G, 2II, 31
=ouleur de fond bac+round-color >?me c6ose que pour color, pour la couleur de fond du te.te
'mage de fond
Type Proprit Valeurs possibles
Imae de fond bac+round-imae
Indiquer l!url de l!imae 0notation absolue ou relative1
bac+round-imae:url0(imaes:fond"pn(1; :J Notation relative J:
bac+round-imae:url0(6ttp:::888"monsite"com:imaes:fond"pn(1; :J Notation absolue J:
Kond fi. bac+round-attac6ment
fixed : le fond reste fi.e quand on descend plus bas sur la pae
scroll : le fond dfile avec le te.te 0par dfaut1
Hptition du fond bac+round-repeat
repeat : le fond se rp'te 0par dfaut1
repeat!x : le fond ne se rp'te que sur une line, 6ori$ontalement
repeat!y : le fond ne se rp'te que sur une colonne, verticalement
no!repeat : le fond ne se rp'te pas, il n!est affic6 qu!une fois
/osition du fond bac+round-position
2 fa9ons de faire :
- %n notant une distance en p. ou 2, par rapport au coin en 6aut 5 auc6e
bac+round-position:I3p. 233p.; :J I3 p. 5 droite, 233p. en bas J:
- %n utilisant des valeurs prdfinies, une pour la verticale et une pour l!6ori$ontale :
top : en 6aut, verticalement
center : au milieu, verticalement
bottom : en bas, verticalement
left : 5 auc6e, 6ori$ontalement
center : au centre, 6ori$ontalement
right : 5 droite, 6ori$ontalement
bac+round-position : bottom ri6t; :J en bas 5 droite J:
>a-proprit de fond bac+round
Indiquer une ou plusieurs valeurs issues des proprits bac+round-imae, bac+round-repeat,
bac+round-attac6ment, bac+round-position
B!ordre des valeurs n!a pas d!importance et vous n!?tes pas oblis de mettre toutes les valeurs de ces
proprits 0au moins une suffit1
bac+round:url0(imaes:fond"pn(1 no-repeat fi.ed top ri6t;
:J Be fond fond"pn reste affic6 en 6aut 5 droite de l!cran et n!est pas rpt J:
3:;
Proprits des bo(tes
)imensions
Type Proprit Valeurs possibles
Bareur 8idt6 ,aleur en p., 2, ou encore (auto( 0valeur par dfaut, la lareur dpendra du te.te 5 l!intrieur1
Aauteur 6ei6t Idem
Bareur minimale min-8idt6 Indiquer une valeur, en pi.els par e.emple
Bareur ma.imale ma.-8idt6 Idem
Aauteur minimale min-6ei6t Idem
Aauteur ma.imale ma.-6ei6t Idem
*ordures
Type Proprit Valeurs possibles
%paisseur de la bordure border-8idt6 Indiquer une valeur en p.
=ouleur de la bordure border-color Indiquer une valeur de couleur
-ype de bordure border-style
none : pas de bordure 0par dfaut1
hidden : bordure cac6e
solid : line pleine
double : line double 0ncessite une taille de bordure de 3p. minimum1
dashed : en tirets
dotted : en pointills
inset : effet 3< (enfonc(
outset : effet 3< (surlev(
ridge : autre effet 3<
*ordure 5 auc6e border-left
Indiquer la couleur, l!paisseur et le type de bordure pour la bordure auc6e
border-left: 2p. inset blue; :J *ordure bleue de 2p. avec effet 3< (enfonc( J:
*ordure en 6aut border-top Idem
*ordure 5 droite border-ri6t Idem
*ordure en bas border-bottom Idem
>a-proprit de bordure border Indiquer l!apparence des bordures en 6aut, 5 droite, en bas et 5 auc6e"
F:;
+arges extrieures
Type Proprit Valeurs possibles
>are en 6aut marin-top Indiquer une valeur comme 23p., 1"Iem"""
>are 5 auc6e marin-left Idem
>are 5 droite marin-ri6t Idem
>are en bas marin-bottom Idem
>a-proprit de mare marin
Indiquer de 1 5 F valeurs 5 la suite:
- 1 valeur : c!est la mare pour le 6aut, le bas, la auc6e et la droite
- 2 valeurs : la premi're correspond 5 la mare pour le 6aut et le bas, la seconde pour la auc6e et la
droite
- 3 valeurs : la premi're correspond 5 la mare du 6aut, la seconde au. mares 5 auc6e et 5 droite, la
troisi'me 5 la mare du bas
- F valeurs : respectivement la mare du 6aut, de la droite, du bas, de la auc6e
%.emple, avec 2 valeurs :
marin:23p. Ip.; :J 23p. de mare en 6aut et en bas, Ip. 5 auc6e et 5 droite J:
+arges intrieures
Type Proprit Valeurs possibles
>are intrieure en 6aut paddin-top Indiquer une valeur comme 23p., 1"Iem"""
>are intrieure 5 auc6e paddin-left Idem
>are intrieure 5 droite paddin-ri6t Idem
>are intrieure en bas paddin-bottom Idem
>a-proprit de mare intrieure paddin
Indiquer de 1 5 F valeurs 5 la suite:
- 1 valeur : c!est la mare pour le 6aut, le bas, la auc6e et la droite
- 2 valeurs : la premi're correspond 5 la mare pour le 6aut et le bas, la seconde pour
la auc6e et la droite
- 3 valeurs : la premi're correspond 5 la mare du 6aut, la seconde au. mares 5
auc6e et 5 droite, la troisi'me 5 la mare du bas
- F valeurs : respectivement la mare du 6aut, de la droite, du bas, de la auc6e
I:;
Proprits de positionnement et d,affichage
%ffichage
Type Proprit Valeurs possibles
-ype d!lment display
none : l!lment ne sera pas affic6
bloc" : l!lment devient de type (bloc+( 0bloc, comme CpD1
inline : l!lment devient de type (inline( 0en line, comme CstronD1
list!item : l!lment devient de type (lment de liste 5 puce( 0comme CliD1
)ffic6ae visibility
hidden : masqu
isible : visible 0par dfaut1
display:none; fait compl'tement disparaLtre l!lment, tandis que visibility:6idden; masque l!lment,
qui continue quand m?me 5 prendre de la place sur l!cran
)ffic6er seulement une partie clip
Indiquer F valeurs comme ceci :
clip: rect0valeur1, valeur2, valeur3, valeurF1;
=ela permet de n!affic6er qu!une partie d!un lment
rect01 permet d!indiquer les coordonnes du rectanle qui sera affic6
Bes valeurs 1 5 F correspondent respectivement au. coins 6aut, droit, bas et auc6e du rectanle
Bimiter les dimensions overflo8
isible : tout l!lment sera affic6 0par dfaut1
hidden : l!lment sera coup s!il dpasse les limites dfinies par 6ei6t et 8idt6
Mn ne pourra pas voir la partie du te.te coupe
scroll : tout comme 6idden, l!lment sera coup s!il dpasse les limites
-outefois, cette fois le naviateur a&outera des barres de dfilement pour qu!on puisse voir la suite du
te.te
auto : c!est le naviateur qui dcide d!a&outer des barres de dfilement ou pas, en fonction des cas *ien
souvent, utiliser cette valeur revient 5 utiliser la valeur (scroll(
@:;
Positionnement
Type Proprit Valeurs possibles
Klottant float
left : flottant 5 auc6e
right : flottant 5 droite
none : pas de flottant 0par dfaut1
Stopper un flottant clear
left : supprime l!effet d!un flottant 5 auc6e prcdent
right : supprime l!effet d!un flottant 5 droite prcdent
both : supprime l!effet d!un flottant prcdent, qu!il soit 5 auc6e ou 5 droite
none : pas de suppression de l!effet du flottant 0par dfaut1
-ype de positionnement position
absolute : position absolue par rapport au coin en 6aut 5 auc6e
fixed : position fi.e 0fonctionne comme la position absolue1
B!lment reste 5 sa position m?me quand on descend plus bas dans la pae
relatie : position relative, par rapport 5 la position (normale( de l!lment
static : positionnement normal 0par dfaut1
/osition par rapport au 6aut top ,aleur en p., 2, em""" 5 utiliser pour un positionnement absolu, fi.e ou relatif
/osition par rapport au bas bottom Idem
/osition par rapport 5 auc6e left Idem
/osition par rapport 5 droite ri6t Idem
Mrdre d!affic6ae $-inde.
%n cas de positionnement absolu par e.emple, si 2 lments se c6evauc6ent, $-inde. permet d!indiquer
quel lment doit ?tre affic6 au-dessus de l!autre
Indique$ un nombre" /lus ce nombre est lev, plus l!lment sera affic6 en avant
/ar e.emple, si 2 lments sont positionns en absolu avec un $-inde. de 13 pour l!un et de 23 pour
l!autre, celui qui a un $-inde. de 23 est affic6 par-dessus
N:;
Proprits des listes
Type Proprit Valeurs possibles
-ype de liste list-style-type
/our les listes non ordonnes 0CulD1 :
disc : un disque noir 0par dfaut1
circle : un cercle
square : un carr
none : aucune puce ne sera utilise
/our les listes ordonnes 0ColD1 :
decimal : des nombres 1, 2, 3, F, I""" 0par dfaut1
decimal-leadin-$ero : des nombres commen9ant par $ro 031, 32, 33, 3F, 3I"""1
Ne fonctionne pas sur 'nternet -xplorer
upper-roman : numrotation romaine, en ma&uscules 0I, II, III, I,, ,"""1
lo8er-roman : numrotation romaine, en minuscules 0i, ii, iii, iv, v"""1
upper-alp6a : numrotation alp6abtique, en ma&uscules 0), *, =, <, %"""1
lo8er-alp6a : numrotation alp6abtique, en minuscules 0a, b, c, d, e"""1
lo8er-ree+ : numrotation recque
Ne fonctionne pas sur 'nternet -xplorer
/osition en retrait list-style-position
inside : sans retrait
outside : avec retrait 0par dfaut1
/uce personnalise list-style-imae
Indiquer l!url de l!imae qui servira de puce
list-style-imae: url0(imaes:puce"pn(1;
>a-proprit de liste list-style
,ous pouve$ runir les valeurs de list-style-type, list-style-position et list-style-imae" ,ous n!?tes pas
oblis de mettre toutes les valeurs, et l!ordre n!a pas d!importance"
list-style: inside square;

G:;
Proprits des tableaux
Type Proprit Valeurs possibles
-ype de bordure border-collapse
collapse : les bordures du tableau et des cellules sont mlanes
separate : les bordures du tableau et des cellules sont spares 0par dfaut1
=ellules vides empty-cells
sho# : les bordures des cellules vides sont affic6es
collapse : les cellules vides sont masques 0par dfaut1
/osition du titre caption-side
Indique la position du titre du tableau, dfini via la balise CcaptionD
top : en 6aut du tableau
bottom : en bas du tableau
left : 5 auc6e du tableau
right : 5 droite du tableau
%utres proprits
Type Proprit Valeurs possibles
=urseur de
souris
cursor
auto : curseur automatique 0par dfaut1
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un lien
text : curseur utilis quand on pointe sur du te.te
#ait : curseur utilis pour indiquer une attente 0sablier1
help : curseur en forme de point d!interroation, indiquant une aide
moe : curseur en forme de croi., indiquant un dplacement possible
n!resi$e : fl'c6e vers le nord
ne!resi$e : fl'c6e vers le nord-est
e!resi$e : fl'c6e vers l!est
se!resi$e : fl'c6e vers le sud-est
s!resi$e : fl'c6e vers le sud
s#!resi$e : fl'c6e vers le sud-ouest
#!resi$e : fl'c6e vers l!ouest
n#!resi$e : fl'c6e vers le nord-ouest
url : curseur personnalis, de type "cur ou "ani
cursor: url0(imaes:curseur"cur(1;
%.trait du Site du Oro 6ttp:::888"sitedu$ero"com
;:;