INF2005– Programmation web– A. Obaid Les feuilles de style.

Présentation au sujet: "INF2005– Programmation web– A. Obaid Les feuilles de style."— Transcription de la présentation:

1 INF2005– Programmation web– A. Obaid Les feuilles de style

2 INF2005– Programmation web– A. Obaid Les styles Pour développer un site large, on doit avoir un moyen systématique de formater son contenu. On peut attribuer à certains éléments des caractéristiques de mise en forme specifiques. On peut stocker ces informations de formatage dans un fichier séparé. Solutions CSS (Cascading Style Sheets) : Recommandation du W3C. CSS -2.1. Version la plus récente : CSS-3. 2

3 INF2005– Programmation web– A. Obaid Avantages des styles Economie de temps et d'effort Cohérence dans la présentation On évite des erreurs de formatage Séparation du contenu et de la présentation: – On peut changer le fichier des styles sans toucher au contenu 3

4 INF2005– Programmation web– A. Obaid Adaptation des présentations 4 Style 1 Style 2 Style 3 Document HTML Document HTML Sortie 1 Sortie 2 Sortie 3 Imprimante Moniteur Portable

5 INF2005– Programmation web– A. Obaid Usage des styles On peut utiliser des balises tels que, et pour formater le texte. – Elles s'appliquent une instance précise C'est trop long ! Risque d'incohérence On peut définir des styles que l'on peut déclarer: – Dans un élément particulier - Styles en ligne – Dans une page - Style dans l'entête de la page. – À l'extérieur d'une page – Feuilles de style 5

6 INF2005– Programmation web– A. Obaid Utilisation de l'attribut style On peut appliquer un style à un élément particulier tel que,, etc. Solution 1: Style en ligne - On utilise l'attribut style de cet élément. C'est trop fastidieux ! Il faut l'appliquer à chaque élément. 6 <p style=" padding: 4px; text-align:right; font-family: Arial; font-weight: bold; color: #778899; border: 2px solid #770000;;"> Un, deux, trois, quatre. La petite vache a mal aux pattes ! styles2.html

7 INF2005– Programmation web– A. Obaid Utilisation de l'élément Solution 2: Les styles internes. permet de déclarer un style interne qui s'applique aux éléments de la page. – Il paraît dans l'en-tête ( ) S'appliquera à des instances d'éléments spécifiques! 7 body {font-family: Arial; background-color: #a4e6a6;} p {color:blue} h1 {color:red} 1,2,3 4. La petite vache a mal aux pattes. ce titre sera en rouge Tout le document avec la police Arial. Tirez-la par le queue. Elle ira bien mieux ! styles3.html

8 INF2005– Programmation web– A. Obaid Styles externes Solution 3: Faire référence à une feuille de style stockée dans un fichier externe d'extension.css Se fait avec l'élément – Sous-élément. 8

9 INF2005– Programmation web– A. Obaid Syntaxe des styles Un style est défini selon le format : – sélecteur {déclaration; déclaration; ….} Les déclarations peuvent être mises sur une ou plusieurs lignes et se terminer par ; Chaque déclaration est de la forme: – propriété: valeur Un sélecteur peut être : Un élément HTML #Identificateur.classe Combinaison de sélecteurs h3 { color:red; font-family: Arial; font-style: italic; } 9

10 INF2005– Programmation web– A. Obaid Types de sélecteurs Désignent les éléments auxquels s'applique un style: – E :élément E – E F : élément F descendant de E. – E > F: élément F enfant de E. – E:visited: lien visité – E[attr="texte"]: élément E dont la valeur de l'attribut attr est "texte" – … h1 { font-family: Arial; } > h1 em { color: blue } … Utilisation des rules dans RDF ol > li { margin-left : 30px } a.:visited { color: red } ol a { margin-left : 30px } 10

11 INF2005– Programmation web– A. Obaid Identification des éléments On identifie un élément auquel s'applique un style par: – L'élément, – Sa classe (attribut class) – Son identificateur (attribut id) Une classe est définie avec l'attribut class Un identificateur est défini avec l'attribut id body {font-family: Arial;} p {color:red;} h1 {color:red; text-align:center; } #parbleu { color:blue; font-family:Helvetica; }.justifie {text-align:right;}.droit {text-align:right; width:10% } Section 1 Un paragraphe Un autre paragaphe Un paragraphe justifié Un div justifié 1.1 1.2 2.1 2.2 11 style3.1.html

12 INF2005– Programmation web– A. Obaid Les classes Donne la possibilité de donner un style à un ensemble d'éléments. On distingue des instances d'éléments en définissant des classes différentes. On peut définir une classe pour tout élément HTML. Ceci est un paragraphe normal. Ce paragraphe utilise le code CSS p.un Ce paragraphe utilise le code CSS p.deux Ce paragraphe utilise le code CSS.deux Cet entete utilise le code CSS.deux p.un { color: blue; } p.deux { color: red; }.un { color: blue; }.deux { color: red; } 12

13 INF2005– Programmation web– A. Obaid Les identificateurs Un identificateur est un identifiant unique donné à un élément. – On ne doit pas reprendre le même identifiant plusieurs fois dans un même document #id1 { background-color: white; } #id2 { text-transform:uppercase; } Ce paragraphe a l'identificateur "id1" et une couleur de fond blanche Ce paragraphe a l'identificateur "id2" et est transformé à majuscules 13

14 INF2005– Programmation web– A. Obaid Application des styles Pour appliquer un style à un élément particulier, – L'élément est identifié grâce à l 'attribut id. On se réfère à cet élément avec cet identificateur précédé de #. #adresse { text-align: right; font-style:italic; border: 2px solid #f7f7f7; } Bienvenu à ma page Orem ipsum dolor sit amet, … Vous pouvez me contacter par courriel au condimentum.varius@donecsit.com ou par telephone au (514)5145145. styles5.html 14

15 INF2005– Programmation web– A. Obaid Application des styles On peut appliquer un style pour une classe d'éléments On se réfère à la classe avec le nom de la classe précédé de ".". <html.bleu { color: blue; font-family:Arial; }.cache { display : none ; } Ce paragraphe appartient à la classe "bleu" Ce paragraphe n'appartient pas à la classe "bleu" Ce paragraphe appartient à la classe "cache" styles4.html 15

16 INF2005– Programmation web– A. Obaid Feuilles de style externes On stocke les déclarations dans un fichier (d'extension.css) auquel on fait référence avec l'élément de l'en-tête. Avantages: – On peut modifier le fichier de style sans toucher au document HTML. – On peut utiliser le même fichier pour plusieurs documents HTML 16 Les styles déclarés dans le fichier mesStyles.css s'appliqueront a ce document….

17 INF2005– Programmation web– A. Obaid Les balises et Elles n'ont aucune fonction de formatage. : Élément de bloc. – Il ajoute une ligne vide avant et après. – Il permet de regrouper plusieurs paragraphes. : Élément de ligne. – Il s'insère en continuité dans la ligne. – Il permet d'isoler un morceau d'un paragraphe. Très utilisés pour appliquer des styles. – Outils puissants !!! 17

18 INF2005– Programmation web– A. Obaid Les balises et.bleu {font-size: large; color: blue;}.blanc {font-size: large; color: white;}.bloc {font-size: xx-large; color: white;} body {background-color: #D9D7D7; } Bleu et Blanc ! Les couleurs du drapeau du Québec sont le bleu et le blanc.. Bobo Aujourd'hui il a bobo dans sa tête Même son coeur n'est plus invité à la fête … styles6.html.bleu {font-size: x-large; color:blue; font- style:italic;} Orem ipsum dolor sit amet Nouveau paragraphe: Texte aléatoire :Orem ipsum, … Nouveau paragraphe: … Donec ultricies feugiat leo sit amet auctor. Sed ac mauris … 18

19 INF2005– Programmation web– A. Obaid Positionnement On peut positionner un élément dans la fenêtre par rapport à l'origine en haut à gauche de la fenêtre ou de son parent. On utilise les propriété top et left. Les coordonnées s'expriment de haut vers bas et de la gauche vers la droite: – top: position à partir du haut – left: position à partir de la gauche On peut utiliser des valeurs négatives – Pour se positionner à partir de la droite ou du bas Élément top left 19

20 INF2005– Programmation web– A. Obaid Positionnement L'attribut positon permet de spécifier le type de positionnement: – absolue : place exacte. – relative : par rapport à l'endroit où il devait être. Utilisé avec les propriétés top et left..annonce { position: absolute; top: 200px; left: 30px; color: blue; font-size: x-large; font-weight: bold;} h3 { position: relative; top: 15px; left: 150px; } p { position: relative; left -10px; } top left relative 20

21 INF2005– Programmation web– A. Obaid Positionnement relatif 21.boite1 { border:solid; background-color: yellow; }.boite2 { position: relative; left: 40px; background-color: gray; border: dashed; color: blue; } Exemple de positionnement Orem ipsum dolor sit amet, consectetur adipiscing elit… styles18.html

22 INF2005– Programmation web– A. Obaid Positionnement absolu.annonce { position: absolute; top: 100px; left: 100px; color: blue; font-size: xx-large; font-weight: bold; } Orem ipsum dolor sit amet, …. Orem ipsum dolor sit amet,..... Annonce bien placée ! styles8.html.image { position: absolute; top: 100px; left: 100px; width:200px; } Orem ipsum dolor sit amet, …. Orem ipsum dolor sit amet,.. Orem ipsum dolor sit amet, ….... styles9.html 22

23 INF2005– Programmation web– A. Obaid Propriétés de texte Plusieurs propriétés relatives aux textes et polices de caractères: – font-style : type de police: Normal | italic|oblique – font-weight: graisse de la police (de 100 à 900): Normal (400)| bold (700)| bolder (900)|lighter (100) – font-size: taille de la police. Décrite avec une taille, (ex. pts) ou des mots-clés comme: xx-small | x-small |small | medium (~12 pts) | large(~14 pts) | x- large | xx-large Ne pas trop en abuser ! 23

24 INF2005– Programmation web– A. Obaid Propriétés de texte – font-family: type de police tels que Arial, Helvetica, … On peut en spécifier une liste qui sera considérée dans l'ordre d'apparition dans le liste. Exemple: – font-family: Arial, Helvetica, sans-serif; – font-variant: Spécifie la casse: normal ("majuscule !"), small-caps (petites majuscules) On peut spécifier des raccourcis des propriétés qui s'apparentent : – Par exemple: {font: italic bold small Arial, Helvetics;}, équivaut à: {font-style: italic; font-weight: bold; font- size:small; font-famiy: Arial, Helvetics;} 24

25 INF2005– Programmation web– A. Obaid Propriétés de texte h1 { text-align:center; font-size:32pt; color:blue ; } h2 { font-size: 20pt; text-align:center; } p {font-size: 16pt; text-align: left ; } uL{ font-size: 16pts; text-align:center ; } lI {font-size: 14pt; text-align:left; } table { text-align: center;} caption {font-size: 24px ; font-weight: bold; text-align:center; } TD { font-size:14pt; font-famliy:Helvetice; text-align:center} TD.droite {font-size:14pt; font-famliy:Helvetice; text-align:right; color:blue;} 1. Genertaion de texte aleatoire 1.1. Premier exemple Phasellus quis libero arcu. Donec vulputate, urna eu condimentum varius,.. Orem ipsum dolor sit amet consectetur adipiscing elit Phasellus quis libero arcu. Donec vulputate Exemple de table dui orci viverra metus, nec dignissim leo quam vitae purus. Praesent quis dolor odio, vel feugiat nulla. Ut egestas Praesent quis dolor odio, vel feugiat nulla. Ut egestas syles10.html 25

26 INF2005– Programmation web– A. Obaid Propriétés de texte Plusieurs propriétés sont associées aux informations textuelles: espacement, décoration, alignement, etc. – text-decoration: décoration de texte: line-through (barré), overline (surligné), underline (souligné), none (rien)..barre { text-decoration: line-through;}.marque { text-decoration: overline; } h2 { text-decoration: underline; } a { text-decoration: none; } 26

27 INF2005– Programmation web– A. Obaid Propriétés de texte – text-indent: spécifie l'indentation. Exprimé en pixels, points ou pourcentages. – text-transform: pour modifier la casse. Valeurs : capitalize (première lettre de chaque mot en majuscule), lowercase (tout en minuscule), uppercase (tout en majuscule) – word-spacing : espacement (pixels ) entre mots. – letter-spacing: espacement entre lettres..indente { text-indent: 20px; text-align: justify; } h5 { text-indent: 30%; text-align: left; }.minuscule { text-transform: lowercase; } p { word-spacing: 10px; }.etale {letter-spacing: 3px; } 27

28 INF2005– Programmation web– A. Obaid Le modèle de boites CSS suit un modèle de "boite" pour positionner les objets. Marge (margin) Bordure (border) Distance (padding) Contenu Largeur (width) Hauteur (weight) 28

29 INF2005– Programmation web– A. Obaid Le modèle de boites Des propriétés sont associées à ce modèle: – Les boites externes (espaces entre le bord de l'écran et un élément) gérés par le propriété margin. – L'aire de bordures gérés par la propriété border d'un élément. La distance entre la bordure et le contenu est gérée par le padding Les attributs width et height sont associés aux contenus des éléments. boites1.htmlboites2.html 29

30 INF2005– Programmation web– A. Obaid Propriétés des marges Plusieurs propriétés de marge : – margin-top, margin-right, margin-bottom, margin-left. On leur donne des valeurs en pixels, en pourcentage (ex. 10%) de la fenêtre ou auto. On peut utiliser une abréviation (appelé margin) pour ces propriétés en utilisant: – Une seule valeur – Un liste de valeurs considérées l'ordre haut droit bas gauche.decale { margin: 200px 100px 200px 100px; }.decale { margin: 200px ; } 30

31 INF2005– Programmation web– A. Obaid Propriétés des marges.decale { margin-top: 200px; margin-bottom:200px; margin-right:100px; margin-left:100px; } Paragraphe décalé: Orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis libero arcu. … Paragraphe normal: Orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis libero arcu...... styles11.html 31

32 INF2005– Programmation web– A. Obaid Propriétés des marges 32.decale1 { position: absolute; margin-top:200px; margin-bottom:200px; margin-right:65%; margin-left:10%; color:blue; font-famliy:Verdana; }.decale2 { position: absolute; margin-top:200px; margin-bottom:200px; margin-right:10%; margin-left:65%; color:red; font-famliy:Verdana; }.image { position: absolute; margin-top:200px; margin-bottom:200px; margin-left:30%;}.nom {position: absolute; top: 210px; left: 33%; font-family: Arial; font-size: large; font-style: italic; color: white; } L'aurore s'allume ; … … L'aurore s'allume Victor Hugo styles12.html

33 INF2005– Programmation web– A. Obaid Propriétés des bordures Spécifiées avec la propriété border et les propriétés qui s'y rapportent. – border-width: largeur de la bordure. exprimée en points ou mot-clés thin, thick, medium. On peut spécifier des valeurs différentes pour: – border-top-width, border-bottom-width, border-right-width, border- left-width On peut utiliser un abréviation de border-width: {border-width: haut droite bas gauche;} {border-width: 10 20 10 20;} 33

34 INF2005– Programmation web– A. Obaid Propriétés des bordures – border-style: none, dotted (pointillés), dashed (tirets), solid (pleine), double (grasse), groove (gravée), ridge (en relief), inset (3D creux), outset (3D relief). – broder-color: Couleur décrite en code #RGB ou rgb(rouge, vert, blue) On peut utiliser une abréviation (appelée border) pour toutes ces propriétés dans l'ordre: – border-width borde-style color {border : 200pt solid red;} 34

35 INF2005– Programmation web– A. Obaid Propriétés des bordures padding : ajoute un espacement entre le contenu d'un élément et sa bordure. Comme margin, il a plusieurs sous propriétés padding-top, padding-right, padding-bottom, padding-left – On peut utiliser une abréviation appelée padding overflow: définit ce qui se passe si l'élément excède l'espace défini. – visible: contenu visible même hors de la boite. – hidden: contenu tronqué. – scroll: un mécanisme de défilement apparaitra..encadre {padding: 10px;} 35

36 INF2005– Programmation web– A. Obaid Propriétés des bordures.peronnalite { position: absolute; margin-top:200px; margin-bottom:200px; margin-right:65%; margin-left:10%; color:blue; font-famliy:Verdana; border: 20pt solid grey; padding: 10px; } Je suis motivé, enthousaiste et aime les défis. J'aime travailler en équipe … styles13.html 36

37 INF2005– Programmation web– A. Obaid Propriétés de contenu Plusieurs attributs de taille et de style d'éléments sont possibles: – width: longueur d'un élément (texte, bloc, ou image). Exprimée en nombre (ex. 10px) ou en pourcentage (%) – height: hauteur d'un élément (texte, bloc, ou image). Exprimée en nombre (ex. 10px) ou en pourcentage (%) boites1.html 37

38 INF2005– Programmation web– A. Obaid Propriétés de contenu.boite1 { width : 1000px ; height: 200px; border: 10pt solid red; overflow: visible; color: red; }.boite2 { width : 1000px ; height: 200px; border: 10pt solid blue; overflow: hidden; color: blue; }.boite3 { width : 1000px ; height: 200px; border: 10pt solid green; overflow: scroll; color: green; } Orem ipsum dolor sit amet, consectetur adipiscing elit. … Orem ipsum dolor sit amet, consectetur adipiscing elit. … Orem ipsum dolor sit amet, consectetur adipiscing elit. … styles14.html 38

39 INF2005– Programmation web– A. Obaid Propriétés de flottement La propriété float permet de spécifier des éléments flottants à droit ou à gauche. – float: right|left; Seuls les élément bloc peuvent flotter:, et L'élément flottant ira tout à fait à droite ou à tout à fait à gauche 39

40 INF2005– Programmation web– A. Obaid Propriétés de flottement h1 { background-color:yellow; padding: 5px; color: red; border: dashed; } #flottante { float: right; margin: 0 0 5px 5 px; border: solid; } Exemple de flottement Orem ipsum dolor sit amet, consectetur adipiscing elit. … styles16.html 40

41 INF2005– Programmation web– A. Obaid Menus de navigation (positionnement) 41 h1 { border: groove; background-color: yellow; color:blue; }.menu { font-family: Helvetica; position: absolute; top: 75px; left: 50px; width: 200px; }.corps { font-family: Helvetica; position: absolute; top: 75px; left: 300px; } Menu de navigation Choisir un texte … Orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis libero arcu.... NavigationMenu.html

42 INF2005– Programmation web– A. Obaid Exemple de design Navigation Titre en grands caractères Photo Contenu Note de bas de page 42

43 INF2005– Programmation web– A. Obaid Exemple de design mapage.html #photo { float: right; margin: 0 0 5px 5px; border: solid ; }.menu a { padding 5px; background-color: #f0e686; color:#000006;font-family: Helvetica; }.corps { font-famliy: Arial; margin: 10px ;} #entete { background-color: #f0e686; font-size : larger; padding: 10px;color: #000000; } #enveloppe { width: 700px ; }.basdepage { font-size:xx-small; text-align:center;} Abdel Obaid, Professeur Enseignement Recherche Divers Orem ipsum dolor sit amet, consectetur adipiscing …, Derniere mise à jour le 10/10/2010. MaPage.html 43

44 INF2005– Programmation web– A. Obaid Exemple de design Menu de navigation Logo Contenu Bas de page Photo Exercice: Réalisez ce design. 44

45 INF2005– Programmation web– A. Obaid Les backgrounds Il existe plusieurs propriétés du fond de l'écran (couleur, image, …): – background-color: couleur de fond. – background-image : URL d'une image de fond. – background-repeat : pour répéter ou non l'image de fond: repeat-x (verticalement), repeat-y (horizontalement), repeat (les deux), norepeat (pas de répétition) h4 { background-color: white; } p { background-color: #1078E1; } ul { background-color: rgb( 200, 200, 100); } p { background-image: url(image.jpg); background-repeat: repeat; } h4 { background-image: url( image.jpg); background-repeat: repeat-y;} ol { background-image: url( image.jpg); background-repeat: repeat-x;} Considérez cette image ! styles20.html 45

46 INF2005– Programmation web– A. Obaid Les backgrounds On peut spécifier la position de l'image de fond: – background-position: coordonnées (X,Y) de la position de l'image. – background-attachment: décrit le défilement de l'image de fond: fixed ou scroll. p { background-image: url(image.jpg); background-position: 20px 10px; } h4 { background-image: url(image.jpg); background-position: 30% 30%; } ol { background-image: url(image.jpg); background-position: top center; } 46

47 INF2005– Programmation web– A. Obaid Tables et bordures - Exemple table { border-width: 7px; border-style: outset; border-color: rgb( 100, 100, 255); } td { border-width: medium; border-style: outset; border-color: #FFBD32; } p { border-width: thick; border-style: solid; padding: 5px; } styles21.html 47

48 INF2005– Programmation web– A. Obaid Propriétés des listes Ont peut modifier l'allure des listes: – Pour les listes ordonnées ( on peut choisir le type de listage avec list-style-type: list-style-type: upper-alpha|lower-alpha|upper-roman|lower- roman||decimal (défaut)|none – Pour les listes non ordonnées ( : list-style-type: square|circle|disc (défaut)|none – On peut lister avec des images comme puces: list-style-image: url("image.gif") 48

49 INF2005– Programmation web– A. Obaid Propriétés des listes On peut aussi régler l'indentation dans la liste avec la propriété list-style-position – list-style-position: inside|outside ol { list-style-type: upper-roman; } ul { list-style-type: circle; } ul { list-style-image: url("cercle.gif"); } ol { list-style-image: url("cercle.gif"); } ul { list-style-position: inside; } ol { list-style-position: outside; } ul { list-style: upper-roman inside url("www.xyz.com/cercle.gif");} 49

50 INF2005– Programmation web– A. Obaid Propriétés des liens On peut adapter l'allure attachée à chacun des états d'un hyperlien. – link : lien non encore visité – visited : lien visité – hover la souris se trouve au dessus du lien – active : lien entrain d'être cliqué On utilise une pseudo-classe comme sélecteur. – a.état {attribut:valeur; attribut:valeur;…} Exemple: enlever le soulignement: a:link { color: green; } a:visited { color: red; } a:hover { color: blue; } a:link { color: red; text-decoration: none; } a:visited { color: red; text-decoration: none; } styles23.html styles24.html styles25.html 50

51 INF2005– Programmation web– A. Obaid Les niveaux On peut spécifier quels éléments apparaissent par dessus d'autres avec le propriété z-index. – Z-index: n où n est une valeur qui indique l'ordre d'apparition de l'élément. L'élément avec la plus haute valeur apparaitre au dessus. H4 { position: relative; top: 30px; left: 50px; background-color: #336699; z-index: 2; } p { position: relative; z-index: 1; background-color: #FFCCCC; } styles26.html 51