Vous êtes sur la page 1sur 14

A.U. 2012/2013

UniversitéUniversité IbnIbn TofaïlTofaïl FacultéFaculté desdes SciencesSciences DépartementDépartement

UniversitéUniversité IbnIbn TofaïlTofaïl FacultéFaculté desdes SciencesSciences DépartementDépartement d’Informatiqued’Informatique KénitraKénitra

A.U.A.U. 2012/120132012/12013

ProgProg WebWeb CôtéCôté ClientClient
ProgProg WebWeb CôtéCôté ClientClient

FilièreFilière SMISMI // S5S5

PrPr ElEl B.B. AMEURAMEUR

ChapChap 3:3: FeuillesFeuilles dede StylesStyles enen CascadesCascades (CSS)(CSS)
ChapChap 3:3: FeuillesFeuilles dede StylesStyles enen CascadesCascades
(CSS)(CSS)

A.U. 2012/2013

I.I. IntroductionIntroduction LesLes feuillesfeuilles dede stylesstyles enen cascadescascades (CSS:(CSS:
I.I. IntroductionIntroduction
LesLes feuillesfeuilles dede stylesstyles enen cascadescascades (CSS:(CSS: CascadingCascading StyleStyle Sheet)Sheet)
permettentpermettent dede définirdéfinir lala présentationprésentation d’und’un documentdocument web.web. EnEn particulierparticulier
dede ::
contrôlercontrôler lesles margesmarges ;;
contrôlercontrôler lesles policespolices desdes sectionssections etet dudu textetexte ;;
gérergérer lesles couleurs,couleurs,
……
DéfDéf :: LaLa feuillefeuille dede stylestyle estest unun modèlemodèle permettantpermettant lala misemise enen formeforme
automatiséeautomatisée desdes différentesdifférentes partiesparties d’uned’une pagepage web.web. ElleElle s’appliques’applique sursur lesles
balisesbalises tellestelles queque::
LesLes titrestitres :: <h1>,<h1>, <h2>,<h2>, …,…, <h6><h6>
LesLes paragraphes:paragraphes: <p><p>
LesLes divisions:divisions: <div>,<div>, <span><span>
LesLes liens:liens: <a<a href=….href=…. >>
LesLes listes:listes: <ul>,<ul>, <ol>,<ol>, ……
etcetc ……
IlIl estest exitexit troistrois méthodesméthodes pourpour définirdéfinir lesles stylesstyles :: MéthodeMéthode
IlIl estest exitexit troistrois méthodesméthodes pourpour définirdéfinir lesles stylesstyles ::
MéthodeMéthode Locale:Locale: ConsisteConsiste àà utiliserutiliser àà l’intérieurl’intérieur dudu
<body><body> unun stylestyle appliquerappliquer àà desdes élémentséléments HTMLHTML d'uned'une
pagepage web,web, teltel queque lesles titres,titres, lesles divisions,divisions, lesles
paragraphes,paragraphes,……
MéthodeMéthode IntégréeIntégrée (Interne)(Interne) ::
ElleElle consisteconsiste àà utiliserutiliser lala balisebalise <style<style >> àà l’intérieurl’intérieur
dudu programme,programme, elleelle sese placeplace dansdans l’entêtel’entête dede lala pagepage
Web,Web, àà l’intérieurl’intérieur dudu blocbloc <head><head>,, etet elleelle s’appliques’applique
auau niveauniveau desdes titres,titres, desdes <p><p> ,, desdes <div><div> ,, desdes liens,liens,
……
LesLes règlesrègles dede stylestyle affectentaffectent toutetoute lala page.page.

A.U. 2012/2013

MéthodeMéthode externeexterne:: ConsisteConsiste àà utiliserutiliser unun fichierfichier ditdit externeexterne
MéthodeMéthode externeexterne::
ConsisteConsiste àà utiliserutiliser unun fichierfichier ditdit externeexterne dansdans
lequellequel onon définitdéfinit toustous lesles styles,styles, cece fichierfichier serasera
nomménommé nomfichiernomfichier
csscss
quiqui peutpeut êtreêtre appeléappelé dansdans
uneune ouou plusieursplusieurs pagespages WebWeb àà l’aidel’aide dede lala balisebalise
<link<link relrel="="stylesheetstylesheet““ typetype="text/css"="text/css"
hrefhref="=" nomfichiernomfichier
csscss
"/>"/>
II.II. MéthodeMéthode localelocale :: PourPour attribuerattribuer localementlocalement unun stylestyle àà unun
II.II. MéthodeMéthode localelocale ::
PourPour attribuerattribuer localementlocalement unun stylestyle àà unun élément,élément, ilil fautfaut utiliserutiliser l’attributl’attribut
stylestyle dansdans lala balisebalise ouvrante.ouvrante.
L'attributL'attribut stylestyle permetpermet dede changerchanger lele stylestyle ::
d'und'un élémentélément uniqueunique (<p>,(<p>, <a>,<a>, <hr>,<hr>, <h1<h1>> <h2<h2>> <h3<h3>>
d'uned'une partiepartie dede lala pagepage ::
) )
;;
<span<span style="style="
""
>>
</span></span> modifiemodifie lele stylestyle dede touttout lele blocbloc
compriscompris entreentre lesles élémentséléments <span><span> etet </span></span> ;;
<div<div style="style="
""
>>
</div></div> modifiemodifie lele stylestyle dede touttout lele blocbloc compricompriss
entreentre lesles élémentséléments <div><div> etet </div></div> aprèsaprès avoiravoir effectuéeffectué unun sautsaut dede
ligneligne
L’exempleL’exemple suivantsuivant indiqueindique queque lele contenucontenu dede l’élémentl’élément <em><em> devradevra êtreêtre
affichéaffiché enen couleurcouleur rougerouge SiSi d’autresd’autres élémentséléments <em><em> apparaissentapparaissent dansdans lala
pagepage Web,Web, ilsils nene serontseront paspas affectésaffectés parpar lala modificationmodification dede couleur.couleur.
<em<em style="style="colorcolor::red">red">élémentélément rougerouge </em></em>
<p<p style="style="colorcolor::greengreen;; fontfont--sizesize::1414ptpt;; fontfont--famifamily:ly:ComicComic SansSans MSMS">">
AprèsAprès cellecelle--cici unun sautsaut àà lala ligneligne simplesimple sursur lala ligneligne suivantesuivante

A.U. 2012/2013

III.III. MéthodeMéthode intégréeintégrée :: SiSi nousnous souhaitonssouhaitons afficherafficher enen rougerouge
III.III. MéthodeMéthode intégréeintégrée ::
SiSi nousnous souhaitonssouhaitons afficherafficher enen rougerouge toustous lesles contenuscontenus desdes élémentséléments
<<emem>,>, ilil faudrait,faudrait, avecavec lele stylestyle local,local, intervenirintervenir dansdans chaquechaque
élémentélément <<emem>>
LeLe stylestyle intégréintégré permetpermet dede préciserpréciser dansdans l’enl’en--têtetête dede lala pagepage WebWeb
desdes attributsattributs dede stylestyle etet dede lesles associerassocier àà desdes éléments.éléments. L’ensembleL’ensemble
dede cesces informationsinformations dede stylestyle estest placéplacé dansdans l’élémentl’élément <style><style>
L’élémentL’élément <style><style> contientcontient uneune suitesuite dede règlesrègles composéescomposées dede deuxdeux
partiesparties::
LeLe sélecteursélecteur :: lele ouou lesles élémentséléments concernés.concernés.
LaLa déclarationdéclaration:: lesles attributsattributs etet leursleurs valeursvaleurs associéesassociées auau
sélecteurssélecteurs
sélecteursélecteur {{ déclarationdéclaration }}
<html><html> <head><head> <title><title> CSSCSS
<html><html>
<head><head>
<title><title> CSSCSS </title></title>
<style<style type="text/csstype="text/css">">
<!<!----
em{em{ color:red;color:red; }}
p{color:green;p{color:green; fontfont--size:14pt;size:14pt; font-font-family:Comicfamily:Comic SansSans MS;}MS;}
---->>
</style></style>
</head></head>
<body><body>
<p><p> UnUn <em><em> paragrapheparagraphe </em></em> dede test.test. </p></p>
<p><p> UnUn autreautre <em><em>paragrapheparagraphe</em></em> dede test.test. </p></p>
</body></body>
</html></html>

A.U. 2012/2013

SupposonsSupposons queque nousnous souhaitonssouhaitons indiquerindiquer queque toustous lesles titrestitres (h(h11 àà hh66)) sontsont enen policepolice HelveticaHelvetica

PlutôtPlutôt queque d’écrired’écrire sixsix règlesrègles pourpour attribuerattribuer cettecette policepolice àà chaquechaque titre,titre, nousnous indiquonsindiquons dansdans lele sélecteursélecteur queque sixsix élémentséléments sontsont concernésconcernés parpar lala partiepartie déclaration,déclaration, enen lesles séparantséparant parpar desdes virgulesvirgules::

hh11,, hh22,, hh33,, hh44,, hh55,, hh66{{fontfont--familyfamily::HelveticaHelvetica}}

<html><html>

<head><head>

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

<!<!----

p{color:green;p{color:green; fontfont--size:14pt;size:14pt; fontfont--family:Comicfamily:Comic SansSans MS;}MS;}

h1,h1, h2,h2, h3,h3, h4,h4, h5,h5, h6{fonth6{font--family:Helvetica;family:Helvetica; colorcolor:red;}:red;} ---->>

</style></style> </head></head> <body><body> <h1<h1 >>h1h1 :: UneUne trèstrès grandegrande tailletaille </h1></h1> <h2><h2> h2h2 :: UneUne grandegrande tailletaille </h2></h2> <h3><h3> h3h3 :: UneUne tailletaille moyennemoyenne </h3></h3> <h4><h4> h4h4 :: UneUne petitepetite tailletaille </h4></h4> <h5><h5> h5h5 :: UneUne trèstrès petitepetite tailletaille </h5></h5> <h6><h6> h6h6 :: UneUne tailletaille vraimentvraiment minusculeminuscule </h6></h6> <p><p>IlIl estest possiblepossible d’utiliserd’utiliser l’attributl’attribut stylestyle pourpour alalignerigner lesles titrestitres:<br>:<br>

</body></body>

</html></html>

A.U. 2012/2013

IlIl estest possiblepossible dede définirdéfinir lele comportementcomportement d’und’un élémentélément
IlIl estest possiblepossible dede définirdéfinir lele comportementcomportement d’und’un élémentélément
lorsqu’illorsqu’il estest imbriquéimbriqué dansdans unun autre.autre.
parpar exemple,exemple, nousnous pouvonspouvons définirdéfinir queque lala tailletaille dede lala
policepolice serasera moyennemoyenne lorsquelorsque l’iteml’item lili estest auau premierpremier
niveauniveau dansdans uneune listeliste ulul,,
EtEt queque lala tailletaille serasera petitepetite sisi l’iteml’item
listeliste
lili estest dansdans uneune sous-sous-
ulul lili {{fontfont--sizesize::meduimmeduim;;}}
ulul ulul lili {{fontfont--sizesize::smallsmall;;}}
OnOn peutpeut appliqueapplique lele mêmemême stylestyle àà lili dansdans ulul ouou dansdans olol
ulul li,li, olol lili {{fontfont--sizesize::meduimmeduim;;}}

<html><html>

<head><head>

<title><title> DépartementsDépartements </title></title> <style<style type="text/css">type="text/css">

<!--<!--

h1,h1, h2,h2, h3,h3, h4,h4, h5,h5, h6{fonth6{font--family:Helvetica;family:Helvetica; color:red;}color:red;} ulul li,li, olol lili {font{font--size:medium;size:medium; color:blue;}color:blue;} olol ulul lili {font{font--size:small;size:small; color:black;}color:black;}

---->>

</style></style> </head></head> <body><body> <h3><h3> Etablissements:</h3>Etablissements:</h3> <ol><ol>

</ol></ol>

</body></body>

</html></html>

<li><li> FacultéFaculté desdes SciencesSciences </li></li> <ul><ul>

<li><li> Dépt.Dépt. d’Infod’Info </li></li> <li><li> Dépt.Dépt. dede MathsMaths </li></li> <li><li> Dépt.Dépt. dede PhysiquePhysique </li></li>

</ul></ul>

A.U. 2012/2013

V.V. StyleStyle externeexterne :: SiSi nousnous souhaitonssouhaitons appliquerappliquer lele mêmemême stylestyle àà
V.V. StyleStyle externeexterne ::
SiSi nousnous souhaitonssouhaitons appliquerappliquer lele mêmemême stylestyle àà plusieursplusieurs
documents,documents, lesles règlesrègles dede stylesstyles sontsont placéesplacées dansdans unun fichierfichier
séparéséparé dontdont l’extensionl’extension estest
csscss
L’élémentL’élément <link<link >> estest utiliséutilisé pourpour indiquerindiquer qu’ilqu’il fautfaut utiliserutiliser
uneune feuillefeuille dede stylestyle externe.externe.
ExempleExemple::
FichierFichier expexp2222 csscss
em{em{ color:red}color:red}
p{p{
color:green;color:green;
fontfont--size:14pt;size:14pt;
fontfont--family:Comicfamily:Comic SansSans MSMS
}}

<html><html> <head><head> <title><title> CSSCSS </title></title>

<link<link rel="stylesheet"rel="stylesheet" type="text/css"type="text/css" href="exp22.csshref="exp22.css">">

</head></head>

<body><body> <p><p> UnUn <em><em> paragrapheparagraphe</em></em> dede testtest </p></p>

<p><p> UnUn autreautre <em><em> paragrapheparagraphe</em></em> dede testtest </p></p> </body></body> </html></html>

A.U. 2012/2013

ClasseClasse CSSCSS LeLe CSSCSS estest forméformé d'und'un ensembleensemble dede classesclasses UneUne
ClasseClasse CSSCSS
LeLe CSSCSS estest forméformé d'und'un ensembleensemble dede classesclasses
UneUne classeclasse s'écrits'écrit dede cettecette façonfaçon ::
nomnom {{
aa tt tt rr ii bb uu tt :: valeurvaleur ;;
}}
nomnom peutpeut êtreêtre ::
UnUn nomnom dede balisebalise :: lesles attributsattributs s'appliquents'appliquent àà toutoutestes cesces
balisesbalises
UnUn nomnom génériquegénérique (commençant(commençant parpar unun point)point) :: lesles atattributstributs
s'appliquents'appliquent auxaux balisesbalises utilisantutilisant class="nom"class="nom" (sans(sans lele point)point)
UnUn mélangemélange desdes deux,deux, séparésséparés parpar desdes virgulesvirgules :: lesles attributsattributs
s'appliquents'appliquent suivantsuivant lesles deuxdeux pp ointsoints précédentsprécédents
attributattribut :: désignedésigne quelquel élémentélément visuelvisuel estest modifiémodifié (couleur,(couleur, bordure,bordure,
fond,fond, margesmarges
valeurvaleur :: désignedésigne parpar quellequelle valeurvaleur estest remplacéeremplacée l'attribul'attributt désignédésigné
AttributsAttributs dede stylestyle etet leursleurs valeursvaleurs LesLes attributsattributs dede stylestyle
AttributsAttributs dede stylestyle etet leursleurs valeursvaleurs
LesLes attributsattributs dede stylestyle concernentconcernent lesles polices,polices, lesles textes,textes, lele fondfond dede lala page,page,
lesles listeslistes etet lesles tableauxtableaux
EnEn CSSCSS uneune déclarationdéclaration dede stylestyle estest toujourstoujours dede lala formeforme ::
nom{nom{ attributsattributs :: valeurvaleur;; }}
Lorsqu'ilLorsqu'il yy aa plusieursplusieurs déclarations,déclarations, elleselles sontsont séparéesséparées parpar desdes '';;''
attributattribut11 :: valeurvaleur11;; attributattribut22 :: valeurvaleur22;;
;; attributNattributN :: valeurNvaleurN;;
LesLes commentairescommentaires sontsont autorisésautorisés dansdans lesles déclarationsdéclarations dede style,style, exex ::
emem {{ color:color: redred;; }} /*/* attribuerattribuer lala couleurcouleur rougerouge aa l'elementl'element emem */*/

A.U. 2012/2013

QuelquesQuelques attributsattributs dede <style><style> ::

colorcolor:: couleurcouleur dede lala police.police. CertainesCertaines couleurscouleurs sontsont préprédéfinies:définies:

ex:ex: red,red, blue,blue, greengreen fontfont--familyfamily:: typetype dede police.police. ex:ex: serifserif ,, sansserifsansserif fontfont--sizesize:: tailletaille enen pixelspixels dudu texte.texte. ex:ex: 10px10px text-text-alignalign:: alignementalignement horizontal.horizontal. ex:ex: center,center, left,left, rightright fontfont--stylestyle:: stylestyle italiqueitalique ((normal,normal, italicitalic)) fontfont--weightweight:: stylestyle grasgras ((normal,normal, bold)bold) backgroundbackground--colorcolor:: couleurcouleur d'arrièred'arrière planplan borderborder--colorcolor:: couleurcouleur dede bordurebordure borderborder--widthwidth:: épaisseurépaisseur dede lala bordurebordure exex ::5px5px borderborder--stylestyle:: typetype dede trait:trait: none,none, solid,solid, dotteddotted

Exemples:Exemples: Exemple1:Local
Exemples:Exemples:
Exemple1:Local

A.U. 2012/2013

Exemple2:Intégré
Exemple2:Intégré
A.U. 2012/2013 Exemple2:Intégré SMI, S5, FS-KENITRA 10

A.U. 2012/2013

.html Exemple3:Externe .css
.html
Exemple3:Externe
.css
HTMLHTML définitdéfinit desdes balisesbalises limitéeslimitées pourpour structurerstructurer unun
HTMLHTML
définitdéfinit
desdes
balisesbalises
limitéeslimitées
pourpour
structurerstructurer
unun
documentdocument ::
hh11,,
hh22
,,
pp ,, ……
OnOn aimeraitaimerait parfoisparfois avoiravoir desdes catégoriescatégories ouou desdes classesclasses
ParPar exex dansdans unun documentdocument bilingue,bilingue, onon colorecolore lele textetexte enen
fonctionfonction dede lala languelangue

A.U. 2012/2013

<html><html> <head><head> <title><title> CSSCSS
<html><html>
<head><head>
<title><title> CSSCSS </title></title>
<style<style type="text/css">type="text/css">
<!--<!--
h1.English{h1.English{ color:red}color:red}
h1.Francais{h1.Francais{ color:blue}color:blue}
---->>
</style></style>
</head></head>
<body><body>
<h1<h1 class="Englishclass="English">"> Booking</h1>Booking</h1>
<h2<h2 >> TopTop pricesprices!</h2>!</h2>
<p<p >>OurOur companycompany offersoffers somesome supersuper extraextra coolcool pricesprices!</p>!</p>
<h1<h1 class="Francaisclass="Francais">">RéservationsRéservations </h1></h1>
<h2<h2 >>SuperSuper prixprix!! </h2></h2>
<p><p> NotreNotre entrepriseentreprise proposepropose desdes prixprix cassés!</cassés!</p>p>
</body></body>
</html></html>

<html><html> <head><head> <title><title> CSSCSS </title></title>

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

<!--<!--

 

em{em{ color:red}color:red}

p{p{

color:green;color:green;

fontfont--size:14pt;size:14pt;

fontfont--family:Comicfamily:Comic SansSans MSMS

}}

p.exercice{p.exercice{

fontfont--family:Times;family:Times;

borderborder--style:solidstyle:solid

}}

---->>

</style></style> </head></head> <body><body> <p><p> UnUn <em><em> paragrapheparagraphe</em></em> dede testtest </p></p> <p<p class="exerciceclass="exercice">"> UnUn exerciceexercice dede testtest </p></p> <p><p> UnUn autreautre <em><em> paragrapheparagraphe</em></em> dede testtest </p></p> </body></body> </html></html>

A.U. 2012/2013

ProblèmeProblème:: SiSi lala mêmemême classeclasse estest utiliséeutilisée parpar plusieursplusieurs
ProblèmeProblème:: SiSi lala mêmemême classeclasse estest utiliséeutilisée parpar plusieursplusieurs élémélémentsents (h1,(h1, h2,h2,
)p p
)
ilil fautfaut définirdéfinir toutestoutes lesles classesclasses correspondcorrespondantesantes enen CSSCSS
h1.Francaish1.Francais
h2.Francaish2.Francais
p.Francaisp.Francais
……
<style<style type="text/css">type="text/css">
<!--<!--
h1.English{h1.English{ color:red}color:red}
h2.English{h2.English{ color:red}color:red}
p.English{p.English{ color:red}color:red}
h1.Francais{h1.Francais{ color:blue}color:blue}
h2.Francais{h2.Francais{ color:blue}color:blue}
p.Francais{p.Francais{ color:blue}color:blue}
---->>
</style></style>
……
<h1<h1 class="Englishclass="English">"> BookingBooking</h1></h1>
<h2<h2 class="Englishclass="English">"> TopTop pricesprices!</h2>!</h2>
<p<p class="Englishclass="English">"> OurOur companycompany offersoffers somesome supersuper extraextra coolcool pricesprices!</p>!</p>
<h1<h1 class="Francaisclass="Francais">">RéservationsRéservations </h1></h1>
<h2<h2 class="Francaisclass="Francais">"> >>SuperSuper prixprix!! </h2></h2>
<p<p class="Francaisclass="Francais">"> >> NotreNotre entrepriseentreprise proposepropose desdes prixprix cassés!</cassés!</p>p>
DansDans cece cas,cas, ilil fautfaut spécifierspécifier uneune classeclasse généralegénérale àà toustous lesles
DansDans cece cas,cas, ilil fautfaut spécifierspécifier uneune classeclasse
généralegénérale àà toustous lesles éléments.éléments. PourPour cela,cela,
ilil suffitsuffit dede nene paspas mettremettre dede nomnom dede
catégoriecatégorie avantavant lele nomnom dede classe.classe.
……
<style<style type="text/css">type="text/css">
<!<!----
.English{.English{ color:red;}color:red;}
.Francais{.Francais{ color:blue;}color:blue;}
---->>
</style></style>
……
<h1<h1 class="Englishclass="English">"> BookingBooking</h1></h1>
<h2<h2 class="Englishclass="English">"> TopTop pricesprices!</h2>!</h2>
<p<p class="Englishclass="English">"> OurOur companycompany offersoffers somesome supersuper extraextra coolcool
pricesprices!</p>!</p>
<h1<h1 class="Francaisclass="Francais">">RéservationsRéservations </h1></h1>
<h2<h2 class="Francaisclass="Francais">"> >>SuperSuper prixprix!! </h2></h2>
<p<p class="Francaisclass="Francais">"> >> NotreNotre entrepriseentreprise proposepropose desdes prixprix cassés!</cassés!</p>p>

A.U. 2012/2013

RegrouperRegrouper lesles classes:classes: LaLa balisebalise <div><div> permetpermet dede diviserdiviser
RegrouperRegrouper lesles classes:classes:
LaLa balisebalise <div><div> permetpermet dede diviserdiviser uneune zonezone
<style<style type="text/css">type="text/css">
<!<!----
.English{.English{ color:red}color:red}
.Francais{.Francais{ color:blue}color:blue}
---->>
</style></style>
……
<div<div class="Englishclass="English">">
<h1<h1 >>BookingBooking</h1></h1>
<h2<h2 >> TopTop pricesprices!</h2>!</h2>
<p<p >> OurOur companycompany offersoffers somesome supersuper extraextra coolcool pricesprices!</p>!</p>
</div></div>
<div<div class="Francaisclass="Francais">">
<h1<h1 >> RéservationsRéservations </h1></h1>
<h2<h2 >> SuperSuper prixprix!! </h2></h2>
<p<p >> NotreNotre entrepriseentreprise proposepropose desdes prixprix cassés!</cassés!</p>p>
</div></div>
FinFin
FinFin