Scribd Logo
Importer

Bienvenue sur Scribd !

  • Chap 3

    Transféré par

    Yassine Zirri
    60 vues14 pages

    Titre original

    chap3

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    60 vues14 pages

    Chap 3

    Transféré par

    Yassine Zirri

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 14

    A.U.

    2012/2013

    Universit Ibn Tofal Facult des Sciences Dpartement dInformatique Knitra

    A.U. 2012/12013

    Prog. Prog. Web Ct Client

    Filire SMI / S5

    Pr. El B. AMEUR

    Chap 3: Feuilles de Styles en Cascades (CSS)

    SMI, S5, FS-KENITRA

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

    Df : La feuille de style est un modle permettant la mise en forme


    automatise des diffrentes parties dune page web. Elle sapplique sur les web. balises telles que: que: Les titres : <h1>, <h2>, , <h6> Les paragraphes: <p> Les divisions: <div>, <span> Les liens: <a href=. > Les listes: <ul>, <ol>, etc

    Il est exit trois mthodes pour dfinir les styles :

    Mthode Locale: Consiste utiliser lintrieur du Locale:


    <body> un style appliquer des lments HTML d'une page web, tel que les titres, les divisions, les paragraphes, paragraphes,.

    Mthode Intgre (Interne) :


    Elle consiste utiliser la balise <style > lintrieur du programme, elle se place dans lentte de la page Web, lintrieur du bloc <head>, et elle sapplique <head>, au niveau des titres, des <p> , des <div> , des liens, . Les rgles de style affectent toute la page. page.

    SMI, S5, FS-KENITRA

    A.U. 2012/2013

    Mthode externe: externe:


    Consiste utiliser un fichier dit externe dans lequel on dfinit tous les styles, ce fichier sera nomm nomfichier.css qui peut tre appel dans nomfichier. une ou plusieurs pages Web laide de la balise <link rel="stylesheet type="text/css" rel="stylesheet type="text/css" href=" nomfichier. href=" nomfichier.css "/>

    II. Mthode locale :


    Pour attribuer localement un style un lment, il faut utiliser lattribut style dans la balise ouvrante. ouvrante. L'attribut style permet de changer le style : d'un lment unique (<p>, <a>, <hr>, <h1> <h2> <h3> ...) ; <h1 <h2 <h3 ...) d'une partie de la page : <span style="..." > ... </span> modifie le style de tout le bloc style="..." compris entre les lments <span> et </span> ; <div style="..." > ... </div> modifie le style de tout le bloc compris style="..." entre les lments <div> et </div> aprs avoir effectu un saut de ligne. ligne. Lexemple suivant indique que le contenu de llment <em> devra tre affich en couleur rouge. Si dautres lments <em> apparaissent dans la rouge. page Web, ils ne seront pas affects par la modification de couleur. couleur. <em style="color:red">lment rouge </em> style="color:red">lment <p style="color:green; font-size:14pt; font-family:Comic Sans MS"> style="color:green; font-size:14pt; font-family: MS"> Aprs celle-ci un saut la ligne simple sur la ligne suivante. cellesuivante.

    SMI, S5, FS-KENITRA

    A.U. 2012/2013

    III. Mthode intgre :


    Si nous souhaitons afficher en rouge tous les contenus des lments <em>, il faudrait, avec le style local, intervenir dans chaque em>, lment <em>. em> Le style intgr permet de prciser dans len-tte de la page Web lendes attributs de style et de les associer des lments. Lensemble lments. <style>. de ces informations de style est plac dans llment <style>. Llment <style> contient une suite de rgles composes de deux parties: parties: Le slecteur : le ou les lments concerns. concerns. La dclaration: les attributs et leurs valeurs associes au dclaration: slecteurs. slecteurs. slecteur { dclaration }

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

    SMI, S5, FS-KENITRA

    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>

    SMI, S5, FS-KENITRA

    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.

    ul li, ol li {font-size:meduim;} font-size:meduim;

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

    SMI, S5, FS-KENITRA

    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>

    SMI, S5, FS-KENITRA

    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

    Attributs de style et leurs valeurs


    Les attributs de style concernent les polices, les textes, le fond de la page, les listes et les tableaux. tableaux. En CSS une dclaration de style est toujours de la forme : nom{ attributs : valeur; } valeur; Lorsqu'il y a plusieurs dclarations, elles sont spares par des ';' attribut1 valeur1 attribut2 valeur2 attribut1 : valeur1; attribut2 : valeur2; ... ; attributN : valeurN; valeurN;

    Les commentaires sont autoriss dans les dclarations de style, ex : em { color: red; } /* attribuer la couleur rouge a l'element em */ color: red;

    SMI, S5, FS-KENITRA

    A.U. 2012/2013

    Quelques attributs de <style> :


    color: color: couleur de la police. Certaines couleurs sont prdfinies: ex: red, blue, green ... font-family: type de police. font-family: ex: serif , sansserif font-size: taille en pixels du texte. font-size: ex: 10px text-align: alignement horizontal. text-align: ex: center, left, right font-style: style italique (normal, italic) font-style: (normal, italic) font-weight: style gras (normal, bold) font-weight: (normal, background-color: background-color: couleur d'arrire plan border-color: border-color: couleur de bordure border-width: border-width: paisseur de la bordure ex :5px :5px border-style: border-style: type de trait: none, solid, dotted

    Exemples:

    Exemple1:Local

    SMI, S5, FS-KENITRA

    A.U. 2012/2013

    Exemple2:Intgr

    SMI, S5, FS-KENITRA

    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

    SMI, S5, FS-KENITRA

    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>

    SMI, S5, FS-KENITRA

    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>

    SMI, S5, FS-KENITRA

    13

    A.U. 2012/2013

    Regrouper les classes:


    La balise <div> permet de diviser une zone. zone.
    <style type="text/css"> <!-<!-.English{ color:red} .Francais{ color:blue} --> --> </style> <div class="English"> class="English"> <h1 >Booking</h1> >Booking</h1> <h2 > Top prices!</h2> prices!</h2> <p > Our company offers some super extra cool prices!</p> prices!</p> </div> <div class="Francais"> class="Francais"> <h1 > Rservations </h1> <h2 > Super prix! </h2> prix! <p > Notre entreprise propose des prix casss!</p> casss!</p> </div>

    Fin

    SMI, S5, FS-KENITRA

    14

    Vous aimerez peut-être aussi