CSS - 2013 Part 3

CSS (Cascading Style Sheet)
1
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 !
2
 Exemple d’utilisation
 On souhaite, par exemple, que toutes les pages d'un site
aient les mêmes attributs :
 police de caractères : Helvetica ; couleur 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.
3
 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.
4
 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.
5
 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
6
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>
7
 Insertion dans un document HTML
 Une définition de mise en page par les <HTML>
feuilles de style sera encadré par une
balise HTML spécifique. <HEAD>
 La commande <STYLE...> insère une <STYLE>
définition des feuilles de style. <--
 La commande </STYLE> ferme Règles de style...
la définition des feuilles de style. -->
</STYLE>
 Les règles de présentation doivent être ...
placées dans l'en-tête (<HEAD>) du </HEAD>
document HTML. <BODY>
 Des balises de commentaires devront ...
encadrer l'énumération des définitions Diverses commandes HTML
de style afin d'en éviter l'affichage dans ...
un navigateur ne supportant pas cette </BODY>
technologie. </HTML>
8
 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>
9
 Les styles en ligne
 Il est possible d'appliquer aux <HTML>
balises HTML un style <HEAD>
...
caractéristique à partir de la balise </HEAD>
elle-même. <BODY>
<H1 STYLE="Style; Style2;
 La commande STYLE="Définition etc.">
de style" insère une définition de Titre
<H1>
style au sein d'une balise. ...
 L'attribut STYLE est utilisable Diverses commandes HTML
dans pratiquement toutes les ...
balises HTML sauf : HTML, HEAD, </BODY>
BASE, META, TITLE, SCRIPT, </HTML>
STYLE, PARAM, BASEFONT
<p style="text-indent:15px"> Un style en ligne... </p>
10
 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.
 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.

 etc
 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>.
 L’attribut media précise le type de média concerné par les styles du document CSS.
 Les valeurs de l’attribut media sont :
 print (imprimante), tty (télétype), tv (téléviseur), projections
screen (écran d’ordinateur),
(rétro ou vidéo projecteur), handheld (PDA, téléphone), braille (terminal braille),
aural (navigateurs oraux) et all (tous les médias).
11
 Insertion des styles <HTML>
<HEAD>
 Les feuilles de style externes <LINK HREF="Adresse cible"
 Mise en application : TYPE="text/css"
REL="stylesheet"
 Création d'un fichier-feuille de
MEDIA="Type de
style, portant l'extension .css (par
Média">
exemple : monstyle.css).
<LINK HREF="Adresse cible"
TYPE="text/css"
 Dans l'en-tête des fichiers html REL="alternate
concernés, insérer la spécification stylesheet"
faisant référence à la CSS TITLE="Description"
MEDIA="Type de
Média">
 Éventuellement spécifier les
...
styles particuliers dans le corps
</HEAD>
<BODY>
...
Diverses commandes HTML
...
12
</BODY></HTML>
 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>
13
 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">
14
 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">
15
<HTML>
 Insertion des styles <HEAD>
<STYLE>
 Les feuilles de style importées 
<STYLE>, et avant la définition des règles
</STYLE>
de style propre au document.
...
 On peut importer plusieurs feuilles de styles </HEAD>
différentes. <BODY>
 la dernière chargée écrasera les définitions ...
de style en double des documents CSS Diverses commandes HTML
précédemment importés. ...

styles importées qui écrasent elle-mêmes les
styles externes. </BODY></HTML>
16
La structure des styles (01)
 Définition d'un style <HTML> <HEAD>
<STYLE>
 La syntaxe d'un style est composée de deux

deux points (":") et d'elles-mêmes par un point </STYLE>
virgule (";"). ...
 permettant de définir précisément le style à
</HEAD>
appliquer aux balises sélectionnées <BODY>
<Balise> ... </Balise>
 Exemple : le style à appliquer aux liens ...
hypertextes (balise <A>) : une police Verdana de </BODY></HTML>
taille 18 pixels, en gras et de couleur jaune :
A { font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow} 17
 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
18
 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, 
helvetica, </STYLE>
sans-serif; </HEAD>
color: blue; <BODY>
background-color:green;} <balise>
p {text-align: justify } ...
</BODY></HTML> 19
 Les sélecteurs multiples et universel <HTML>
<HEAD>
 Le sélecteur de balise peut comporter une à <STYLE>
plusieurs balises auxquelles les définitions de 
chaque élément d'un document HTML. </STYLE>
 * { règles de style } ...
</HEAD>
 Néanmoins, le sélecteur universel * n'est <BODY>
pour le moment pris en charge par aucun <Balise1> ... </Balise1>
navigateur courant (Internet Explorer,
...
Netscape et Opera).
<Balise2> ... </Balise2>
...
...
</BODY></HTML> 20
 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.
<UL>
Ne fonctionne par sur le navigateur Netscape 4
<LI> ... <B> ... <I> ... </I> ... </B> ... <I> ... </I> ... </LI>
...
</UL>
21

 Les sélecteurs contextuels <HTML>
<HEAD>
 Exemple <STYLE>

 h1 b {color: blue } </STYLE>
...
</HEAD>
<BODY>
<Balise_contenant> <Balise_cible> ...
</Balise_cible> </Balise_contenant>
...
...
</BODY></HTML>
22
 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}
23
 Les sélecteurs descendants
<HTML> <HEAD>
<STYLE>

</STYLE>
...
</HEAD>
<BODY>
<Balise_parent>
<Balise_cible>
...
</Balise_cible>
...
</Balise_parent>
...
... </BODY></HTML>
24
 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).
25
*Méthode
Description Exemple Balise cible
Balise[Attribut]
La balise cible doit contenir l'attribut cité. TABLE[border] { <TABLE

border-style: double BORDER=...>
 sss }
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 A[title~="site"] { <A
qu'elle corresponde exactement. outline-style: outset HREF="page.html"
} TITLE="... site ...">
Balise[Attribut |= Valeur]
Cela signifie que le contenu de l'attribut devra commencer A[title="Allez"] { <A

impérativement par la valeur désirée. font-color: aqua HREF="page.html"
26
} TITLE="Allez ...">
 Les sélecteurs d'attributs
<HTML>
<HEAD>
<STYLE>

</STYLE>
</HEAD>
<BODY>
<Balise_cible Attribut="Valeur"
... >
..
</Balise_cible>
...
...
</BODY>
</HTML>
27
 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> 28
Utilisation des CSS avec les
Formulaire
29
Exercice
 Réaliser un menu déroulant en utilisant les CSS
30
TP à rendre HTML-CSS
 Réaliser un site pour les cours dispensés à l’ENSA en
se basant sur les cadres et les CSS
 Dans le premier cadre, vous affichez le nom de l’ecole et
son logo
 Dans un deuxième cadre, vous créez la liste des cours
dispensés sous forme d’un ensemble de liens hypertextes
 Lorsque vous cliquez sur un lien donné, le contenu de ce
lien s’affiche
 Il est necessaire les styles dans des fichiers séparés des
pages HTML
31
Exercice-HTML-CSS
Ecole Nationale des Sciences
Appliquées
Logo
3 Le contenu de chaque
4
Cours
La liste des cours
dispensés
32
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
33
<HTML>
<HEAD>
<STYLE>

</STYLE>
...
</HEAD>
<BODY>
<Balise CLASS="Nom de classe">
</balise>
...
...
</BODY>
</HTML>
34
 Sélecteurs de classes
 Exemple
 Le site web d'un magasin pourra par exemple créé une classe pour
la 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>

35
Exemple
<head>
<style type="text/css" title="">

body{background-color: yellow;}
div{background-color:#0088FF;}
p{background-color:rgb(255,0,0);}
i{background-color:green;}
h2{ background-color:transparent;}
.invert{color:white;background-color:#000;}
</style>
</head>
<body>
<h1>XHTML 1.1 & CSS 2.1</h1>
<div> <h2>XHTML 1.1</h2>
<p>
Pour <acronym>XHTML</acronym>, le respect des recommandations du <i>W3C
</i> s’impose à tous les webmestres comme une nécessité...</p><br />
</div><hr />
<h2 class="invert">CSS 2.1 : feuilles de style en cascade</h2>
</body>
36
 Les pseudo-classes
 Les pseudo-classes dynamiques
<HTML>
 Ne se différencient pas des classes <HEAD>
conventionnelles par leur <STYLE>
fonctionnement. 
(":"). </STYLE>
...
 Il existe trois pseudo-classes </HEAD>
dynamiques: <BODY>
<Balise> ... </Balise>
 :hover {...} agît lorsque le curseur de la ...
souris pointe l'élément. Diverses commandes HTML
 :active {...} agît lors de l'activation de ...
l'élément par un clic de souris. </BODY>
 :focus {...} agît lors de la réception du </HTML>
focus par la souris ou le clavier.
37
 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.
38
 Les pseudo-classes de liens <HTML>
 Les pseudo-classes de liens sont <HEAD>
utilisées essentiellement avec la <STYLE>
balise <A>. 
d'appliquer son style comme lorsque </STYLE>
le lien est visité, :visited appliquera ...
le sien. </HEAD>
 La pseudo-classe A:link {...} permet <BODY>
de définir le style des liens. <A ...>
 La pseudo-classe A:visited {...} ...
permet de définir le style des liens Diverses commandes HTML
visités.
...
</BODY>
</HTML>
39
Exemple
 affichage de tous les liens non visités en bleu
a:link {color:blue;}
 Affichage de tous les liens visités en vert
 a:visited {color:green;}
 Affichage de tous les liens en rouge quand on les survole ou les
active. l’état focus est ajouté pour la prise en charge du clavier */
a:hover, a:focus, a:active {color:red;}
 affichage en rouge des lignes de tableau survolées
 tr:hover {background-color: red;}
 Affichage de tous les éléments de saisie en jaune s’ils sont activés
input:focus {background-color:yellow;}
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
<HTML>
 Les pseudo-classes <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>
...
</Balise>
...
...
</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;...}
Balise:first-letter... {Propriété1:Valeur1;...}
généralement avec la balise <P>. ...
 La pseudo-classe :first-line {...} Règles de style
... -->
permet d'affecter un style à la </STYLE>
première ligne d'un ...
</HEAD>
paragraphe. <BODY>
<Balise>
 La pseudo-classe :first-letter ...
{...} permet d'affecter un style à </Balise>
Texte
la première lettre d'un ...
paragraphe. </Balise>
...
...
</BODY></HTML> 43
 Les classes à base d’identificateur <HTML> <HEAD>
<STYLE>
 L’attribut ID affecte un <-- #Nom de classe... {Propriété1:Valeur1;...}
...
identificateur unique à la balise Règles de style
correspondante au sein d'un ... -->
document. </STYLE>
...

une seule balise. </HEAD>
<BODY>
 il faut déclarer un nom de <Balise ID="Nom de classe">
...
classe précédé du signe dièse </Balise>
("#") à la place du point et ...
affecter la classe à la balise par </BODY></HTML>
le biais de l'attribut ID*.

#special { font-size: 120% } </style>
...
<p id="special">Paragraphe avec l'identificateur "spécial"</p> 44
Exemple
 Le code CSS
div {color: black;}
#bleu {color: white; background-color: blue;}
 le code XHTML :
<div id="bleu">Texte en blanc sur bleu</div>
<div>Texte en noir </div>
45
 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.
 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.
46
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 ;
 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 (%)
47
 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.
48
 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.
49
Valeur
Taille Correspondance Unité Exemple
acceptée
Inche 2,54 cm in Nombre 3.5in

réel
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 4.2pc

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

de la résolution d'écran entier
Hauteur Unité définie par rapport em Nombre 2.5em

de la police à la taille de la police réel
de caractères* de caractères
Hauteur de Unité définie par rapport à ex Nombre -3.25ex

la lettre "x"* l'"x-height". réel
50
 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
51
 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"
52
 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
53
 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
54
Quelques propriétés Intéréssantes (1)
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
Exercice -Tableau
114
Exemple CSS (margin, padding,
border)
 En HTML chaque élément est considéré comme une
boîte . En effet, aux dimensions induites par leur contenu
s’ajoutent souvent les espaces de marges externes
(margin) ou internes (padding) et une bordure
(border).
115
Exemple
div
{
width: 300px; height: 200px; background: yellow;
}
p#premier { width: 100px; background: orange; padding-bottom : 50px; border-
style:dotted;border-color : Aqua; border-width :medium;
}
p#second {width: 150px; height: 50px; background: green; border-style: dotted;
border-color : Aqua; border-width : thick;
margin-bottom : 15px; margin-top : 20px;
}
</style>
</head>
<body>
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte</p>
</div>
</body>
</html>
116
Page Web affichée
117
Exemple CSS (Positionnement)
C’est une variante du positionnement dans le flux courant, qu’on active par
la déclaration position: relative;
L’élément concerné est alors dit « positionné », et prend d’abord sa place
dans le flux courant. Il peut ensuite s’en décaler à l’aide des propriétés top,
right, bottom et left.
Reprenons l’exemple précédent en recourant au positionnement relatif pour
décaler le second paragraphe de sa position normale dans le flux.
Pour le pousser de 20 px à droite et de 15 px vers le haut, on lui spécifie

d’abord position: relative puis les
mouvements left: 20px et bottom: 15px :
118
Exemple positionnement relatif
div
{
background-color : Yellow;
}
p#premier {
margin-bottom: 0;
margin-top: 0px;
width: 100px;
background: orange;
}
p#second {
position: relative;
left: 20px;
bottom: 15px;
margin-top: 0;
margin-left: 3em;
width: 150px;
height: 50px;
background: green;
}
119
Le positionnement absolu
Le positionnement absolu
Un élément positionné en absolu est donc placé par rapport à son parent si ce dernier
est lui-même positionné, et sinon par rapport au premier ancêtre positionné, en
remontant au besoin jusqu’à la page entière (élément <body>). Ce principe
fondamental distingue le positionnement absolu du placement dans le flux :
120
Positionnement absolu
div {
width: 300px; height: 200px;
background: yellow;
}
p#premier {
width: 100px; background: orange;
}
p#second {
position: absolute;
top: 0;
left: 0;
width: 150px; height: 50px;
background: green;
}
p{
margin: 0;
}
121
Page Web affichée
122
Exemple (1)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Page sans titre</title>
span {color:red; font-size:24pt; font-style:italic;
font-family: serif; text-decoration: underline;}
</style>
</head>
<body>
Ceci est un texte ne dependant d'aucune balise,
<span> cette portion est ecrite en rouge en 24 points
italique et le tout est souligne </span>.
</body>
</html>
123
Exemple (2)
 La balise <SPAN>
 Il peut arriver que l'on désire appliquer un style à une
portion de texte qui n'est pas délimitée par une balise.
Pour réaliser celà on utilise la balise <SPAN>. La portion
de texte concernée sera délimitée à l'aide de cette balise à
laquelle on aura au préalable appliqué un style.
124
Exercice -Tableau
125
Exercice -Tableau
126
Exercice –Tableau+Formulaire
127
Exercice- liste
128
TP HTML-CSS
 Réaliser un site pour les cours dispensés à l’ENSA en
se basant sur les cadres et les CSS
 Dans le premier cadre, vous affichez le nom de l’ecole et
son logo
 Dans un deuxième cadre, vous créez la liste des cours
dispensés sous forme d’un ensemble de liens hypertextes
 Lorsque vous cliquez sur un lien donné, le contenu de ce
lien s’affiche
 Il est necessaire les styles dans des fichiers séparés des
pages HTML
129
Exercice-HTML-CSS
Ecole Nationale des Sciences
Appliquées
Logo
3 Le contenu de chaque
4
Cours
La liste des cours
dispensés
130
Exercice
 Réaliser un menu déroulant en utilisant les CSS
131

CSS - 2013 Part 3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS - 2013 Part 3

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

CSS (Cascading Style Sheet)

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

 Tous les attributs communs à plusieurs fichiers HTML

 Toute modification de la "feuille de style" sera

 Navigateurs supportant les feuilles de style :

 Une règle peut être appliquée directement à l'élément

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

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

 alternate stylesheet : Définit une feuille de style alternative.

 Si la valeur alternate stylesheet est appliquée et l'attribut TITLE est

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

 Les sélecteurs d'éléments

 Les sélecteurs de classe

 Les sélecteurs d’identificateurs

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

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

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

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

 Afin de parfaitement décrire ces contextes, il existe plusieurs

Description Exemple Balise cible

La balise cible doit contenir l'attribut cité. TABLE[border] { <TABLE

Cela signifie que le contenu de l'attribut devra commencer A[title="Allez"] { <A

 La commande /* Commentaire */ permet l'insertion de commentaire

h1.description { font-color : blue }

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

 L'attribut CLASS est utilisable dans pratiquement toutes les balises

 On fait ensuite appel au sélecteur de classe dans le document HML

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

<style type="text/css" title="">

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

le biais de l'attribut ID*.

 En règle générale, il faudrait placer tout les styles courants dans la

 Et pour les valeurs relatives :

Inche 2,54 cm in Nombre 3.5in

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

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

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

Pica 12 points pc Nombre 4.2pc

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

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

Hauteur de Unité définie par rapport à ex Nombre -3.25ex

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

 La méthode héxadécimale abrégée

 Les deux dernières méthodes, ou méthodes rgb(), consistent à

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

 #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

 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

Pour le pousser de 20 px à droite et de 15 px vers le haut, on lui spécifie

Centres d'intérêt liés

Vous aimerez peut-être aussi