Cours Internet CSSversion Page Web

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

 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

 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

 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

 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
 Netscape Navigator 4.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.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>
...
</BODY></HTML>
8

 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 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 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

 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

 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 <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

 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

 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

 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

 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

<HTML>
 Les feuilles de style importées <HEAD>
 C’est une autre méthode pour le chargement <STYLE>

<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 ...

 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 
</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
 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
 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 >).
<HTML> <HEAD>
body { <STYLE type="text/css">
font-family: arial, 
helvetica, </STYLE>
sans-serif; </HEAD>
color: blue; <BODY>
background-color:green;} <balise>
p {text-align: justify } ...
</BODY></HTML>
23

 Les sélecteurs multiples et universel <HTML>
<HEAD>
 Le sélecteur de balise peut comporter une à <STYLE>
plusieurs balises auxquelles les définitions de 
 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, ...
Netscape et Opera). ...
</BODY></HTML>
24
 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>

25
 Les sélecteurs contextuels

 Exemple <HTML>
 La couleur bleue appliquée <HEAD>
<STYLE>
à tout texte gras (balise <b>) 
</STYLE>
...
</HEAD>
 Voir l’exemple <BODY>
<Balise_contenant> <Balise_cible> ... </Balise_cible>
</Balise_contenant>
...
...
</BODY></HTML>
26
 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
 Les sélecteurs descendants

<HTML> <HEAD>
<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
 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>
<P>
</P>
29

<HTML> <HEAD>
 Les sélecteurs adjacents <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
...
</BODY></HTML>
30

 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
 Les sélecteurs d'attributs <HTML>

<HEAD>
<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
 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>

...
</STYLE>
...
</HEAD>
<BODY>
...
...
</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
<HTML>
<HEAD>
<STYLE>

</STYLE>
...
</HEAD>
<BODY>
<Balise CLASS="Nom de classe">
</balise>
...
...
</BODY>
</HTML>
36
 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 pseudo-classes
 Les pseudo-classes dynamiques <HTML>
 Ne se différencient pas des classes <HEAD>
<STYLE>
conventionnelles par leur 
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
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 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 pseudo-classes de liens <HTML>
<HEAD>
 Les pseudo-classes de liens sont <STYLE>
utilisées essentiellement avec la 
 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
 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 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

<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 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 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>
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 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 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
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 à 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 ...

</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

 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

 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

 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 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 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 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 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

Langue

Bienvenue sur Scribd !

Cours Internet CSSversion Page Web

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Cours Internet CSSversion Page Web

Titre original :

Transféré par

Description :

Droits d'auteur :

Titres liés

1

Présentation des feuilles de style (01)

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

Présentation des feuilles de style (02)

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

Présentation des feuilles de style (03)

– Tous les attributs communs à plusieurs fichiers HTML

– Toute modification de la "feuille de style" sera

Présentation des feuilles de style (04)

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

 Les feuilles de style permettent:

Présentation des feuilles de style (05)

 Navigateurs supportant les feuilles de style :

Insertion des styles (02)

 Déclaration des feuilles de style

Insertion des styles (03)

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

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

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

Insertion des styles (04)

Insertion des styles (05)

Insertion des styles (06)

 Insertion des styles

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

Insertion des styles (07)

Insertion des styles (08)

 Insertion des styles <HTML>

Insertion des styles (09)

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

Insertion des styles (10)

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

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

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

alternate stylesheet Définit une feuille de style alternative.

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

Insertion des styles (11)

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

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

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

Insertion des styles (12)

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

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

Insertion des styles (13)

La structure des styles (01)

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

 Exemple : le style à appliquer aux liens hypertextes

La structure des styles (02)

 Définition d'un style

 Les sélecteurs d'éléments

 Les sélecteurs de classe

 Les sélecteurs d’identificateurs

La structure des styles (03)

 Définition d'un style

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

La structure des styles (04)

La structure des styles (05)

 Les sélecteurs contextuels

La structure des styles (06)

 Les sélecteurs contextuels

La structure des styles (07)