Feuilles de style

Appel de feuilles de style

Le format à appliquer à un bloc de texte contenu entre des balises de formatage peut être adapté pour un document entier (ou un groupe de documents) par l'utilisation des feuilles de style. Il suffit de référencer la feuille de style à utiliser pour le document par insertion dans le bloc HEAD de la balise:
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

On peut aussi inclure la feuille de style dans le corps d'un document HTML. Exemple:
<style>h1 { color: #FF80FF; }</style>

Syntaxe CSS

Exemple de contenu pour le fichier style.css:

/* Mon commentaire */
STRONG,H1,H2,H3,EM { color: #003399 } 
UL { list-style-image: url(../charte/rond.gif) } 
H1 { font-weight: bold; font-size: 24pt;text-align:center } 
H3 { font-size: large; font-variant: small-caps;margin-top=25pt } 
BODY { margin:20} /*px, cm, mm, pt*/
TD {  color: green ; font-style:italic }
DIV {width:200px; height:200px;overflow:auto;} /* scroll hidden scroll */

PRE {
      white-space: pre-wrap;      /* CSS2 comme PRE mais on va à la ligne aussi si ça dépasse. nowrap, pre, pre-line (ignore espaces)*/
      word-wrap: break-word;      /* obsolète, spécifique IE 5.5-7 */
}
A:link {text-decoration:none} 
A:visited {text-decoration:none} /*visited, active, hover*/
.rouge { color: red } /* appel par <H1 class="rouge"> */
BR.page { page-break-after: always }
/* Saut de page à l'impression <BR CLASS=page>*/

La syntaxe est la suivante:

balise {propriété1: Valeur1; propriété2: Valeur2; ... }

On peut lister plusieurs balises:

H1,H2,H3: appliquer la règle à H1, H2 et H3
#monObjet: identifié par un attribut ID="monObjet"
.maClasse: caractérisé par attribut CLASS="maClasse"
BODY > H1: H1 fils (direct) de BODY
BODY H1: H1 descendant de BODY
LI:last: Dernier élément
élément[nom d'attribut=valeur d'attribut]: Exemple a[href=index.htm] concerne les éléments avec <a href="index.htm">
(* "tous les éléments" ~= "contient" |= "commence par").

Manuel de référence...

Fonds

Utilisables pour la page entière, mais aussi pour un tableau, une cellule, ...

background-color:lightyellow;
background-image:url(fond.jpg)
background-repeat:no-repeat; /*mais aussi: repeat-x (ou y)*/
background-position:bottom right; /* ou 20% 10%. Il existe 2 propriétés JS: backgroundPositionX (Y) */
background-attachment:fixed;
line-height: 100px; /* Permet de centrer un texte verticalement sur une image */

Liens

A:link {text-decoration:none} /*visited, active, hover*/

Changer le style des liens quand il sont pointés

A:hover {color:red;text-decoration:underline;text-decoration-style:dashed}

Lien non souligné:
<a href="page.htm" style="text-decoration: none">Lien</a>

Pastilles

UL { list-style-image: url(../charte/rond.gif) }

Tailles

xx-small, x-small, small, medium, large, x-large, xx-large ou taille définie en px, cm, mm, ou pt (pas d'espace entre le nombre et l'unité).
Tailles relatives: en %, em (relatif à la taille de police de l'élément parent), smaller, larger.
H1 {line-height: 200%} #grid td { width:1.2em; height:1.2em; }

Centrer un DIV

Centrer le contenu d'une div est assez simple, il suffit de donner à la propriété text-align la valeur center, mais lorsqu'on parle de centrer la div elle-même:

.center-div {
     margin: 0 auto;
     width: 30%; 
}

Si deux valeurs sont spécifiées, la première s'applique aux marges du haut et du bas et la deuxième aux marges de gauche et de droite.

Pour centrer verticalement (paramêtres "width, height, margin" non pris en compte car seulement pour "block"): .center-div { border: 5px solid blue; display: table-cell; text-align:center; vertical-align:middle; }

Polices

Polices génériques:

serif, sans-serif, cursive,fantasy,monospace

MSIE permet le téléchargement à la volée d'une police TrueType. La police .EOF pour un ensemble "family, style, weight" est crée par MSWEFT à partir d'un fichier .TTF
Dans le fichier EOT est encodée l'URL unique à partir de laquelle ça marche...

Bordures

border-style:solid; /* double, groove, inset, outset, dotted, dashed, none */
border-width: thick;
border-color: blue;
padding: 10px; /* entre la bordure et l'élément */
margin: 10px; /* autour de la bordure */
/* chacun de ces attributs peut être individualisé en ajoutant -left- -right- -top- ou -bottom- */
/* Les propriétés pour "border" peuveut aussi être regroupées en séparant les attributs avec des espaces (ordre quelconque) */
border: thin outset red

Tableaux

TABLE.fixe {table-layout:fixed}

ce n'est plus le contenu qui dimensionne les cellules

vertical-align:bottom préférable à attribut VALIGN

Curseurs

cursor:hand est propriétaire Microsoft, utiliser cursor:pointer à la place

Filtres

Internet Explorer permet l'utilisation de "Filtres" (width et height sont obligatoires si appliqués à DIV ou SPAN). Ces filtres peuvent s'appliquer à des textes ou des images, y compris à des .GIF à fond transparent.

Essai filtre

<SPAN style="filter:Gray;width:180;height:121"><img src="../echantillon/image/image.jpg"></SPAN> <SPAN style="filter:Alpha(Opacity=25);width:180;height:121"><img src="../echantillon/image/image.jpg"></SPAN> <SPAN style="filter:shadow(color=gray);width:180;height:121;text-align:center"><img src="../echantillon/image/boule.gif"></SPAN> <DIV style="width:400;height:50;filter:shadow(color=orange)">Essai filtre</DIV>

Mais aussi:

filter:glow(color=blue), dropshadow(color=gray) : plus tranché, flipv(), fliph(), xray(), invert(), blur(), mask(color=gray), Chroma(Color=red) : rend transparent la couleur (pour les .GIF y compris animés)

<IMG SRC=soleil.gif STYLE="filter:chroma(color=white)">

Ces effets peuvent être combinés (séparés par espace): filter: blur(direction=315) dropshadow()

Filtre wave:

Essai de texte dans un bloc avec un filtre wave qui donne un effet de vague

<div STYLE="width:100;height:150;padding:5;text-align:center;filter:wave(strength=5, freq=3, lightstrength=20, add=0, phase=90)">

On peut aussi jouer sur les transitions (comme avec PowerPoint):

<META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)"> <META HTTP-EQUIV="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">

23: transition aléatoire, 2: circle in, 3: circle out, 4: Wipe up, 5: Wipe down, 6: Wipe right, 7: Wipe left

blendTrans(Duration=duration) permet de faire des fade in / fade out.

Positionnement

CSS2 permet de positionner des objets, de n'afficher qu'une partie d'image,.. Ceci est souvent associé à DHTML.

Appels conditionnels

Les versions Internet Explorer antérieures à IE8 ne comprend pas les ordres CSS2. Pour écrire du CSS compatible on peut utiliser la syntaxe suivante:


code {
	white-space:pre-wrap !important; /* ignoré par IE */
	white-space:pre; 
	word-wrap:break-word; /* syntaxe IE */
}

!important est une règle CSS qui peut s'appliquer à toutes les propriétés. Elle empêche l'écrasement d'une propriété. Les vielles versions d'IE ignorent les lignes contenant !important.

iPhone

body[orient="portrait"] { property: value; } body[orient="landscape"] { property: value; }

Float

Mises en page complexes (multicolonnage,...)
<DIV style="FLOAT:left;">colonne 1, ligne 1<br>colonne 1, ligne 2</DIV> <DIV style="FLOAT:left;">colonne 2, ligne 1<br>colonne 2, ligne 2</DIV> <DIV style="CLEAR: both" />retour à la normale

Commandes spéciales

fichier externe inclus par la commande @import url(style.css); au sein d'une feuille de style locale.

Exercices

On fera les exercices pas à pas en rechargeant la page HTML entre chaque manipulation.

Créer une feuille de style rudimentaire (fichier style.css). Le référencer avec balise LINK à partir d'une page HTML.
Changer le format pour les titres (H1,...) et constater les résultats
Utiliser une pastille graphique avec <LI>
Définir une image de fond non répétée et qui ne défile pas
Encadrez les titres H1
Portez une ombre sur une image GIF à fond transparent