1 / 112

Procédés de Mise en forme

Procédés de Mise en forme . Les Feuilles de style en Cascade C.S.S ( C ascading S tyle S heet). Alain Gély (gely@isima.fr) – Stage CIES « Initiation au web » - 2005. Les Feuilles de style en Cascade C.S.S ( C ascading S tyle S heet) références www.w3c.org

satya
Télécharger la présentation

Procédés de Mise en forme

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély (gely@isima.fr) – Stage CIES « Initiation au web » - 2005

  2. Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) références www.w3c.org www.pompage.netwww.openweb.eu.org

  3. Les C.S.S • Permettent de séparer le fond de la forme • Assurent une compatibilité plus grande • Permettent une maintenance facilitée • Les CSS par l’exemple Exemple 1 - Exemple 2 - Exemple 3

  4. 3 pages web au contenu identique… … mais à la présentation différente • Code de la page HTML (presque) identique dans les trois cas • Les C.S.S gèrent la mise en page • Quelques exemples de mise en page : http://www.csszengarden.com/

  5. C.S.S : Une cascade de style • Dans les balises • Mais aussi… • Dans la page • Dans un fichier de style <p style="text-align: right; color: black" > Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page web </p>

  6. La balise <style> <pstyle="text-align: right; color: black" > Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page Web </p> <pstyle="text-align: right; color: black" > Bien sur, une page Web peut être composée de nombreux paragraphes, comme n’importe quel texte.</p> <pstyle="text-align: right; color: black" > Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! </p> <pstyle="text-align: right; color: black" > Heureusement, les CSS nous permettent d’éviter ce travail inutile… </p> Mettons le style une fois pour toute dans la page : La balise <style>

  7. La balise <style> <html> <head> <style type="text/css" title="mes_styles" media="all" > p { text-align: right; color: black } </style> </head> <body> <p> Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page Web </p> <p> Bien sur, une page Web peut être composée de nombreux paragraphes, comme n’importe quel texte.</p> <p> Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! </p> <p> Heureusement, les CSS nous permettent d’éviter ce travail inutile… </p> </body> </html>

  8. La balise <style> <style type="text/css" title="mes_styles" media="all" > p { text-align : right; color : black } </style> Voyons <style> plus en détail

  9. La balise <style> <style type="text/css" title="mes_styles" media="all" > p { text-align : right; color : black } </style> Les informations de la balise sont de type texte (optionnel)

  10. La balise <style> <style type="text/css" title="mes_styles" media="all" > p { text-align : right; color : black } </style> Nom donné (choisi) aux informations de style (optionnel)

  11. La balise <style> <style type="text/css" title="mes_styles" media="all" > p { text-align : right; color : black } </style> Indique à quel média s’applique la feuille de style. (optionnel) • all • screen • print • projection • tv • braille

  12. La balise <style> <style type="text/css" title="mes_styles" media="all" > p { text-align : right; color : black } </style> élément pour lequel on défini le style délimiteurs de début et de fin de style

  13. La balise <style> <style type="text/css" title="mes_styles" media="all" > P { text-align : right ; color : black } </style> propriété valeur pour cette propriété

  14. La balise <style> <style type="text/css" title="mes_styles" media="all" > P { text-align : right ; color : black } h1 { text-align : center ; } </style> Il est possible de définir le style de plusieurs éléments

  15. feuille de style externe • et si le site possède plusieurs pages ? On crée une feuille de style externe, liée à chaque page Web qui l’utilise <html> <head> < link rel="stylesheet" href="style.css" type="text/css" media="screen" > </head>

  16. Lier une feuille de style externe <html> <head> < link rel="stylesheet" href="style.css" type="text/css" media="screen" > </head> c’est une feuille de style qui est liée

  17. Lier une feuille de style externe <html> <head> < link rel="stylesheet" href="style.css" type="text/css" media="screen" > </head> Ou se trouve la feuille de style ? Ici, dans le fichier style.css du répertoire courant

  18. Lier une feuille de style externe <html> <head> < link rel="stylesheet" href="style.css" type="text/css" media="screen" > </head> Une feuille de style, c’est un fichier texte

  19. Lier une feuille de style externe <html> <head> < link rel="stylesheet" href="style.css" type="text/css" media="screen" > </head> Pour quel média la feuille de style est-elle valable ? (optionnel, par défaut : tous)

  20. le fichier style.css • Il comporte les informations de style sur les différents éléments Fichier « style.css » P { text-align : right ; color : black } h1 { text-align : center }

  21. des styles en cascade Mais au fait, pourquoi « en cascade » ?

  22. 1ère Cascade styles définis en cascade du plus éloigné au plus proche Que se passe-t-il en cas de redéfinition en cascade ? feuille de style externe du – prioritaire au + prioritaire balise <style> s’une page attribut style dans une balise

  23. Quelques propriétés pour commencer ? Après cette présentation générale, voyons quelques exemples… • body • p • h1, h2, h3, h4, h5, h6

  24. body • Couleur du texte & du fond • Placer une image de fond • Rajouter des marges

  25. Un peu de couleur… • color la propriété color permet de fixer la couleur du texte. • Comment manipuler les couleurs ? • liste de couleur standard • Un code hexadécimal long #00FF45 • Un code hexadécimal court #0F3 • Un code rgb, de 0 à 255 rgb(0,0,100) • un code rgb, en pourcentage rgb(10%,10%,30%) • transparent

  26. Un peu de couleur (suite) • Liste des couleurs standard : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

  27. Un peu de couleur (de fond) • background-color la propriété background-color permet de fixer la couleur de fond de la page. body { background-color : rgb(0,0,0) ; color : white }

  28. Une image de fond • background-image permet de spécifier une image de fond • background-repeat l’image de fond doit-elle être répétée ? • background-position Où placer l’image de fond ? • background-attachment L’image de fond bouge-t-elle en même temps que la page ?

  29. background-image • none • url() • background-repeat • repeat • no-repeat • repeat-x • repeat-y background-position background-attachment

  30. background-repeat repeat-x no-repeat repeat repeat-y

  31. bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla positionnement fixe ou mobile background-attachment bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla background-attachment: scrool; (valeur par défaut) background-attachment: fixed;

  32. Mais au fait, comment avoir une image au milieu ? background-position : x y Détermine la position de l’image de fond par rapport au coin supérieur gauche

  33. Exemples de positionnement background-position: 50% 50% ; background-position: 100% 100%; background-position: 10px 10px; background-position: 0% 100%;

  34. Exemples de positionnement background-position: 50% 50% ; background-position: 100% 100%; ? background-position: 10px 10px; background-position: 0% 100%;

  35. Mesures en C.S.S • % (pourcentage) • la taille / position de l’élément est calculée de façon relative • px (pixel) • Le pixel est la plus petit unité de l’écran • em • 1em = 100%, 1.2em = 120%, … • pt • correspond à une unité d’imprimerie

  36. Mesures en C.S.S ! Préciser l’unité de mesure est obligatoire ! sauf pour la valeur 0, identique quelque soit l’unité utilisée background-position: 50% 50% ; // Valide background-position: 10px 50% ; // Valide background-position: 0 50% ; // Valide background-position: 10 50% ; // Non Valide En C.S.S, en cas d’erreur, la propriété erronée est ignorée

  37. Un peu de marge… bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla margin : 1em ; margin-right : 1em ; margin-left : 2em ; margin-right : 0.9em ; margin-bottom : 2em; Nous reviendrons sur les marges un peu plus tard…

  38. Quelques propriétés sur les fontes • font-size • permet de fixer la taille de la police • les unités de mesures vues précédemment sont utilisables • il existe aussi des tailles relatives prédéfinies : • xx-small • x-small • small • medium, • large, • x-large, • xx-large, • larger, • smaller

  39. Quelques propriétés sur les fontes • font-family • permet de spécifier le type de police que l’on souhaite afficher • ! Toutes les polices ne sont pas disponibles sur tous les ordinateurs ! • Il est possible de spécifier plusieurs polices, dans l’ordre ou l’on souhaite les utiliser

  40. Quelques propriétés sur les fontes • font-family • familles de polices génériques : • serif, • sans-serif, • monospace, • cursive, • fantasy. exemple : font-family : "times new roman", serif, sans-serif

  41. Quelques propriétés sur les fontes • font-weight • précise le niveau de gras de la police : • normal, • bold, • 100, 200, ... • font-style • précise le style de fonte : • normal • italic • oblic exemple : afficher du texte en italique et en gras font-weight : bold ; font-style : italic ;

  42. Quelques propriétés sur les fontes • font-variant • utilise une fonte normale ou en petite capitale : • normal, • small-caps. • font • raccourci permettant de tout spécifier exemple : utilisation du raccourci font font : italic bold 1em cursive ;

  43. Quelques propriétés sur les textes • text-align • permet de gérer l’alignement du texte • right, • left, • center, • justify. • text-decoration • comment doit apparaître le texte • none (aucun) • underline (souligné) • overline (surligné) • line-through (barré) • blink (clignotant)

  44. Quelques propriétés sur les textes • text-transformation • on peut appliquer des transformations au texte • capitalize (1ere lettre de chaque mot en majuscule) • uppercase (transformer en majuscule) • lowercase (transformer en minuscule) • none (aucune) • text-indent • Indentation de début de paragraphe exemple : P { text-transformation : lowercase ; text-indent : 1em; }

  45. Ah oui, au fait … h1 {text-decoration : underline } h2 {text-decoration : underline } h3 {text-decoration : underline } h4 {text-decoration : underline } h5 {text-decoration : underline } peut s’écrire … h1,h2,h3,h4,h5,h6 {text-decoration : underline }

  46. 2ème Cascade styles définis en cascade Imbrication des éléments <html> <head> </head> <body> <h3>Un titre</h3> la, un petit texte exemple, mais sans paragraphe <p>La, un autre petit texte, <strong>mais qui fait parti d’un paragraphe</strong></p> </body> </html> <html> <head> <body> <h3> <p> <strong> les styles non redéfinis sont répercutés dans tous les éléments contenus D.O.M : Document Object Model

  47. Changer le style Comme dit précédemment … p {text-decoration : underline } strong {text-decoration : underline } peut s’écrire … p,strong {text-decoration : underline }

  48. Mais attention … p strong {text-decoration : underline } possède un autre sens : Le style n’est appliqué à strong que s’il est imbriqué dans une balise p Exemple … p>strong {color : red} <p>La couleur<strong>rouge</strong> est appliquée ici, mais aussi <del><strong>la</strong></del></p> <strong>Mais pas la</strong> <p> <strong> <del> <strong>

  49. De même … p>strong {text-decoration : underline } Le style n’est appliqué à strong que s’il est descendant direct de p Exemple … p>strong {color : red} <p>La couleur<strong>rouge</strong> est appliquée ici, mais pas <del><strong>la</strong></del></p> <p> <strong> <del> <strong>

  50. De même … p+strong {text-decoration : underline } Le style n’est appliqué à strong que s’il suit immédiatement une balise p Exemple … p {text-indent : 1em} p+p {text-indent : 0} Le premier paragraphe d’un texte sera indenté, mais pas les suivants

More Related