Renvoie au chapitre d'origine SELFHTML Renvoie au chapitre d'origine Aides à la navigation
SELFHTML

Sommaire de référence: CSS
Page d'information: vue d'ensemble

vers le bas Remarque
vers le bas Unités de mesure et mentions de couleur
vers le bas Formats globaux
vers le bas Formatage direct d'éléments
vers le bas Propriétés CSS: formatage d'écriture
vers le bas Propriétés CSS: alignement/contrôle de paragraphe
vers le bas Propriétés CSS: marges extérieures/espace
vers le bas Propriétés CSS: espace intérieur
vers le bas Propriétés CSS: bordures
vers le bas Propriétés CSS: couleurs et images d'arrière-plan
vers le bas Propriétés CSS: formatage de listes
vers le bas Propriétés CSS: formatage de tableaux
vers le bas Propriétés CSS: positionnement et affichage d'éléments
vers le bas Propriétés CSS: fenêtre d'affichage
 vers le bas 

Remarque

Le sommaire de référence CSS n'est pas conçu pour les débutants! Le sommaire de référence CSS s'adresse aux utilisateurs qui s'y connaissent déjà en CSS et qui désirent avoir lors de leur travail quotidien une vue générale de la syntaxe et des éléments du langage importants dans la pratique (Le sommaire de référence ne prétend pas être exhaustif!). Le sommaire de référence est tout indiqué comme aide à la navigation. À partir des courts descriptifs, des liens du type Autre page d'information description mènent aux explications détaillées dans la documentation.

 vers le hautvers le bas 

Unités de mesure et mentions de couleur

Mentions numériques
absolues

 pt Point. Unité de mesure typographique. 1 point correspond à 1/72 de pouce. Autre page d'information description
pc Pica. Unité de mesure typographique. 1 pica correspond à 12 points.
in Pouce. 1 pouce correspond à 2.54 centimètres. Le signe décimal pour les chiffres après la "virgule" est le point.
mm Millimètre.
cm Centimètre. Le signe décimal pour les chiffres après la "virgule" est le point.

Mentions numériques
relatives

 em Relatif à la taille de police de l'élément. Appliqué à la taille de police, relatif à la taille de police de l'élément parent. Le signe décimal pour les chiffres après la "virgule" est le point. Autre page d'information description
ex Relatif à la hauteur de la lettre x. Appliqué à la taille de police, relatif à la taille de police de la lettre x de l'élément parent . Le signe décimal pour les chiffres après la "virgule" est le point.
px Pixel. Relatif d'un mode de sortie à l'autre, absolu par rapport à un seul et unique mode de sortie.
% Pourcentage. relatif selon la propriété CSS à la taille propre à l'élément ou bien à celle de l'élément parent ou à un contexte général.

Mentions de couleur

 #XXXXXX Mention hexadécimale RGB comme pour HTML. Autre page d'information description
nom de couleur comme pour HTML
rgb(R,G,B) Valeurs RGB décimales (0-255,0-255,0-255)
rgb(%,%,%) Répartition RGB en pourcentage (0-100%,0-100%,0-100%)

 
 vers le hautvers le bas 

Formats globaux

Formats pour
les éléments

 Élément { propriété CSS:valeur; ...}
Pour Élément noter le nom d'un élément HTML comme h1 ou bien td ou encore * ("tous les éléments").
Pour propriété CSS noter une propriété telle que font-size ou background-color.
Pour valeur noter une valeur respectivement permise.
Autant de notations de propriété CSS:valeur; qu'il est souhaité sont permises dans les parenthèses accolades.
Autre page d'information description
 

Formats pour
les repères
HTML imbriqués

 élément1 élément2 { propriété CSS:valeur; ...}
élément1 > élément2 { propriété CSS:valeur; ...}
élément * élément2 { propriété CSS:valeur; ...}
élément1 + élément2 { propriété CSS:valeur; ...}
Pour élément1 et élément2 noter quelque chose comme h3 et var.
Les définitions de formats s'appliquent alors pour les éléments var dans les éléments h3.
Ou bien noter pour élément1 ou élément2 des caractères de remplacement * ("tous les éléments").
Un espace entre élément1 et élément2 signifie: peu importe où est placé élément2 dans la structure d'éléments de élément1.
> signifie: seulement quand élément2 est situé un niveau sous élément1 dans la structure d'éléments.
* signifie: quand élément2 est situé au moins deux niveaux sous élément1 dans la structure d'éléments.
+ signifie: quand élément2 est situé au même niveau que élément1 et suit immédiatement élément1 dans la structure d'éléments.
Autre page d'information description
 

Formats liés
à l'attribut

 élément[nom d'attribut] { propriété CSS:valeur; ...}
élément[nom d'attribut=valeur d'attribut] { propriété CSS:valeur; ...}
élément[nom d'attribut~=valeur d'attribut] { propriété CSS:valeur; ...}
élément[nom d'attribut=valeur d'attribut] { propriété CSS:valeur; ...}
Pour élément noter le nom d'un élément HTML comme a ou bien td ou encore * ("tous les éléments").
Pour nom d'attribut noter quelque chose comme href ou bien align.
a[href=index.htm] concerne par exemple les éléments avec <a href="index.htm"> </a>.
img[alt~=Hambourg] concerne par exemple les éléments avec <img src="image.jpg" alt="Regard de Michel sur Hambourg">.
p[lang|=en] concerne par exemple aussi les éléments avec <p lang="en-US">...</p>.
Autre page d'information description
 

Formats pour
les classes

 élément.nom de classe { propriété CSS:valeur; ...}
*.nom de classe { propriété CSS:valeur; ...}
.nom de classe { propriété CSS:valeur; ...}
Pour élément noter le nom d'un élément HTML comme strong ou bien table ou encore * ("tous les éléments"). L'astérisque peut aussi être omis.
Pour nom de classe noter un nom.
Concerne tous les éléments HTML avec <élément class="nom de classe">...</élément>.
.grand concerne par exemple <p class="grand">...</p>.
Autre page d'information description
 

Formats
indépendants

 #Nom { propriété CSS:valeur; ...}
élément#Nom { propriété CSS:valeur; ...}
Pour Nom noter un nom.
Concerne tous les éléments HTML avec <élément id="Nom">...</élément>.
#entête concerne par exemple <div id="entête">...</div>.
Pour élément noter le nom d'un élément HTML comme h2 ou pre.
p#entête concerne par exemple <p id="entête">...</p> mais ne s'applique pas à <div id="entête">...</div>.
Autre page d'information description
 

Pseudo-formats

 a:link { propriété CSS:valeur; ... }    /* cibles non encore visitées */
a:visited { propriété CSS:valeur; ... } /* cibles visitées */
a:hover { propriété CSS:valeur; ... }   /* Liens pour "MouseOver" */
a:active { propriété CSS:valeur; ... }  /* Liens cliqués */
a:focus { propriété CSS:valeur; ... }   /* Liens qui reçoivent la zone de saisie active */
 
élément:first-line { propriété CSS:valeur; ... }   /* première ligne */
élément:first-letter { propriété CSS:valeur; ... } /* première lettre */
 
élément:before { content:valeur; } /* insérer avant l'élément */
élément:after { content:valeur; }  /* insérer après l'élément */
Avec content:valeur noter pour valeur entre guillemets un texte statique ou url(URI), sachant que URI peut référencer un graphique ou une numérotation automatique comme ci-après:
content:counter(Nom); conter-increment(Nom);
Noter ici pour Nom un nom pour le compteur.
Autre page d'information description
 

 
 vers le hautvers le bas 

Formatage direct d'éléments

CSS dans les éléments HTML

 <élément style="propriété CSS:valeur; ...">...</élément>
Pour élément noter le nom d'un élément HTML comme p ou bien table ou encore blockquote.
Pour propriété CSS noter une propriété comme font-size ou background-color.
Pour valeur noter une valeur respectivement permise.
Autant de notations de propriété CSS:valeur; qu'il est souhaité sont permises dans l'attribut style.
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: formatage d'écriture

Famille de police

 font-family:police1,police2,...;
Pour police1 noter le nom de la police désirée.
Pour police2 et autres, noter les noms des polices en alternative désirées.
Autre page d'information description
 

Style de police

 font-style:valeur;
Pour valeur noter une des valeurs suivantes:
italic = style de police en italique.
oblique = style de police en italique.
normal = style de police normal.
Autre page d'information description
 

Variante de police

 font-variant:valeur;
Pour valeur noter une des valeurs suivantes:
small-caps = petites capitales.
normal = variante de police normale.
Autre page d'information description
 

Taille de police

 font-size:valeur;
Pour valeur noter une mention numérique comme 12pt, 14px ou bien 1.2em ou encore une des valeurs suivantes:
xx-small = minuscule.
x-small = très petit.
small = petit.
medium = moyen.
large = grand.
x-large = très grand.
xx-large = géant.
wmaller = visiblement plus petit que normal.
larger = visiblement plus grand que normal.
Autre page d'information description
 

Poids de police

 font-weight:valeur;
Pour valeur noter une des valeurs suivantes:
bold = gras.
bolder = très gras.
lighter = plus fin.
100,200,300,400,500,600,700,800,900 = très fin (100) jusqu'à très gras (900).
normal = poids normal de police.
Autre page d'information description
 

Étirement de
la police

 font-stretch:valeur;
Pour valeur noter une des valeurs suivantes:
wider = plus large que normal.
narrower = plus serré que normal.
condensed = condensé.
semi-condensed = à moitié condensé.
extra-condensed = très condensé.
ultra-condensed = extrêmement condensé.
expanded = étendu.
semi-expanded = à moitié étendu.
extra-expanded = très étendu.
ultra-expanded = extrêmement étendu.
normal = étirement normal.
Autre page d'information description
 

Police en général

 font:valeur;
Pour valeur noter un mélange des valeurs permises pour font-family, font-style, font-variant, font-size, font-weight et line-height. Séparer les différentes valeurs par des espaces, l'ordre est égal.
par exemple font:Times 13px bold;
Autre page d'information description
 

Espace des mots

 word-spacing:valeur;
Pour valeur noter une mention numérique comme 1mm ou bien 2px, mais pas de valeur en pourcentage.
Autre page d'information description
 

Espace des signes

 letter-spacing:valeur;
Pour valeur noter une mention numérique comme 1mm ou bien 2px, mais pas de valeur en pourcentage.
Autre page d'information description
 

Décoration du texte

 text-decoration:valeur;
Pour valeur noter une des valeurs suivantes:
underline = souligné.
overline = ligne au dessus.
line-through = barré.
blink = clignotant.
none = normal (pas de décoration du texte).
Autre page d'information description
 

Transformation du texte

 text-transform:valeur;
Pour valeur noter une des valeurs suivantes:
capitalize = début des mots en majuscules.
uppercase = tout en majuscules.
lowercase = tout en minuscules.
none = normal (pas de transformation du texte).
Autre page d'information description
 

Couleur du texte

 color:valeur;
Pour valeur noter une mention de couleur comme #FFCC99, red ou bien rgb(96,255,0).
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: alignement/contrôle de paragraphe

Retrait du texte

 text-indent:valeur;
Pour valeur noter une mention numérique comme par exemple 20px ou 2.5cm.
Autre page d'information description
 

Interligne

 line-height:valeur;
Pour valeur noter une mention numérique comme par exemple 20px ou bien 120%. Les mentions en pourcentage se rapportent à la taille de police.
Autre page d'information description
 

Alignement
vertical

 vertical-align:valeur;
Pour valeur noter une des valeurs suivantes:
top = aligner en haut.
middle = aligner au milieu.
bottom = aligner en bas.
baseline = aligner sur la ligne de base (ou en bas s'il n'y a pas de ligne de base).
sub =mettre en indice (sans réduire la taille de la police).
super = mettre en exposant (sans réduire la taille de la police).
text-top = aligner sur le bord supérieur de l'écriture.
text-bottom = aligner sur le bord inférieur de l'écriture.
Autre page d'information description
 

Alignement
horizontal

 text-align:valeur;
Pour valeur noter une des valeurs suivantes:
left = aligner à gauche (réglage par défaut).
center = centrer.
right = aligner à droite.
justify = justifier.
Autre page d'information description
 

Césure

 white-space:valeur;
Pour valeur noter une des valeurs suivantes:
normal = passage à la ligne automatique (comme pour tous les les repères HTML à l'exception de pre et de nowrap).
pre = césure comme la saisie est faite dans l'éditeur (donc comme pour l'élément pre).
nowrap = Pas de césure automatique, la césure est possible par les repères HTML correspondants.
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: marges extérieures/espace

Espace/marge
du haut

 margin-top:valeur;
Pour valeur noter une valeur numérique comme 2.3cm ou bien 24pt.
Autre page d'information description
 

Espace/marge
du bas

 margin-bottom:valeur;
Pour valeur noter une valeur numérique comme 30px ou bien 25mm.
Autre page d'information description
 

Espace/marge
à gauche

 margin-left:valeur;
Pour valeur noter une valeur numérique comme 1.2cm ou bien 40px.
Autre page d'information description
 

Espace/marge
à droite

 margin-right:valeur;
Pour valeur noter une valeur numérique comme 1.25cm ou bien 65px.
Autre page d'information description
 

Espace/marge
en général

 margin:valeur;
Pour valeur noter une ou plusieurs valeurs pour margin-top, margin-bottom, margin-left et margin-right.
Une mention signifie: les quatre bords reçoivent le même espace/ la même marge.
Deux mentions = la première pour le haut et le bas, la deuxième pour la droite et la gauche.
Trois mentions = la première pour le haut, la deuxième pour la droite et la gauche, la troisième pour le bas.
Quatre mentions = la première pour le haut, la deuxième pour la droite, la troisième pour le bas, la quatrième pour la gauche.
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: espace intérieur

Espace intérieur
en haut

 padding-top:valeur;
Pour valeur noter une valeur numérique comme 3px ou 15pt.
Autre page d'information description
 

Espace intérieur
en bas

 padding-bottom:valeur;
Pour valeur noter une valeur numérique comme 0.7cm ou 3em.
Autre page d'information description
 

Espace intérieur
à gauche

 padding-left:valeur;
Pour valeur noter une valeur numérique comme 30px ou 1.4cm.
Autre page d'information description
 

Espace intérieur
à droite

 padding-right:valeur;
Pour valeur noter une valeur numérique comme 25mm ou 0.4in.
Autre page d'information description
 

Espace intérieur
en général

 padding:valeur;
Pour valeur noter une valeur numérique comme 20px ou 0.4cm. Les quatre côtés de l'élément reçoivent le même espace intérieur.
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: bordures

Épaisseur de
la bordure

 border-width:valeur;          /* tous les côtés */
border-top-width:valeur;      /* seulement en haut */
border-bottom-width:valeur;   /* seulement en bas */
border-left-width:valeur;     /* seulement à gauche */
border-right-width:valeur;    /* seulement à droite */
Pour valeur noter une valeur numérique comme 2px ou bien 1mm ou encore noter une des valeurs suivantes:
thin = fine.
medium = moyenne.
thick = épaisse.
Autre page d'information description
 

Couleur de la bordure

 border-color:valeur;          /* tous les côtés */
border-top-color:valeur;      /* seulement en haut */
border-bottom-color:valeur;   /* seulement en bas */
border-left-color:valeur;     /* seulement à gauche */
border-right-color:valeur;    /* seulement à droite */
Pour valeur noter une mention de couleur comme #FFCC99, red ou rgb(96,255,0).
Autre page d'information description
 

Type de la bordure

 border-style:valeur;          /* tous les côtés */
border-top-style:valeur;      /* seulement en haut */
border-bottom-style:valeur;   /* seulement en bas */
border-left-style:valeur;     /* seulement à gauche */
border-right-style:valeur;    /* seulement à droite */
Pour valeur noter une des valeurs suivantes:
none = pas de bordure (ou bien bordure transparente),
hidden = pas de bordure (ou bien bordure transparente),
dotted = en pointillés.
dashed = en tirets.
solid = pleine.
double = double et pleine.
groove = en relief.
ridge = effet 3D.
inset = effet 3D.
outset = effet 3D.
Autre page d'information description
 

Bordure
en général

 border:valeur;          /* tous les côtés */
border-top:valeur;      /* seulement en haut */
border-bottom:valeur;   /* seulement en bas */
border-left:valeur;     /* seulement à gauche */
border-right:valeur;    /* seulement à droite */
Pour valeur noter respectivement trois mentions avec les valeurs appropriées pour border-style, border-width et border-color en les séparant par des espaces.
par exemple border:3px solid #FFCC99; ou bien border:bottom:1cm inset red;.
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: couleurs et images d'arrière-plan

Couleur d'arrière-plan

 background-color:valeur;
Pour valeur noter une mention de couleur comme #0000CC, fuchsia ou rgb(50%,60%,80%).
Autre page d'information description
 

Image d'arrière-plan

 background-image:url(URI);
Pour URI noter une adresse Web ou la cible avec ou sans chemin où se trouve le fichier graphique désiré (GIF ou bien JPEG).
Autre page d'information description
 

Effet de répétition

 background-image:url(URI); background-repeat:valeur;
Pour valeur noter une des valeurs suivantes.
repeat = répéter (réglage par défaut).
repeat-x = ne répéter que sur une "ligne" horizontalement.
repeat-y = ne répéter que sur une "colonne" verticalement.
no-repeat = ne pas répéter, n'afficher que comme image unique.
Autre page d'information description
 

Effet de filigrane

 background-image:url(URI); background-attachment:valeur;
Pour valeur noter une des valeurs suivantes:
scroll = défile avec le texte (réglage par défaut).
fixed = l'image d'arrière-plan reste fixe.
Autre page d'information description
 

Position
d'arrière-plan

 background-image:url(URI); background-position:valeur;
Pour valeur noter soit deux mentions numériques pour fixer le coin de départ supérieur gauche du graphique par rapport au coin supérieur gauche de l'élément,
par exemple 10px 30px.
soit pour valeur noter une des valeurs suivantes:
top = aligné en haut verticalement.
center = centré horizontalement.
middle = au milieu verticalement.
bottom = aligné en bas verticalement.
left = aligné à gauche horizontalement.
right = = aligné à droite horizontalement.
Autre page d'information description
 

Arrière-plan
(en général)

 background:valeur;
Pour valeur noter une mention réunissant background-image, background-repeat, background-attachment et background-position.
par exemple background:url(../images/background.gif) repeat-x fixed;
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: formatage de listes

Type de
représentation

 list-style-type:valeur;
Pour valeur noter une des valeurs suivantes:
decimal = pour les listes ol: numérotation 1.,2.,3.,4. etc...
lower-roman = pour les listes ol: numérotation i.,ii.,iii.,iv. etc...
wpper-roman = pour les listes ol: numérotation I.,II.,III.,IV. etc...
lower-alpha = pour les listes ol: numérotation a.,b.,c.,d. etc...
upper-alpha = pour les listes ol: numérotation A.,B.,C.,D. etc...
lower-greek = pour les listes ol: numérotation grecque: α., β., γ., δ. etc...
hebrew = pour les listes ol: numérotation hébraïque
decimal-leading-zero = pour les listes ol: numérotation 01.,02.,03.,04., ... 98.,99. etc...
cjk-ideographic = pour les listes ol: numérotation avec des idéogrammes
hiragana = pour les listes ol: numérotation en japonais (a, i, u, e, o, ka, ki, ... )
katakana = pour les listes ol: numérotation en japonais (A, I, U, E, O, KA, KI, ... )
hiragana-iroha = pour les listes ol: numérotation en japonais (i, ro, ha, ni, ho, he, to, ... )
katakana-iroha = pour les listes ol: numérotation en japonais (I, RO, HA, NI, HO, HE, TO, ... )
disc = pour les listes ul: : rond plein comme puce.
circle = pour les listes ul: puce ronde.
square = pour les listes ul: puce rectangulaire.
none = pas de puce, pas de numérotation.
Autre page d'information description
 

Retrait des listes

 list-style-position:valeur;
Pour valeur noter une des valeurs suivantes:
inside = sans retrait.
outside = avec retrait (réglage par défaut).
Autre page d'information description
 

Graphiques
de puces
personnalisés

 list-style-image:url(URI);
Pour URI noter une adresse Web ou la cible avec ou sans chemin où se trouve le fichier graphique désiré (GIF ou bien JPEG).
Autre page d'information description
 

Représentation
de liste
(en général)

 list-style:valeur;
Pour valeur noter une mention réunissant list-style-type, list-style-position et list-style-imgage. Séparer les mentions par des espaces.
z.B. list-style:lower-roman inside;
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: formatage de tableaux

Position d'un
titre de tableau

 caption-side:valeur;
Se réfère normalement à l'élément caption. Pour valeur noter une des valeurs suivantes:
top = en haut du tableau.
bottom = sous le tableau.
left = à côté du tableau à gauche.
right = à côté du tableau à droite.
Autre page d'information description
 

largeurs fixe/variable

 table-layout:valeur;
Se réfère normalement à l'élément table. Pour valeur noter une des valeurs suivantes.
fixed = Les mentions de largeur priment sur le contenu des cellules (Le contenu est coupé en cas de besoin).
auto = Le contenu des cellules prime sur les mentions de largeur (par défaut).
Autre page d'information description
 

Modèle de bordure

 border-collapse:valeur;
Se réfère normalement à l'élément table. Pour valeur noter une des valeurs suivantes.
separate = les différentes bordures de cellules de tableau ne coïncident pas.
collapse = les différentes bordures de cellules de tableau coïncident.
Autre page d'information description
 

Espace entre les bordures
quadrillage

 border-spacing:valeur;
Se réfère normalement à l'élément table. Pour valeur noter une mention numérique comme 3mm ou 10px.
Autre page d'information description
 

Affichage de
cellules vides

 empty-cells:valeur;
Se réfère normalement à l'élément table. Pour valeur noter une des valeurs suivantes:
show = Les bordures de cellule des cellules vides sont affichées.
collapse = L'affichage des bordures de cellule de cellules vides est empêché (réglage par défaut).
Autre page d'information description
 

Soutien de la sortie
vocale de tableau

 speak-header-cell:valeur;
Se réfère normalement à l'élément th. Pour valeur noter une des valeurs suivantes:
always = répéter le contenu de la cellule d'entête avant chacune de ses cellules de données.
once = reproduire une seule fois le contenu de la cellule d'entête (réglage normal)..
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: positionnement et affichage d'éléments

Mode de positionnement

 position:valeur;
Pour valeur noter une des valeurs suivantes.
absolute = positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.
fixed = positionnement absolu, mesuré à partir du bord de l'élément parent; reste fixe lors du défilement.
relative = positionnement relatif mesuré à partir de la position normale de l'élément proprement dit.
static = Pas de positionnement spécial, flux normal de l'élément (réglage par défaut).
Autre page d'information description
 

Position de départ
à partir du haut

 top:valeur;
En relation avec le positionnement relatif ou absolu, noter pour valeur une mention numérique comme 100px ou 2cm.
Autre page d'information description
 

Position de départ
à partir de la gauche

 left:valeur;
En relation avec le positionnement relatif ou absolu, noter pour valeur une mention numérique comme 18mm ou bien 30px.
Autre page d'information description
 

Position de départ
à partir du bas

 bottom:valeur;
En relation avec le positionnement relatif ou absolu, noter pour valeur une mention numérique comme 150px ou bien 1in.
Autre page d'information description
 

Position de départ
à partir de la droite

 right:valeur;
En relation avec le positionnement relatif ou absolu, noter pour valeur une mention numérique comme 4.5cm ou 300px.
Autre page d'information description
 

Largeur

 width:valeur;
Pour valeur noter une mention numérique comme 120mm ou bien 580px ou encore auto (réglage par défaut).
Autre page d'information description
 

Largeur minimale

 min-width:valeur;
Pour valeur noter une mention numérique comme 400px ou bien 3cm.
Autre page d'information description
 

Largeur maximale

 max-width:valeur;
Pour valeur noter une mention numérique comme 600px ou 3.8in. Emploi judicieux en relation avec overflow:
Autre page d'information description
 

Hauteur

 height:valeur;
Pour valeur noter une mention numérique comme 300px ou bien 4cm ou encore auto (réglage par défaut).
Autre page d'information description
 

Hauteur minimale

 min-height:valeur;
Pour valeur noter une mention numérique comme 35mm ou 500px.
Autre page d'information description
 

Hauteur maximale

 max-height:valeur;
Pour valeur noter une mention numérique comme 250px ou 1cm. Emploi judicieux en relation avec overflow:
Autre page d'information description
 

Passage d'élément
au contenu
trop important

 overflow:valeur;
Pour valeur noter une des valeurs suivantes:
visible = L'élément sera agrandi de manière à ce que son contenu soit complètement visible .
hidden = L'élément sera coupé s'il dépasse les limites.
scroll = L'élément sera coupé s'il dépasse les limites. Le navigateur WWW doit pourtant proposer des barres de défilement, un peu comme dans une fenêtre cadre incorporée.
auto = Le navigateur WWW doit décider an cas de conflit, comment l'élément sera affiché. Proposer des barres de défilement si nécessaire; lui est ici également permis.
Autre page d'information description
 

Direction d'écriture

 direction:valeur;
Pour valeur noter une des valeurs suivantes:
ltr = de gauche à droite.
rtl = de droite à gauche.
Autre page d'information description
 

Cours du texte

 float:valeur;
Pour valeur noter une des valeurs suivantes:
left = L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent.
right = L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent.
none = L'élément ne sera pas entouré (réglage normal).
Autre page d'information description
 

Suite pour
le cours du texte

 clear:valeur;
Pour valeur noter une des valeurs suivantes:
left = impose pour float:left la poursuite dessous.
right = impose pour float:right la poursuite dessous.
both = = impose dans chaque cas la poursuite dessous.
none = n'impose pas de poursuite dessous. (réglage normal).
Autre page d'information description
 

Position de la couche
en cas de
superposition

 z-index:valeur;
Emploi judicieux pour les éléments positionnés de façon absolue qui se chevauchent. Pour valeur noter un nombre. Plus le nombre est élevé plus l'élément sera placé vers l'avant, plus il est bas plus l'élément sera placé derrière en arrière plan.
Autre page d'information description
 

Mode d'affichage
sans prendre de place

 display:valeur;
Pour valeur noter une des valeurs suivantes.
block = impose un bloc - l'élément crée un nouvelle ligne.
inline = impose l'affichage dans le texte - l'élément est affiché dans le cours du texte.
list-item = comme block, mais précédé d'une puce comme dans une liste énumérative.
marker = déclare du texte généré automatiquement pour l'élément.
run-in et compact = font en sorte que l'élément est représenté, suivant le contexte comme élément de bloc ou comme élément incorporé.
none = = L'élément n'est pas affiché et aucune place ne lui sera réservée.
 
De plus - Pour les tableaux d'éléments étrangers aux tableaux (par exemple pour XML):
table = L'élément contient des éléments-enfant rangés sous forme de tableau et crée une nouvelle ligne. A le même effet que l'élément table en HTML.
inline-table = L'élément contient des éléments-enfant rangés sous forme de tableau et est affiché dans le cours du texte. A le même effet que l'élément table en HTML, mais incorporé.
table-row = L'élément contient des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément tr en HTML.
table-row-group = L'élément contient un groupe d'éléments avec des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément tbody en HTML.
table-header-group = L'élément contient un groupe d'éléments avec des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément thead en HTML.
table-footer-group = L'élément contient un groupe d'éléments avec des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément tfoot en HTML.
table-column = L'élément représente un groupe d'éléments qui forment une colonne. A le même effet que l'élément col en HTML.
table-column-group = = L'élément représente un groupe d'éléments avec la propriété table-cell. L'élément représente une cellule de tableau. A le même effet que l'élément td en HTML (également pour les éléments th)
table-caption = L'élément représente un titre de tableau. A le même effet que l'élément caption en HTML (également pour les éléments th).
Autre page d'information description
 

Affichage avec
réservation de place

 visibility:valeur;
Pour valeur noter une des valeurs suivantes:
hidden = Le contenu de l'élément est d'abord caché (non affiché).
visible = = Le contenu de l'élément est d'abord affiché (réglage normal).
Autre page d'information description
 

Limiter le
domaine d'affichage

 clip:rect(valeur1 valeur2 valeur3 valeur4);
Pour valeur1 noter la valeur pour "le haut", mesurée à partir de la limite supérieure de l'élément par exemple 0px
Pour valeur2 noter la valeur pour "la droite", mesurée à partir de la limite gauche de l'élément par exemple 130px
Pour valeur3 noter la valeur pour "le bas", mesurée à partir de la limite supérieure de l'élément par exemple 130px
Pour valeur4 noter la valeur pour "la gauche", mesurée à partir de la limite gauche de l'élément par exemple 0px
Autre page d'information description
 

 
 vers le hautvers le bas 

Propriétés CSS: fenêtre d'affichage

Curseurs

 cursor:valeur;
L'élément affecté reçoit, lorsqu'on le parcourt avec la souris, un autre curseur. Pour valeur noter une des valeurs suivantes:
auto = curseur automatique (réglage normal).
default = curseur standard indépendant de la plate-forme.
crosshair = curseur de la forme d'une simple croix.
pointer = curseur de la forme d'une flèche.
move = curseur de la forme d'une croix signalant la possibilité de déplacer l'élément.
n-resize = curseur de la forme d'une flèche pointant vers le haut (n = nord).
ne-resize = curseur de la forme d'une flèche pointant vers le haut à droite (ne = nord-est).
e-resize = curseur de la forme d'une flèche pointant vers la droite (e = est).
se-resize = curseur de la forme d'une flèche pointant vers le bas à droite (se = sud-est).
s-resize = curseur de la forme d'une flèche pointant vers le bas (s = sud).
sw-resize = curseur de la forme d'une flèche pointant vers le bas à gauche (sw = sud-ouest).
w-resize = curseur de la forme d'une flèche pointant vers la gauche (w = ouest).
nw-resize = curseur de la forme d'une flèche pointant vers le haut à gauche (nw = nord-ouest).
text = curseur sous une forme qui symbolise du texte normal.
wait = = curseur sous la forme d'un symbole signalant l'attente.
help = curseur sous forme d'un symbole qui signale de l'aide pour l'élément.
url([URI]) = curseur au choix, [URI] doit être un graphique GIF ou JPG.
Autre page d'information description
 

Barres de défilement
(Explorer Internet)

 scrollbar-base-color:valeur;
scrollbar-3dlight-color:valeur;
scrollbar-arrow-color:valeur;
scrollbar-darkshadow-color:valeur;
scrollbar-face-color:valeur;
scrollbar-highlight-color:valeur;
scrollbar-shadow-color:valeur;
scrollbar-track-color:valeur;
Applicable sur les éléments body et textarea. Pour valeur noter une mention de couleur comme #0000CC, fuchsia ou rgb(50%,60%,80%).
Elles signifient:
scrollbar-base-color = couleur de base des barres de défilement
scrollbar-3dlight-color = couleur pour les effets de relief (3D)
scrollbar-arrow-color = couleur pour les pointeurs de défilement
scrollbar-darkshadow-color = couleur pour les ombres
scrollbar-face-color = couleur pour la surface
scrollbar-highlight-color = couleur pour le bord haut et le bord gauche
scrollbar-shadow-color = couleur pour le bord droit et le bord du bas
scrollbar-track-color = couleur pour la barre de défilement non-cachée par le pointeur de défilement
Autre page d'information description
 

 
 vers le haut
page suivante Autre page d'information Index du contenu
page précédente Autre page d'information Sommaire de référence: HTML
 
Renvoie au chapitre d'origine SELFHTML Renvoie au chapitre d'origine Aides à la navigation

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org