HTML 4.0 (suite1)

Publié le par e-commerce

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.
Si un nom comprend des espaces il doit être coté.

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
Souvent des noms logiques remplacent les nombres donnés ici

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; }
BLOCKQUOTE {font-size: larger }
EM { font-size:150%}
EM { font-size:1.5em}

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>
[ / <line-height> ]?
<font-family>

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

défaut : dépend de la configuration du navigateur

color

couleur d'un texte

<couleur>

P { color: red }
EM{color:rgb(255,0,0)}
EM { color: #f00 }

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 {
background-image: url(ungi.gif);
background-repeat: repeat-y; }

repeat-x permet de répéter de façon horizontale
défaut : repeat

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);
background-repeat: repeat-y;
fixed;}

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)
right top }

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> ||
<background-attachment> || <background-position>

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
Les valeurs manquantes sont celles définies sur le coté opposé
Une seule valeur est applicable à tous

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
top, right, bottom et left
Les valeurs manquantes sont celles définies sur le coté opposé
Une seule valeur est applicable à tous

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
Les valeurs manquantes sont celles définies sur le coté opposé
Une seule valeur est applicable à tous

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
les valeurs omises sont égales aux valeurs par défaut

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
les valeurs omises sont égales aux valeurs par défaut

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
les valeurs omises sont égales aux valeurs par défaut

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
les valeurs omises sont égales aux valeurs par défaut

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 {
float: left;
margin-left: 0;
}

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

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 |
none) ||<url> | none || inside | outside

UL { list-style: upper-roman inside }

défaut : aucune

 

 

 

 

 

 

 

 


Publié dans l'informatique

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article