> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Liste non-exhaustive des propriétés CSS > Lecture du tutoriel

Liste non-exhaustive des propriétés CSS

Par

biohazard2

Mise à jour : 22/08/2008

188 visites depuis 7 jours , classé 421/777

Voilà, pour mon premier tuto, je me lance et vous fais une liste de toutes les propriétés CSS.

Absolument toutes les propriétés ?

Non, le titre est un peu mensonger. Je vais en mettre le plus possible, mais je ne vais pas revenir sur celles qui ont été données par M@teo21 dans son cours (propriétés consultables ici).

Prérequis

Tout d'abord, il faut que vous sachiez lire.
Ensuite, il faut savoir utiliser le CSS si vous voulez recourir à ses propriétés, ainsi que de connaitre les bases en HTML.
Si vous ne voulez pas vous en servir, il vous faut juste savoir lire et avoir du courage.

Retour en haut

Sommaire du tutoriel :

Les sélecteurs
Importer des feuilles de styles
Les pseudo-formats
Les unités de mesure
Le texte
Le fond
L'impression
Les tableaux
Le curseur
Les listes
Les boîtes
L'interface utilisateur
Autres
Les propriétés CSS 3
Les propriétés IE

Retour en haut

Les sélecteurs

Commençons par dévier du sujet principal, parlons des sélecteurs.

- Le # : c'est le sélecteur d'id. M@teo en parle dans son cours.

- Le . : c'est le sélecteur de class. Idem.

- Le * : c'est le joker du CSS. Il représente toutes les balises.
Code : CSS

1	* { color: green; }

Tout le texte de la page va s'écrire en vert.

Prenons un autre exemple plus concret :
Code : CSS

1 2	body * p { color: green; } body { color:blue; }

Code : HTML

<body>
<p>Bonjour</p>
<div><p>Au revoir</p></div>
</body>

Dans cet exemple, "Bonjour" sera écrit en bleu alors que "Au revoir" sera écrit en vert, car body * p s'applique à toutes les balises p imbriquées dans n'importe quelle balise, elle-même dans la balise body. Ici, c'est comme si j'avais mis :
Code : CSS

1	body div p { color: green; }

Le > : c'est le sélecteur d'enfant. Sélectionne un élément à l'intérieur d'un autre, s'il n'y a pas d'élément intermédiaire. Ne fonctionne pas avant IE 7.
Code : CSS

1	body > p { color: green; }

Code : HTML

<body>
<div class="nimportequoi"><p>Bonjour</p></div>
<p>Au revoir</p>
</body>

Seul "Au revoir" sera écrit en vert, car "Bonjour" est imbriqué dans la balise p, elle-même imbriquée dans la balise div.

- Le + : c'est le sélecteur de frères adjacents. Sélectionne un élément lorsque celui-ci succède directement à un autre élément. Ne fonctionne pas avant IE 7.
Code : CSS

1	.titre:hover + p { color: green; }

Code : HTML

1
2
3

<body>
<span class="titre">Survolez-moi pour afficher le contenu du paragraphe</span>
<p>Contenu du paragraphe</p>

Quand vous survolerez le titre, le contenu s'affichera car la balise p succède directement à la classe titre quand elle est survolée.

Le sélecteur d'attribut : sélectionne une balise selon ses attributs.
Code : CSS

1	a[href='mapage.html'] { color: green; }

Code : HTML

1 2	<a href="#">Un lien</a> <a href="mapage.html">Ma page</a>

Seul le lien "Ma page" sera en vert, car la valeur de l'attribut href de la balise a est mapage.html.
Syntaxes :

x[href] : contient toutes les balises x ayant un attribut href, quelque soit sa valeur.
x[href='mapage.html'] : contient toutes les balises x ayant l'attribut href dont la valeur est exactement mapage.html.
x[attribut~='bli'] : contient toutes les balises x dont l'attribut contient une liste de valeurs séparées par des espaces, et dont l'une d'elles est bli.
x[attribut|='bli'] : contient toutes les balises x dont l'attribut contient une liste de valeurs séparées par des tirets débutant par bli.

- Le sélecteur descendant : sélectionne tous les éléments contenus dans un autre.
Code : CSS

1	body p { color: green; }

Code : HTML

1
2
3

<body>
<p>Bonjour</p>
<div class="nimportequoi"><p>Au revoir</p></div>

Là, "Bonjour" et "Au revoir" seront écrits en vert, car les balises p sont imbriquées dans la balise body.

Retour en haut

Importer des feuilles de styles

Il existe plusieurs méthodes pour mettre du CSS dans du XHTML.

La plus connue, avec la balise link et ses attributs. Exemple :
Code : HTML

1	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

Ici, le CSS se trouve dans un fichier .css.

Tout aussi connue, on met le CSS dans le XHTML. Exemple :
Code : HTML

1
2
3

<style type="text/css">
/* Votre code CSS ici */
</style>

On peux aussi mettre le CSS directement dans les balises à l'aide de l'attribut style. Exemple :
Code : HTML

1	<div style="color: red; background-color: blue;">Mon div</div>

La moins connue, l'importation de CSS dans du CSS. Exemple :
Code : CSS

1 2	/* Fichier design.css */ @import url(news.css) screen;

ou
Code : HTML

1
2
3

<style type="text/css">
@import url(design.css) screen;
</style>

Mais qu'est ce que screen ?

C'est le média auquel est appliqué le CSS. Quelques médias :

screen : pour un écran couleur
print : pour l'impression de la page
projection : pour un projecteur (le mode plein écran d'Opera utilise aussi ce média)
handheld : pour les petits écrans (appareils portables, téléphones portables, mode de rendu petit écran d'Opera)
tv : pour le WebTV
all : pour tous les médias.

Donc, si l'on précise screen, le code CSS ne sera appliqué que si la page est regardée avec un écran comme celui que vous possédez. Si, au contraire, on précise print, le CSS ne sera visible que si l'on imprime la page.

Il existe davantage de médias, mais ils sont rarement utilisés.

Retour en haut

Les pseudo-formats

Il existe deux sortes de pseudo-formats : les pseudo-classes et les pseudo-éléments. Une pseudo-classe permet de sélectionner une balise qui ne peut l'être avec les sélecteurs normaux. Par exemple a:hover { } permet de sélectionner les balises de lien (a) qui sont survolées, ainsi que tout le contenu de la balise.

Un pseudo-élément permet de sélectionner une partie d'une ou plusieurs balises, donc, en théorie, tout ce qui ne peut être sélectionner avec les sélecteurs normaux et les pseudo-classes. Par exemple h1::first-letter { } permet de ne sélectionner que la première lettre d'un titre h1, et non pas tout son contenu.

- Les pseudo-classes et pseudo-éléments :link, :hover, :active, :focus, :visited, ::first-letter, ::first-line, ::after et ::before ont déjà été vues dans le cours de M@teo.

Dans le cours officiel, la distinction entre pseudo-classe et pseudo-élément n'a pas été faite. Une pseudo-classe débute par un double-point ":" et un pseudo-élément par deux double-points "::".

Les pseudo-formats que vous connaissez commencent tous par un seul double-point, mais ce ne sont pas des pseudo-classes pour autant. Before, after, first-line et first-letter sont des pseudo-éléments qui demandent deux double-points devant. Mais, pour conserver une rétrocompatibilité, un seul double-point est encore accepté.

- La pseudo-classe :lang. Syntaxe : balise_x:lang(fr) . Contient toutes les balises balise_x ayant fr comme valeur de l'attribut lang.

- La pseudo-classe :first-child. Syntaxe : balise_parent balise_enfant:first-child . Contient la première balise balise_enfant contenue dans la balise balise_parent.

- La pseudo-classe :empty. Syntaxe : balise_x:empty . Contient toutes les balises balise_x vides, qui n'ont pas de contenu.

- La pseudo-classe :not. Syntaxe : *:not(X) . Cette pseudo-classe est un peu différente des autres car elle sert de négation. Son paramètre peut être une balise, un sélecteur ou une pseudo-classe (sauf elle-même) (les pseudo-éléments sont interdits). Par exemple *:not(span) { } contient toutes les balises sauf les balises span. Le code p:not(:empty) { } contient tous les paragraphes (balise p) qui ne sont pas vides et a:not(:hover):not(:visited) { } contient toutes les balises lien (a) qui ne sont pas survolées et qui n'ont pas déjà été visitées.

- La pseudo-classe :contains. Syntaxe : p:contains("Mot_recherché") . Contient tous les paragraphes (balise p) qui eux-même contiennent le mot "Mot_recherché".

- Le pseudo-élément ::selection. Syntaxe : balise::selection . Permet de changer la couleur et le fond du texte surligné, seuls les propriétés color et background sont acceptées.

Cette pseudo-classe provient de CSS 3, elle ne fonctionne pour l'instant que sur Mozilla et Safari.

En pratique, utilisez toujours ::selection, ::-moz-selection { } . Pour en savoir plus sur le préfixe -moz-, rendez-vous au chapitre "Les propriétés CSS 3".

Retour en haut

Les unités de mesure

Voici les unités de mesure. Vous en connaissez déjà quelques-unes, mais pas toutes. Certaines peuvent se montrer utiles.

Abréviation	Nom	Détails
px	pixel	Le pixel (les petits points de votre écran) est l'unité de base de l'image numérique
Notions de longueur
cm	centimètre
mm	millimètre	10 millimètres = 1 centimètre
em	/	Taille de police relative à la balise parent
ex	/	Taille de police relative à la balise parent par rapport à la lettre "x".
in	pouce	Un pouce = 2.54 centimètres
pt	point	Un point = 1/72 pouce
pc	pica	Un pica = 12 points
%	pourcentage
Convertisseur d'unités de longueur
Notions d'angle
rad	radian	90 degrés = ½ π radians
deg	degrés
Convertisseur d'unités d'angle

Retour en haut

Le texte

Lorsque, dans la colonne "Valeurs possibles", je parle d'une couleur, vous pouvez mettre une couleur :

en tapant le nom de la couleur en anglais (black, blue, green, white, red...)
en indiquant la couleur en hexadécimal (#CC48A1)
en indiquant la couleur en RGB : rgb(128,255,0).

Propriété	Action	Valeurs possibles
letter-spacing	Espace entre chaque lettres	normal, ou une unité de longueur
text-shadow	Ombre du texte	none, une couleur et / ou une longueur. Ne fonctionne qu'avec Safari
word-spacing	Espace entre chaque mot	normal, ou une longueur
direction	Sens du texte	ltr de gauche à droite, rtl de droite à gauche
font-family	Nom de police	Un nom de police. S'il y a un espace dans le nom de la police, entourez celui-ci de guillemets
font-size	Taille du texte	Une unité de longueur ou un nom de taille : xx-small, x-small, small, medium, large, x-large, xx-large (de très très petit à très très grand)
font-weight	Gras	bold (gras), bolder (plus gras), lighter (fin), normal (par défaut),
font-style	Italique	italic (italique), oblique (comme italique), normal (par défaut)
text-decoration	Décoration	underline (souligné), overline (ligne au-dessus), line-through (barré), blink (clignotant), none (par défaut)
font-variant	Petites capitales	small-caps (petites capitales), normal (par défaut)
text-transform	Capitales	uppercase (tout mettre en majuscules), lowercase (tout mettre en minuscules), capitalize (début des mots en majuscules), none (par défaut)
font	Méga-propriété de police	Les valeurs de font-family, font-weight, font-style, font-size, font-variant. Attention : font-family doit toujours être placé au début
text-align	Alignement horizontal	left (par défaut), center (centré), right (à droite), justify (texte justifié)
vertical-align	Alignement vertical	top (en haut), middle (au milieu), bottom (en bas)
line-height	Hauteur de ligne	Une hauteur, exprimée en pixels ou en pourcentage
text-indent	Alinéa	Le retrait du texte en pixels
white-space	Césure	normal (le passage à la ligne est automatique, par défaut), nowrap (pas de passage à la ligne automatique), pre (le passage à la ligne se fait tel que le texte a été saisi dans le code source)
color	Couleur du texte	Une couleur

Code : CSS

letter-spacing: 2px;
text-shadow: 3px black;
word-spacing: 4px;
direction: ltr;
font-family: Arial, "Arial Black";
font-size: 1.2em;
font-weight: bold;
font-style: italic;
text-decoration: underline;
font-variant: normal;
text-transform: capitalize;
font: Arial, bold, italic, 1.2em;
text-align: justify;
vertical-align: middle;
line-height: 5%;
text-indent: 20px;
white-space: pre;
color: #000000;

Retour en haut

Le fond

Propriété

Action

Valeurs possibles

background-color

Couleur de fond

Une couleur

background-image

Image de fond

L'url de l'image (notation absolue ou relative)
Code : CSS

1 2	background-image:url("images/fond.png"); /* Notation relative / background-image:url("http://www.monsite.com/images/fond.png"); / Notation absolue */

background-attachment

Fond fixé

fixed (le fond reste fixe quand on descend plus bas sur la page),
scroll (le fond défile avec le texte, par défaut)

background-repeat

Répétition du fond

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)

background-position

Position du fond

2 façons de faire :

en notant une distance en px ou %, par rapport au coin en haut à gauche
Code : CSS
1
background-position:50px 200px; /* 50 px à droite, 200px en bas */
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 : CSS

1	background-position : bottom right; /* en bas à droite */

background

Méga-propriété de fond

Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background-attachment, background-position.
L'ordre des valeurs n'a pas d'importance, et vous n'êtes pas obligés de mettre toutes les valeurs de ces propriétés (au moins une suffit)
Code : CSS

1 2	/* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */ background:url("images/fond.png") no-repeat fixed top right;

Retour en haut

L'impression

Propriété	Action	Valeurs possibles
page-break-before	Permet de créer / d'empêcher un saut de page avant un élément	auto, always (toujours insérer un saut de page avant l'élément), avoid (jamais), left (force un ou deux sauts de page pour que la page suivante imprimée soit une page gauche), right (force un ou deux sauts de page pour que la page suivante imprimée soit une page gauche)
page-break-after	Permet de créer / d'empêcher un saut de page après un élément	auto, always (toujours insérer un saut de page après l'élément), avoid (jamais), left (force un ou deux sauts de page pour que la page suivante imprimée soit une page gauche), right (force un ou deux sauts de page pour que la page suivante imprimée soit une page gauche)
page-break-inside	Permet de créer / empêcher un saut de page dans un élément	auto, avoid (ne jamais insérer un saut de page dans l'élément), left (force un ou deux sauts de page pour que la page suivante imprimée soit une page gauche), right (force un ou deux sauts de page pour que la page suivante imprimée soit une page gauche)
orphans	Permet d'indiquer le nombre minimum de lignes de l'élément devant être imprimées sur une même page avant de passer à la page suivante	nombre entier positif non-nul
windows	Permet d'indiquer le nombre maximum de lignes de l'élément devant être imprimées sur une même page avant de passer à la page suivante	nombre entier positif non-nul
size	Permet de définir la taille de la page d'impression et / ou le format d'impression	auto, une largeur et une longueur, landscape (orientation paysage) ou portrait (orientation portrait)
marks	Permet de définir les traits de coupes et les repères de montage	none (par défaut), crop (traits de coupe), cross (repères de montage)

Les propriétés size et marks ne s'appliquent pas aux balises.
On peux aussi appliquer des marges à la page imprimée avec margin.

Comment appliquer une propriété CSS à la page, alors ?

Comme ça :
Code : CSS

@page
{
size: landscape;
size: 21.0cm 29.7cm; /* Format A4 */
page-break-before: auto;
page-break-after: auto;
marks: none;
}

Retour en haut

Les tableaux

Propriété	Action	Valeurs possibles
border-spacing	Permet de déterminer l'espacement entre les cellules	border-spacing, inherit, ou une unité de longueur
table-layout	Permet de préciser au navigateur la manière dont il doit afficher la table	table-layout, auto, fixed ou inherit
border-collapse	Type de bordure	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)
empty-cells	Cellules vides	show (les bordures des cellules vides sont affichées), collapse (les cellules vides sont masquées, par défaut)
caption-side	Position du titre	top (en haut du tableau), bottom (en bas du tableau), left (à gauche du tableau), right (à droite du tableau)

Retour en haut

Le curseur

Propriété

Action

Valeurs possibles

cursor

Curseur de souris

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 utilisé pour indiquer une attente (sablier)
help : curseur en forme de point d'interrogation, indiquant une aide
move : curseur en forme de croix, indiquant un déplacement possible

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

url : curseur personnalisé, de type .cur ou .ani. Exemple :
Code : CSS

1	cursor: url("images/curseur.cur");

Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani

Retour en haut

Les listes

Propriété

Action

Valeurs possibles

list-style-type

Type de liste

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, 5... (par défaut)
decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). 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

list-style-position

Position en retrait

inside (sans retrait), outside (avec retrait, par défaut)

list-style-image

Puce personnalisée

Indiquer l'url de l'image qui servira de puce. Exemple :
Code : CSS

1	list-style-image: url("images/puce.png");

list-style

Méga-propriété de liste

Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.
Exemple :
Code : CSS

1	list-style: inside square;

Marker-offset

Espace entre la puce et le container

auto, une longueur

Pour en savoir plus sur les listes, je vous invite à lire ce tuto sur Babylon-design (les navigateurs barrés sont ceux qui ne comprenent pas le style CSS) et ce très bon tuto de zér0 qui se complètent.

Retour en haut

Les boîtes

Dimensions

Propriété	Action	Valeurs possibles
width	Largeur	Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
height	Hauteur	Idem
min-width	Largeur minimale	Indiquer une valeur, en pixels par exemple.
max-width	Largeur maximale	Idem
min-height	Hauteur minimale	Idem
max-height	Hauteur maximale	Idem

Marges extérieures

Propriété

Action

Valeurs possibles

margin-top

Marge en haut

Indiquer une valeur comme 20px, 1.5em...

margin-left

Marge à gauche

Idem

margin-right

Marge à droite

Idem

margin-bottom

Marge en bas

Idem

margin

Méga-propriété de marge

Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite
2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Par exemple, si je mets 2 valeurs :
Code : CSS

1	margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */

Marges intérieures

Propriété	Action	Valeurs possibles
padding-top	Marge intérieure en haut	Indiquer une valeur comme 20px, 1.5em...
padding-left	Marge intérieure à gauche	Idem
padding-right	Marge intérieure à droite	Idem
padding-bottom	Marge intérieure en bas	Idem
padding	Méga-propriété de marge intérieure	Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change : 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Bordures

Propriété

Action

Valeurs possibles

border-width

Épaisseur de la bordure

Indiquer une valeur en px

border-color

Couleur de la bordure

Indiquer une valeur de couleur

border-style

Type de bordure

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

border-left

Bordure à gauche

Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple :
Code : CSS

1	border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */

border-top

Bordure en haut

Idem

border-bottom

Bordure en bas

Idem

border-right

Bordure à droite

Idem

border

Méga-propriété de bordure

Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.

Retour en haut

L'interface utilisateur

Propriété	Action	Valeurs possibles
outline	Permet de définir des contours autour du contenu de la page	voir les trois prochaines propriétés
outline-color	Permet de définir la couleur des contours	une couleur
outline-style	Permet de définir le style des contours	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
outline-width	Permet de définir la largeur des contours	une longueur

Retour en haut

Autres

Propriété	Action	Valeurs possibles
content	Permet d'insérer du texte, une image ou un compteur	Du texte entre guillemets, une image grâce à url() ou un compteur grâce à counter()
counter-increment	Permet d'incrémenter un compteur	Le nom du compteur, sa valeur ajoutée (par défaut +1) grâce à + ou -
counter-reset	Permet de remettre à zéro un compteur ou de l'initialiser	Le nom du compteur, sa valeur de départ (par défaut à 0)

Si vous voulez en savoir plus sur les compteurs CSS, allez lire ce tuto.

Retour en haut

Les propriétés CSS 3

Ces propriétés font parties du CSS3. Elles ne fonctionnent pour l'instant qu'avec le moteur de rendu Gecko 1.8, c'est-à-dire les navigateurs Mozilla et le moteur de rendu Khtml, c'est-à-dire les navigateurs Konqueror et Safari.

Propriété	Action	Valeurs possibles
background-clip	Permet de choisir si le fond (couleur ou image) doit continuer ou non sous la bordure	border (par défaut, le fond s'étend sous la bordure), et padding (le fond ne continue pas sous la bordure)

Exemple

Code : HTML

<div id="test_mozilla">&nbsp;</div>
<style type="text/css">
#test_mozilla {
height: 50px;
width: 50px;
border: dotted #000 10px;
background: #EEE;
-moz-background-clip: border;
}
</style>

À gauche, background-clip: border, à droite, background-clip: padding.

Propriété	Action	Valeurs possibles
background-origin	Permet de choisir à partir de quoi l'arrière-plan se place	border (la position est relative à la bordure), content (la position est relative au contenu), padding (par défaut, la position est relative à l'espacement)

Exemple

Code : HTML

<style type="text/css">
#border, #content, #padding {
.-moz-background-image: url('fond1.png');
height: 130px;
width: 115px;
padding: 10px;
border: 5px solid grey;
}
</style>

<div id="border"> </div>
<div id="content"> </div>
<div id="padding"> </div>

De gauche à droite : background-origin: border, content, padding et l'image de fond.

Propriété	Action	Valeurs possibles
opacity	Permet de rendre transparent le texte, le fond et les bordures.	Une valeur à une décimale entre 0 (transparent) et 1 (opaque).

J'ai testé ces propriétés et elles ne marchent pas ! Pourquoi ?

Ces propriétés ne sont pas encore comprises par les navigateurs. Il faut ajouter un "préfixe" à ces propriétés pour que celles-ci soient traitées par le moteur de rendu (-moz- pour Gecko et -khtml- pour Khtml).

Par exemple :
Code : CSS

1 2	-moz-opacity: 0.7; -khtml-background-clip: border;

Retour en haut

Les propriétés IE

Ces propriétés ne fonctionnent qu'avec IE, et ne sont pas des propriétés CSS valides.

Les filtres

Propriété	Action	Valeurs possibles
alpha()	Permet de fusionner les éléments de premier et d'arrière-plans	opacity=0 à opacity=100 (opacité du début du dégradé), finishopacity=0 à finishopacity=100 (opacité de la fin du dégradé), style=0 à style=3, startx=(début du dégradé par rapport à l'axe X, en pixels, que si style=0), starty=(début du dégradé par rapport à l'axe Y, en pixels, que si style=0), finishx=(fin du dégradé par rapport à l'axe X, en pixels, que si style=0), finishy=(fin du dégradé par rapport à l'axe Y, en pixels, que si style=0)
blur()	Permet de créer un effet d'estompage sur les images	add (add n'est à mentionner que si add=3), direction=0 à direction=360 (direction de l'estompage), strength=(force de l'estompage)
chroma()	Permet de rendre une couleur de l'image transparente, les autres couleurs sont conservées	color=#FFFFFF à color=#000000
dropshadow()	Permet de créer un effet d'ombrage sur un texte ou une image. S'il s'agit d'une image, celle-ci doit avoir des contours francs	color=#FFFFFF à color=#000000, offx=(nombre de pixels pour l'ombrage vers la droite si valeur positive, vers la gauche si valeur négative), offy=(nombre de pixels pour l'ombrage vers le bas si valeur positive, vers le haut si valeur négative), positive=0 ou positive=1 (positive=0 sauf si l'image est transparente, dans ce cas, positive=1)
fliph()	Permet d'appliquer une symétrie sur l'axe horizontal d'une image	Ce filtre n'a pas de paramètre
flipv()	Permet d'appliquer une symétrie sur l'axe vertical d'une image	Ce filtre n'a pas de paramètre
glow()	Permet de créer une auréole autour d'un texte ou d'une image	color=#FFFFFF à color=#000000, strength=(force de l'auréole)
gray()	Permet de supprimer toutes les couleurs d'une image et de la passer en niveaux de gris	Ce filtre n'a pas de paramètre
invert()	Permet d'inverser les couleurs d'une image, celles-ci sont remplacées par leur couleur complémentaire	Ce filtre n'a pas de paramètre
shadow()	Permet de créer une ombre autour d'un élément	direction=0 à direction=360 (la direction de l'ombre), color=#FFFFFF à color=#000000 (la couleur de l'ombre)
wave()	Permet de créer des vagues	freq=(plus la valeur est élevée, plus les vagues sont espacées), light=0 à light=100 (intensité de la lumière dans l'ondulation), phase=0 à phase=100 (début de la phase de vague), strength=(force de la déformation), add=0 ou add=1 (si add est égal à 1, l'image originale est ajoutée à l'image déformée)
xray()	Qui a dit : "À voir à travers les murs" ? Permet de supprimer toutes les informations de couleur d'une image, et de la passer en niveaux de gris, comme l'effet d'un négatif photo	Ce filtre n'a pas de paramètre

Ces filtres s'utilisent comme cela :
Code : CSS

1 2	filter:alpha(parametre1=1, parametre2=10); filter:alpha(opacity=0, finishopacity=100, style=3);

Ces filtres provoquent des bugs sous les autres navigateurs. Si vous les utilisez, faites attention à ce que seul IE lise ces propriétés.

Les barres de défilement

Propriété	Action	Valeurs possibles
scrollbar-3dlight-color	Permet de modifier la couleur pour les effets de relief	Une couleur
scrollbar-arrow-color	Permet de modifier la couleur pour les pointeurs de défilement	Une couleur
scrollbar-base-color	Permet de modifier la couleur de la surface de la barre de défilement	Une couleur
scrollbar-darkshadow-color	Permet de modifier la couleur pour les ombres	Une couleur
scrollbar-face-color	Permet de modifier la couleur de la surface de la barre de défilement	Une couleur
scrollbar-highlight-color	Permet de modifier la couleur pour le bord haut et le bord gauche	Une couleur
scrollbar-shadow-color	Permet de modifier la couleur pour le bord droit et le bord du bas	Une couleur
scrollbar-track-color	Permet de modifier la couleur pour la barre de défilement non cachée par le pointeur de défilement	Une couleur

Retour en haut

Vous avez tout lu ? Bon maintenant, vous allez les apprendre par coeur. :pirate:

Il y a beaucoup de propriétés CSS mais assez peu sont régulièrement utilisées : ce sont celles-ci qu'il faut connaitre.
À bientôt pour une nouvelle aventure.

Ce tutoriel est mis à disposition sous licence Creative Commons - Paternité - Partage des conditions à l'identique. Vous pouvez donc utiliser, citer et modifier ce tutoriel comme bon vous semble, à condition de citer son auteur (Biohazard2) et de garder cette même licence.

Un grand merci aux zCorrecteurs, et en particulier ptipilou pour leur relecture attentive de ce tutoriel. Image utilisateur

Retour en haut

Retour en haut

49 commentaires pour "Liste non-exhaustive des propriétés CSS"

Note moyenne : 3.93 / 4 (15 votes)

Pseudo	Commentaire
prog-psycho	# Posté le 04/12/2009 à 00:58:20
Études : EMSI	merci pour le turo 16/20 HTML:\|\|\|\|\|\|\|\|\|\| CSS :\|\|\|\|\|\|\|\|\|\| PHP :\|\|\|\|\|\|\|\|\|\| C :\|\|\|\|\|\|\|\|\|\| Secret (cliquez pour afficher) projé PHP/SQL/ :\|\|\|\|\|\|\|\|\|\|
Buddy	# Posté le 04/12/2009 à 11:14:54
to bud or not to bud...	Aaah! Super ! C'est ce que j'attendais : un tuto qui nous fasse connaître des astuces pour la création web. C'est en parfaite continuité du tuto de M@téo21, je vais lire tout ça avec grande avidité. Merci beaucoup pour cette initiative. Je mets déjà une bonne note : 17. Et si ça dépasse mes espérances, je mettrai plus.
christophetd	# Posté le 04/12/2009 à 12:04:51
Regardez-moi ! Blog Twitter close Ville : Gap Pays : France métropolitaine	Très bon tutoriel, j'ai appris beaucoup de choses en le lisant. Liens : Mon Twitter Utilisation d'un ORM : les bases de Doctrine Un système de news sans base de données Petit guide d'utilisation de Twitter
encraste	# Posté le 04/12/2009 à 23:31:45
Ville : Setif Pays : Algérie	Merci
Interreto	# Posté le 24/05/2010 à 20:49:10
La patience Ville : Gosselies Pays : Belgique	Merci beaucoup pour ce tuto. A+ Quand on commence un projet, vaut mieux être patient et faire les choses en son temps que d'aller trop vite et d'aboutir à l'échec. http://www.azixstudio.be/