2 Le langage CSS

121
2LelangageCSS
Objectifsduchapitre
Présenterlesfeuillesdestyleetleursrôles
Présenterlesélémentsdespécificationdesstylesdont:
Lesméthodesdesélectiondesélémentsdelapage;
Leformatagedespages;
Formatagedestextes;
Lesélémentsdemarge,dedistancesetdepositionnement;
Lamanipulationdescouleurs.
Montrerdesexemplesdeconceptiondepagesavecdesmenusdenavi‐
gationinteractifs
Décriretousdesaspectsenutilisantdesexemplespratiques
CSS(CascadingStyleSheet)permetdedécriredesélémentsdeformatageet
demiseenpagespourlesdocumentsHTML.Celangageestunincontournable
danslaconceptiondessitesWeb.Danscechapitre,nousprésentons la
version2deCSS.Danslechapitre6,nousprésentonslelangageCSS3qui
contientlesélémentslesplusrécents. 

2 ProgrammationduWeb
122
2.1Introduction
CSS(CascadingStyleSheet)estunlangagedespécificationdespropriétésde
stylespermettantdeformaterlecontenud’unepageHTML.C’estunlangage
simpledeprésentationappliquéauxpagesWeb.Ilpermetdecontrôlerla
présentationd’untextecommelacouleur,lataille,lapolice,lesespacements
entrelesparagraphes,latailledescolonnes,lepositionnementdeséléments,
lesimagesainsiqueleurstailles,lacouleurdefond,etc.
CelangageeststandardiséparleconsortiumW3Cetestencemomentla
version2quiestacceptéepartouslesnavigateurs.Cependant,laversion3
(appeléeCSS3),plusricheestencoursd’adoptionparlesnavigateurs.Nous
ladécrironsplusloindanslelivre.
Commeonleverraplustarddanscedocument,onpeutspécifierlestylede
troismanières:
enl’associantàunélémentHTMLparticulier;
enl’associantàdesélémentsdansundocument;
enlestockantdansunfichierexterneauquelonpeutfaireréférence
àpartirdudocumentHTML.
L’usagedesstylesoffreplusieursavantages.Onpeutécrireunstyleunefois
etle réutiliserdans plusieursdocuments;cequipermetd’économiserdu
tempslorsdudéveloppementd’unsitetoutenassurantunehomogénéité
danslaprésentation.Ilsuffitdemodifierlefichiercontenantdesstylespour
modifierlaprésentationdeplusieurspagesquiyfontréférence.
L’usagedesstylespermetaussidefaciliterl’adaptationd’unsiteWeb.Dans
certains cas, on veut fournir un mêmecontenu tout en voulant l’afficher
différemment sur plusieurs types d’appareils tels que les ordinateurs de
bureau,lesordinateursportables,lestéléphonesintelligents,etc.Onpeut
simplementdéfinirunstylepourchaquetyped’appareilpermettantainsià
laprésentationdudocumentdes’adapterautyped’appareilutilisé.
Deplus,grâceauxfeuillesdestylesditesexternes(voirplusloin),onpeut
assurer une cohérence dans la présentation des documents du site Web
d’uneentrepriseetéviterdeserreursdeformatage.
Unespécificationdestyleconsisteàassocierdesvaleursàdespropriétésde
styleenutilisantlasyntaxe:
propriete1:valeur1; propriete2:valeur2; …
Parexemple,onpeutdéfinirlalargeuretlahauteurd’uneimageenutilisant
lespropriétéswidthetheightetenleurassociantdesvaleursadéquates.
Ilexistetrois façonsd’incluredesstylesdansun document:les stylesen
ligne,lesstylesinternesetlesstylesexternes. 

LelangageCSS 2
123
2.1.1Lesstylesenligne
Danscemode,onutilisel’attributstylequ’onappliqueàunebaliseHTML.
Danscetattributonmettralavaleurdelapropriétédestyleensuivantla
syntaxe:
<element… style="propriété:valeur"> … </element>
Parexemple,sionveutspécifierlacouleurrougepourletexted’unpara‐
graphe,onécrirait:
<p style="color:red"> Le texte de ce paragraphe sera en rouge </p>
On peut spécifier plusieurspropriétés en les séparant par une virgule en
suivantlasyntaxesuivante:
<element style="propriété1:valeur1; propriété2:valeur2;…"> … </element>
Parexemple,sionveutspécifierlahauteuretlalargeurd’uneimage,onpeut
utiliserlespropriétéswidthetheightdansl’attributstyleappliquéàl’élément
<img>commesuit:
<img src="monImage.jpg" style="width:200px; height:100px" / >
Notonsquecettefaçondespécifierlesstylespeutêtretropfastidieuse,car
ilfautlesappliqueràchaqueélément.
2.1.2Lesstylesinternes
Les styles internes nécessitent l’utilisation de la balise <style> qui doit
paraîtredansl’en‐têteàl’intérieurdel’élément<head>dudocument:
<html>
<head>
<style type="text/css">
...
</style>
…
</head>
…
</html>
Cette balise possède un attribut type quipermetdepréciserlelangage
utilisé,dansnotrecas,cssqu’ondécritgrâceàlavaleurtext/css.
Lecontenudelabalise<style>estformédelignesquiassocientdeséléments
(spécifiésparleurssélecteurs)dansledocumentHTMLàdespropriétésde
styleselonlasyntaxe:
<style type="text/css">
selecteur1 {propriété11:valeur11; propriété12:valeur12; …;}
sélecteur2 {propriété21:valeur21; propriété22:valeur22; …;}
…
</style>

2 ProgrammationduWeb
124
Lessélecteurssontdesmoyensd’identifierdesélémentsparticuliersdansle
document.Ilsjouentunrôleimportantdanslesdéfinitionsdesstyles.Onles
décriraendétailplusloindanscechapitre.
Dansl’exemplequisuit,onspécifielespropriétésdecouleurdutexte,dela
police(aveclapropriétéfont‐family)pourlesélémentsdetypeparagraphe
(balise<p>)etdesdimensions(lengthetwidth)pourlesélémentsdetype
images(balise<img>).
<style type="text/css">
p {color: red; font-family: Arial;}
img {width: 200px; height: 150px;}
</style>
2.1.3Lesstylesexternes
Dans ce mode, on doit mettre les spécifications de style dans un fichier
externeauquelonfaitréférencedansundocumentHTML.Ondésignece
fichierparfeuilledestyle.
Labalise<link>permetd’indiquercelienentreledocumentetuneressource
externequicontientcettefeuille destyle.Ellepossèdeunattributrelqui
indiquelanaturedecetterelationetunattributhrefquiindiquel’emplacement
dufichierquicontientlesstyles.
Pourindiquerunerelationdetypefeuilledestyleonécriraitrel="stylesheet".
La balise <link> doit se trouver dans l’en‐tête (c’est‐à‐dire dans la balise
<head>)dudocumentHTMLetsuivrelasyntaxesuivante:
<head>
…
<link rel="stylesheet" type="text/css" href="URL" />
…
</head>
L’URLestl’adressedufichierquicontientlafeuilledestyle.Onpeutfaire
référenceàunfichierlocalouàunfichierquisetrouvesurunsitedistant
parrapportaudocumentHTML.
Lefichierdefeuilledestyledoitavoirl’extension.css.
Lafeuilledestyledoitcontenirlaspécificationdespropriétéssansutiliserla
balise <style>. Par exemple, pour la description donnée dans l’exemple
précédent, on mettra la description du style dans un fichier (exemple
monStyle.css)quicontient:
p {color: red; font-family: Arial;}
img {width: 200px; height: 150px;}

LelangageCSS 2
125
DansledocumentHTMLquiutilisecefichier,onécrirait(ensupposantque
lafeuilledestylesetrouvesurlemêmerépertoirequeledocumentHTML):
<head>
<link rel="stylesheet" type="text/css" href=" monStyle.css" />
</head>
2.1.4Utilisationdesfeuillesdestyle
On peut utiliser les feuilles de style pour adapter la présentation à
différentessituations:
Onpeutassocierunstyledeprésentationàunensembleparticulier
d’utilisateurs.
Onpeutadapterlaprésentationàuntypeparticulierd’appareilstels
quelesordinateursfixes,lesordinateursportables,lestablettes,les
téléphonesintelligents,etc.
Onpeutainsiséparerlecontenudelaprésentation.Cette«séparationdes
préoccupations»(ou Separation of concerns) est un des avantages des
feuillesdestyle.Ellefaitensortequepourchangerdeprésentation,ilsuffit
demodifierlafeuilledestylesanstoucheraucontenududocumentHTML.
Onpeutconstruireunebasecontenantplusieursfichiersdesstylesqu’on
pourrautiliserenfonctiondelasituationd’utilisationoufaireréférenceà
desfeuillesdestyledéposéessurunserveurdistantquigèrecesstylesde
manièrecentraliséeetlesmodifieenfonctiondelasituation.
L’utilisationdesfeuillesdestylepourl’adaptationestillustréedanslafigure
ci‐dessous.
Figure2.1
Présentation 1
Présentation 3