Mais conteúdo relacionado
Semelhante a Xhtml et Css (20)
Mais de Fred Colantonio (20)
Xhtml et Css
- 1. <html>
.css
{duo gagnant du web}
Module de formation
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. W3C : le web encadré
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 1. Principes
1. Généralités
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 1. Principes
1. Nouveaux concepts amenés par CSS
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 27. 2. Syntaxe générale
• Exemple :
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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
- 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. 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. 2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 2. Syntaxe générale
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 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. 3. Valeurs et unités
1. Nombres
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 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. 3. Valeurs et unités
2. Pourcentages
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 3. Valeurs et unités
3. Longueurs
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 4. Sélecteurs
4. Sélecteur d’attribut
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 4. Sélecteurs
6. Sélecteurs contextuels
© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be
- 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. 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. 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. 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