HTML 4.0 (suite1)
Nom | Description | Définition | Exemple | Remarque |
Font-family | nom et famille de la police | [[<nom> | <famille>],*] | BODY {font-family: gill, helvetica, sans-serif } | gill et helvetic sont les noms des polices, sans-serif est la famille. |
Font-style | style normal, italique et oblique | normal | italic | oblique | H1, H2, H3{font-style: italic } | défaut : normal |
Font-variant | style petites polices ou normal | normal | small-caps | H3 { font-variant: small-caps } | défaut : normal |
font-weight | Epaisseur de la police | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | EM{font-weight:bolder } | défaut : normal |
font-size | Taille de la police | < xx-small | x-small | small | medium | large | x-large | xx-large> | < larger | smaller> |<taille> | <pourcentage%> | P { font-size: 12pt; } | défaut : medium |
font | Permet de regrouper les différentes propriétés de polices en une ligne | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> | P { font: 12pt/14pt sans-serif } | défaut : dépend de la configuration du navigateur |
color | couleur d'un texte | <couleur> | P { color: red } | défaut : black |
background-color | couleur du fond d'écran | <color> | transparent | H1 { background-color: #F00 } | défaut : transparent |
background-image | image du fond d'écran | <url> | none | BODY { background-image: url(ungi.gif)} | défaut : none |
background-repeat | façon de répéter l'image du fond de l'écran | repeat | repeat-x | repeat-y | no-repeat | BODY { | repeat-x permet de répéter de façon horizontale |
background-attachment | permet de spécifier si l'image reste fixe avec les déplacements d'écran | scroll | fixed | BODY { background: red url(pendant.gif); | défaut : scroll |
background-position | spécifie la position de l'image de fond par rapport au coin supérieur gauche de la fenêtre | [<pourcentage> | <longueur>]{1,2} | [top | center | bottom] || [left | center | right] | BODY { background: url(http://www.ungi.com/banner.jpg) | défaut : 0%,0% |
background | permet de regrouper les différentes propriétés de fond d'écran en une ligne | <background-color> || <background-image> || <background-repeat> || | P { background: url(hess.gif) green 50% repeat fixed } | défaut : aucun |
word-spacing | définit la distance d'espacement entre mots | normal | <longueur> | H1 { word-spacing: 0.4em} | défaut : normal |
letter-spacing | définit la distance d'espacement entre caractères | normal | <length> | EM { letter-spacing: 0.1em } | défaut : normal |
text-decoration | permet de spécifier si le texte est souligné, surligné, barré ou clignotant | none | [ underline || overline || line-through || blink ] | A:link, A:visited, A:active { text-decoration: none } | défaut : none |
vertical-align | spécifie l'alignement vertical du texte par rapport au reste du texte | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <pourcentage> | EM {vertical-align: sub} | défaut : baseline |
text-transform | permet de forcer les caractères en majuscule (uppercase) ou en minuscule (lowercase); capitalize force en majuscule le premier caractère | capitalize | uppercase | lowercase | none | H2 { text-transform: uppercase } | défaut : none |
text-align | permet de placer le texte à gauche, à droite, de le centrer ou de le justifier. | left | right | center | justify | P { text-align:justify} | défaut : dépend de la configuration du navigateur |
text-indent | valeur de l'indentation avant la première ligne | <longueur> | <pourcentage> | P { text-indent: 3em } | défaut : 0 |
line-height | valeur entre deux lignes adjacentes | normal | <nombre> | <longueur> |<pourcentage> | DIV { line-height: 1.2; font-size: 10pt } | défaut : normal |
margin-top | valeur de la marge haute | <longueur> | <pourcentage> | auto | H1 { margin-top: 3px } | défaut : auto |
margin-right | valeur de la marge droite | <longueur> | <pourcentage> | auto | H1 { margin-rigth: 3px } | défaut : auto |
margin-bottom | valeur de la marge basse | <longueur> | <pourcentage> | auto | H1 { margin-bottom: 3px } | défaut : auto |
margin-left | valeur de la marge gauche | <longueur> | <pourcentage> | auto | H1 { margin-left: 3px } | défaut : auto |
margin | permet de regrouper les différentes propriétés de marge en une ligne | [ <longueur> | <pourcentage> | auto ]{1,4} | BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ | défaut : auto |
padding-top | valeur de remplissage haut | <longueur> | <pourcentage> | H1 { padding-top: 3px } | défaut : 0 |
padding-right | valeur de remplissage droit | <longueur> | <pourcentage> | H1 { padding-right: 3px } | défaut : 0 |
padding-bottom | valeur de remplissage bas | <longueur> | <pourcentage> | H1 { padding-bottom: 3px } | défaut : 0 |
padding-left | valeur de remplissage gauche | <longueur> | <pourcentage> | H1 { padding-left: 3px } | défaut : 0 |
padding | permet de regrouper les différentes propriétés de padding en une ligne | [<longueur> | <pourcentage>]{1,4} | H1 { padding: 1em 2em } | défaut : 0 |
border-top-width | donne l'épaisseur du bord haut | thin | medium | thick | <longueur> | H1 { border-top-width: 0.5em } | défaut : medium |
border-right-width | donne l'épaisseur du bord droit | thin | medium | thick | <longueur> | H1 { border-rigth-width: 0.5em } | défaut : medium |
border-bottom-width | donne l'épaisseur du bord droit | thin | medium | thick | <longueur> | H1 { border-bottom-width: 0.5em } | défaut : medium |
border-left-width | donne l'épaisseur du bord droit | thin | medium | thick | <longueur> | H1 { border-left-width: 0.5em } | défaut : medium |
border-width | permet de regrouper les différentes propriétés de border-width en une ligne | [thin | medium | thick | <longueur>]{1,4} | H1 { border-width: thin } | défaut : medium |
border-color | donne la couleur des bordures | <couleur>{1,4} | H1 { border-color: red } | défaut : black |
border-style | permet de donner le style de la ligne de remplissage de la bordure | none | dotted | dashed | solid | double | groove | ridge | inset | outset | #xy34 { border-style: solid dotted } | défaut : none |
border-top | regroupe toutes les propriétés des bordures hautes : épaisseur, style et couleur | <border-top-width> || <border-style> || <couleur> | H1 { border-top: thick } | défaut :aucune |
border-right | regroupe toutes les propriétés des bordures droites: épaisseur, style et couleur | <border-top-width> || <border-style> || <couleur> | H1 { border-right: 1em } | défaut :aucune |
border-bottom | regroupe toutes les propriétés des bordures basses: épaisseur, style et couleur | <border-top-width> || <border-style> || <couleur> | H1 { border-bottom: thick solid red } | défaut :aucune |
border-left | regroupe toutes les propriétés des bordures gauches: épaisseur, style et couleur | <border-top-width> || <border-style> || <couleur> | H1 { border-left: thick solid red } | défaut :aucune |
border | regroupe toutes les propriétés des bordures | <border-width> || <border-style> || <color> | P { border: solid red } | défaut :aucune toutes les bordures sont identiques |
width | permet de donner la largeur d'un élément texte ou image | <longueur> | <pourcentage> | auto | IMG.icon { width: 100px } | défaut : auto |
height | permet de donner la longueur d'un élément texte ou image | <longueur> | auto | IMG.icon { height: 100px } | défaut : auto |
float | permet de cadrer l'élément là où il apparaît ou à gauche ou à droite | left | right | none | IMG.icon { | défaut : none |
clear | permet à un élément d'être cadré sur le côté spécifié | none | left | right | both | H1 { clear: left } | défaut : none |
display | spécifie où l'élément est affiché | block | inline | list-item | none | P { display: block } | défaut : none |
white-space | type d'espace blanc | normal | pre | nowrap | PRE { white-space: pre } | défaut : normal |
list-style-type | définit le type de numérotation, de bullet dans les listes | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | | OL { list-style-type: lower-roman } /* i ii iii iv v etc. */ | défaut : disc |
list-style-image | permet de remplacer les types de numérotation de list-style-type par une image | <url> | none | UL { list-style-image: url(ungi.gif) } | défaut : none |
list-style-position | spécifie si les bullets ou numérotation ou images sont à l'intérieur ou à l'extérieur du texte. | inside | outside | UL { list-style-position: outside } | défaut : outside |
list-style
| permet de regrouper les différentes catégories de list-style | (disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | | UL { list-style: upper-roman inside } | défaut : aucune
|