Pour simplifier la gestion de la présentation des documents HTML,
il est possible de définir des règles globales appelées
Styles. Ces feuilles de styles peuvent être :
Externes et chargées à partir d'un fichier, Internes et générales, dans l'en-tête d'un document entre
les marqueurs <STYLE> et </STYLE>, Internes et locales, en utilisant l'attribut STYLE à l'intérieur
d'un marqueur, Ponctuelles
avec l'attribut STYLE du marqueur <SPAN>.La priorité d'exécution
diminue du local vers le général.
Les propriétés
utilisées : Cette liste ne prétend pas faire le
tour des propriétés des feuilles de style, de leur syntaxe ou
de leur portée. Les valeurs absolues ou relatives des nombres sont celles
des attributs des marqueurs HTML. Les couleurs sont
au format : #RRGGBB.
| Propriétés d'arrière-plan | |
| BACKGROUND-COLOR: couleur | BACKGROUND-IMAGE: url(fichier) |
| BACKGROUND-ATTACHMENT: SCROLL FIXED - Mouvement de l'image pendant un défilement | |
| BACKGROUND-POSITION: X Y (nombres) LEFT CENTER RIGHT TOP MIDDLE BOTTOM | |
| BACKGROUND-REPEAT: REPEAT REPEAT-X REPEAT-Y NO-REPEAT - Manière d'afficher l'image | |
| BACKGROUND: Ind1 Ind2 Ind3 - Indications sur l'image | |
| Propriétés des bordures | |
| BORDER-COLOR: couleur | BORDER: Ind1 Ind2 Ind3 - Indications sur les bordures |
| BORDER-STYLE: DOTTED DASHED RIDGE SOLID GROOVE DOUBLE INSET OUTSET NONE | |
| BORDER-WIDTH: épaisseur (nombre) THIN MEDIUM THICK | |
| BORDER-TOP-WIDTH BORDER-RIGHT-WIDTH BORDER-BOTTOM-WIDTH BORDER-LEFT-WIDTH: épaisseur | |
| BORDER-TOP BORDER- RIGHT BORDER-BOTTOM BORDER-LEFT: épaisseur style couleur | |
| MARGIN-TOP MARGIN-RIGHT MARGIN-BOTTOM MARGIN-LEFT: taille - Espaces extérieurs | |
| PADDING: taille (un à quatre nombres) - Espaces intérieurs | |
| PADDING-TOP PADDING-RIGHT PADDING-BOTTOM PADDING-LEFT: taille | |
| Propriétés de position | |
| TOP: nombre - Distance du haut | BOTTOM: nombre - Distance du bas |
| LEFT: nombre - Distance de la gauche | RIGHT: nombre - Distance de la droite |
| HEIGHT: taille - Hauteur | WIDTH: taille - Largeur |
| VISIBILITY: VISIBLE HIDDEN | Z-INDEX: nombre - Niveau de superposition (0 dessous) |
| POSITION: RELATIVE ABSOLUTE FIXED STATIC | |
| Propriétés des caractères | |
| FONT-STYLE: NORMAL ITALIC OBLIQUE. | FONT-VARIANT: SMALL-CAPS NORMAL |
| COLOR: couleur | FONT: Ind1 Ind2 ind3 - Indications sur la police |
| LETTER-SPACING: nombre - Espace entre les lettres | TEXT-SHADOW: couleur - Texte ombré |
| @FONT-FACE {FONT-FAMILY: ; SRC: ; UNICODE-RANGE: } - Définition d'une police | |
| FONT-FAMILY: police CURSIVE FANTASY SANS-SERIF MONOSPACE SERIF | |
| FONT-SIZE: taille (nombre) XX-SM. X-SM. SMALL MEDIUM LARGE X-LA. XX-LA. SMALLER LARGER | |
| FONT-WEIGHT: graisse (de 100 à 900) NORMAL BOLD BOLDER LIGHTER | |
| TEXT-DECORATION: NONE LINE-THROUGHT OVERLINE UNDERLINE (BLINK Netscape) - Souligner | |
| TEXT-TRANSFORM: CAPITALIZE UPPERCASE LOWERCASE NONE - Majuscules | |
| X:FIRST-LETTER {Ind1; Ind2;} - Mise en forme de la première lettre du texte de X | |
| Propriétés des paragraphes | |
| LINE-HEIGHT :taille - Hauteur de ligne | TEXT-ALIGN: LEFT CENTER RIGHT JUSTIFY |
| MAX-HEIGHT: taille - Hauteur maximale | MIN-HEIGHT: taille - Hauteur minimale |
| MAX-WIDTH: taille - Largeur maximale | MIN-WIDTH: taille - Largeur minimale |
| WORD-SPACING: taille - Espace entre mots | TEXT-INDENT: nombre - Retrait de première ligne |
| ALIGNMENT: LEFT CENTER RIGHT JUSTIFY - Alignement | |
| VERTICAL-ALIGN: TOP MIDDLE BOTTOM BASELINE SUB SUPER TEXT-TOP TEXT-BOTTOM | |
| CLEAR: LEFT RIGHT BOTH NONE - Habillage par du texte | |
| DISPLAY: BLOCK INLINE LIST-ITEM NONE - Affichage des éléments | |
| WHITE-SPACE: NORMAL PRE NOWRAP - Saut de ligne | FLOAT: LEFT RIGHT NONE - Habillage d'un élément |
| CLIP: RECT(limT, limR, limB, limL ou AUTO) à Zone rectangulaire | |
| X:AFTER {texte} - Texte après X | X:BEFORE {texte} - Texte avant X |
| X:FIRST-LINE {Ind1; Ind2;} - Mise en forme de la première ligne de X | |
| Propriétés des listes | |
| LIST-STYLE-IMAGE: url(fichier) - Puce | LIST-STYLE: Ind1 Ind2 Ind3 - Indications sur la liste |
| LIST-STYLE-TYPE: CIRCLE DISK SQUARE NONE (puces) DECIMAL LOWER-ALPHA LOWER-ROMAN UPPER-ALPHA UPPER-ROMAN (numéros) | |
| LIST-STYLE-POSITION: OUTSIDE INSIDE - Retrait des items | |
| Propriétés des tableaux et des colonnes | |
| COLUMN-SPAN: nombre - Fusion de colonnes | ROW-SPAN: nombre - Fusion de lignes |
| COLUMNS: nombre - Nombre de colonnes d'un texte | COLUMN-GAP: taille - Intervalle entre colonnes |
| COLUMN-RULE-COLOR: couleur - Lignes de séparation | COLUMN-RULE-WIDTH: épaisseur - Lignes de séparation |
| CAPTION-SIDE: TOP TOPLEFT TOPRIGHT BOTTOM BOTTOMLEFT BOTTOMRIGHT - Position de la légende | |
| OVERFLOW: VISIBLE HIDDEN SCROLL AUTO - Traitement d'un élément trop grand | |
| COLUMN-RULE-STYLE: DOTTED DASHED RIDGE SOLID GROOVE DOUBLE INSET OUTSET NONE - Lignes | |
| COLUMN-RULE: Ind1 Ind2 Ind3 - Indications sur les lignes | |
| Propriétés du curseur et des liens | |
| A:ACTIVE {couleur} - Liens activés | A:LINK {couleur} - Liens non visités |
| A:VISITED {couleur} - Liens visités | A:HOVER {text-decoration; couleur} - Liens survolés |
| CURSOR: url(fichier) CROSSHAIR POINTER MOVE TEXT WAIT HELP -RESIZE précédé de N NE E SE S SW W NW | |
| Propriétés des sons | |
| AZIMUTH - Orientation Gauche/Droite en degrés | ELEVATION - Orientation Haut/Bas en degrés |
| CUE, CUE-AFTER, CUE-BEFORE - Ajout de son | PAUSE, PAUSE-AFTER, PAUSE-BEFORE - Pause |
| PITCH, PITCH-RANGE - Fréquence sonore, Timbre | PLAY-DURING - Son d'arrière-plan |
| RICHNESS - Caractère de la voix | SPEAK . - Façon de prononcer |
| SPEECH-RATE - Vitesse de lecture | STRESS - Rythme de lecture |
| VOICE-FAMILY - Registre de la voix | VOLUME - Volume de lecture |
| Impression | |
| @PAGE {mise en page} - Définition d'une mise en page en vue de l'impression | |
| @PAGE {SIZE: largeur hauteur; LANDSCAPE PORTRAIT} | |
| @PAGE{MARGIN-TOP: taille,MARGIN-LEFT: taille, MARGIN-BOTTOM: taille, MARGIN-RIGHT: taille} | |
| @PAGE:FOOTER {CONTENT: TxtG , TxtC , TxtD} - Texte de bas de page - Nombreuses valeurs prédéfinies | |
| @PAGE:HEADER {CONTENT: TxtG , TxtC , TxtD} - Texte d'en-tête - Nombreuses valeurs prédéfinies | |
| @PAGE:LEFT {paramètres} - Paramètres pour les pages de gauche | |
| @PAGE:RIGHT {paramètres} - Paramètres pour les pages de droite | |
| X {ORPHANS: :nombre} - nombre minimum de lignes à laisser en fin de page | |
| X {WIDOW: nombre} - Nombre minimum de lignes sur la page suivante | |
| RUNNING-HEAD - Indications dynamiques pour les en têtes et pieds de page | |
| PAGE-BREAK-BEFORE, PAGE-BREAK-AFTER - Définitions de sauts de page | |
Les effets FILTER (Attention,
ces effets ne sont visibles qu'avec Internet Explorer)
| Effets sur les images : Ouvrez le fichier Style1.htm |
|
Image 1 : <IMG SRC="College.gif" style="filter:Alpha(opacity=100,
finishopacity=0, style=2)"> FILTER:ALPHA(OPACITY [début du dégradé]de 0 transparent à 100 opaque, FINISHOPACITY [fin du dégradé], STYLE de 0 à 4 [essayez 2 circulaire et 3 rectangulaire]) - Mélange du premier plan avec l'arrière plan. |
|
Image 2 : <IMG SRC="College.gif"
style="filter:Blur(add=0, direction=90, strength=10)"> FILTER:BLUR(ADD [contours] 0 ou 1, DIRECTION [direction du flou] de 0 à 360 par saut de 45, STRENGTH[intensité de l'effet] 0 pour aucun) - Effet de flou |
|
Image 3 : <IMG SRC="College.gif"
style="filter:FlipH()"> FILTER:FLIPH() - Miroir vertical |
|
Image 4 : <IMG SRC="College.gif"
style="filter:FlipV()"> FILTER:FLIPV() - Miroir horizontal |
|
Image 5 : <IMG SRC="College.gif"
style="filter:Gray()"> FILTER:GRAY() - Niveaux de gris |
|
Image 6 : <IMG SRC="College.gif"
style="filter:Invert()"> FILTER:INVERT() - Négatif couleur |
|
Image 7 : <IMG SRC="College.gif"
style="filter:XRay()"> FILTER:XRAY() - Négatif noir et blanc |
|
Image 8 : <IMG SRC="Oise.gif" style="filter:Chroma(color=#110401))"> FILTER:CHROMA(COLOR) - Rend la couleur désignée transparente |
| Effets sur les textes : Ouvrez le fichier Style2.htm |
|
Texte un : <P style="width:100%; filter:DropShadow(color=#FF0000,
offx=2, offy=-4)"> FILTER:DROPSHADOW(COLOR, [position de l'ombre] OFFX, OFFY). WIDTH est indispensable - Ombre de couleur |
|
Texte deux : <P style="width:100%; filter:Glow(color=#FF0000,
strength=5)"> FILTER:GLOW(COLOR, STRENGTH [intensité de l'effet] de 1 à 255) - Halo de couleur autour du texte |
|
Texte trois : <P style="width:100%; filter:Shadow(color=#FF0000,
direction=180)"> FILTER:SHADOW(COLOR, DIRECTION) - Ombre de couleur dans la direction désignée. |
|
Texte quatre : <P style="width:100%;
filter:Wave(freq=5, light=80, phase=20, strength=3)"> FILTER:WAVE(FREQ [fréquence des vagues] petit, LIGHT de 0 à 100, PHASE [départ] de 0 à 100, STRENGTH [intensité] de 1 à 10) - Affiche un texte avec des ondulations |
| Texte cinq : <P style="letter-spacing:2em"> |
Mise en
place des règles de styles L'insertion
d'une feuille
externe se fait dans l'en-tête du document :
<LINK HREF="Style1.css" REL="stylesheet"
TYPE="text/css">(le lien HREF peut être une URL)L'insertion d'une feuille interne générale se fait dans l'en-tête
entre les marqueurs <STYLE> et </STYLE>
| Style3 ne contient aucune mise en forme | |
| Style4 ajoute dans l'en-tête un début de feuille de style qui centre et affiche en vert les titres de niveau 1 |
<STYLE TYPE="text/css"> H1 {color:green;text-align:center;} </STYLE> |
| Style5 ajoute à la feuille de style une mise en forme (violente) des paragraphes. Notez border pour encadrer, justify pour justifier. |
P {color:blue; font-family:Arial; font-size:14pt;border:5mm outset blue; text-align:justify;} |
| Style6 ajoute à la feuille de style une classe ".gros" et l'applique à un paragraphe <P CLASS="gros"> |
.gros {font-size:18pt; font-weight:bold; color:red;} |
| Style7 ajoute à la feuille de style une classe de cellule et l'applique à une cellule du tableau <TD CLASS="titre" ... | TD.titre {background-color:#CCCCCC; color:#0000FF;} |
| Style8 ajoute à la feuille de style un identificateur et l'applique à l'image <IMG ID="Une" ... | #Une {position:absolute; top:50; left:100;} |
L'insertion de règles internes et locales se fait sur les marqueurs HTML
:
<p STYLE="margin-left:40;
text-align:center;"> Texte du paragraphe </p>L'insertion de règles internes et ponctuelles se fait entre deux marqueurs
avec la balise <SPAN> :
<p>Texte <SPAN STYLE="background-color:cyan;">du</SPAN>
paragraphe</p>
Remarques :H1 {color:green;}
les
règles de styles sont composées d'un sélecteur
(H1) et, entre accolades, d'une ou plusieurs déclarations séparées
par un point-virgule (;). Chaque déclaration est un couple propriété
: valeur séparé par deux points (:).
.gros (attention au .) définit une classe. Ses propriétés
pouvent s'appliquer à plusieurs éléments.#Une est un identificateur. Ses propriétés ne doivent, en principe,
s'appliquer qu'à un seul élément.TD.titre définit une classe de cellules de tableau.
|
Gestion de l'espace 1 : Ouvrez
le fichier Exemple1
et remarquez l'absence de mise en forme du document.
|
| Gestion de l'espace 2 : Ouvrez le fichier Exemple2 et appréciez les changements provoqués par l'introduction de règles de style dans l'en-tête du fichier précédent. À chaque image est associé un identificateur. Les tailles et les positions sont définies en % (adaptation à la place disponible). Les Z-INDEX définissent des priorités en cas de superpositions éventuelles. Notez l'utilisation de la propriété WIDTH de P. |
|
Priorité des règles
de styles 1 :
Ouvrez
le fichier Exemple3.
Il fait appel à une feuille de style "externe" Style1.css.
Comparez-le avec le fichier suivant.
|
| Priorité des règles de styles 2 : Ouvrez le fichier Exemple4 et remarquez que la position relative des règles internes et externes dans l'en-tête génère des priorités (c'est le dernier qui parle qui a raison). Bien entendu, une règle à l'intérieur d'une balise serait prioritaire sur les autres. |
