1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: Compréhension des fondements des CSS
slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
tags:
- CSS
- Codage
- Commentaires
- Débutant
- Evaluation
- Règles
- Style
- Syntaxe
- Sélecteurs
- modèle de boîte
translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</div>
<p class="summary">Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.</td>
</tr>
<tr>
<th scope="row">Objectif :</th>
<td>Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.</td>
</tr>
</tbody>
</table>
<h2 id="Point_de_départ">Point de départ</h2>
<p>Pour demarrer cet exercice, vous devez :</p>
<ul>
<li>Récupérer et enregistrer le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fichier HTML de l'exercice</a> ainsi que le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fichier image associé</a> dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.</li>
<li>Enregistrez le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fichier texte des ressources de la CSS</a> — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.</li>
</ul>
<div class="note">
<p><strong>Note </strong>: À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code><img></code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p>
</div>
<h2 id="Énoncé_du_projet">Énoncé du projet</h2>
<p>Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.</p>
<p>Construction de base :</p>
<ul>
<li>Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme <code>style.css</code>.</li>
<li>Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément <code><link></code>.</li>
<li>Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.</li>
<li>Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.</li>
</ul>
<p>Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :</p>
<ul>
<li>Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS.</li>
<li>Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que :
<ul>
<li>entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).</li>
<li>l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li>
<li>le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li>
<li>l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).</li>
</ul>
</li>
<li>Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.</li>
</ul>
<p>Nouveaux jeux de règles à écrire :</p>
<ul>
<li>Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en <code>em</code>.</li>
<li>La marge par défaut appliquée aux éléments <h2> et <p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.</li>
<li>Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément <code><article></code>), nous devons lui donner une hauteur spécifique. Réglez la hauteur de <code><article></code> à 120px, mais exprimez‑la en <code>em</code>. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.</li>
<li>Écrivez un jeu de règles qui donne à <code><h2></code> une taille de police effective de 20px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li>
<li>Écrivez un jeu de règles qui donne à <code><p></code> dans le pied de page une taille de police effective de 15px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li>
<li>Comme dernière petite touche, donnez au paragraphe à l'intérieur de <code><article></code> une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe <code><h2></code> et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.</li>
</ul>
<div class="note">
<p><strong>Note </strong>: Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code><html></code> — cela signifie que pour tous les enfants de <code><html></code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code><html></code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p>
</div>
<p>Autres choses à prendre en considération :</p>
<ul>
<li>Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale.</li>
<li>Vous devriez mettre <code>.card</code> en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus.</li>
</ul>
<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
<ul>
<li>Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS.</li>
<li>Quand vous calculez le nombre de pixels correspondant à la valeur <code>em</code> dont vous avez besoin, pensez à la taille de police de base de l'élément racine (<code><html></code>), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de <code>em</code>, au moins dans un cas simple comme celui-ci.</li>
</ul>
<h2 id="Exemple">Exemple</h2>
<p>La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :</p>
<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
<p> </p>
<h2 id="Évaluation">Évaluation</h2>
<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">le fil de discussion à propos de cet exercise</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites l'exercice d'abors, il n'y rien à gagner en trichant !</p>
<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</p>
<p> </p>
<h2 id="Dans_ce_module">Dans ce module</h2>
<ul>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS">Comment fonctionnent les CSS</a></li>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">Sélecteurs</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Unités et valeurs pour les CSS</a></li>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade et héritage</a></li>
<li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li>
</ul>
|
