Le style peut être associer à presque toutes les balises html (la balise <BR> ne supporte pas de style).
On peut aussi ne pas spécidier la balise : .stylexy {}, la class "stylexy" peut être associé à n'importe quel balise HTML.
Le style peut aussi être mis directement dans le document avec la balise html.
| style= | text-decoration: | overline line-through underline none |
ligne par dessus barré ligne par dessous (Souligné) aucun style |
| On peut ajouter le style de ligne: dotted ou wavy (pointillé ou ondulé) et la couleur. | |||
| Ex: | wavy overline lime; |
||
| text-transform: | uppercase lowercase |
||
| text_align: | center left right |
||
| display: | none "" |
Fait disparaitre ou affiche un élément | |
| color: | transparent | https://htmlcolorcodes.com/fr/noms-de-couleur/ | |
| white | 255 255 255 | ||
| lightcyan |
224 255 255 | ||
| paleturquoise |
175 238 238 | ||
| aquamarine |
127 255 212 | ||
| aqua / cyan |
000 255 255 | ||
| deepskyblue | 000 191 255 | ||
| blue | 000 000 255 | ||
| navy | 000 000 128 | ||
| palegreen | 152 251 152 | ||
| greenyellow | 173 255 047 | ||
| chartreuse | 127 255 000 | ||
| lime | 000 255 000 | ||
| springgreen | 000 255 127 | ||
| seagreen | 046 139 087 | ||
| green | 000 128 000 | ||
| darkgreen | 000 100 000 | ||
| teal | 000 128 128 | ||
| olive | 128 128 000 | ||
| Beige | 245 245 220 |
||
| lemonchiffon | 255 250 205 |
||
| moccasin | 255 228 181 | ||
| khaki | 240 230 140 | ||
| yellow | 255 255 000 | ||
| gold | 255 215 000 | ||
| orange | 255 165 000 | ||
| sandybrown | 244 164 096 | ||
| darkorange | 255 140 000 | ||
| coral | 255 127 080 | ||
| tomato | 255 099 071 | ||
| chocolate | 210 105 030 | ||
| brown | 165 042 042 | ||
| maroon | 080 000 000 | ||
| mistyrose | 255 228 225 | ||
| pink | 255 192 203 | ||
| hotpink | 255 105 180 | ||
| deeppink | 255 020 147 | ||
| red | 255 000 000 | ||
| crimson | 220 020 060 | ||
| lavender | 230 230 250 | ||
| thistle | 216 191 216 | ||
| plum | 221 160 221 | ||
| orchid | 218 112 214 | ||
| violet | 238 130 238 | ||
| magenta / fuchsia | 255 000 255 | ||
| purple | 128 000 128 | ||
| indigo | 205 092 092 | ||
| lightgray | 211 211 211 | ||
| silver | 192 192 192 | ||
| darkgray | 169 169 169 | ||
| gray | 128 128 128 | ||
| slategray | 112 128 144 | ||
| dimgray | 105 105 105 | ||
| black | 000 000 000 | ||
| background-color: |
#FAFAFA transparent |
couleur du fond |
|
| background-image: |
initial inherit url(font6.gif) |
Image de fond url() indique l'adresse de l'image. plusieurs images séparée par des virgules. |
|
| linear-gradient(rgba(0,
0, 255, 0.5), rgba(255, 255, 0, 0.5)) |
|||
| border: | solid none |
Cadre |
|
| 2px
solid blue bordure de taille 2 pixel plein et couleur bleu |
|||
| sinon détailler ci-dessous. | 4 arguments
peuvent être mis qui définiront dans l'ordre la ligne du haut, de droit, du bas et de gauche |
||
| boder-style: | none solid dotted double dashed groove ridge inset outset |
sans pleine pointiller double ligne tiret ligne double moitié foncée moitié claire ligne double moitié claire moitié foncée foncé gauche et haut, claire bas et droit inverse de inset |
|
| border-width: | 1px / mm |
largeur de la bordure en px ou mm, 4 arguments peuvent... | |
| border-color: | aqua ... | 4 arguments peuvent... | |
| font-weight: |
normal bold black |
gras extra-gras, 4 arguments peuvent... |
|
| font-size: |
12pt 1.2em |
taille en points ou mm taille * 1,2 (si 10 taille 12 résultante) |
|
| font-variant: |
normal small-caps |
Toutes les lettres sont en majuscule mais les minuscules sont plus
petites que les majuscules. |
|
| letter-spacing: |
5px |
Espace entre les lettres, peut
être négatif. |
|
| font-variant-position: |
normal sub super |
Texte en indice Texte en exposant |
|
| font-family: | x |
nom d'une fonte ou type de fonte : Times, serif, sans-serif, courier, monospace, cursive, fantasy. | |
| font-style: | normal italic oblique xxdeg |
italic de -90 à 90 ne marche que pour la fonte du navigateur. |
|
| position: | relative absolute |
position dépand de la place normale de l'élément position dépand du coin supperieur gauche de la fenêtre du navigateur | |
| top: | yy | xx et yy sont en pixels s'ils sont suivi de px ou de rien et en pourcentage s'ils sont suivit de % ou en pouces centimètres milimètres ... | |
| left: | xx | ||
| pixelLeft: | Donne la position de
l'élément sur l'écran, peut modifier la position sur l'écran,
non reconnu par netscape |
||
| pixelTop: | |||
| z-index: | x | ordre d'empilement des objects de 0 en dessous à x au dessus. | |
| Pour les tableaux dans <table> |
|||
| border-spacing: | 0px | Espace entre les cellules. | |
| white-space: | nowrap; normal; |
Pas de retour automatique à la ligne. | |
| width: |
100% |
Taux d'utilisation de l'espace en pixels ou poucentage. |
|
| background-color: |
aqua; |
Couleur fond du tableau. |
|
| background-image | Mêmes options que pour le document | ||
| Font-size: |
1.5em; 12pt / px; |
Multiplicateur de la taille par défaut. Taille en point ou pixel |
|
| font-style: |
italic; |
||
| border-collapse: | collapse; separate; |
Pour que les bordures du tableau et des cellules se recouvrent. Prioritaire sur border-spacing: |
|
| border: | 2px solid blue | Une bordure de 2 pixels solid et blue. sinon détaillé ci-dessous, 4 arguments par option pour haut droite bas gauche. |
|
| border-style: |
none solid dotted dashed; |
Cadre autour du tableau | |
| border-width: | 1px / mm |
largeur de la bordure en px ou mm, 4 arguments peuvent... | |
| border-color: |
lime; |
Couleur de la bordure. |
|
| Pour les tableaux dans <td> & <tr> | |||
| padding: | 1px |
Espace entre le bord et le contenu de la cellule. |
|
| white-space: | nowrap; normal; |
Pas de retour automatique à la ligne. | |
| vertical-align: | baseline; sub; super; text-top; text-bottom; middle; top; bottom; |
Position verticale du texte |
|
| background-color: | aqua |
Couleur de fond de la cellule |
|
| background-image | Mêmes options que pour le document | ||
| Text-align: | center; | Alignement du texte | |
| font-weight: |
bold |
Grasse du texte |
|
| font-size: |
1.5em; 12px / pt |
Multiplicateur de taille Taille en pixels ou en points |
|
| font-style: |
italic |
||
| border: | 2px solid blue | Une bordure de 2 pixels solid et blue. sinon détaillé ci-dessous, 4 arguments par option pour haut droite bas gauche. |
|
| border-style: |
none solid dotted dashed |
||
| border-width: |
1px |
Taille de la bordure de la cellule si border-style définit une bordure. |
|
| border-color: |
lime; |
Couleur de la bordure. |
|
| Width: |
20%; / 20px |
Largeur de la cellule en pourcentage ou pixel |
|
| Pour les
images : dans <img> |
|||
| POSITION: |
absolute; |
Pour définir la position de l'image. |
|
| TOP: |
200px; |
Du haut. |
|
| LEFT: |
10px; |
De la gauche. |
|
| border-radius: |
40px ou %; |
Coin arrondis. |
|
| width: |
200px; |
Largeur image. |
|
| height: |
200px; |
Hauteur image. |
|
https://developer.mozilla.org/fr/docs/Web/CSS/Reference