Académique Documents
Professionnel Documents
Culture Documents
Chap 3
Chap 3
2012/2013
A.U. 2012/12013
Filire SMI / S5
Pr. El B. AMEUR
A.U. 2012/2013
I. Introduction
Les feuilles de styles en cascades (CSS: Cascading Style Sheet) (CSS: permettent de dfinir la prsentation dun document web. En particulier web. de : contrler les marges ; contrler les polices des sections et du texte ; grer les couleurs, .
A.U. 2012/2013
A.U. 2012/2013
<html> <head> <title> CSS </title> <style type="text/css"> type="text/css"> <!-<!-em{ color:red; } p{color:green; font-size:14pt; font-family:Comic Sans MS;} fontfont--> --> </style> </head> <body> <p> Un <em> paragraphe </em> de test. </p> <p> Un autre <em>paragraphe</em> de test. </p> <em>paragraphe</em> </body> </html>
A.U. 2012/2013
Supposons que nous souhaitons indiquer que tous les titres (h1 (h1 h6) sont en police Helvetica. Helvetica. Plutt que dcrire six rgles pour attribuer cette police chaque titre, nous indiquons dans le slecteur que six lments sont concerns par la partie dclaration, en les sparant par des virgules: virgules: h1, h2, h3, h4, h5, h6{font-family:Helvetica} font-family:Helvetica}
<html> <head> <title> Divisions </title> <style type="text/css"> type="text/css"> <!-<!-p{color:green; font-size:14pt; font-family:Comic Sans MS;} fontfonth1, h2, h3, h4, h5, h6{font-family:Helvetica; color:red;} h6{font--> --> </style> </head> <body> <h1 >h1 : Une trs grande taille </h1> >h1 <h2> h2 : Une grande taille </h2> <h3> h3 : Une taille moyenne </h3> <h4> h4 : Une petite taille </h4> <h5> h5 : Une trs petite taille </h5> <h6> h6 : Une taille vraiment minuscule </h6> <p>Il est possible dutiliser lattribut style pour aligner les titres:<br> <p>Il titres:<br> </body> </html>
A.U. 2012/2013
Il est possible de dfinir le comportement dun lment lorsquil est imbriqu dans un autre. autre. par exemple, nous pouvons dfinir que la taille de la police sera moyenne lorsque litem li est au premier niveau dans une liste ul, ul, Et que la taille sera petite si litem li est dans une soussousliste. liste. ul li {font-size:meduim;} font-size:meduim; ul ul li {font-size:small;} font-size:small; On peut applique le mme style li dans ul ou dans ol. ol.
<html> <head> <title> Dpartements </title> <style type="text/css"> <!-<! -h1, h2, h3, h4, h5, h6{font-family:Helvetica; color:red;} h6{fontul li, ol li {font-size:medium; color:blue;} {fontol ul li {font-size:small; color:black;} {font--> --> </style> </head> <body> <h3> Etablissements:</h3> <ol> <li> Facult des Sciences </li> <ul> <li> Dpt. dInfo </li> <li> Dpt. de Maths </li> <li> Dpt. de Physique </li> </ul> </ol> </body> </html>
A.U. 2012/2013
V. Style externe :
Si nous souhaitons appliquer le mme style plusieurs documents, les rgles de styles sont places dans un fichier spar dont lextension est .css Llment <link > est utilis pour indiquer quil faut utiliser une feuille de style externe. externe. Exemple: Exemple: Fichier exp22.css exp22. em{ color:red} p{ color:green; fontfont-size:14pt; fontfont-family:Comic Sans MS }
<html> <head> <title> CSS </title> <link rel="stylesheet" type="text/css" href="exp22.css"> href="exp22.css"> </head> <body> <p> Un <em> paragraphe</em> de test. </p> paragraphe</em> test. <p> Un autre <em> paragraphe</em> de test. </p> paragraphe</em> test. </body> </html>
A.U. 2012/2013
Classe CSS
Le CSS est form d'un ensemble de classes . Une classe s'crit de cette faon : nom { a t t r i b u t : valeur ; ... } nom peut tre : Un nom de balise : les attributs s'appliquent toutes ces balises Un nom gnrique (commenant par un point) : les attributs s'appliquent aux balises utilisant class="nom" (sans le point) Un mlange des deux, spars par des virgules : les attributs s'appliquent suivant les deux p oints prcdents attribut : dsigne quel lment visuel est modifi (couleur, bordure, fond, marges . . .. valeur : dsigne par quelle valeur est remplace l'attribut dsign
Les commentaires sont autoriss dans les dclarations de style, ex : em { color: red; } /* attribuer la couleur rouge a l'element em */ color: red;
A.U. 2012/2013
Exemples:
Exemple1:Local
A.U. 2012/2013
Exemple2:Intgr
10
A.U. 2012/2013
.html
Exemple3:Externe
.css
HTML dfinit des balises limites pour structurer un document : h1, h2 ... , p , On aimerait parfois avoir des catgories ou des classes. classes. Par ex. dans un document bilingue, on colore le texte en ex. fonction de la langue
11
A.U. 2012/2013
<html> <head> <title> CSS </title> <style type="text/css"> <!-<!-h1.English{ color:red} h1.Francais{ color:blue} --> --> </style> </head> <body> <h1 class="English"> Booking</h1> class="English"> <h2 > Top prices!</h2> prices!</h2> <p >Our company offers some super extra cool prices!</p> >Our prices!</p> <h1 class="Francais">Rservations </h1> class="Francais">Rservations <h2 >Super prix! </h2> >Super prix! <p> Notre entreprise propose des prix casss!</p> casss!</p> </body> </html>
<html> <head> <title> CSS </title> type="text/css"> <style type="text/css"> <!-<! -em{ color:red} p{ color:green; font-size:14pt; fontfont-family:Comic Sans MS font} p.exercice{ font-family:Times; fontborderborder-style:solid } --> --> </style> </head> <body> <p> Un <em> paragraphe</em> de test. </p> paragraphe</em> test. <p class="exercice"> Un exercice de test. </p> class="exercice"> test. <p> Un autre <em> paragraphe</em> de test. </p> paragraphe</em> test. </body> </html>
12
A.U. 2012/2013
Problme: Problme: Si la mme classe est utilise par plusieurs lments (h1, h2, p...) il faut dfinir toutes les classes correspondantes en CSS h1.Francais h2.Francais p.Francais
<style type="text/css"> <!-<! -h1.English{ color:red} h2.English{ color:red} p.English{ color:red} h1.Francais{ color:blue} h2.Francais{ color:blue} p.Francais{ color:blue} --> --> </style> <h1 class="English"> Booking</h1> class="English"> Booking</h1> class="English"> prices!</h2> <h2 class="English"> Top prices!</h2> <p class="English"> Our company offers some super extra cool prices!</p> class="English"> prices!</p> <h1 class="Francais">Rservations </h1> class="Francais">Rservations <h2 class="Francais"> >Super prix! </h2> class="Francais"> >Super prix! class="Francais"> casss!</p> <p class="Francais"> > Notre entreprise propose des prix casss!</p>
Dans ce cas, il faut spcifier une classe gnrale tous les lments. Pour cela, il suffit de ne pas mettre de nom de catgorie avant le nom de classe. <style type="text/css"> <!-<!-.English{ color:red;} .Francais{ color:blue;} --> --> </style> <h1 class="English"> Booking</h1> class="English"> Booking</h1> <h2 class="English"> Top prices!</h2> class="English"> prices!</h2> <p class="English"> Our company offers some super extra cool class="English"> prices!</p> prices!</p> <h1 class="Francais">Rservations </h1> class="Francais">Rservations <h2 class="Francais"> >Super prix! </h2> class="Francais"> >Super prix! <p class="Francais"> > Notre entreprise propose des prix casss!</p> class="Francais"> casss!</p>
13
A.U. 2012/2013
Fin
14