IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Glossaire des propriétés CSS

Glossaire des proprits CSS


prcdentsommairesuivant

I. Proprits de mise en forme de texte

I-A. Mise en forme de la police

I-A-1. Nom de police | font-family

font-family: permet d'indiquer les noms de polices par ordre de prfrence.

Syntaxe: [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font-family: "Arial Black", Arial, Verdana, serif;

Lorem ipsum dolore sit amet, consectetur adipisicing elit

Voir la source :
CacherSélectionnez

Explications:

si le visiteur possde la police Arial Black, elle sera utilise, sinon Arial, sinon Verdana ou enfin serif;

il est possible d'utiliser des polices personnalises en combinaison avec @font-face;

pour les polices composes de deux mots, il faut les entourer de guillemets.

I-A-2. Police personnalise | @font-face

@font-face: permet de dclarer une nouvelle police, qui sera tlcharge sur l'ordinateur de vos visiteurs.

Syntaxe: <font-description>+

Compatibilit: IE 9+, FF 3.5+, Chrome 0.2+, Safari 3.1+, Opera N/C

Version CSS: 2.1

Complment d'information: Comment utiliser une police personnalise sur un site Web ?

 
Sélectionnez
@font-face {
    font-family: 'ma_police';
    src: url('ma_police.eot') format('eot'),
    url('ma_police.woff') format('woff'),
    url('ma_police.ttf') format('truetype'),
    url('ma_police.svg') format('svg');
}

Explications:

il est important ici de voir qu'une police est dfinie par plusieurs formats tant donn que tous les navigateurs ne prennent pas en charge tous les formats.

I-A-3. Taille du texte | font-size

font-size: permet de dfinir la taille de la police de caractres. Elle peut tre exprime avec plusieurs units.

Syntaxe: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font-size: 12px;
font-size: 100%; /* normal */
font-size: 1.2em; /* 1.0 : normal */
font-size: 1ex;
font-size: xx-small; /* trs trs petit */
font-size: x-small; /* trs petit */
font-size: small; /* petit */
font-size: medium; /* moyen */
font-size: large; /* grand */
font-size: x-large; /* trs grand */
font-size: xx-large; /* trs trs grand */

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

I-A-4. Gras | font-weight

font-weight: permet de dfinir l'paisseur de la police de caractres.

Syntaxe: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font-weight: bold; /* gras */
font-weight: bolder; /* plus gras */
font-weight: lighter; /* plus fin */
font-weight: normal; /* pas gras (par dfaut) */

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

I-A-5. Petites capitales | font-variant

font-variant: met le texte en petites capitales.

Syntaxe: normal | small-caps | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font-variant: small-caps; /* petites capitales */
font-variant: normal; /* normal (par dfaut) */

Lorem ipsum dolore sit amet

LOREM IPSUM DOLORE SIT AMET

Voir la source
CacherSélectionnez

I-A-6. Petites capitales | font-variant

font-variant: met le texte en petites capitales.

Syntaxe: normal | small-caps | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font-variant: small-caps; /* petites capitales */
font-variant: normal; /* normal (par dfaut) */

Lorem ipsum dolore sit amet

LOREM IPSUM DOLORE SIT AMET

Voir la source
CacherSélectionnez

I-A-7. Italique | font-style

font-style: permet de mettre un texte en italique.

Syntaxe: normal | italic | oblique | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font-style: italic; /* italique (forcment !) */
font-style: oblique; /* autre faon de mettre en italique */
font-style: normal; /* normal (par dfaut) */

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

I-A-8. La police tout-en-un | font

font: regroupe les proprits de mise en forme de la police. moins de l'utilisation d'une des valeurs "caption | icon | menu | message-box | small-caption | status-bar | inherit", font-size et font-family sont tous les deux obligatoires et dans cet ordre (avec ventuellement le line-height entre les deux). 'font-style' || 'font-variant' || 'font-weight' sont optionnels, dans n'importe quel ordre, mais avant le font-size.

Syntaxe: [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
font: bold 16px Arial;

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

I-B. Mise en forme des paragraphes

I-B-1. Alignement horizontal | text-align

text-align: aligne un texte horizontalement.

Syntaxe: left | right | center | justify | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
text-align: left; /*  gauche (par dfaut) */
text-align: center; /* centr */
text-align: right; /*  droite */
text-align: justify; /* texte justifi */

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 
CacherSélectionnez

I-B-2. Dernire ligne | text-align-last

Cette proprit peut ncessiter l'utilisation des prfixes vendeurs.

text-align-last: aligne la dernire ligne d'un texte horizontalement.

Syntaxe: auto | start | end | left | right | center | justify

Compatibilit: IE 5.5+, FF 12.0+, Chrome, Safari, Opera

Version CSS: 3

Explications.
auto: la ligne adopte le mme alignement que pour text-align, sauf si text-align vaut justify, dans ce cas, la dernire ligne sera aligne gauche.
start: la dernire ligne sera aligne en dbut de ligne, le ct dpendant du sens de lecture (ltr ou rtl).
end: la dernire ligne sera aligne en fin de ligne, le ct dpendant du sens de lecture (ltr ou rtl).
left: la dernire ligne sera aligne gauche.
right: la dernire ligne sera aligne droite.
center: la dernire ligne sera centre.
justify: la dernire ligne prendra la largeur de l'lment.

Notes.
La notion de dernire ligne correspond la dernire ligne affiche avant tout saut de ligne forc (fin de balise de type bloc ou avant une balise entrainant un saut de ligne comme <br />.
Internet Explorer ne supporte pas les valeurs start et end.

Exemples:

 
Sélectionnez
text-align-last: auto; /* par dfaut */
text-align-last: center; /* centr */
text-align-last: end; /* selon le sens de lecture */
text-align-last: justify; /* justifi */

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
CacherSélectionnez

I-B-3. Alignement vertical | vertical-align

vertical-align: la proprit vertical-align ne fonctionne que pour les cellules (<td></td>) ou les lments de type inline-block.

Syntaxe: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
vertical-align: top; /* en haut */
vertical-align: middle; /* au milieu */
vertical-align: bottom; /* en bas */
Lorem ipsum dolore sit amet Lorem ipsum dolore sit amet Lorem ipsum dolore sit amet
Voir source
CacherSélectionnez

I-B-4. Dcoration | text-decoration

text-decoration: permet d'appliquer une dcoration sur un texte (soulign, barr, etc.).

Syntaxe: none | [ underline || overline || line-through ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
text-decoration: underline; /* soulign */
text-decoration: overline; /* ligne au-dessus */
text-decoration: line-through; /* barr */
text-decoration: none; /* normal (par dfaut) */

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

I-B-5. Capitales | text-transform

text-transform: permet de changer la casse du texte.

Syntaxe: capitalize | uppercase | lowercase | none | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
text-transform: uppercase; /* tout mettre en majuscules */
text-transform: lowercase; /* tout mettre en minuscules */
text-transform: capitalize; /* dbut des mots en majuscules */
text-transform: none; /* normal (par dfaut) */

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

I-B-6. Alina | text-indent

text-indent: permet de dfinir l'alina d'un texte.

Syntaxe: <length> | <percentage> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
text-indent : 20px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
CacherSélectionnez

I-B-7. Hauteur de ligne | line-height

line-height: permet de dfinir l'interligne entre deux phrases. Les valeurs nulles ne sont pas autorises.

Syntaxe: normal | <number> | <length> | <percentage> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
line-height: 30px;
line-height: 20%;

Ici le line-height est la valeur par dfaut.
Ce qui explique que l'interligne soit normal.


L on le dfinit 30px
On se rend compte de l'cart plus important entre les deux phrases.


Pareil ici, le line-height est 200%.
Pour un interligne "normal" mettre 100%.

Voir la source
CacherSélectionnez

I-B-8. Csure | white-space

white-space: permet de dfinir comment sont grs les espaces dans un texte.

Syntaxe: normal | pre | nowrap | pre-wrap | pre-line | inherit

Compatibilit: IE 5.5+, FF 1.0+, Chrome 1.0+, Safari 1.0+, Opera 9.5+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

Explications des valeurs:

  • normal: passage la ligne automatique (par dfaut);
  • nowrap: pas de passage la ligne automatique, moins qu'une balise HTML comme <br /> ne soit prsente;
  • pre: le passage la ligne se fait tel que le texte a t saisi dans le code source (comme la balise <pre>).

Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.

Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.

Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.

Voir la source
CacherSélectionnez

I-B-9. Csure force | word-wrap

word-wrap: permet de couper le texte si celui-ci dborde du conteneur.

Syntaxe: [ normal | break-word ]

Compatibilit: IE 5.5+, FF 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+

Version CSS: 3

 
Sélectionnez
word-wrap: normal;
word-wrap: break-word;

Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit

Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit

Voir la source
CacherSélectionnez

I-B-10. Ombrage | text-shadow

text-shadow: permet d'ajouter une ombre sur un texte ou un lment de type bloc.

Syntaxe: none | [, ]* [ <couleur>? <longueur> <longueur> <longueur>? | <longueur> <longueur> <longueur>? <couleur>? ] | inherit (source: MDN)

Compatibilit: IE 10+, FF 3.5+, Chrome 4+, Safari 4+, Opera 9.5+, Opera Mobile 10+

Version CSS: 3

 
Sélectionnez
text-shadow: 2px 2px 4px red;

Lorem ipsum dolore sit amet, consectetur adipisicing elit

Voir la source
Sélectionnez
<style type="text/css">
    .shadow-red {
        text-shadow: 4px 4px 4px red;
    }
 
    .shadow-green {
        text-shadow: -4px -4px 4px green;
    }
 
    .shadow-black {
        text-shadow: 4px 4px 0px black;
    }
</style>
<p style="font-size: 1.2em;"><span class="shadow-red">Lorem ipsum</span> <span class="shadow-green">dolore sit amet</span>, <span class="shadow-black">consectetur adipisicing elit</span></p>

Explications des valeurs:

  • dcalage en pixels droite;
  • dcalage en pixels en bas;
  • force du dgrad;
  • couleur.

Le cas IE: comme (toujours?) Internet Explorer fait bande part, il faut utiliser la proprit filter. Voici un exemple:

 
Sélectionnez
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ff0000', Direction=135, Strength=4);
zoom: 1;

I-C. Dfinition de la couleur de texte

I-C-1. Couleur de texte | color

color: nous disposons de six types de valeur pour indiquer la couleur du texte d'un lment:

Syntaxe: <color> | inherit

Compatibilit: IE 5+, FF 1+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1 (CSS 3 pour rgba, hsl et hsla)

  • la couleur en anglais: red, black, white, blue, green, etc.;
  • la couleur en hexadcimal: #C0C0C0;
  • la couleur en Red Green Blue (RGB ou RVB en franais): rgb(0, 255, 0);
  • la couleur en RGB avec transparence: rgba(0, 255, 0, 0.5);
  • la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosit): hsl(250, 100%, 50%);
  • la couleur en HSL avec transparence: hsla(250, 100%, 50%, 0.5).

Complment d'information: Les couleurs en CSS 3.

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
CacherSélectionnez

prcdentsommairesuivant

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.