Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

A.U. 2012/2013 SMI, S5, FS-KENITRA 1 Prog Prog. Web Côté Client . Web Côté Clie

A.U. 2012/2013 SMI, S5, FS-KENITRA 1 Prog Prog. Web Côté Client . Web Côté Client Filière SMI / S5 Pr. El B. AMEUR Filière SMI / S5 Pr. El B. AMEUR Université Ibn Université Ibn Tofaïl Tofaïl A.U. 2012/12013 A.U. 2012/12013 Faculté des Sciences Faculté des Sciences Département d’Informatique Département d’Informatique Kénitra Kénitra Chap 3: Feuilles de Styles en Cascades Chap 3: Feuilles de Styles en Cascades (CSS) (CSS) A.U. 2012/2013 SMI, S5, FS-KENITRA 2 I. Introduction I. Introduction Les Les feuilles feuilles de de styles styles en en cascades cascades (CSS (CSS: Cascading Cascading Style Style Sheet) Sheet) permettent permettent de de définir définir la la présentation présentation d’un d’un document document web web. En En particulier particulier de de : contrôler contrôler les les marges marges ; contrôler contrôler les les polices polices des des sections sections et et du du texte texte ; gérer gérer les les couleurs, couleurs, …. Déf Déf : La La feuille feuille de de style style est est un un modèle modèle permettant permettant la la mise mise en en forme forme automatisée automatisée des des différentes différentes parties parties d’une d’une page page web web. Elle Elle s’applique s’applique sur sur les les balises balises telles telles que que: Les titres : Les titres : <h1>, <h2>, …, <h6> <h1>, <h2>, …, <h6> Les paragraphes: Les paragraphes: <p> <p> Les divisions: Les divisions: <div>, <span> <div>, <span> Les liens: Les liens: <a href=…. > <a href=…. > Les listes: Les listes: <ul>, <ol>, … <ul>, <ol>, … etc … etc … Il Il est est exit exit trois trois méthodes méthodes pour pour définir définir les les styles styles : Méthode Méthode Locale Locale: Consiste Consiste à utiliser utiliser à l’intérieur l’intérieur du du <body> <body> un un style style appliquer appliquer à des des éléments éléments HTML HTML d'une d'une page page web, web, tel tel que que les les titres, titres, les les divisions, divisions, les les paragraphes, paragraphes,…. Méthode Méthode Intégrée Intégrée (Interne) (Interne) : Elle Elle consiste consiste à utiliser utiliser la la balise balise <style <style > à l’intérieur l’intérieur du du programme, programme, elle elle se se place place dans dans l’entête l’entête de de la la page page Web, Web, à l’intérieur l’intérieur du du bloc bloc <head> <head>, et et elle elle s’applique s’applique au au niveau niveau des des titres, titres, des des <p> <p> , des des <div> <div> , des des liens, liens, …. Les Les règles règles de de style style affectent affectent toute toute la la page page. A.U. 2012/2013 SMI, S5, FS-KENITRA 3 Méthode Méthode externe externe: Consiste Consiste à utiliser utiliser un un fichier fichier dit dit externe externe dans dans lequel lequel on on définit définit tous tous les les styles, styles, ce ce fichier fichier sera sera nommé nommé nomfichier nomfichier.css css qui qui peut peut être être appelé appelé dans dans une une ou ou plusieurs plusieurs pages pages Web Web à l’aide l’aide de de la la balise balise <link <link rel rel=" ="stylesheet stylesheet“ type type="text/css" ="text/css" href href=" =" nomfichier nomfichier.css css "/> "/> II. Méthode locale : II. Méthode locale : Pour Pour attribuer attribuer localement localement un un style style à un un élément, élément, il il faut faut utiliser utiliser l’attribut l’attribut style style dans dans la la balise balise ouvrante ouvrante. L'attribut L'attribut style style permet permet de de changer changer le le style style : d'un d'un élément élément unique unique (<p>, (<p>, <a>, <a>, <hr>, <hr>, <h <h1> <h <h2> <h <h3> ... ...) ; d'une d'une partie partie de de la la page page : <span <span style=" style="... ..." > ... ... </span> </span> modifie modifie le le style style de de tout tout le le bloc bloc compris compris entre entre les les éléments éléments <span> <span> et et </span> </span> ; <div <div style=" style="... ..." > ... ... </div> </div> modifie modifie le le style style de de tout tout le le bloc bloc compris compris entre entre les les éléments éléments <div> <div> et et </div> </div> après après avoir avoir effectué effectué un un saut saut de de ligne ligne. L’exemple L’exemple suivant suivant indique indique que que le le contenu contenu de de l’élément l’élément <em> <em> devra devra être être affiché affiché en en couleur couleur rouge rouge. Si Si d’autres d’autres éléments éléments <em> <em> apparaissent apparaissent dans dans la la page page Web, Web, ils ils ne ne seront seront pas pas affectés affectés par par la la modification modification de de couleur couleur. <em <em style=" style="color color:red"> red">élément élément rouge rouge </em> </em> <p <p style=" style="color color:green green; font font-size size:14 14pt pt; font font-family family:Comic Comic Sans Sans MS MS"> "> Après Après celle celle-ci ci un un saut saut à la la ligne ligne simple simple sur sur la la ligne ligne suivante suivante. A.U. 2012/2013 SMI, S5, FS-KENITRA 4 III. Méthode intégrée : III. Méthode intégrée : Si Si nous nous souhaitons souhaitons afficher afficher en en rouge rouge tous tous les les contenus contenus des des éléments éléments <em em>, >, il il faudrait, faudrait, avec avec le le style style local, local, intervenir intervenir dans dans chaque chaque élément élément <em em>. Le Le style style intégré intégré permet permet de de préciser préciser dans dans l’en l’en-tête tête de de la la page page Web Web des des attributs attributs de de style style et et de de les les associer associer à des des éléments éléments. L’ensemble L’ensemble de de ces ces informations informations de de style style est est placé placé dans dans l’élément l’élément <style> <style>. L’élément L’élément <style> <style> contient contient une une suite suite de de règles règles composées composées de de deux deux parties parties: Le Le sélecteur sélecteur : le le ou ou les les éléments éléments concernés concernés. La La déclaration déclaration: les les attributs attributs et et leurs leurs valeurs valeurs associées associées au au sélecteurs sélecteurs. sélecteur sélecteur { déclaration déclaration } <html> <html> <head> <head> <title> CSS </title> <title> CSS </title> <style <style type="text/css type="text/css"> "> <!  </style> </style> </head> </head> <body> <body> <p> <p> Un Un <em> <em> paragraphe paragraphe </em> </em> de test. de test. </p> </p> <p> <p> Un autre Un autre <em> <em>paragraphe paragraphe</em> </em> de test. de test. </p> </p> </body> </body> </html> </html> A.U. 2012/2013 SMI, S5, FS-KENITRA 5 Supposons Supposons que que nous nous souhaitons souhaitons indiquer indiquer que que tous tous les les titres titres (h (h1 à h6) sont sont en en police police Helvetica Helvetica. Plutôt Plutôt que que d’écrire d’écrire six six règles règles pour pour attribuer attribuer cette cette police police à chaque chaque titre, titre, nous nous indiquons indiquons dans dans le le sélecteur sélecteur que que six six éléments éléments sont sont concernés concernés par par la la partie partie déclaration, déclaration, en en les les séparant séparant par par des des virgules virgules: h1, h2, h3, h4, h5, h6{font font-family family:Helvetica Helvetica} <html> <html> <head> <head> <title> Divisions </title> <title> Divisions </title> <style <style type="text/css type="text/css"> "> <!  </style> </style> </head> </head> <body> <body> <h1 > <h1 >h1 : Une très grande taille h1 : Une très grande taille </h1> </h1> <h2> <h2> h2 : Une grande taille h2 : Une grande taille </h2> </h2> <h3> <h3> h3 : Une taille moyenne h3 : Une taille moyenne </h3> </h3> <h4> <h4> h4 : Une petite taille h4 : Une petite taille </h4> </h4> <h5> <h5> h5 : Une très petite taille h5 : Une très petite taille </h5> </h5> <h6> <h6> h6 : Une taille vraiment minuscule h6 : Une taille vraiment minuscule </h6> </h6> <p> <p>Il est possible d’utiliser l’attribut style pour aligner les titres Il est possible d’utiliser l’attribut style pour aligner les titres:<br> :<br> </body> </body> </html> </html> A.U. 2012/2013 SMI, S5, FS-KENITRA 6 Il Il est est possible possible de de définir définir le le comportement comportement d’un d’un élément élément lorsqu’il lorsqu’il est est imbriqué imbriqué dans dans un un autre autre. par par exemple, exemple, nous nous pouvons pouvons définir définir que que la la taille taille de de la la police police sera sera moyenne moyenne lorsque lorsque l’item l’item li li est est au au premier premier niveau niveau dans dans une une liste liste ul ul, Et Et que que la la taille taille sera sera petite petite si si l’item l’item li li est est dans dans une une sous sous- liste liste. ul ul li li {font font-size size:meduim meduim;} ul ul ul ul uploads/s3/ chap-3 1 .pdf