Liste non-exhaustive des propriétés CSS

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
Tout le texte de la page va s'écrire en vert.

Prenons un autre exemple plus concret :
Code : CSS
Code : HTML
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


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
Code : HTML
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
Code : HTML
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
Code : HTML
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
Code : HTML
Là, "Bonjour" et "Au revoir" seront écrits en vert, car les balises p sont imbriquées dans la balise body.

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
Ici, le CSS se trouve dans un fichier .css.


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


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


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


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 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.


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.

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".

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

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

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;

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)

Comme ça :
Code : CSS

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)

Propriété	Action	Valeurs possibles
curseur	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

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

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.

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

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)

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

À 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

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).

Par exemple :
Code : CSS

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

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