Xhtml et Css

1,453 views
1,358 views

Published on

Module de formation aux feuilles de style CSS

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,453
On SlideShare
0
From Embeds
0
Number of Embeds
146
Actions
Shares
0
Downloads
108
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide










































































































  • Xhtml et Css

    1. 1. <html> .css {duo gagnant du web} Module de formation © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    2. 2. Plan W3C : le web encadré (X)HTML CSS Principes Syntaxe générale Valeurs et unités Sélecteurs © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    3. 3. W3C : le web encadré © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    4. 4. W3C : le web encadré W3C : World Wide Web Consortium (1994) Mission : promotion de la compatibilité des technologies du web (XHTML, CSS, PNG...) Fonctionnement : émission de recommandations (≠ normes, lois) Poids : valeur de standards industriels (normalisation) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    5. 5. 1. Principes 1. Généralités © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    6. 6. 1. Principes 1. Généralités • Séparation nette entre structuration et mise en forme/ présentation associée © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    7. 7. 1. Principes 1. Généralités • Séparation nette entre structuration et mise en forme/ présentation associée • Une information peut être présentée (XHTML) et restituée (CSS) de manière différente, sur base d’une même information brute © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    8. 8. 1. Principes 1. Généralités • Séparation nette entre structuration et mise en forme/ présentation associée • Une information peut être présentée (XHTML) et restituée (CSS) de manière différente, sur base d’une même information brute XHTML CSS Structuration 1 Rendu 1 Info brute Structuration 2 Rendu 2 Structuration 3 Rendu 3 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    9. 9. 1. Principes 1. Généralités XHTML CSS Rendu 1 Info brute Structuration Rendu 2 Rendu 3 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    10. 10. 1. Principes 1. Nouveaux concepts amenés par CSS © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    11. 11. 1. Principes 1. Nouveaux concepts amenés par CSS • Sélecteurs : conditions qu’un élément doit vérifier pour se voir appliquer des règles de style (ex : body, #id, .class) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    12. 12. 1. Principes 1. Nouveaux concepts amenés par CSS • Sélecteurs : conditions qu’un élément doit vérifier pour se voir appliquer des règles de style (ex : body, #id, .class) • Format d’écriture de styles : un attribut unique peut définir plusieurs styles (duplication inutile), tant en interne qu’en externe © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    13. 13. 1. Principes 1. Nouveaux concepts amenés par CSS • Sélecteurs : conditions qu’un élément doit vérifier pour se voir appliquer des règles de style (ex : body, #id, .class) • Format d’écriture de styles : un attribut unique peut définir plusieurs styles (duplication inutile), tant en interne qu’en externe • Cascade : principe de confrontation des styles et de priorité entre auteur-lecteur-logiciel de restitution ; l’algorithme de cascade détermine les styles réellement appliqués au document in fine Principe : le plus particulier l’emporte © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    14. 14. 2. Syntaxe générale Syntaxe générale body { color: red; background: yellow; } qui est équivalent à : body {color: red; background: yellow;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    15. 15. 2. Syntaxe générale Syntaxe générale body { color: red; background: yellow; } qui est équivalent à : body {color: red; background: yellow;} • Un élément CSS est appelé une règle © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    16. 16. 2. Syntaxe générale Syntaxe générale body { color: red; background: yellow; } qui est équivalent à : body {color: red; background: yellow;} • Un élément CSS est appelé une règle • Chaque règle se compose de plusieurs parties © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    17. 17. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    18. 18. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    19. 19. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    20. 20. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    21. 21. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    22. 22. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    23. 23. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    24. 24. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur • Sélecteur : partie du document HTML qui sera affectée © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    25. 25. 2. Syntaxe générale Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur • Sélecteur : partie du document HTML qui sera affectée • Souvent, un sélecteur est un élément HTML : html, body, h1, p, img, a... © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    26. 26. 2. Syntaxe générale © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    27. 27. 2. Syntaxe générale • Exemple : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    28. 28. 2. Syntaxe générale • Exemple : HTML <body> <p>Paragraphe 1</p> <ul> <li>élément 1</li> <li>élément 2</li> </ul> <p>Paragraphe 2</p> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    29. 29. 2. Syntaxe générale • Exemple : HTML CSS <body> body {color: white;} <p>Paragraphe 1</p> <ul> p {font-size: 12px;} <li>élément 1</li> <li>élément 2</li> ul {list-style: square;} </ul> <p>Paragraphe 2</p> li {margin-left: 10px;} </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    30. 30. 2. Syntaxe générale © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    31. 31. 2. Syntaxe générale • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    32. 32. 2. Syntaxe générale • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML <body> <ul class=“list”> <li>élément 1</li> </ul> <p id=“intro”>Texte</p> <ul class=“list”> <li>élément 1</li> <li>élément 2</li> </ul> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    33. 33. 2. Syntaxe générale • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML <body> <ul class=“list”> <li>élément 1</li> </ul> <p id=“intro”>Texte</p> <ul class=“list”> <li>élément 1</li> <li>élément 2</li> </ul> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    34. 34. 2. Syntaxe générale • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML CSS <body> p {font-size: 12px;} <ul class=“list”> <li>élément 1</li> #intro {font-weight: </ul> bold;} <p id=“intro”>Texte</p> <ul class=“list”> .list {margin-left: <li>élément 1</li> 20px;} <li>élément 2</li> </ul> </body> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    35. 35. 2. Syntaxe générale Exemples de propriétés CSS © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    36. 36. 2. Syntaxe générale Exemples de propriétés CSS font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; text-align: right; border: 1px solid black; color : red; font-size: 14px; background: url(fichier.jpg); background-color: #ffffff; font-family: Verdana; © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    37. 37. 2. Syntaxe générale Exemples de propriétés CSS <b> font-weight: bold; <i> font-style: italic; <u> text-decoration: underline; <center> text-align: center; <align> text-align: right; <border> border: 1px solid black; <color> color : red; <size> font-size: 14px; <background> background: url(fichier.jpg); <bgcolor> background-color: #ffffff; <font> font-family: Verdana; © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    38. 38. 2. Syntaxe générale © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    39. 39. 2. Syntaxe générale Quelques règles CSS : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    40. 40. 2. Syntaxe générale Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    41. 41. 2. Syntaxe générale Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    42. 42. 2. Syntaxe générale Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) • Si une valeur CSS est erronée ou n’existe pas, la propriété est inopérante (aucun effet visible sur le sélecteur) Exemple : { color : ultraviolet; } ou {typo : verdana;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    43. 43. 2. Syntaxe générale Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) • Si une valeur CSS est erronée ou n’existe pas, la propriété est inopérante (aucun effet visible sur le sélecteur) Exemple : { color : ultraviolet; } ou {typo : verdana;} • Les commentaires en CSS s’écrivent : /* valeur commentée */ © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    44. 44. 2. Syntaxe générale © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    45. 45. 2. Syntaxe générale Quelques avantages CSS : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    46. 46. 2. Syntaxe générale Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    47. 47. 2. Syntaxe générale Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    48. 48. 2. Syntaxe générale Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    49. 49. 2. Syntaxe générale Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance • Possibilités de multiplier les variantes © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    50. 50. 2. Syntaxe générale Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance • Possibilités de multiplier les variantes • Facilité du langage © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    51. 51. 3. Valeurs et unités 1. Nombres © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    52. 52. 3. Valeurs et unités 1. Nombres • CSS gère les valeurs numériques © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    53. 53. 3. Valeurs et unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    54. 54. 3. Valeurs et unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : • Entiers : 12, +375, -17 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    55. 55. 3. Valeurs et unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : • Entiers : 12, +375, -17 • Réels : 0.157, +2.1849, -5.2 © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    56. 56. 3. Valeurs et unités 1. Nombres • CSS gère les valeurs numériques • Les valeurs numériques sont de type : • Entiers : 12, +375, -17 • Réels : 0.157, +2.1849, -5.2 • /! pas de virgule © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    57. 57. 3. Valeurs et unités 2. Pourcentages © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    58. 58. 3. Valeurs et unités 2. Pourcentages • Nombre entier ou réel (+ ou -) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    59. 59. 3. Valeurs et unités 2. Pourcentages • Nombre entier ou réel (+ ou -) • Un pourcentage doit toujours être défini par rapport à une valeur de propriété © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    60. 60. 3. Valeurs et unités 2. Pourcentages • Nombre entier ou réel (+ ou -) • Un pourcentage doit toujours être défini par rapport à une valeur de propriété • /! pas d’espace entre le nombre et l’unité : 1 % © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    61. 61. 3. Valeurs et unités 3. Longueurs © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    62. 62. 3. Valeurs et unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    63. 63. 3. Valeurs et unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) • Une longueur est un entier ou un réel (+ ou -) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    64. 64. 3. Valeurs et unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) • Une longueur est un entier ou un réel (+ ou -) • Ex : h1 {margin-top: 1cm;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    65. 65. 3. Valeurs et unités 3. Longueurs • Les unités de longueur interviennent sur les propriétés exprimant une distance (position ou taille) • Une longueur est un entier ou un réel (+ ou -) • Ex : h1 {margin-top: 1cm;} • /! pas d’espace entre le nombre et l’unité : 1 cm © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    66. 66. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur em ex px © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    67. 67. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES em cm mm ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    68. 68. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm mm ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    69. 69. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm centimètre mm ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    70. 70. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm centimètre mm millimètre ex in pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    71. 71. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cm centimètre mm millimètre in inch (1pouce = 2,54cm) ex pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    72. 72. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em centimètre cm millimètre mm inch (1pouce = 2,54cm) ex in point (1pt = 1/72è de in) pt px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    73. 73. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em centimètre cm millimètre mm inch (1pouce = 2,54cm) ex in point (1pt = 1/72è de in) pt pica (1pc = 1/6è de in) px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    74. 74. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cadratin centimètre cm millimètre mm inch (1pouce = 2,54cm) ex in point (1pt = 1/72è de in) pt pica (1pc = 1/6è de in) px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    75. 75. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cadratin centimètre cm millimètre mm ex hauteur de x inch (1pouce = 2,54cm) in point (1pt = 1/72è de in) pt pica (1pc = 1/6è de in) px pc © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    76. 76. 3. Valeurs et unités 3. Longueurs • Deux types d’unités de longueur ABSOLUES RELATIVES em cadratin centimètre cm millimètre mm ex hauteur de x inch (1pouce = 2,54cm) in point (1pt = 1/72è de in) pt px relatif au moyen de pica (1pc = 1/6è de in) pc restitution © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    77. 77. 3. Valeurs et unités 3. Longueurs • Avantage des unités absolues : • Fixation au point près d’un élément • Avantage des unités relatives : • Calcul du positionnement par rapport à une autre longueur • Plus grande souplesse, flexibilité et adaptabilité © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    78. 78. 3. Valeurs et unités 3. Longueurs 1. Unité em • Correspond au cadratin français (espace blanc dont côté = taille des caractères) • Ex : p {margin-left: 2em;} • Marge gauche du paragraphe = double de la taille de fonte utilisée pour la restitution du paragraphe © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    79. 79. 3. Valeurs et unités 3. Longueurs 1. Unité em • Lorsqu’elle définit la taille de fonte d’un élément, elle dépend de la taille de fonte définie dans l’élément parent • Ex : li li {font-size: 0.8em;} • Taille de fonte dans li li correspond à 80% de la taille de fonte utilisée dans li • Unité très souple © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    80. 80. 3. Valeurs et unités 3. Longueurs 2. Unité ex • Hauteur du caractère x dans la fonte courante • Utile pour le calcul des “petites majuscules” • Dépassé car pratiquement inutile © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    81. 81. 3. Valeurs et unités 3. Longueurs 3. Unité px • Dépend du moyen de restitution • Conserve un rapport fixe entre définition locale du pixel et densité du périphérique de restitution • Unité relative conservant une précision de positionnement plus rigide que em © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    82. 82. 4. Sélecteurs 1. Généralités Syntaxe générale body {color: red; background: yellow;} body est le sélecteur h1+p {margin-left: 2em;} h1+p est le sélecteur © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    83. 83. 4. Sélecteurs 1. Généralités Syntaxe générale body {color: red; background: yellow;} body est le sélecteur h1+p {margin-left: 2em;} h1+p est le sélecteur • Condition ou série de conditions qui, si vérifiées, voient la déclaration du sélecteur appliquée à l’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    84. 84. 4. Sélecteurs 1. Généralités Syntaxe générale body {color: red; background: yellow;} body est le sélecteur h1+p {margin-left: 2em;} /! Inopérant sous IE6 h1+p est le sélecteur • Condition ou série de conditions qui, si vérifiées, voient la déclaration du sélecteur appliquée à l’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    85. 85. 4. Sélecteurs 2. Sélecteurs de type d’élément Syntaxe générale h1 {color: green;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    86. 86. 4. Sélecteurs 2. Sélecteurs de type d’élément Syntaxe générale h1 {color: green;} • Composé d’un nom d’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    87. 87. 4. Sélecteurs 2. Sélecteurs de type d’élément Syntaxe générale h1 {color: green;} • Composé d’un nom d’élément • La déclaration est appliquée si l’élément a le type indiqué © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    88. 88. 4. Sélecteurs 3. Sélecteur universel Syntaxe générale * {margin: 0; padding: 0;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    89. 89. 4. Sélecteurs 3. Sélecteur universel Syntaxe générale * {margin: 0; padding: 0;} • Sélectionne indifféremment tous les types d’élément © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    90. 90. 4. Sélecteurs 3. Sélecteur universel Syntaxe générale * {margin: 0; padding: 0;} • Sélectionne indifféremment tous les types d’élément • Ses déclarations sont appliquées à tous les éléments du document (sauf spécification contraire) © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    91. 91. 4. Sélecteurs 4. Sélecteur d’attribut © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    92. 92. 4. Sélecteurs 4. Sélecteur d’attribut HTML <p id=“only”> Paragraphe </p> <p class=“a12”> Paragraphe </p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    93. 93. 4. Sélecteurs 4. Sélecteur d’attribut HTML CSS <p id=“only”> Paragraphe </p> #only {color: orange;} <p class=“a12”> .a12 {background: black;} Paragraphe </p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    94. 94. 4. Sélecteurs 5. Combinaison de sélecteurs Exemple p.emphase {font-weight: bold;} Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    95. 95. 4. Sélecteurs 5. Combinaison de sélecteurs • Les sélecteurs peuvent être combinés pour former des sélecteurs complexes Exemple p.emphase {font-weight: bold;} Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    96. 96. 4. Sélecteurs 5. Combinaison de sélecteurs • Les sélecteurs peuvent être combinés pour former des sélecteurs complexes • Les éléments peuvent ainsi être ciblés très précisément Exemple p.emphase {font-weight: bold;} Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    97. 97. 4. Sélecteurs 5. Combinaison de sélecteurs • Les sélecteurs peuvent être combinés pour former des sélecteurs complexes • Les éléments peuvent ainsi être ciblés très précisément Exemple p.emphase {font-weight: bold;} • Pour être en gras, l’élément doit avoir pour type p et également pour classe emphase. Résultat HTML <p class=“emphase”>Okay!</p> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    98. 98. 4. Sélecteurs 5. Combinaison de sélecteurs Variantes qui fonctionnent <p class=quot;emphasequot;>Okay</p> <div class=quot;emphasequot;><p>Okay</p></div> <p>Ce test est <span class=quot;emphasequot;>okay</span>.</p> Affichage Okay Okay Ce test est okay. © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    99. 99. 4. Sélecteurs 6. Sélecteurs contextuels Rendu Exemple h1 {color: green;} Ce titre est important em {color: green;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    100. 100. 4. Sélecteurs 6. Sélecteurs contextuels • Un sélecteur contextuel tient compte de son contexte pour s’appliquer ou non Rendu Exemple h1 {color: green;} Ce titre est important em {color: green;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    101. 101. 4. Sélecteurs 6. Sélecteurs contextuels • Un sélecteur contextuel tient compte de son contexte pour s’appliquer ou non Rendu Exemple h1 {color: green;} Ce titre est important em {color: green;} • Supposons que l’on veuille mettre une emphase sur em dans le titre ; dans le cas ci-dessus, c’est impossible © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    102. 102. 4. Sélecteurs 6. Sélecteurs contextuels © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    103. 103. 4. Sélecteurs 6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    104. 104. 4. Sélecteurs 6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> CSS h1 {color: green;} em {text-decoration:underline;} h1 em {color: red;} © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    105. 105. 4. Sélecteurs 6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> CSS h1 {color: green;} em {text-decoration:underline;} h1 em {color: red;} Rendu © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
    106. 106. 4. Sélecteurs 6. Sélecteurs contextuels HTML <h1>Ce titre est <em>très</em> important.</h1> CSS h1 {color: green;} em {text-decoration:underline;} h1 em {color: red;} Rendu Ce titre est très important. © 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be

    ×