Feuilles de style : Introduction

■ Historique
– issu de Microsoft Word en 1996,
– normalisé avec HTML 4.0 sous CSS 1.0 (98)
– CSS 2.0 normalisé en Octobre 1998

■ Compatibilité
– Internet Explorer 4.0, Netscape 4.0

■ Syntaxe :
<style type="text/css">
<!—STYLE(S)-->
</style>
 Feuilles de style : Avantages
• Séparation du contenu et de la mise en forme.
• Cohésion de la présentation tout au long du
site avec les feuilles de style externes.
• Modifier l'aspect d'une page ou d'un site sans
en modifier le contenu.
• Réduire le temps de chargement des pages.
• Permettre le positionnement au pixel près du
texte et/ou des images sans passer par les
"layers" exclusifs à Netscape 4.0.
 Feuilles de style : Définitions
■ Feuille de Styles
– fixer pour une page Web donnée son style
( titres, texte, image d’arrière-plan, liens,
corps, etc…)
■ Feuilles de Styles en Cascade
– définir plusieurs styles appliqués selon une
priorité choisie par le concepteur
■ Feuilles de Styles Externes (fichiers *css)
– étendre ce style à plusieurs pages, voire le
site complet
 CSS : Style de la page (1)
■ Syntaxe interne à la balise <style>
située dans l ’en-tête :
balise { propriété de style 1: valeur;
propriété de style 2: valeur }
H3 { font-family: Arial; font-style: italic }
■ On peut attribuer plusieurs valeurs à
une même propriété.
H3 {font-family: Arial, Helvetica, sans-serif}
 CSS : Style de la page (2)
■ On peut attribuer un même style à
plusieurs balises
H1, H2, H3 {font-family: Arial; font-style: italic}
■ Les propriétés peuvent elles même être
regroupées.
P { font: x-large italic bold small-caps serif }
font-size font-family
font-style font-variant
font-weight
 CSS : Style de la page (3)
■ Lisibilité H3 {
font-family : Arial;
font-size : italic;
color : green
}
■ Les valeurs peuvent être précédées
d'appels à des fonctions comme la
fonction url( )
BODY {background: url(image.gif) fixed }
 CSS : Style de la page (4)
■ Elles peuvent déclencher des styles sur
des événements comme par exemple
"A:hover"
A:hover { color: #405E81; text-decoration:
underline; font-family: Arial, Verdana; }

■ Elles peuvent comporter des directives

d'inclusion comme @import.
 CSS : Longueurs
■ Valeurs absolues : pt, in, cm, mm, pc.
■ Valeurs relatives :
– em (par rapport à la taille de la police),
– ex (par rapport à la taille de la lettre x),
– px (par rapport à la résolution d'une image
en pixel),
– % (par rapport à la totalité de l'espace)

BODY { font-size: 12pt; text-indent: 3em; } 

indentation de 3 x 12 = 36 points
 CSS : Couleurs et URL
■ Mots prédéfinies : 16 couleurs.
■ Code RVB précédé de #
■ Fonction rgb( ) :
– avec valeurs absolues
• rgb(10,20,255)
– avec valeurs relatives
• rgb(10%,20%,70%)

■ Fonction url( ) :
• BODY { background:
url(http://www.ungi.com/caution.gif) }
CSS : Opérations sur les valeurs
■ valeur1 | valeur2 | valeur3 : propriété
peut prendre l'une des trois valeurs
■ valeur1 | valeur2 | valeur3 {1,4} :
propriété peut prendre l'une des trois
valeurs de un à quatre fois.
■ valeur1 || valeur2 || valeur3 : les valeurs
valeur1, valeur2 et valeur3 peuvent être
présentes simultanément
 CSS : Média
Valeur Information(s)
all Pour tous les types
screen Pour tous les moniteurs
tty Type télévision (basse
résolution)
projection Type projecteur
handheld Type PC de poche (Psion,
WinCE, Pilot ...)
print Pour les imprimantes
braille Pour les dispositifs de
représentation en braille
aural Pour les synthétiseurs
vocaux
 CSS : Styles internes à la page
■ Balise interne à l’entête :
<style type="text/css">
<!—
STYLE(S)
-->
</style>
■ Balise interne au corps de page :
<H1 style="font-family: Arial; font-style: italic"> mon
titre de page </H1>
Ou
<STYLE type="text/css">H1 { "font-family: Arial;
font-style: italic" }</STYLE>
 CSS : Styles externes
■ Style externe déclaré dans l ’entête de la page :
<LINK rel="stylesheet" type="text/css"
href="styles.css">

■ Fichier *.css sans balise

H2 {font-family: Times New Roman;
font-weight: bold; font-size: 18pt;}
BODY {background: url(../images/savon.jpg)}
…
 CSS : notions de classes
■ But : affecter des styles différents à une
même balise.
■ Déclarations internes (<head>) ou
externes (*.css) :
– appliquée à une balise :
• balise.nom_de_classe { propriété de style:
valeur }
– ou non :
• .nom_de_classe { propriété de style: valeur }
■ Appel au style
<balise class="nom_de-
classe">..</balise>
 CSS : notions d ’identifieurs
■ Les attributs ID fonctionnent exactement
comme les attributs classes
■ En vu du DHTML ou XML, la notion d’ID est
préférée à la notion de classe.
■ La syntaxe de déclaration est :
#nom_de_ID { propriété de style: valeur }

■ La syntaxe d'appel dans la page est :

<balise id="nom_de_ID"> .... </balise>
 CSS : balises SPAN et DIV
■ But : appliquer un effet de style à
certains morceaux de paragraphe
■ Syntaxe :
<SPAN class=“nom_classe”>texte à
styler</SPAN>

❑ But : appliquer un effet de style à

plusieurs paragraphes
❑ Syntaxe :
<DIV class=“nom_classe”><P>...</P></DIV>
 CSS : Positionner avec CSS
■ But : positionner, au pixel près, du
texte ou une image avec les feuilles de
style (balise <LAYER> de Netscape).
■ La position absolue {position:
absolute} à partir de top=0, left=0
■ La position relative {position: relative}
se détermine par rapport à d'autres
balises de la page.
CSS : Exemple de position absolue

<HEAD><STYLE type="text/css">
.pub {position: absolute; top: 20px; left: 100px;
color: violet; font-size: x-large; font-weight: bold;}
</STYLE></HEAD>
<BODY>
<DIV class=pub> Comment ça marche </DIV>
</BODY>
CSS : Exemple de position relative

<DIV STYLE="position: relative; left: 50; top:100">

Ce texte est placé à 50 pixels (de la bordure gauche)
de la commande DIV (code source HTML de la page)
et à 100 pixels du haut de la commande DIV
</DIV>
 CSS : Superposer texte sur image

<span style="position: absolute; top: 50px; left: 100px; width:

242px; heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
<span style="position: absolute; top: 96px; left: 145px;
color: yellow; font-size: x-small; font-weight: bold;">
Van Lancker Luc
</span>