Chapitre 32 : Feuilles de
style CSS et JavaScript Chapitre 32 : Feuilles de
style CSS et JavaScript| Dernière mise à jour | 17 août 1997 | Auteur | Gilles Maire |
| Serveur | http://www.imaginet.fr/ime/style.htm | Adresse | Gilles.Maire@UNGI.com |
Les feuilles de style font partie des nouveautés importantes
du langage HTML, elle vont permettre de changer l'aspect d'une page
HTML sans modifier son contenu, elle permettront de disposer de
quatre ou cinq présentations différentes pour un même Web, elles
permettront des modifications étendue de tout un site Web puisque
leur principal intérêt réside dans le fait qu'elles peuvent être
déclarées à l'extérieur d'un document HTML.
Il existe plusieurs façons de décrire des feuilles de style :
La définition officielle de CSS est disponible à l'adresse : http://www.w3.org/pub/WWW/TR/REC-CSS1
CSS (Cascading Style Sheet) permet d'utiliser plusieurs feuilles
de style en les combinant, elle permet la notion d'héritage entre
feuilles de styles.
CSS permet de déclarer des feuilles de style en utilisant la syntaxe suivante :
BALISE { Propriété : valeur}
Ainsi la déclaration suivante sera valide : H2 { color
: green }
elle indique que tous les titres de niveau 2 sont en vert. Ici la propriété est color mais il en existe une cinquantaine.
Une feuille de style CSS peut être définie de quatre façons :
Un style peut être identifié par le nom CLASS comme le montre l'exemple suivant :
<HEAD>
<TITLE>Titre</TITLE>
<STYLE TYPE="text/css">H1.exemple { color: red }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=exemple>texte</H1>
</BODY>
Si la balise est omise, toutes les balises seront affectées
:
<STYLE TYPE="text/css">.exemple { color: red }
</STYLE>
Un style peut être également identifié par le nom ID qui doit être unique dans tout le document, le style est alors défini par son nom précédé par le caractère #.
#etiq1001 { color : red }
H1#etiq1002 { color : green }
<P
ID=etiq1002>Texte</P>
Les longueurs généralement positives représentent des valeurs relatives (en pourcentage) ou absolues.
Les valeurs relatives peuvent être :
Dans l'exemple suivant :
BODY {
font-size: 12pt;
text-indent: 3em;
}
text-indent désigne 3 x 12 = 36 points
Les valeurs absolues peuvent être :
Les URL doivent être précédées de l'appel de fonction url
Exemple : BODY { background:
url(http://www.ungi.com/gif/caution.gif) }
les URL relatives sont
interprétées par rapport à la source de la feuille de style et non
pas par rapport à la source du document.
Le tableau donné ci-dessous utilise les conventions suivantes :
| 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 |
