Vous êtes sur la page 1sur 56

1

Partie IV :
CSS, Applettes, HTML-médias

Djamel Seriai
seriai@ensm-douai.fr
http://csl.ensm-douai.fr
2

Présentation des feuilles de style (01)


 Présentation des feuilles de style
 Le concept de feuilles de style est apparu en 1996 avec la publication par le
W3C d'une nouvelle recommandation intitulée Cascading StyleSheets
(feuilles de style en cascade).

 Les feuilles de style ont été mises au point afin de compenser les manques
du langage HTML en ce qui concerne la mise en page et la présentation.
 Le HTML offre un certain nombre de balises permettant de mettre en
page et de définir le style d'un texte, toutefois chaque élément possède
son propre style, indépendamment des éléments qui l'entourent.

 En utilisant les feuilles de style, lorsque la charte graphique d'un site


composé de plusieurs « centaines » de pages web doit être changée, il suffit
de modifier la définition des feuilles de style en un seul endroit pour
changer l'apparence du site tout entier !
3

Présentation des feuilles de style (02)


 Présentation des feuilles de style
 Exemple d’utilisation
 On souhaite, par exemple, que toutes les pages d'un site aient
les mêmes attributs :
– police de caractères : Helvetica ; ouleur de fonds : bleu pâle ;
– titres : centrés et soulignés.; paragraphes : commençant par un retrait de
12 pixels; marge générale de 10 pixels ;
– espacement autour des tableaux et images de 8 pixels ;
– certains paragraphes qu'on considère comme des annotations ou notes : en
italique, taille des caractères diminuée à 70%.

 En HTML, ces caractéristiques peuvent être codées à chaque


endroit où elles apparaissent. Mais cela présente plusieurs
inconvénients :
– travail fastidieux et long ;
– risque d'erreurs et d'omissions ;
– si on veut modifier un élément de présentation, il faut reprendre
tous les fichiers déjà existant, puis les remettre en ligne.
4

Présentation des feuilles de style (03)


 Présentation des feuilles de style
 Exemple d’utilisation
 Les CSS simplifient le travail :

– Tous les attributs communs à plusieurs fichiers HTML


peuvent être déclarés une seule fois dans un fichier
particulier
• il suffira de faire référence en tête de chaque page
HTML.

– Toute modification de la "feuille de style" sera


immédiatement appliquée partout où cette dernière est
utilisée.
5

Présentation des feuilles de style (04)


 Présentation des feuilles de style
 Le principe des feuilles de style consiste à :
 Attribuer des caractéristiques de mise en forme à des groupes d'éléments.
– Il est par exemple possible de décider de créer un groupe de titres en police Arial,
de couleur verte et en italique.

 Autoriser le contrôle des attributs de présentation de la totalité des


balises d'un projet HTML à partir d'une seule et unique feuille CSS.
 On les appelle "feuilles de style en cascade" car on peut en définir plusieurs, et,
en cas de redondance de style, un ordre de priorité est donné par le navigateur.

 Les feuilles de style permettent:


 D'avoir une présentation homogène sur tout un site sans répéter dans
chacune des pages les commandes de mise en forme.
 De pouvoir changer l'aspect du site entier en modifiant quelques lignes.
 Une plus grande lisibilité du HTML.
 Le positionnement rigoureux des éléments.
 Des chargements de page plus rapides.
6

Présentation des feuilles de style (05)


 La compatibilité des navigateurs
 Malgré l'existence de recommandations du W3C, les feuilles de style ne sont pas
reconnus de la même façon selon les navigateurs. Le premier navigateur a avoir
intégré les feuilles de style est Microsoft Internet Explorer 3.0, puis l'utilisation des
feuilles de style s'est généralisé avec les versions 4.0 et supérieures d'Internet
Explorer et de Netscape Navigator.

 Navigateurs supportant les feuilles de style :


 Microsoft Internet Explorer 3.0 (partiellement)
 Microsoft Internet Explorer 4.x
 Microsoft Internet Explorer 5.x
 Microsoft Internet Explorer 6.x
 Netscape Navigator 4.x
 Netscape Navigator 6.x
 Netscape Navigator 7.x
 Opera 5.x
 Opera 6.x
 Opera 7.x
7

Insertion des styles (02)

 Déclaration des feuilles de style


 Il est préférable de déclarer dans un premier temps un DTD compatible
avec les normes de cette technologie qui semble encore être soumis à des
évolutions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML> ....</HTML>

 Ensuite, de sorte à définir le langage par défaut des feuilles de style, il faut
insérer une commande <META> spécifique dans l'en-tête du document
HTML qui respecte les nouvelles spécifications du W3C grâce au DTD.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>
...
</BODY></HTML>
8

Insertion des styles (03)


 Insertion des styles
 On peut appliquer des règles de style à un document de différentes
façons
 Grâce à une feuille de style intégrée au document, celle-ci sera
située dans l'entête, entre les balises <head> ... </head> . On
utilisera alors la balise <style>

 Une règle peut être appliquée directement à l'élément concerné, on


parle alors de style en ligne. La balise aura alors l'attribut style

 Faire appel à une feuille de style externe au document. Elle est la


plus conforme à l'esprit des CSS et aussi la plus pratique

– On l'appellera grâce à la balise <link> dans l'entête du document


– Importer une feuille de style, en utilisant @import dans la balise <style>
9

Insertion des styles (04)


 Insertion des styles
 Insertion dans un document HTML
 Une définition de mise en page par les <HTML>
feuilles de style sera encadré par une <HEAD>
balise HTML spécifique. <STYLE>
– La commande <STYLE...> insère une <--
définition des feuilles de style. Règles de style...
• La commande </STYLE> ferme -->
la définition des feuilles de </STYLE>
style. ...
</HEAD>
 Les règles de présentation doivent être <BODY>
placées dans l'en-tête (<HEAD>) du ...
document HTML. Diverses commandes HTML
...
 Des balises de commentaires devront </BODY>
encadrer l'énumération des définitions de </HTML>
style afin d'en éviter l'affichage dans un
navigateur ne supportant pas cette
technologie.
10

Insertion des styles (05)


 Insertion des styles
 Insertion dans un document

<html>
<head>
<title>style interne au document</title>
<style type="text/css>
html, body { font-family: sans-serif; background-color: white }
h1, h2 { color: blue }
p {text-align: justify }
</style>
</head>
</html>

 Voir un exemple
11

Insertion des styles (06)

 Insertion des styles


 Les styles en ligne
 Il est possible d'appliquer aux balises <HTML>
HTML un style caractéristique à partir <HEAD>
...
de la balise elle-même.
</HEAD>
<BODY>
 La commande STYLE="Définition de <H1 STYLE="Style; Style2; etc.">
style" insère une définition de style au Titre
sein d'une balise. <H1>
...
– L'attribut STYLE est utilisable dans
Diverses commandes HTML
pratiquement toutes les balises ...
HTML sauf : HTML, HEAD, BASE, </BODY>
META, TITLE, SCRIPT, STYLE, </HTML>
PARAM, BASEFONT

<p style="text-indent:15px"> Un style en ligne... </p>


12

Insertion des styles (07)


 Insertion des styles
 Les feuilles de style externes
 Lorsqu'une définition est énumérée au sein d'un document HTML, les
règles de présentation en découlant s'appliquent à la page courante.
 Si l'on désire qu'une feuille de style provenant d'un fichier différent soit
utilisée dans la présentation d'une page HTML, une commande spéciale est
nécessaire afin de rapatrier les informations de style requises.
– La commande <LINK...> applique une série de définitions externes des feuilles
de style.
• L'attribut HREF="Adresse du CSS" permet de lier le document courant à
une feuille de style externe.
• L'attribut REL="Type de relation"* indique la relation entre le document
et la cible.
• L'attribut TITLE="Texte" spécifie si la feuille de style est par défaut et si
elle peut être désactivée par l'utilisateur.
• L'attribut TYPE="text/css définit les types de styles inclus au sein des
balises <STYLE>.
13

Insertion des styles (08)

 Insertion des styles <HTML>


<HEAD>
 Les feuilles de style externes <LINK HREF="Adresse cible"
 Mise en application : TYPE="text/css"
– Création d'un fichier-feuille de REL="stylesheet"
style, portant l'extension .css (par MEDIA="Type de Média">
exemple : monstyle.css). <LINK HREF="Adresse cible"
TYPE="text/css"
REL="alternate stylesheet"
– Dans l'en-tête des fichiers html TITLE="Description"
concernés, insérer la spécification MEDIA="Type de Média">
faisant référence à la CSS ...
</HEAD>
– Éventuellement spécifier les <BODY>
styles particuliers dans le corps ...
(exemple ci-dessous : le style Diverses commandes HTML
propre aux annotations). ...
</BODY></HTML>
• Exemple :
<DIV CLASS="NOTE">Ceci
est une note</DIV>
14

Insertion des styles (09)


 Insertion des styles
 Les feuilles de style externes
 Le fichier de style .css
body { background-color: #EEEEFF ;
font-family: Helvetica ;
margin: 10 ;
padding: 8 }
p{ text-indent: 12 }
h1, h2, h3, h4, h5, h6 { text-align: center; text-decoration: underline }
.note { font-size: 70% ; font-style: italic ; text-indent:12 }

 Le fichier .html

<html><head><title>appel à une feuille de style externe</title>


<link rel="stylesheet" href="feuilledestyle.css" type="text/css" />
</head>

 Voir un exemple
15

Insertion des styles (10)


 Insertion des styles
 Les feuilles de style externes
 Les autres attributs de la balise LINK :

– L'attribut REV="Type de relation" indique la relation inverse entre la


cible et le document.
– L'attribut CHARSET="Encodage" spécifie l'ensemble des caractères
utilisés pour encoder la cible.
– L'attribut MEDIA="Liste" donne la liste de différents moyens de
communication possible.
 La balise <Link> se place au sein de l'en-tête du document HTML.

 Le navigateur peut également proposer à l'utilisateur le choix entre


deux feuilles de style portant sur des éléments HTML identiques.
D'autre part, les styles de document et les styles en ligne ont la priorité
sur les définitions externes.
*Relation Description 16

stylesheet Définit une feuille de style par défaut,


ou une feuilles de style persistante.

alternate stylesheet Définit une feuille de style alternative.

contents
 sssDéfinit un document qui sert de table des matières.
index Définit un document servant d'index thématique pour la série de documents dont fait partie le
document courant.
glossary Définit un document qui contient un glossaire pour le document courant.

copyright Définit une mention de "copyright" applicable au document en cours.

next Définit le prochain document lorsque le document courant fait partie d'une série de documents
chaînés. Cette valeur est généralement utilisée pour l'attribut rel.
previous Définit le document précédent lorsque le document courant fait partie d'une série de documents
chaînés. Cette valeur est généralement utilisée pour l'attribut rev.
start Définit le premier document d'une séquence de documents. Ce type de lien permet aux moteurs de recherche de
trouver quel est le premier document d'une collection, selon l'idée première de son auteur.

help Définit un document d'aide (informations complémentaires, liens vers d'autres sources
d'informations, etc.)
bookmark Définit un signet. Un signet est un lien sur un point d'entrée particulier dans un document "étendu".
L'attribut title pourra être utilisé pour nommer le signet. Notez que plusieurs signets peuvent être
définis dans un document.
17

Insertion des styles (11)


 Insertion des styles
 Combinaison et alternative des feuilles de style externes
 Lorsqu'un appel à plusieurs feuilles de style externe est pratiqué, le
résultat est une combinaison en cascade d'ensembles de définitions de
style.

– Les styles spécifiés pour des balises HTML seront tous chargés à
condition qu'ils soient tous affectés à des éléments différents.

– Dans le cas où les styles ne sont pas affectés à des éléments


différents, les doublons seront écrasés en sachant que les derniers
styles énoncés ont la priorité.

 En affectant la valeur stylesheet à l'attribut REL de la balise LINK, les


feuilles de styles externes devraient logiquement se combiner.

<LINK HREF="feuille1.css" REL="stylesheet">


<LINK HREF="feuille2.css" REL="stylesheet">
18

Insertion des styles (12)


 Insertion des styles
 Combinaison et alternative des feuilles de style externes
 Si la valeur alternate stylesheet est appliquée et l'attribut TITLE est
utilisé, le navigateur devrait donner le possibilité à l'utilisateur de
choisir la feuille de style qui lui conviendrait.

 Dans ce l’exemple ci-dessous, à l'ouverture de la page, le navigateur


proposerait le choix entre les feuilles de style "premier choix" ou
"second choix" et la dernière restera active quoiqu'il arrive.

<LINK HREF="feuille.css" REL="alternate stylesheet" TITLE="premier choix">


<LINK HREF="feuille2.css" REL="alternate stylesheet" TITLE="second choix">
<LINK HREF="defaut.css" REL="stylesheet">

 Voir un exemple
19

Insertion des styles (13)


 Insertion des styles
<HTML>
 Les feuilles de style importées <HEAD>
 C’est une autre méthode pour le chargement <STYLE>
<!--
de feuilles de style externes, @IMPORT URL(Adresse du CSS);
– La commande @IMPORT URL(Adresse du ...
CSS); importe une feuille de style. Règles de style
...
– la commande se place au sein de la balise -->
<STYLE>, et avant la définition des règles de </STYLE>
style propre au document. ...
</HEAD>
 On peut importer plusieurs feuilles de styles <BODY>
différentes. ...
– la dernière chargée écrasera les définitions de Diverses commandes HTML
style en double des documents CSS ...
<!--la commande Import ne fonctionne
précédemment importés. par sur le navigateur Netscape 4-->
 Les définitions de styles en ligne et de
document prennent le pas sur les feuilles de </BODY></HTML>
styles importées qui écrasent elle-mêmes les Voir un exemple
styles externes.
20

La structure des styles (01)

 Définition d'un style <HTML> <HEAD>


<STYLE>
 La syntaxe d'un style est composée de deux <!--
éléments : Sélecteur de balise {
Propriété1:Valeur1;
 un sélecteur de balise : la dénomination de la balise Propriété2:Valeur2;
sans ses signes inférieur ("<") et supérieur (">") ...
comme H2 ou TABLE, }
– permettant de préciser à quelles balises du document ...
le style s'applique Règles de style
... -->
</STYLE>
 Une liste de propriétés séparées de leur valeur par ...
deux points (":") et d'elles-mêmes par un point </HEAD>
virgule (";"). <BODY>
– permettant de définir précisément le style à <Balise> ... </Balise>
appliquer aux balises sélectionnées ...
</BODY></HTML>

 Exemple : le style à appliquer aux liens hypertextes


(balise <A>) : une police Verdana de taille 18 A { font-family: Verdana;
pixels, en gras et de couleur jaune : font-size: 18px;
font-style: bold;
color: yellow}
21

La structure des styles (02)

 Définition d'un style


 Les différents types de sélecteur

 Les sélecteurs d'éléments


– s'appliquent à la balise HTML à laquelle ils font référence

 Les sélecteurs de classe


– permettent de regrouper des éléments HTML spécifiques,
relatifs à un même sujet.

 Les sélecteurs d’identificateurs


– permettent d'appliquer une règle de style à un élément unique
du document HTML
22

La structure des styles (03)

 Définition d'un style


 Les sélecteurs de balise
 On appelle "sélecteur de balise" le ou les mots-clés précédant
l'accolade, servant à indiquer le ou les balises du document auxquelles
le style entre accolades s'applique.

 Pour définir le style d'une balise HTML spécifique, il suffit de mettre le


nom de la balise (sans les caractères < et >).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML> <HEAD>
body { <STYLE type="text/css">
font-family: arial, <!-- balise {propriétés} -->
helvetica, </STYLE>
sans-serif; </HEAD>
color: blue; <BODY>
background-color:green;} <balise>
p {text-align: justify } ...
</BODY></HTML>
23

La structure des styles (04)


 Les sélecteurs multiples et universel <HTML>
<HEAD>
 Le sélecteur de balise peut comporter une à <STYLE>
plusieurs balises auxquelles les définitions de <!--
Balise1, Balise2, ... {
propriétés seront appliquées.
Propriété1: Valeur1;
 Dans cette situation, chacune des balises Propriété2: Valeur2;
... }
citées devra être séparée l'une de l'autre ...
par une virgule. Règles de style
... -->
 Il existe également un sélecteur universel, </STYLE>
permettant d'affecter des règles de style à ...
chaque élément d'un document HTML. </HEAD>
 * { règles de style } <BODY>
<Balise1> ... </Balise1>
 Néanmoins, le sélecteur universel * n'est ...
pour le moment pris en charge par aucun <Balise2> ... </Balise2>
navigateur courant (Internet Explorer, ...
Diverses commandes HTML
Netscape et Opera). ...
</BODY></HTML>
24

La structure des styles (05)

 Les sélecteurs contextuels


 Il est possible de définir un style pour une balise dans un contexte
spécifique.
 Un style pourra être appliqué à une commande HTML que dans un cas
précis de descendance directe ou indirecte.
 Par exemple, lorsque la balise cible se trouve dans une liste, elle devra
être la cible d'un style.
– le style ne pourra pas agir sur des balises identiques se localisant
dans un paragraphe, dans un tableau ou ailleurs dans le document.
 La syntaxe utilisée consiste à séparer la (ou les) balises contenant de la
cible par un espace blanc.
 Ne fonctionne par sur le navigateur Netscape 4
<UL>
<LI> ... <B> ... <I> ... </I> ... </B> ... <I> ... </I> ... </LI>
...
</UL>
<!-- Une balise I située n'importe où dans un élément LI devra être la cible d'un style. -->
25

La structure des styles (06)

 Les sélecteurs contextuels


 Exemple <HTML>
 La couleur bleue appliquée <HEAD>
<STYLE>
à tout texte gras (balise <b>) <!--
contenu dans un titre de Balise_contenant Balise_cible {Propriété1: Valeur1;...}
...
niveau 1 (balise <h1>). Règles de style
...
– h1 b {color: blue } -->
</STYLE>
...
</HEAD>
 Voir l’exemple <BODY>
<Balise_contenant> <Balise_cible> ... </Balise_cible>
</Balise_contenant>
...
Diverses commandes HTML
...
</BODY></HTML>
26

La structure des styles (07)

 Les sélecteurs descendants


 Un sélecteur descendant permet d'atteindre une balise HTML située
directement à l'intérieur d'un autre élément.

 Ce sélecteur est composé de deux ou plusieurs commandes séparés par un


signe "supérieur à" (">").

 Par exemple, si l'on veut atteindre la balise <EM> placée à l'intérieur de


l'instruction <P>, il suffit d'écrire la ligne suivante :

<P> ... <EM> ... </EM>


<B> ... <EM> ... </EM> ... </B></P> P > EM {font-size: 12pt font-color: red font-style: italic}
27

La structure des styles (08)

 Les sélecteurs descendants


<HTML> <HEAD>
<STYLE>
<!--
Balise_parent > Balise_cible {Propriété1: Valeur1;...}
...
Règles de style
... -->
</STYLE>
...
</HEAD>
<BODY>
<Balise_parent>
<Balise_cible>
...
</Balise_cible>
...
</Balise_parent>
...
Windows Diverses commandes HTML
... </BODY></HTML>
NE NE NE IE IE5 IE OP OP OP
4 6 7 5 5 6 5 6 7
28

La structure des styles (09)

 Les sélecteurs adjacents


 Ce type de sélecteur est utilisé lorsque on veut atteindre une balise qui est
immédiatement en aval d'une autre par rapport à l'arbre du document.
 Dans ce cas, le signe "plus" ("+") sépare les deux instructions dont la
seconde sera le sujet du formatage et la première constituera l'élément frère
immédiatement en amont.
 Ainsi, si nous voulons que toutes les balises <BLOCKQUOTE> suivant
l'instruction <H2>, apparaissent sur un fond vert, alors il suffit d'écrire la
ligne suivante :H2 + BLOCKQUOTE {background-color: green}

<BLOCKQUOTE> ... </BLOCKQUOTE>


<H2> ... </H2>
<BLOCKQUOTE> ... </BLOCKQUOTE>
<P>
<BLOCKQUOTE> ... </BLOCKQUOTE>
</P>
29

La structure des styles (10)


<HTML> <HEAD>
 Les sélecteurs adjacents <STYLE>
<!--
Balise_amont + Balise_cible {
Propriété1: Valeur1;...}
...
Règles de style
... -->
</STYLE>
...
</HEAD>
<BODY>
<Balise_amont>
...
</Balise_amont>
Windows Macintosh <Balise_cible>
...
N N N IE O O O N N N </Balise_cible>
IE IE IE IE
E E E 5 P P P E E E
5 6 4 5 ...
4 6 7 5 5 6 7 4 6 7
Diverses commandes HTML
...
</BODY></HTML>
30

La structure des styles (11)


 Les sélecteurs d'attributs
 Il est possible de localiser la balise à atteindre par l'intermédiaire de l'un de
ses attributs ou de leurs valeurs.

 un style pourra être appliqué à une commande HTML seulement si


l'attribut ou sa valeur correspond à la situation requise.

 Par exemple, lorsque nous voudrions que la balise <A> contenant


l'attribut HREF ou la valeur http:// , alors il suffira d'écrire l'une des
lignes suivantes :
– A[href] {background-color: yellow; font-color: blue}A[href|="http://"]
{background-color: green; font-color: yellow}

 Afin de parfaitement décrire ces contextes, il existe plusieurs méthodes


d'énonciations (voir transparent suivant).
*Méthode 31

Description Exemple Balise cible

Balise[Attribut]

La balise cible doit contenir l'attribut cité.


 sss TABLE[border]
border-style:
{
double
<TABLE
BORDER=...>
}

Balise[Attribut = Valeur]

La balise cible doit non seulement contenir l'attribut mais également TABLE[BORDER="0" <TABLE
correspondre exactement à la valeur souhaitée. ] { BORDER="0">
background-color:
rgb(0, 120, 255)
}
Balise[Attribut ~= Valeur]

La valeur exigée doit être contenu dans la balise, mais toutefois sans qu'elle A[title~="site"] { <A
corresponde exactement. outline-style: outset HREF="page.html"
} TITLE="... site ...">

Balise[Attribut |= Valeur]

Cela signifie que le contenu de l'attribut devra commencer impérativement par A[title="Allez"] { <A
la valeur désirée. font-color: aqua HREF="page.html"
} TITLE="Allez ...">
32

La structure des styles (13)

 Les sélecteurs d'attributs <HTML>


<HEAD>
<STYLE>
<!-- Balise_cible[
Attribut=Valeur]{Propriété1: Valeur1;...}
...
Règles de style
... -->
</STYLE>
</HEAD>
<BODY>
<Balise_cible Attribut="Valeur"
... >
..
Windows Macintosh
</Balise_cible>
...
I Diverses commandes HTML
N N N I I O O O N N N I I
E
E E E E
5
E P P P E E E E E ...
4 6 7 5 6 5 6 7 4 6 7 4 5
5 </BODY>
</HTML>
33

La structure des styles (14)

 Les commentaires
 Afin d'améliorer la lisibilité et la maintenance des documents, il est
nécessaire de commenter le code de programmation à l'intérieur des balises
d'insertion de définition de style.

 La commande /* Commentaire */ permet l'insertion de commentaire au


sein du code.
<HTML> <HEAD>
<STYLE>
<!-- /*Un commentaire*/ ... Règles de style -->
...
</STYLE>
...
</HEAD>
<BODY>
...
Diverses commandes HTML
...
</BODY></HTML>
34

Les classes de style (01)


 Sélecteurs de classes
 Les classes de style permettent de créer plusieurs styles différents pour une
même balise HTML.
 Déclaration
 Dans la définition des styles, il suffira d'ajouter un nom de classe au
sélecteur de balise et de les séparer par un point (".").
h1.description { font-color : blue }

 Ensuite, l'attribut CLASS est utilisé dans le but de faire référence à un nom
de classe afin que lui soit appliqué le style en question.

<h1 class="description">Titre de la classe "description"</h1>

 L'attribut CLASS est utilisable dans pratiquement toutes les balises HTML
sauf : HTML, HEAD, BASE, META, TITLE, SCRIPT, STYLE, PARAM,
BASEFONT
35

Les classes de style (02)

<HTML>
<HEAD>
<STYLE>
<!--
Sélecteur de balise.Nom de classe
... {
Propriété1:Valeur1;...}
...
Règles de style
... -->
</STYLE>
...
</HEAD>
<BODY>
<Balise CLASS="Nom de classe">
</balise>
...
Diverses commandes HTML
...
</BODY>
</HTML>
36

Les classes de style (03)

 Sélecteurs de classes
 Exemple
 Le site web d'un magasin pourra par exemple créé une classe pour le
description de ses produits, une autre pour le mode d'emploi, une autre
encore pour les commentaires des utilisateurs :
<style type="text/css">
.descrition { text-align: justify ; font-color: black}
.mde { text-align : left; font-size : 90%}
.comments { font-style : italic}
</style>

 On fait ensuite appel au sélecteur de classe dans le document HML grâce à


l'attribut class :

<h1 class="description">Titre de la classe "description"</h1>


37

Les classes de style (04)


 Les pseudo-classes
 Les pseudo-classes dynamiques <HTML>
 Ne se différencient pas des classes <HEAD>
<STYLE>
conventionnelles par leur <!--
fonctionnement. Balise:hover... {Propriété1:Valeur1;...}
Balise:active... {Propriété1:Valeur1;...}
 La syntaxe du sélecteur de balise est Balise:focus... {Propriété1:Valeur1;...}
légèrement différente ...
Règles de style
– le nom de classe est prédéfini et il est ... -->
séparé de la balise par deux points (":"). </STYLE>
...
 Il existe trois pseudo-classes </HEAD>
dynamiques: <BODY>
<Balise> ... </Balise>
...
– :hover {...} agît lorsque le curseur de la
Diverses commandes HTML
souris pointe l'élément. ...
– :active {...} agît lors de l'activation de </BODY>
l'élément par un clic de souris. </HTML>
– :focus {...} agît lors de la réception du
focus par la souris ou le clavier.
38

Les classes de style (05)

 Les pseudo-classes
 Les pseudo-classes dynamiques
 Leur fonctionnement dépend du navigateur. Si ce-dernier ne reconnaît
pas la pseudo-classe, elle sera ignorée, c'est le cas par exemple de
:focus avec le navigateur de Netscape.

Windows Macintosh

NE NE NE IE5 OP OP OP NE NE NE
IE5 IE6 IE4 IE5
4 6 7 5 5 6 7 4 6 7
39

Les classes de style (06)


 Les pseudo-classes
 Les pseudo-classes de liens <HTML>
<HEAD>
 Les pseudo-classes de liens sont <STYLE>
utilisées essentiellement avec la <!--
balise <A>. A:link... {Propriété1:Valeur1;...}
– Elles servent à définir un style A:visited... {Propriété1:Valeur1;...}
particulier à chacun des états du ...
liens. Règles de style
... -->
 Par exemple, lorsqu'elle est activée, </STYLE>
la pseudo-classe :active permettra ...
d'appliquer son style comme lorsque </HEAD>
le lien est visité, :visited appliquera <BODY>
le sien. <A ...>
– La pseudo-classe A:link {...} ...
permet de définir le style des liens. Diverses commandes HTML
...
– La pseudo-classe A:visited {...}
</BODY>
permet de définir le style des liens
</HTML>
visités.
40

Les classes de style (07)

 Les pseudo-classes
 La pseudo-classe descendante
 Cette pseudo-classe permet de déterminer un style spécifique à une balise
placée en première position au sein d'un élément parent.

 Cette pseudo-classe peut être utilisée avec les classes descendantes afin de
localiser contextuellement la balise en question et de lui appliquer un style.

 Par exemple, si nous voulions atteindre la balise <SPAN> au sein d'un


élément <DIV>, il faudrait écrire la ligne de commande suivante
– DIV SPAN:first-child {font-family: "Times New Roman"}

<SPAN> ... </SPAN>


<DIV>
<SPAN>... </SPAN>
<SPAN> ... </SPAN>
</DIV>
41

Les classes de style (08)


 Les pseudo-classes <HTML>
<HEAD>
 La pseudo-classe descendante <STYLE>
<--
Balise:first-child... {Propriété1:Valeur1;...}
...
Règles de style
... -->
</STYLE>
...
</HEAD>
<BODY>
<Balise> <Premier_Enfant>
...
</Premier_Enfant>
Windows Macintosh
...
</Balise>
N N N I
IE
I O O O N N N I I ...
E E E E E P P P E E E E E Diverses commandes HTML
55
4 6 7 5 6 5 6 7 4 6 7 4 5
...
</BODY>
</HTML>
42

Les classes de style (09)


 Les pseudo-classes
<HTML>
 Les pseudo-classes de texte <HEAD>
<STYLE>
 Sont utilisées avec toutes les balises
<--
liées au formatage du texte et plus Balise:first-line... {Propriété1:Valeur1;...}
généralement avec la balise <P>. Balise:first-letter... {Propriété1:Valeur1;...}
...
– La pseudo-classe :first-line {...} Règles de style
... -->
permet d'affecter un style à la </STYLE>
première ligne d'un paragraphe. ...
</HEAD>
– La pseudo-classe :first-letter {...} <BODY>
<Balise>
permet d'affecter un style à la ...
première lettre d'un paragraphe. </Balise>
Texte
...
Windows Macintosh </Balise>
...
N N N I I N N N I I Diverses commandes HTML
IE O O O
E E E E E E E E E E ...
55 P5 P6 P7
4 6 7 5 6 4 6 7 4 5 </BODY></HTML>
43

Les classes de style (10)

 Les pseudo-classes
 Les pseudo-classes de langue
 Cette pseudo-classe est utilisée afin de déterminer la langue utilisée
dans une balise ou parfois dans le document afin d'appliquer un style
particulier adapté à la langue usitée.

 Par exemple, si nous voulions appliquer un style de guillemets français


à l'ensemble d'un document HTML, il suffirait d'écrire la ligne suivante
:

HTML:lang(en) {
quotes: '" ' ' "' }
HTML:lang(fr) {
quotes: '« ' ' »' }
44

Les classes de style (11)

 Les pseudo-classes <HTML>


<HEAD>
 Les pseudo-classes de langue
<STYLE>
<--
Balise:lang(Langue)... {Propriété1:Valeur1;...}
...
Règles de style
... -->
</STYLE>
...
</HEAD>
<BODY>
<Balise> ... </Balise>
...
Windows Macintosh Diverses commandes HTML
...
I </BODY></HTML>
N N N I I O O O N N N I I
E
E E E E E P P P E E E E E
5
4 6 7 5 6 5 6 7 4 6 7 4 5
5
45

Les classes de style (12)

 Les pseudo-éléments
 Les pseudo-éléments Before et After
 Les auteurs peuvent spécifier le style et l'emplacement d'un
contenu généré avec les pseudo-éléments :before et :after.
– La pseudo-élément :before {...} permet d'affecter un contenu avant
le contenu initial d'un élément.
– La pseudo-élément :after {...} permet d'affecter un contenu après
le contenu initial d'un élément.

P:before { content: "* " }


P:after { content: ". " }
<P>Texte</P> Affiche : * Texte.
 La propriété content, en conjonction avec ces pseudo-éléments,
indique ce qui est inséré avant ou après le contenu d'un
élément.
46

Les classes de style (13)

 Les pseudo-éléments
<HTML>
 Les pseudo-éléments Before et After
<HEAD>
<STYLE>
<--
Balise:before... {Propriété1:Valeur1;...}
Balise:after... {Propriété1:Valeur1;...}
...
Règles de style
...
-->
</STYLE>
...
</HEAD>
<BODY>
Windows Macintosh
<Balise>Contenu... </Balise>
...
I Diverses commandes HTML
N N N I I O O O N N N I I
E
E E E E
5
E P P P E E E E E ...
4 6 7 5 6 5 6 7 4 6 7 4 5
5 </BODY>
</HTML>
47

Les classes de style (14)


 Les classes à base d’identificateur <HTML> <HEAD>
<STYLE>
 L’attribut ID affecte un identificateur <-- #Nom de classe... {Propriété1:Valeur1;...}
...
unique à la balise correspondante au Règles de style
sein d'un document. ... -->
</STYLE>
 Cet identificateur unique offre la ...
<!--l'attribut ID est effectivement utilisable
possibilité d'affecter une classe à une dans pratiquement toutes les balises HTML
seule balise. sauf : HTML, HEAD, BASE, META, TITLE,
SCRIPT, STYLE.-->
</HEAD>
 il faut déclarer un nom de classe <BODY>
précédé du signe dièse ("#") à la <Balise ID="Nom de classe">
...
place du point et affecter la </Balise>
classe à la balise par le biais de ...
l'attribut ID*. </BODY></HTML>

<style type="text/css">
#special { font-size: 120% } </style>
...
<p id="special">Paragraphe avec l'identificateur "spécial"</p>
48

Les classes de style (15)


 L'héritage des classes
 Les classes héritent des propriétés de style de leur balise de base générique.

 En fait, toutes les propriétés (la famille de polices, le style de caractères,


leur taille, la hauteur de ligne, la couleur du texte, etc.) d'une balise
s'appliquent à une classe de la balise spécifique hormis dans les cas où la
classe écrase une propriété particulière.
 Par contre, les classes ne peuvent pas hériter d'autres classes, mais
uniquement de la version sans définition de classe de la balise qu'elles
représentent.
 En règle générale, il faudrait placer tout les styles courants dans la règle de
définition de la version de base d'une balise et ne créer des classes que pour
les propriétés qui seront uniques à cette classe.
 Cette organisation facilite la maintenance et la partage des classes de style,
notamment lorsqu'elles concernent des projets HTML importants.
49

Les valeurs des propriétés (01)


 Les différentes valeurs applicables
 Les valeurs d’un élément. définiront soit une taille ou une longueur ;
soit une couleur ; soit une URL ; soit un style plus explicite.
 Taille d’un élément
 Pour définir une taille, on utilise une unité numérique qui sera
absolue ou relative.
– Pour les valeurs absolues nous avons :
• le millimètre (mm)
• le centimètre (cm)
• le pouce (in) qui vaut 25,4 mm
• le point (pt)
• le pica (pc)
– Et pour les valeurs relatives :
• la hauteur em (em)
• le pixel (px)
• le pourcentage (%)
50

Les valeurs des propriétés (02)


 Les différentes valeurs applicables
 Taille d’un élément
 L'emploi de telle ou telle unité dépendra de l'élément concerné (une
marge, une police) et du média de sortie (imprimante, écran...).
 Quelques règles
– Pour un affichage écran, préférez toujours une unité relative :
• Une marge d'un centimètre s'affichera bien sur le vôtre mais
paraîtra minuscule sur un autre et énorme sur un troisième. De
plus une personne mal-voyante aura certainement définie, dans
les options de son navigateur, une taille de police plus grande que
la moyenne ; si vous lui imposez une taille absolue, elle peinera à
lire votre texte. Avec des unités relatives, l'esprit de feuille de
style sera respecté : une marge plus importante ici, une police
plus petite là, etc.
51

Les valeurs des propriétés (03)

 Les différentes valeurs applicables


 Taille d’un élément
 Quelques règles

– Les unités en pixel sont relatifs à la résolution de l'écran : sur


un même écran, un pixel sera plus gros avec une résolution
800X600 par rapport à une résolution 1024X768.

– L'unité em équivaut à la hauteur d'une police donnée et sert


donc à définir la taille relative d'une police ; 1.1em est égal à
110% (notez qu'on met un point et non une virgule).

– Les unités em et le pourcentage sont calculées en fonction de


l'élément parent.
Valeur 52
Taille Correspondance Unité Exemple
acceptée

Inche 2,54 cm in Nombre réel 3.5in

Centimètre Un centième de mètre cm Nombre 9cm


entier

Millimètre Un millième de mètre mm Nombre 30mm


entier

Point 1/72éme de pouce pt Nombre 20pt


entier

Pica 12 points pc Nombre réel 4.2pc

Pixel Le plus petit élément px Nombre 640px


de la résolution d'écran entier

Hauteur Unité définie par rapport em Nombre réel 2.5em


de la police à la taille de la police
de caractères* de caractères

Hauteur de Unité définie par rapport à l'"x- ex Nombre réel -3.25ex


la lettre "x"* height".
53

Les valeurs des propriétés (05)


 Les différentes valeurs applicables
 Les couleurs
 Pour spécifier des couleurs, cinq possibilités sont offertes

 la première est l'utilisation de mots clés.


 Les quatre autres utilisent le principe de la synthèse additive,
– est le mélange des trois couleurs rouge, verte et bleue, chacune
disposant de 256 teintes différentes ;
– on l'appelle additive car la somme de ces trois couleurs à leur intensité
maximum donne du blanc.
– Ces méthodes sont :
• La méthode héxadécimale
• La méthode héxadécimale abrégée
• Les deux dernières méthodes, ou méthodes rgb(), consistent à
définir l'intensité des trois couleurs soit avec un nombre (de 0 à
255), soit avec un pourcentage
54

Les valeurs des propriétés (06)


 Les différentes valeurs applicables
 Les couleurs
 Les valeurs par mots-clés suggérés par le W3C sont celles de la palette
VGA de Windows :
– 'aqua', 'black', 'blue', 'fuchsia' , 'gray', 'green' , 'lime', 'maroon', 'navy',
'olive', 'purple', 'red', 'silver', 'teal', 'white' et 'yellow'.
– Il existe d'autres mots-clés mais leur bon affichage n'est pas assuré et sont
donc à éviter.

 La méthode hexadécimale. Chacune des trois valeurs RVB est notée en


hexadécimal de 00 (saturation minimale) à FF (saturation maximale) :
– #000000 donne du noir
– #FF0000 donne du rouge pur
– #00FF00 donne du vert pur
– #0000FF donne du bleu pur
– #FFFFFF donne du blanc
– #888888 donne du gris neutre
– #D2691E donne un ton "chocolat"
55

Les valeurs des propriétés (07)

 Les différentes valeurs applicables


 Les couleurs
 La méthode hexadécimale abrégée
– la saturation des trois couleur est définie de 0 à F
– elle offre donc moins de nuances, notez que le navigateur duplique
chacune des trois valeurs, #F8F équivaut en fait à #FF88FF :
• #000 donne du noir
• #F00 donne du rouge pur
• #0F0 donne du vert pur
• #00F donne du bleu pur
• #FFF donne du blanc
• #888 donne du gris neutre
• #C63 donne un ton "chocolat" proche de celui du dessus
56

Les valeurs des propriétés (08)

 Les différentes valeurs applicables


 Les couleurs
 Les deux dernières méthodes, ou méthodes rgb(),
consistent à définir l'intensité des trois couleurs soit
avec un nombre (de 0 à 255), soit avec un pourcentage :
– rgb(o,o,o) et rgb(0%,0%,0%)donnent du noir
– rgb(255,0,0) et rgb(100%,0%,0%)donnent du rouge pur
– rgb(0,255,0) et rgb(0%,100%,0%)donnent du vert pur
– rgb(0,0,255) et rgb(0%,00%,100%)donnent du bleu pur
– rgb(255,255,255) et rgb(100%,100%,100%)donnent du blanc