Tous les articles par Gabriel

Les galeries photo de Gabriel

Fin août 2013, je mettais en ligne un nouveau site Internet, uniquement destiné à publier des photos et notamment mes plus réussies, qui étaient auparavant publiées sur mon portail. 

Cette galerie photo est basée sur le moteur Piwigo, permettant un classement plus adapté des photos. Le thème initial n’était pas trop aboutis et il me reste encore à le travailler, comme à finaliser l’arborescence et la mise en ligne de nombreuses photos que j’ai sous le coude.

Un site qui évoluera au fil du temps…

Bannière des Galeries photos de Gabriel

Aquario’Club des Portes de l’Eure

Le site vous propose de découvrir l’aquario’Club des Portes de l’Eure, club aquariophile de Vernon/Saint-Marcel et sa région, ses activités et d’échanger avec des passionnés d’aquariophilie et de nature.

Aquario'Club des Portes de l'Eure, club aquariophile de Vernon Saint-Marcel

Le site est une émanation de mes aqua’Pages : en mars 2000, la rubrique des Aqua’pages de Gabriel, dédiée à mon club aquariophile, devient un site à part entière, avec un look bien à lui.


Club Aquariophile de Vernon
Rendue disponible le 1er septembre 2009, cette version 4 du site, a fait l’objet d’une refonte complète, avec un nouvel hébergement, un nouveau nom de domaine, de nouveaux outils de communication et les nouvelles versions de ses moteurs internes (Artiphp Neo et PhpBB 3).


Club Aquariophile de Vernon
Version 3 du site du club aquariophile de Vernon, entièrement remanié en PhP et feuilles de style, motorisé avec artiphp XXL avec service de news, articles, galerie photo, annuaire, syndication….


CSADN Aquariophilie
Version 2 du site du club aquariophile de Vernon, entièrement remaniée et mise en ligne le 9 mars 2006.
Cette version comprend un déménagement chez OVH accompagné d’un nom de domaine www.aquavernon.info. Le look du site est entièment revu et de nouveaux services font leur arrivée. Certaines parties du site deviennent dynamique en intégrant des moteurs PhP, comme les galeries photo et le nouveau livre d’or.

Les Aqua’Pages de Gabriel

Avec les Aqua’Pages de Gabriel, mon premier site Internet  voyait le jour en janvier 2000.

Le site vous propose de plonger dans l’aquariophilie et découvrir cette passion

Les Aqua'Pages de Gabriel


091102_aquapages
Rendue disponible le 2 novembre 2009, cette version 4 du site, a fait l’objet d’une refonte complète avec la nouvelles versions de son moteurs internes (Artiphp Neo). Le look a été revue, en gardant l’esprit des versions précédentes.


060402_aquapages
Version 2 du site, en 2006, avant sa migration, vers le moteur Artiphp et la version 3, en février 2007. Sa conception était en html et feuilles de style Css.

CSADN

Le site du CSADN de Vernon, association pluridisciplinaire, sportives et culturelles, dont j’ai été un dirigeant très investit pendant plus de 7 années.

J’ai créé le site en 2001 et l’ai géré (webmastering, administration et gestion de contenu) jusque fin mars 2009. Depuis, j’ai assuré quelques dépannages. Dans un premier temps, le site était développé en html pur, avant de migrer sous PhpNuke et finir sous ArtiPhp.

Site du CSADN Vernon
Le site du CSADN Vernon, dans sa version de 2006.

Une petite photo insolite

Quand une voiture se retrouve au pied des escaliers et que l’on passe par là, avec un appareil photo à porté de mains, on se retrouve avec une photo présentant une situation des plus insolite. C’était le 12 juillet 2011. Si cette situation ne fait certainement pas l’affaire du propriétaire, elle interpelle et amuse les passants. Tant qu’il ne s’agit que de tôle froissée…

Une voiture dans les escaliers
Une voiture descend les escaliers

Concours des maisons fleuries 2009

Pour la seconde fois, j’ai participé en cette année 2009 au concours des maisons fleuries de Saint-Marcel, ma commune.

L’objectif de cette participation n’est pas compétitif, du moins au départ, mais d’être un moteur de motivation à avancer dans le jardin et l’embellir au fil des ans.

Il y a 2 ans, j’avais fini 46ème sur 50, mais je démarrai seulement mon investissement dans la partie extérieure de la maison. Les travaux étant essentiellement orienté désherbage, afin d’éliminer 10 années d’essaimage de graines de mauvaises herbes (j’y travaille encore). En 2008, par manque de temps, je me suis peu investit dans le jardin, en me cantonnant au minimum de tâches d’entretien générales (tontes et désherbage). Le fait de ne pas m’inscrire ne m’a pas non plus poussé à en faire plus.

Cette année, mon investissement associatif au niveau du CSADN de Vernon ayant été réduit, je me suis retrouvé avec plus de temps et j’ai donc mis le paquet, en renouvelant mon inscription au concours.

Le résultat est tombé pendant l’été : 21ème ex aequo. Une sacrée avancée. Le diplôme, accompagné d’une rose ont été remis lors d’une cérémonie en Mairie le 24 octobre 2009. Absent pour cause de déplacement aquariophile au Mans, mon fils Raphaël m’a représenté et, tout fier, à récupéré le diplôme.

Mon ami Sébastien, avec qui je partage le goût du jardin et que j’ai incité à s’inscrire participait aussi pour la seconde fois. Il est passé de la 44ème à la 30ème place. Mais il a le désavantage d’avoir la plus belle partie du jardin derrière la maison et donc non visible de la rue, mais il progresse aussi. Nous avons d’ailleurs déjà échangé des idées pour l’année prochaines.

Quel sera l’objectif de l’année prochaine ? Faire mieux ? Non, pas spécialement ! L’idée consiste juste à s’éclater un peu plus et se faire plaisir dans le jardin.

Campagne 2009 de fleurissement
Campagne 2009 de fleurissement de la ville de Saint-Marcel

La courge « canard »

Courge canard
Courge « canard » récoltée en août 2009
En août 2009, dans le potager, la récolte de courge est très fructueuse, avec plus d’une cinquantaine de légumes sur 5 les pieds, dont 2 de courgettes spagetti.

Dans la récolte du 4 août, une courgette avec une forme des plus étonnante : « le canard qui se fouille les plumes ».
En poussant, la courgette semble s’être dirigé vers le sol et avoir poursuivi sa croissance à l’horizontal, après l’avoir atteint.

Une originalité que je tenais à partager.

Nuancier 216 couleurs

Nuancier 216 couleurs dites « sûres », avec code héxadécimal.

FFFFFF
FFCCFF
FF99FF
FF66FF
FF33FF
FF00FF
CC00FF
CC33FF
CC66FF
CC99FF
CCCCFF
CCFFFF
FFFFCC
FFCCCC
FF99CC
FF66CC
FF33CC
FF00CC
CC00CC
CC33CC
CC66CC
CC99CC
CCCCCC
CCFFCC
FFFF99
FFCC99
FF9999
FF6699
FF3399
FF0099
CC0099
CC3399
CC6699
CC9999
CCCC99
CCFF99
FFFF66
FFCC66
FF9966
FF6666
FF3366
FF0066
CC0066
CC3366
CC6666
CC9966
CCCC66
CCFF66
FFFF33
FFCC33
FF9933
FF6633
FF3333
FF0033
CC0033
CC3333
CC6633
CC9933
CCCC33
CCFF33
FFFF00
FFCC00
FF9900
FF6600
FF3300
FF0000
CC0000
CC3300
CC6600
CC9900
CCCC00
CCFF00
99FF00
99CC00
999900
996600
993300
990000
660000
663300
666600
669900
66CC00
66FF00
99FF33
99CC33
999933
996633
993333
990033
660033
663333
666633
669933
66CC33
66FF33
99FF66
99CC66
999966
996666
993366
990066
660066
663366
666666
669966
66CC66
66FF66
99FF99
99CC99
999999
996699
993399
990099
660099
663399
666699
669999
66CC99
66FF99
99FFCC
99CCCC
9999CC
9966CC
9933CC
9900CC
6600CC
6633CC
6666CC
6699CC
66CCCC
66FFCC
99FFFF
99CCFF
9999FF
9966FF
9933FF
9900FF
6600FF
6633FF
6666FF
6699FF
66CCFF
66FFFF
33FFFF
33CCFF
3399FF
3366FF
3333FF
3300FF
0000FF
0033FF
0066FF
0099FF
00CCFF
00FFFF
33FFCC
33CCCC
3399CC
3366CC
3333CC
3300CC
0000CC
0033CC
0066CC
0099CC
00CCCC
00FFCC
33FF99
33CC99
339999
336699
333399
330099
000099
003399
006699
009999
00CC99
00FF99
33FF66
33CC66
339966
336666
333366
330066
000066
003366
006666
009966
00CC66
00FF66
33FF33
33CC33
339933
336633
333333
330033
000033
003333
006633
009933
00CC33
00FF33
33FF00
33CC00
339900
336600
333300
330000
000000
003300
006600
009900
00CC00
00FF00

Nuancier 216 couleurs en version ordonnéees, avec leur valeurs héxa. et triplet RGB

000000
000,000,000
333333
051,051,051
666666
102,102,102
999999
153,153,153
CCCCCC
204,204,204
FFFFFF
255,255,255
000033
000,000,051
333300
051,051,000
666600
102,102,000
999900
153,153,000
CCCC00
204,204,000
FFFF00
255,255,000
000066
000,000,102
333366
051,051,102
666633
102,102,051
999933
153,153,051
CCCC33
204,204,051
FFFF33
255,255,051
000099
000,000,153
333399
051,051,153
666699
102,102,153
999966
153,153,102
CCCC66
204,204,102
FFFF66
255,255,102
0000CC
000,000,204
3333CC
051,051,204
6666CC
102,102,204
9999CC
153,153,204
CCCC99
204,204,153
FFFF99
255,255,153
0000FF
000,000,255
3333FF
051,051,255
6666FF
102,102,255
9999FF
153,153,255
CCCCFF
204,204,255
FFFFCC
255,255,204
003300
000,051,000
33663
3051,102,051
669966
102,153,102
99CC99
153,204,153
CCFFCC
204,255,204
FF00FF
255,000,255
006600
000,102,000
339933
051,153,051
66CC66
102,204,102
99FF99
153,255,153
CC00CC
204,000,204
FF33FF
255,051,255
009900
000,153,000
33CC33
051,204,051
66FF66
102,255,102
990099
153,000,153
CC33CC
204,051,204
FF66FF
255,102,255
00CC00
000,204,000
33FF33
051,255,051
660066
102,000,102
993399
153,051,153
CC66CC
204,102,204
FF99FF
255,153,255
00FF00
000,255,000
330033
051,000,051
663366
102,051,102
996699
153,102,153
CC99CC
204,153,204
FFCCFF
255,204,255
00FF33
000,255,051
330066
051,000,102
663399
102,051,153
9966CC
153,102,204
CC99FF
204,153,255
FFCC00
255,204,000
00FF66
000,255,102
330099
051,000,153
6633CC
102,051,204
9966FF
153,102,255
CC9900
204,153,000
FFCC33
255,204,051
00FF99
000,255,153
3300CC
051,000,204
6633FF
102,051,255
996600
153,102,000
CC9933
204,153,051
FFCC66
255,204,102
00FFCC
000,255,204
3300FF
051,000,255
663300
102,051,000
996633
153,102,051
CC9966
204,153,102
FFCC99
255,204,153
00FFFF
000,255,255
330000
051,000,000
663333
102,051,051
996666
153,102,102
CC9999
204,153,153
FFCCCC
255,204,204
00CCCC
000,204,204
33FFFF
051,255,255
660000
102,000,000
993333
153,051,051
CC6666
204,102,102
FF999
9255,153,153
009999
000,153,153
33CCCC
051,204,204
66FFFF
102,255,255
990000
153,000,000
CC3333
204,051,051
FF6666
255,102,102
006666
000,102,102
339999
051,153,153
66CCCC
102,204,204
99FFFF
153,255,255
CC0000
204,000,000
FF3333
255,051,051
003333
000,051,051
336666
051,102,102
669999
102,153,153
99CCCC
153,204,204
CCFFFF
204,255,255
FF0000
255,000,000
003366
000,051,102
336699
051,102,153
6699CC
102,153,204
99CCFF
153,204,255
CCFF00
204,255,000
FF0033
255,000,051
003399
000,051,153
3366CC
051,102,204
6699FF
102,153,255
99CC00
153,204,000
CCFF33
204,255,051
FF0066
255,000,102
0033CC
000,051,204
3366FF
051,102,255
669900
102,153,000
99CC33
153,204,051
CCFF66
204,255,102
FF0099
255,000,153
0033FF
000,051,255
336600
051,102,255
669933
102,153,051
99CC66
153,204,102
CCFF99
204,255,153
FF00CC
255,000,204
0066FF
000,102,255
339900
051,153,000
66CC33
102,204,051
99FF66
153,255,102
CC0099
204,000,153
FF33CC
255,051,204
0099FF
000,153,255
33CC00
051,204,000
66FF33
102,255,051
990066
153,000,102
CC3399
204,051,153
FF66CC
255,102,204
00CCFF
000,204,255
33FF00
051,255,000
660033
102,000,051
993366
153,051,102
CC6699
204,102,153
FF99CC
255,153,204
00CC33
000,204,051
33FF66
051,255,102
660099
102,000,153
9933CC
153,051,204
CC66FF
204,102,255
FF9900
255,153,000
00CC66
000,204,102
33FF99
051,255,153
6600CC
102,000,204
9933FF
153,051,255
CC6600
204,102,000
FF9933
255,153,051
00CC99
255,204,153
33FFCC
051,255,204
6600FF
102,000,255
993300
153,051,000
CC6633
204,102,051
FF9966
255,153,102
009933
000,153,051
33CC66
051,204,102
66FF99
102,255,153
9900CC
153,000,204
CC33FF
204,051,255
FF6600
255,102,000
006633
000,102,051
339966
051,153,102
66CC99
102,204,153
99FFCC
153,255,204
CC00FF
204,000,255
FF3300
255,051,000
009966
000,153,102
33CC99
051,204,153
66FFCC
102,255,204
9900FF
153,000,255
CC3300
204,051,000
FF6633
255,102,051
0099CC
000,153,204
33CCFF
051,204,255
66FF00
102,255,000
990033
153,000,051
CC3366
204,051,102
FF6699
255,102,153
0066CC
000,102,204
3399FF
051,153,255
66CC00
102,204,000
99FF33
153,255,051
CC0066
204,000,102
FF3399
255,051,153
006699
000,102,153
3399CC
051,153,204
66CCFF
102,204,255
99FF00
153,255,000
CC0033
204,000,051
FF3366
255,051,102

Feuilles de style : propriétés & valeurs

Les propriétés de style, par ordre alphabétique

background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom

border-collapse
border-color
border-left

border-right

border-spacing
border-style
border-top

border-width
bottom

caption-side
clear
clip
color
cursor
display
empty-cells
float
font
font-family
font- size
font-style
font-variant
font-weight
height
left
letter-spacing

line-height
list-style
list- style-image
list-style-position
list-style- type
margin
margin-bottom
margin-left
margin-right
margin- top
max-height
max-width
min-height
min-width
overflow
padding
padding-bottom

padding-left
padding- right
padding-top
position
right
text-decoration
text- align
text-transform
text-indent
top
vertical-align
visibility
width
white-space
word-spacing
z-index

Listes de propriétés par domaine et effet recherchés

Police et texteAlignementCouleursFondsBoîtesPosition et affichageListesTableauxGénérales à la page

Police de caractère et format de texte

Nom de la police font- family   Style de casse : capitales text-transform
Taille font- size Alinéa de paragraphe text-indent
Style de graisse font-weight Alignement horizontal text-align
Style d’italique font-style Espacement entre les mots word-spacing
Style de décoration text-decoration Espacement entre les lettres letter -spacing
Style de casse : petites capitales font-variant Valeur d’interligne line- height
Méga-propriété de police font Césure white-space
Couleur de texte color Proprités non traitées : text-shadow, quote

Alignement (textes, images, autres éléments et objets)

Alignement horizontal text-align   Alinéa de paragraphe text-indent
Alignement vertical vertical-align Césure white-space
Hauteur de ligne line-height  

Propriétés de couleurs

 

 

 

 

Couleur de texte color
Couleur de fond background-color
Couleur de bordure border-color

Propriétés de fond

 

 

 

 

 

Couleur de fond background-color   Répétition du fond background- repeat
Image de fond background- image Position du fond background-position
Fond fixé background-attachment Méga-propriété de fond background

Propriétés des boîtes

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Largeur width   Marge intérieure en haut padding-top
Hauteur height Marge intérieure à gauche padding- left
Largeur minimale min-width Marge intérieure à droite padding-right
Largeur maximale max-width Marge intérieure en bas padding-bottom
Hauteur minimale min-height Méga-propriété de marge intérieure padding
Hauteur maximale max- height Epaisseur de la bordure border-width
Marge extérieure en haut margin-top Couleur de la bordure border-color
Marge extérieure à gauche margin-left Type de bordure border-style
Marge extérieureà droite margin-right Bordure à gauche border- left
Marge extérieure en bas margin- bottom Bordure en haut border-top
Méga-propriété de marge extérieure margin Bordure à droite border-right
Méga-propriété de bordure border Bordure en bas border-bottom
Alignement vertical vertical-align  

Propriétés de positionnement et d’effet visuel

 

 

 

 

 

 

 

 

 

 

Type d’élément display   Type de positionnement position
Affichage visibility Position par rapport au haut top
Afficher seulement une partie clip Position par rapport au bas bottom
Limiter les dimensions overflow Position par rapport à gauche left
Positionnement flottant float Position par rapport à droite right
Stopper un positionnment flottant clear Ordre d’affichage z-index

Propriétés des listes

 

 

 

 

 

Symbole affiché en tête de ligne list-style- type
Position (retrait) de la puce ou du numéro d’ordre list-style-position
Personalisation de la puce ou le numéro d’ordre par une image list-style-image
Méga-propriété de liste list-style

Propriétés des tableaux

 

 

 

 

 

 

Mélange des bordure border-collapse   Alignement vertical vertical-align
Cellules vides empty-cells Espacement entre cellules border- spacing
Position du titre caption- side Proprités non traitées : table-layout

Propriétés générales de l’interface utilisateur

 

 

Curseur de souris cursor Défini l’apparence du curseur et ses effets auto

Caractéristiques et valeurs admises pour chaques propriété de style

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Propriétés Valeurs possibles

background

 

[ haut de page ]

 

Méga-propriété de fond pour l’image de fond – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 5 propriétés concernant le fond d’un élément : background-color, background-image, background-attachment, background-position et/ou background-repeat.
Les valeurs sont indiquées à la suite, sans ordre prédéfini et séparées par un espace.
Exemple : background : url(« images/fond.gif ») #ffffff no-repeat fixed top center;

 

background-attachment

 

Fixation de l’image de fond définie par background-image – Propriété pouvant s’appliquer à tout élément dont une image de fond est définie, afin de contrôler son déplacement envuel par action de l’ascenseur vertical (convient particulièrement en propriété de l’élément « Body ») :

    • 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-color

 

 

 

Couleur de fond – Propriété s’appliquant à tous les éléments dont on veux coloriser le fond. La couleur est définie selon l’une des méthodes suivantes :

    • couleur en anglais, hexadécimal ou RGB
    • transparent (valeur par défaut)

 

 

background-image

 

Image de fond – Propriété s’appliquant à tous les éléments dont on veux décorer le fond avec une image, avec une valeur de type url(), précisant l’adresse relative ou absolue.

 

background-position

 

Fixation de l’emplacement d’un image de fond définie par background-image – Propriété s’appliquant aussi bien à l’arrière plan de l’élément « Body » qu’à d’autres éléments particuliers, selon l’une des trois méthodes suivantes :

    • Indication de valeurs absolues par rapport coin en haut à gauche de la fenêtre du navigateur (X Y), avec une préférence pour le pixel, pris par défaut sans indication d’unité (ex : « background-position : 50 40 » = « background-position : 50px 40px »)
    • Indication de valeurs en % par rapport coin en haut à gauche de la fenêtre du navigateur (X Y) Une seule valeur centrera l’image verticalement, (ex : « background-position : 5% 4% « )
    • Indication de mots clés précisant la position, seul ou en coulple, la valeur par défaut étant (top left)
        • top : en haut, verticalement
        • center : au milieu, verticalement
        • bottom : en bas, verticalement
        • left : à gauche, horizontalement
        • center : au centre, horizontalement
        • right : à droite, horizontalement

       

       

 

Exemples : « background-position : 50 40 » = « background-position : 50px 40px » – « background-position : 5% 4% » – « background-position : center right » – « background-position : top center »

 

background-repeat

 

 

 

Répétition de l’image de fond définie par background-image – Propriété pouvant s’appliquer à tout élément dont une image de fond est définie , avec les valeurs suivantes :

    • repeat : le fond se répète horizontalement et verticalement (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

 

* Nécessité que les bords de l’image se raccordent de façon continue

 

border

 

[ haut de page ]

 

Méga-propriété pour définir les bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour les 4 bordures, dans l’ordre suivant :

    1. Haut
    2. Droite
    3. Bas
    4. Gauche

 

avec les valeurs suivantes :

    • l’épaisseur
        • par mots clé
            • thin : mince
            • medium : moyenne
            • thick : large

           

           

        • par une valeur numérique et son unité

       

       

    • le style
        • none : aucun
        • dotted : en pointillé
        • dashed : en tirets
        • solid : continue
        • double : double trait
        • groove : 3D en creux
        • ridge : 3D en saillie
        • inset : 3D vers l’arrière
        • outset : 3D vers l’avant

       

       

    • la couleur

 

 

border-bottom

 

Caractéristiques de la bordure basse d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure du bas :

    • l’épaisseur
        • par mots clé
            • thin : mince
            • medium : moyenne
            • thick : large

           

           

        • par une valeur numérique et son unité

       

       

    • le style
        • none : aucun
        • dotted : en pointillé
        • dashed : en tirets
        • solid : continue
        • double : double trait
        • groove : 3D en creux
        • ridge : 3D en saillie
        • inset : 3D vers l’arrière
        • outset : 3D vers l’avant

       

       

    • la couleur

 

 

border-collapse

 

[ haut de page ]

 

Type d’affichage des bordures des cellules et tableaux – Propriété s’appliquant aux éléments d’un tableau et déterminant si leurs bordures doivent être afficfées séparément ou fusionnées

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

 

 

border- color

 

Couleur des bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété, d’appliquer une ou plusieurs couleur pour les 4 bordures, dans l’ordre suivant :

    1. Haut
    2. Droite
    3. Bas
    4. Gauche

 

avec les valeurs de couleur désirées.

 

border- left

 

Caractéristiques de la bordure gauche d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure gauche :

    • l’épaisseur
        • par mots clé
            • thin : mince
            • medium : moyenne
            • thick : large

           

           

        • par une valeur numérique et son unité

       

       

    • le style
        • none : aucun
        • dotted : en pointillé
        • dashed : en tirets
        • solid : continue
        • double : double trait
        • groove : 3D en creux
        • ridge : 3D en saillie
        • inset : 3D vers l’arrière
        • outset : 3D vers l’avant

       

       

    • la couleur

 

 

border-right

 

[ haut de page ]

 

Caractéristiques de la bordure droite d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure droite :

    • l’épaisseur
        • par mots clé
            • thin : mince
            • medium : moyenne
            • thick : large

           

           

        • par une valeur numérique et son unité

       

       

    • le style
        • none : aucun
        • dotted : en pointillé
        • dashed : en tirets
        • solid : continue
        • double : double trait
        • groove : 3D en creux
        • ridge : 3D en saillie
        • inset : 3D vers l’arrière
        • outset : 3D vers l’avant

       

       

    • la couleur

 

 

border-spacing

 

 

Espacement entre les cellules d’un tableau – Proriété s’appliquant aux tableaux et déterminant l’espacement entre les cellules (sans bordures, remplissage et marges), avec une valeur numérique relative ou absolue et son unité. Une valeur donne le même espacement horizontal et vertical. Deux valeurs donnent respectivement l’espacement horizontal et vertical.

border-style

 

Couleur des bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété, d’appliquer une ou plusieurs couleur pour les 4 bordures, dans l’ordre suivant :

    1. Haut (border-top)
    2. Droite (border-right)
    3. Bas (border-bottom)
    4. Gauche (border-left)

 

avec les valeurs suivantes :

    • none : aucun
    • dotted : en pointillé
    • dashed : en tirets
    • solid : continue
    • double : double trait
    • groove : 3D en creux
    • Ridge : 3D en saillie
    • inset : 3D vers l’arrière
    • outset : 3D vers

 

 

border-top

 

Caractéristiques de la bordure haute d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure du haut :

    • l’épaisseur
        • par mots clé
            • thin : mince
            • medium : moyenne
            • thick : large

           

           

        • par une valeur numérique et son unité

       

       

    • le style
        • none : aucun
        • dotted : en pointillé
        • dashed : en tirets
        • solid : continue
        • double : double trait
        • groove : 3D en creux
        • ridge : 3D en saillie
        • inset : 3D vers l’arrière
        • outset : 3D vers l’avant

       

       

    • La couleur

 

 

border-width

 

[ haut de page ]

 

Epaisseur des bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété, d’appliquer une ou plusieurs épaisseurs pour les 4 bordures, dans l’ordre suivant :

    1. Haut
    2. Droite
    3. Bas
    4. Gauche

 

avec les valeurs suivantes :

    • par mots clé
        • thin : mince
        • medium : moyenne
        • thick : large

       

       

    • par valeur numérique relative ou absolue et son unité

 

 

bottom

 

Position par rapport au bas d’unélément, lorsque la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, par rapport au bas, avec une valeur numérique relative ou absolue et son unité.

caption-side

 

Position de la légende d’un tableau – Propriété s’appliquant au tableau et spécifiant l’emplacement de sa légende, avec les valeurs :

    • top : en haut du tableau
    • bottom : en bas du tableau
    • left et right, pour la gauche et la droite sont peut intéressantes

 

 

clear

 

Contrôle d’un élément par rapport au flotement d’un autre – Propriété s’appliquant à tous les éléments, complétant la propriété float avec les valeurs suivantes :

    • left : supprime l’effet d’un élément flottant à gauche précédent
    • right : supprime l’effet d’un élément flottant à droite précédent
    • both : supprime l’effet d’un élément flottant précédent, qu’il soit à gauche ou à droite et déplace l’élément à la suite de l’élément précédent le plus encombrant.
    • none : pas de suppression de l’effet du flottant (par défaut)

 

 

clip

 

Affichage d’une partie d’élément – Propriété s’appliquant à tous les éléments, dont la propriété position a pour valeur « absolue » et définissant une zone rectangulaire de l’élément visible, avec la valeur rect (), comprenant les coordonnées du rectangle qui sera affiché, séparées par une virgule. Cette propriété peut être utile pour rogner l’affichage d’images.

Exemple : {clip : rect(10px, 30px, 20px, 40px);}

 

color

 

Couleur de texte – Propriété s’appliquant à tous les éléments de type texte pour définir leur couleur.

cursor

 

[ haut de page ]

 

Curdeur de souris – Propriété s’appliaquant à tous les éléments et spécifiant le type de curseur qui sera utilisé à la place de la flèche par défaut, avec les valeurs

    • 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)
    • progress : curseur utilisé pour indiquer une tâche de fond (curseur avec 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. (la création d’image curseur nécessite d’utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani)

 

 

display

 

Type d’affichage d’un élément – Propriété s’appliquant à tous les éléments et défini la façon dont ils sont affichés :

    • none : l’élément ne sera pas affiché et devient invisible, en libérant son emplacement
    • block : l’élément devient de type « block » et est affiché au début d’une nouvelle ligne
    • inline : l’élément devient de type « inline » et l’élément suivant est affiché dans le cours de la ligne, sans retour à la ligne suivante.
    • list-item : l’élément devient de type « élément de liste à puce »

 

 

empty-cells

 

Bordure des cellules vides d’un tableau – Propriété s’appliquant aux cellules d’un tableau et spécifiant si la bordure des cellules “réellement vides” doit être dessinée ou non, avec les valeurs :

    • show : les bordures des cellules vides sont affichées.
    • collapse : les cellules vides sont masquées (par défaut).

 

 

float

 

Alignement d’un élément par rapport à un autre (flottement) – Propriété s’appliquant à tous les éléments avec les valeurs suivantes :

    • left : flottant à gauche
    • right : flottant à droite
    • none : pas de flottement (par défaut)

 

 

font

 

Méga-propriété pour la police de caractères – Propriété pouvant s’appliquer à tout élément texte pour en définir, par une unique propriété, la prise en compte des 7 propriétés concernant la police de caractère : font-family, color, font-style, font-size, font-weight, font-variant, line height.
Les valeurs, sans obligation, sont indiquées à la suite, sans ordre prédéfini, hormis pour le nom de la police qui doit être placé à la fin, et séparées par un espace.

Exemple : {font : #000000 bold 12px italic verdana,arial;}

 

font-family

 

[ haut de page ]

 

Définition du type de police de caractère – Propriété s’appliquant à tous les éléments qui comportent du texte. Il est possible d’utiliser :

    • le nom exact de la police : arial, courier, « comic sans ms », verdana, helvetica, « times roman »…)
    • un nom générique : serif, sans serif, monospace, cursive, fantasy.

 

Il est recommandé d’indiquer plusieurs nom, séparés par des espaces, pour cibler, dans l’ordre, les polices pouvant être instalées sur l’appareil du visiteur.
Si le nom de police comporte des espaces, le mettre entre guillemets.
Utilisez des guillemets si le nom de la police comporte des espaces.

Evitez les polices exotiques, qui risquent de ne pas être disponible sur l’ordinateur du visiteurs et peut être protégére par copyright.

 

font-size

 

Taille de la police de caractère – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs, selon l’une des 4 méthodes suivantes :

    • Taille absolue :
        • xx-small : très très petit
        • x-small : très petit
        • small : petit
        • medium : moyen
        • large : grand
        • x-large : très grand
        • xx- large : très très grand 

       

       

    • Taille relative, par rapport à la taille courante :
        • smaller : plus petite
        • larger : plus grande 

       

       

    • valeur numérique relative ou absolue, avec son unité :

 

 

font- style

 

Application de styles italiques aux caractères – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs :

    • italic : italique
    • oblique : autre façon de mettre en italique
    • normal : normal (par défaut)

 

 

font-variant

 

Affichage en petites capitales – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs :

    • small-caps : petites capitales
    • normal : normal (par défaut)

 

 

font- weight

 

Application des style de graisse des caractères – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs, selon l’une des 2 méthodes suivantes :

    • Mots clés :
        • bold : gras
        • bolder : plus gras
        • lighter : plus fin
        • normal : pas gras (par défaut)

       

       

    • 9 valeurs numériques allant du plus léger au plus gras : 100, 200, 300, 400, 500, 600, 700, 800 et 900

 

 

height

 

[ haut de page ]

 

Hauteur d’un élément – Propriété s’appliquant à tous les éléments pour en définir la hauteur, avec les valeurs suivantes :

    • valeur numérique relative ou absolue avec son unité
    • auto : adaptation de la hauteur au texte contenu à l’intérieur (valeur par défaut)

 

Même principe que pour la propriété width qui défini la hauteur d’un élément.

 

left

 

Position par rapport à la gauche d’un élément, lorsque la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, par rapport à la gauche, avec une valeur numérique relative ou absolue et son unité.

letter-spacing

 

 

Espacement entre caractères – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les caractères.

    • valeur numérique relative ou absolue, éventuellement négative, et son unité, avec une préférence pour « em » qui le lie à la police utilisée

 

 

line-height

 

Interligne – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les lignes d’un même paragraphe selon l’une des méthodes suivantes :

    • Valeur d’interligne simple, comprenant des valeurs nuériques sans unités. La valeur indiquée fait office de multiplicateur de la taille de police courante :
        • 2 : double interligne
        • 3 : triple interligne

       

       

    • valeur numérique relative ou absolue (obligatoirement positive) suivie de son unité ou du caractère %, permettant de régler l’interligne à volonté.

 

 

list-style

 

Méga-propriété pour les listes – Propriété s’appliquant aux éléments affichés par des listes, pour en définir, par une unique propriété, la prise en compte des propriétés concernant les listes, en fonction de l’affichage d’un caractère ou d’une image : list-style-type et list-style-position ou list-style-image et list-style-position.
Les valeurs, sans obligation, sont indiquées à la suite, sans ordre prédéfini et séparées par un espace.

Exemple : {list- style: inside square;}

 

list-style-image

 

Personalisation de la puce ou le numéro d’ordre par une image, dans les listes – Propriété s’appliquant aux éléments affichés par des listes en précisant l’url de l’image.

Exemple : list-style-image: url(« images/puce.png »)

 

list-style- position

 

[ haut de page ]

 

Position (retrait) de la puce ou du numéro d’ordre pour les listes – Propriété s’appliquant aux éléments affichés par des listes avec les valeurs :

    • inside : sans retrait (aligné sur la marge gauche du texte)
    • outside : avec retrait (par défaut)

 

 

list-style- type

 

Symbole affiché en tête de ligne, pour les listes à puces – Propriété s’appliquant aux éléments affichés par des listes et déterminant le symbole affiché en tête de ligne, avec au choix :

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

       

       

 

 

margin

 

Méga-propriété pour définir les marges extérieures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 4 marges d’un éléments et par conséquent les propriétés suivantes : margin- top, margin-right, margin-bottom et margin-left.
Les valeurs sont indiquées à la suite, séparées par un espace, en fonction des dimensions des marges recherchées :

    • 1 valeur : valeur identique pour les 4 marges
    • 2 valeurs : la première pour les marges haute et basse, la seconde pour les marges gauche et droite
    • 3 valeurs : la première pour la marge du haut, la seconde pour les marges gauche et droite, la troisième pour la marge du bas
    • 4 valeurs : respectivement, la marge du haut, de la droite, du bas, de la gauche.

 

 

margin-bottom

 

Marge extérieure en bas. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure basse par une valeur numérique et son unité.

 

margin-left

 

Marge extérieure à gauche. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure de gauche par une valeur numérique et son unité.

margin-right

 

Marge extérieure à droite. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure de droite par une valeur numérique et son unité.

margin-top

 

Marge extérieure en haut. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure haute par une valeur numérique et son unité.

max- heigh

 

Hauteur maximale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.

 

max-width

 

Largeur maximale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.

 

min-height

 

Hauteur minimale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.

 

min-width

 

Largeur minimale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.

 

overflow

 

[ haut de page ]

 

Affichage d’une partie d’élément dont le contenu est trop grand- Propriété s’appliquant à tous les éléments, dont la propriété position a pour valeur « absolue » ou « relative » et définissant les modalités d’affichage d’une zone dont le contenu est trop grand, selon les valeurs :

    • visible : tout l’élément sera affiché (par défaut).
    • hidden : l’élément sera coupé s’il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée.
    • scroll : tout comme hidden, l’élément sera coupé s’il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu’on puisse voir la suite du texte.
    • auto : c’est le navigateur qui décide d’ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur « scroll ».

 

 

padding

 

Méga- propriété pour définir les marges intérieures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 4 marges intérieures d’un éléments et par conséquent les propriétés suivantes : padding-top, padding-right, padding-bottom et padding-left.
Les valeurs sont indiquées à la suite, séparées par un espace, en fonction des dimensions des marges recherchées :

    • 1 valeur : valeur identique pour les 4 marges
    • 2 valeurs : la première pour les marges haute et basse, la seconde pour les marges gauche et droite
    • 3 valeurs : la première pour la marge du haut, la seconde pour les marges gauche et droite, la troisième pour la marge du bas
    • 4 valeurs : respectivement, la marge du haut, de la droite, du bas, de la gauche.

 

 

padding-bottom

 

Marge intérieure en bas. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure basse par une valeur numérique et son unité.

 

padding-left

 

Marge intérieureà gauche. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure de gauche par une valeur numérique et son unité.

padding-right

 

Marge intérieureà droite. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure de droite par une valeur numérique et son unité.

padding-top

 

Marge intérieure en haut. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure haute par une valeur numérique et son unité.

position

 

[ haut de page ]

 

Type de positionnment d’un élement – Propriété s’appliquant à tous les éléments et définissant une zone rectangulaire définissant une zone dans laquel pouront être placés d’autres éléments, avec les valeurs :

    • absolute : position absolue par rapport au coin en haut à gauche
    • fixed : position fixe (fonctionne comme la position absolue). L’élément reste à sa position même quand on descend plus bas dans la page.
    • relative : position relative, par rapport à la position « normale » de l’élément
    • static : positionnement normal (par défaut)

 

Les valeurs « absolute », « fixed » et « relative » nécessite en complément les propriétés top ou bottom et left ou right qui determinent les ordonnées et abcisses nécessaires au positionnement.

 

right

 

Position par rapport au bord droit d’un élément, lorsque la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, par rapport à la droite, avec une valeur numérique relative ou absolue et son unité.

text-decoration

 

Décoration de la police de caractère – Propriété s’appliquant à tous les éléments qui comportent du texte dont on veux modifier l’affichage selon les valeurs suivantes :

    • underline : souligné
    • overline : ligne au-dessus
    • line-through : barré
    • blink : clignotant
    • none : normal (par défaut)

 

 

text-align

 

Alignement horizontal du texte – Propriété s’appliquant à tous les éléments qui comportent du texte dont on veux ajuster l’alignement selon les valeurs suivantes :

    • left : à gauche (par défaut)
    • center : centré
    • right : à droite
    • justify : texte justifié (prend toute la largeur de la page)

 

 

text- transform

 

Transformation de la police en majuscules ou minuscules – Propriété s’appliquant à tous les éléments qui comportent du texte, selon les valeurs suivantes :

    • uppercase : tout mettre en majuscules
    • lowercase : tout mettre en minuscules
    • capitalize : première lettre de chaque mot en majuscules
    • none : normal (par défaut)

 

 

text-indent

 

Indentation de paragraphe (décalage 1ère ligne) – Propriété s’appliquant à tous les éléments comportant du texte, mais n’ayant de sens qu’avec un alignement du text (text-align) à gauche ou justifié, avec valeur numérique relative ou absolue (pouvant être négative) et son unité.

 

top

 

Position par rapport au haut d’un élément, dont la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, la propriété left donnant l’absice, avec une valeur numérique relative ou absolue et son unité.

 

vertical-align

 

[ haut de page ]

 

Alignement vertical – Propriété s’appliquant à tous les éléments (comportant ou non du texte) et definissant l’alignement d’un élément (parent) par rapport à un autre élément pouvant être d’un autre type (enfant) – 9 valeur exprimant la relation de l’enfant par rapport au parent :

    • baseline : lignes de base de l’enfant et du parent alignées
    • sub : ligne de base de l’enfant un peu plus bas que la ligne de base du parent (indice de texte)
    • super : ligne de base de l’enfant un peu plus bas que la ligne la partie la plus haute de son prent (exposant)
    • text-top : alignement sur les parties les plus hautes (alignement texte et image)
    • text-bottom : alignement sur les parties les plus basses (alignement texte et image)
    • middle : alignement des milieux verticaux des 2 éléments (alignement au centre d’une cellule de tableau)
    • top : haut de l’enfant aligné sur la partie la plus haute de la ligne (alignement en haut d’une cellule de tableau)
    • bottom : bas de l’enfant aligné sur la partie la plus basse de la ligne (alignement en bas d’une cellule de tableau)
    • valeur en pourcentage (posititf vers le haut et négatif vers le bas) permettant de maitriser exactement les positions respectives des 2 objets

 

 

visibility

 

Affichage d’un élément – Propriété s’appliquant à tous les éléments, caractérisant l’état initial de son affichage sans affecter sa mise en place, avec les valeurs suivantes :

    • inherit : la propriété est héritée de l’élément parent
    • hidden : élément masqué, mais occupant toujours son emplacement
    • visible : l’élément est visible (par défaut)

 

Cette propriété semble proche de la propriété display, mais cette dernière, à la valeur « none » libère complètement l’emplacement

 

width

 

Largeur d’un élément – Propriété s’appliquant à tous les éléments pour en définir la largeur, avec les valeurs suivantes :

    • valeur numérique relative ou absolue avec son unité
    • auto : adaptation de la largeur au texte contenu à l’intérieur (valeur par défaut)

 

Même principe que pour la propriété height qui défini la hauteur d’un élément.

 

white-space

 

[ haut de page ]

 

Formatage des séparateurs (espaces, tabulations, alinéas) – Propriété s’appliquant à tous les éléments comportant du texte, afin de préciser le rendu des séparateurs.

    • normal : séparateurs correspondant à un espace unique avec passage à la ligne est automatique (par défaut)
    • pre : défini un style préformaté,comme la balise HTML <pre> , avec passage à la ligne tel que le texte a été saisi dans le code source (pas automatique)
    • nowrap : même chose que la valeur « pre » à la diférence que les lignes trop longues seront coupées pour se poursuivre sur la ligne suivante.

 

 

word-spacing

 

 

Espacement entre les mots – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les mots, avec pour valeur :

    • valeur numérique, éventuellement négative, avec unité et une préférence pour « em » qui le lie à la police utilisée

 

 

z-index

 

Empilement de l’affichage – Propriété s’appliquant à tous les éléments entrant dans une zone positionnable (propriété position) en indiquant l’ordre d’empilement et du même coup leur niveau de transparence, les valeurs suivantes :

    • auto : empilement des zone dans l’ordre de déclaration dans le document html
    • valeur numérique sans unité : l’empilement se faisant dans l’ordre croissant. En cas de valeur identique pour certains éléments, il est pris en compte leur ordre de déclaration dans le document. Le contenu normal de la page a pour valeur 0.

 

Petit lien pour aller plus loin :
https://developer.mozilla.org/fr/docs/Web/CSS/Reference

Les couleurs et leurs noms

Certains nom de couleur peuvent être utiliser pour spécifier une couleur dans une page HTML. Vous trouverez ci-après la liste de ces nom de couleur, avec leurs équivalent RVB, classé par couleur francisée.

Couleur Aperçu Nom de la couleur RVB
Aigue-marine
texte en couleur
aquamarine #7FFFD4
Aigue-marine moyen
texte en couleur
mediumaquamarine #66CDAA
Amande blanchi
texte en couleur
blanchedalmond #FFEBCD
Azurin
texte en couleur
azure #F0FFFF
Beige
texte en couleur
beige #F5F5DC
Beige mocassin
texte en couleur
moccasin #FFE4B5
Bisque
texte en couleur
bisque #FFE4C4
Blanc
texte en couleur
white #FFFFFF
Blanc Antique
texte en couleur
antiquewhite #FAEBD7
Blanc coquillage
texte en couleur
seashell #FFF5EE
Blanc de lin
texte en couleur
linen #FAF0E6
Blanc floral
texte en couleur
floralwhite #FFFAF0
Blanc fumée
texte en couleur
whitesmoke #F5F5F5
Blanc mentholé
texte en couleur
mintcream #F5FFFA
Blanc miellé
texte en couleur
honeydew #F0FFF0
Blanc navarro
texte en couleur
navajowhite #FFDEAD
Blanc neige
texte en couleur
snow #FFFAFA
Blanc spectral
texte en couleur
ghostwhite #F8F8FF
Blanc vieux
texte en couleur
oldlace #FDF5E6
Bleu
texte en couleur
blue #0000FF
Bleu acier
texte en couleur
steelblue #4682B4
Bleu acier clair
texte en couleur
lightsteelblue #B0C4DE
Bleu Alice
texte en couleur
aliceblue #F0F8FF
Bleu ardoise
texte en couleur
slateblue #6A5ACD
Bleu ardoise moyen
texte en couleur
mediumslateblue #7B68EE
Bleu ardoise sombre
texte en couleur
darkslateblue #483D8B
Bleu ciel
texte en couleur
skyblue #87CEEB
Bleu ciel profond
texte en couleur
deepskyblue #00BFFF
Bleu ciel clair
texte en couleur
lightskyblue #87CEFA
Bleu clair
texte en couleur
lightblue #ADD8E6
Bleu dodger
texte en couleur
dodgerblue #1E90FF
Bleu moyen
texte en couleur
mediumblue #0000CD
Bleu navy
texte en couleur
navy #000080
Bleu nuit
texte en couleur
midnightblue #191970
Bleu pétrole clair
texte en couleur
cadetblue #5F9EA0
Bleu poudré
texte en couleur
powderblue #B0E0E6
Bleu royal
texte en couleur
royalblue #4169E1
Bleu violacé
texte en couleur
blueviolet #8A2BE2
Bleuet
texte en couleur
cornflowerblue #6495ED
Bois de rose
texte en couleur
rosybrown #BC8F8F
Bois dur
texte en couleur
burlywood #DEB887
Brun
texte en couleur
brown #A52A2A
Brun cuir
texte en couleur
saddlebrown #8B4513
Brun sable
texte en couleur
sandybrown #F4A460
Brun tané
texte en couleur
tan #D2B48C
Chardon
texte en couleur
thistle #D8BFD8
Chocolat
texte en couleur
chocolate #D2691E
Corail
texte en couleur
coral #FF7F50
Corail clair
texte en couleur
lightcoral #F08080
Cyan
texte en couleur
cyan #00FFFF
Cyan sombre
texte en couleur
darkcyan #008B8B
Cyan clair
texte en couleur
lightcyan #E0FFFF
Eau
texte en couleur
aqua #00FFFF
Fuschia
texte en couleur
fuchsia #FF00FF
Gris
texte en couleur
gray #808080
Gris ardoise
texte en couleur
slategray #708090
Gris ardoise clair
texte en couleur
lightslategray #778899
Gris ardoise sombre
texte en couleur
darkslategray #2F4F4F
Gris argent
texte en couleur
silver #C0C0C0
Gris gainsboro
texte en couleur
gainsboro #DCDCDC
Gris sombre
texte en couleur
darkgray #A9A9A9
Gris clair
texte en couleur
lightgrey #D3D3D3
Gris océan sombre
texte en couleur
darkseagreen #8FBC8F
Gris rabattu
texte en couleur
dimgray #696969
Indigo
texte en couleur
indigo #4B0082
Ivoire
texte en couleur
ivory #FFFFF0
Jaune
texte en couleur
yellow #FFFF00
Jaune blé
texte en couleur
wheat #F5DEB3
Jaune chiffoné
texte en couleur
lemonchiffon #FFFACD
Jaune clair
texte en couleur
lightyellow #FFFFE0
Jaune maïs doux
texte en couleur
cornsilk #FFF8DC
Jaune paille
texte en couleur
goldenrod #DAA520
Jeune paille clair
texte en couleur
lightgoldenrodyellow #FAFAD2
Jaune paille pâle
texte en couleur
palegoldenrod #EEE8AA
Jaune paille sombre
texte en couleur
darkgoldenrod #B8860B
Jaune-vert
texte en couleur
greenyellow #ADFF2F
Kaki
texte en couleur
khaki #F0E68C
Kaki sombre
texte en couleur
darkkhaki #BDB76B
Lavande
texte en couleur
lavender #E6E6FA
Lavande blush
texte en couleur
lavenderblush #FFF0F5
Magenta sombre
texte en couleur
darkmagenta #8B008B
Magenta
texte en couleur
magenta #FF00FF
Marron
texte en couleur
maroon #800000
Noir
texte en couleur
black #000000
Or
texte en couleur
gold #FFD700
Orange
texte en couleur
orange #FFA500
Orange sombre
texte en couleur
darkorange #FF8C00
Orchidé
texte en couleur
orchid #DA70D6
Orchidé sombre
texte en couleur
darkorchid #9932CC
Orchidé moyen
texte en couleur
mediumorchid #BA55D3
Papaye délavé
texte en couleur
papayawhip #FFEFD5
Parme
texte en couleur
violet #EE82EE
Pêche passé
texte en couleur
peachpuff #FFDAB9
Pérou
texte en couleur
peru #CD853F
Pourpre
texte en couleur
crimson #DC143C
Pourpre moyen
texte en couleur
mediumpurple #9370DB
Prune
texte en couleur
plum #DDA0DD
Rose
texte en couleur
pink #FFC0CB
Rose chaud
texte en couleur
hotpink #FF69B4
Rose clair
texte en couleur
lightpink #FFB6C1
Rose profond
texte en couleur
deeppink #FF1493
Rose voilé
texte en couleur
mistyrose #FFE4E1
Rouge
texte en couleur
red #FF0000
Rouge brique
texte en couleur
firebrick #B22222
Rouge indien
texte en couleur
indianred #CD5C5C
Rouge orangé
texte en couleur
orangered #FF4500
Rouge sombre
texte en couleur
darkred #8B0000
Rouge tomate
texte en couleur
tomato #FF6347
Rouge violacé moyen
texte en couleur
mediumvioletred #C71585
Rouge violacé pâle
texte en couleur
palevioletred #DB7093
Sarcelle
texte en couleur
teal #008080
Saumon
texte en couleur
salmon #FA8072
Saumon sombre
texte en couleur
darksalmon #E9967A
Saumon clair
texte en couleur
lightsalmon #FFA07A
Sienne
texte en couleur
sienna #A0522D
Turquoise
texte en couleur
turquoise #40E0D0
Turquoise sombre
texte en couleur
darkturquoise #00CED1
Turquoise moyen
texte en couleur
mediumturquoise #48D1CC
Turquoise pale
texte en couleur
paleturquoise #AFEEEE
Vert
texte en couleur
green #008000
Vert chartreuse
texte en couleur
chartreuse #7FFF00
Vert citron
texte en couleur
lime #00FF00
Vert citron sombre
texte en couleur
limegreen #32CD32
Vert forêt
texte en couleur
forestgreen #228B22
Vert jaunâtre
texte en couleur
yellowgreen #9ACD32
Vert clair
texte en couleur
lightgreen #90EE90
Vert olive
texte en couleur
olive #808000
Vert olive sombre
texte en couleur
darkolivegreen #556B2F
Vert océan
texte en couleur
seagreen #2E8B57
Vert océan clair
texte en couleur
lightseagreen #20B2AA
Vert océan moyen
texte en couleur
mediumseagreen #3CB371
Vert olive terne
texte en couleur
olivedrab #6B8E23
Vert pale
texte en couleur
palegreen #98FB98
Vert prairie
texte en couleur
lawngreen #7CFC00
Vert printemps
texte en couleur
springgreen #00FF7F
Vert printemps moyen
texte en couleur
mediumspringgreen #00FA9A
Vert sombre
texte en couleur
darkgreen #006400
Violet
texte en couleur
purple #800080
Violet sombre
texte en couleur
darkviolet #9400D3