Comparaison de révisions

Boîtes

Révision 267209 :

Révision 267209 par grandoc le

Révision 208535 :

Révision 208535 par grandoc le

Titre :
Boîtes
Boîtes
Identifiant d'URL :
CSS/Premiers_pas/Boîtes
CSS/Premiers_pas/Boîtes
Étiquettes :
css, CSS:Premiers_pas
Contenu :

Révision 267209
Révision 208535
t7    <p>t
8      &nbsp;
9    </p>
10    <p>
11      Cette page explique comment utiliser CSS pour contrôler l'e
>space occupé par un élément lorsqu'il est affiché. 
12    </p>
13    <p>
14      Dans votre document d'exemple, vous changerez l'espacement 
>et ajouterez des règles décoratives. 
15    </p>
16    <h3 id="Information_:_les_bo.C3.AEtes" name="Information_:_le
>s_bo.C3.AEtes"> 
17      Information&nbsp;: les boîtes
18    </h3>
19    <p>
20      Lorsque votre navigateur affiche un élément, celui-ci prend
> une certaine place. L'espace occupé est divisé en quatre parties 
>. 
21    </p>
22    <p>
23      Au centre, l'espace dont l'élément a besoin pour afficher s
>on contenu. Autour du contenu, il y a des marges internes (paddin 
>g). Autour des marges internes, il y a une bordure (border). Auto 
>ur des bordures, il y a des marges extérieures (margin). 
24    </p>
25    <table>
26      <tbody>
27        <tr>
28          <td style="width:26em;">
29            <div style="background-color:#eee;padding:0px 2em 2em
> 2em;width:20em;"> 
30              <p style="text-align:center;margin:0px;">
31                margin
32              </p>
33              <p style="text-align:center;margin:0px 0px -.75em 0
>px;"> 
34                border
35              </p>
36              <div style="background-color:#fff;padding:0px 2em 2
>em 2em;border:4px solid #fd9"> 
37                <p style="text-align:center;">
38                  padding
39                </p>
40                <div style="background-color:#eee;">
41                  <p style="text-align:center; padding:0px; margi
>n:0px; font-size:200%; font-weight:bold; color:#999;"> 
42                    élément
43                  </p>
44                </div>
45              </div>
46            </div>
47            <p>
48              <em>Une partie de la mise en page est visible en gr
>is.</em> 
49            </p>
50          </td>
51          <td>
52            <div style="background-color:#fff;padding:0px 2em 2em
> 2em;width:20em;"> 
53              <p style="text-align:center;margin:0px;">
54                &nbsp;
55              </p>
56              <p style="text-align:center;margin:0px 0px -.75em 0
>px;"> 
57                &nbsp;
58              </p>
59              <div style="background-color:#fff;padding:0px 2em 2
>em 2em;border:4px solid #fd9"> 
60                <p style="text-align:center;">
61                  &nbsp;
62                </p>
63                <div style="background-color:#fff;">
64                  <p style="text-align:center; padding:0px; margi
>n:0px; font-size:200%; font-weight:bold; color:#999;"> 
65                    élément
66                  </p>
67                </div>
68              </div>
69            </div>
70            <p>
71              <em>Ce qui apparait dans le navigateur.</em>
72            </p>
73          </td>
74        </tr>
75      </tbody>
76    </table>
77    <p>
78      Les marges intérieures, les bordures et les marges extérieu
>res peuvent avoir des tailles différentes en haut, à droite, en b 
>as et à gauche de l'élément. Chacune de ces tailles peut être zér 
>o. 
79    </p>
80    <p>
81      Les marges intérieures sont toujours de la même couleur que
> le fond de l'élément. Lorsque vous choisissez la couleur de fond 
>, vous appliquez donc la couleur à l'élément lui-même et à ses ma 
>rges intérieures. Celles-ci sont toujours transparentes. 
82    </p>
83    <table>
84      <tbody>
85        <tr>
86          <td style="width:22em;">
87            <div style="background-color:#eee;padding:0px 2em 2em
> 2em;width:16em;"> 
88              <p style="text-align:center;margin:0px;">
89                margin
90              </p>
91              <p style="text-align:center;margin:0px 0px -.75em 0
>px;"> 
92                border
93              </p>
94              <div style="background-color:#efe;padding:0px 2em 2
>em 2em;border:4px solid #fd9"> 
95                <p style="text-align:center;">
96                  padding
97                </p>
98                <div style="background-color:#ded;">
99                  <p style="text-align:center; padding:0px; margi
>n:0px; font-size:200%; font-weight:bold; color:#898;"> 
100                    élément
101                  </p>
102                </div>
103              </div>
104            </div>
105            <p>
106              <em>L'élément a un fond vert.</em>
107            </p>
108          </td>
109          <td>
110            <div style="background-color:#fff;padding:0px 2em 2em
> 2em;width:16em;"> 
111              <p style="text-align:center;margin:0px;">
112                &nbsp;
113              </p>
114              <p style="text-align:center;margin:0px 0px -.75em 0
>px;"> 
115                &nbsp;
116              </p>
117              <div style="background-color:#efe;padding:0px 2em 2
>em 2em;border:4px solid #fd9"> 
118                <p style="text-align:center;">
119                  &nbsp;
120                </p>
121                <div style="background-color:#efe;">
122                  <p style="text-align:center; padding:0px; margi
>n:0px; font-size:200%; font-weight:bold; color:#898;"> 
123                    élément
124                  </p>
125                </div>
126              </div>
127            </div>
128            <p>
129              <em>Ce qui apparaît dans le navigateur.</em>
130            </p>
131          </td>
132        </tr>
133      </tbody>
134    </table>
135    <h4 id="Bordures" name="Bordures">
136      Bordures
137    </h4>
138    <p>
139      Vous pouvez utiliser des bordures pour décorer des éléments
> avec des lignes ou des encadrements. 
140    </p>
141    <p>
142      Pour spécifier la même bordure tout autour d'un élément, ut
>ilisez la propriété <code>border</code>. Spécifiez l'épaisseur (h 
>abituellement en pixels pour l'affichage à l'écran), le style et  
>la couleur. 
143    </p>
144    <p>
145      Les styles sont&nbsp;:
146    </p>
147    <table style="margin-left:2em;">
148      <tbody>
149        <tr>
150          <td style="width:6em;">
151            <div style="border:2px solid #4a4;margin:.5em;padding
>:.5em;width:6em;text-align:center;"> 
152              <code>solid</code> (trait plein)
153            </div>
154          </td>
155          <td style="width:6em;">
156            <div style="border:2px dotted #4a4;margin:.5em;paddin
>g:.5em;width:6em;text-align:center;"> 
157              <code>dotted</code> (pointillés)
158            </div>
159          </td>
160          <td style="width:6em;">
161            <div style="border:2px dashed #4a4;margin:.5em;paddin
>g:.5em;width:6em;text-align:center;"> 
162              <code>dashed</code> (trait interrompu)
163            </div>
164          </td>
165          <td style="width:6em;">
166            <div style="border:4px double #4a4;margin:.5em;paddin
>g:.5em;width:6em;text-align:center;"> 
167              <code>double</code> (trait double)
168            </div>
169          </td>
170        </tr>
171        <tr>
172          <td style="width:6em;">
173            <div style="border:2px inset #4a4;margin:.5em;padding
>:.5em;width:6em;text-align:center;"> 
174              <code>inset</code> (creux)
175            </div>
176          </td>
177          <td style="width:6em;">
178            <div style="border:2px outset #4a4;margin:.5em;paddin
>g:.5em;width:6em;text-align:center;"> 
179              <code>outset</code> (en relief)
180            </div>
181          </td>
182          <td style="width:6em;">
183            <div style="border:4px ridge #4a4;margin:.5em;padding
>:.5em;width:6em;text-align:center;"> 
184              <code>ridge</code> (bordure en relief)
185            </div>
186          </td>
187          <td style="width:6em;">
188            <div style="border:4px groove #4a4;margin:.5em;paddin
>g:.5em;width:6em;text-align:center;"> 
189              <code>groove</code> (bordure en creux)
190            </div>
191          </td>
192        </tr>
193      </tbody>
194    </table>
195    <p>
196      Vous pouvez également définir le style à <code>none</code> 
>ou <code>hidden</code> pour enlever explicitement la bordure, ou  
>mettre sa couleur à <code>transparent</code> pour rendre celle-ci 
> invisible sans changer la mise en page. 
197    </p>
198    <p>
199      Pour spécifier les bordures un côté à la fois, utilisez les
> propriétés&nbsp;: <code>border-top</code>, <code>border-right</c 
>ode>, <code>border-bottom</code>, <code>border-left</code>. Vous  
>pouvez utiliser celles-ci pour spéficier une bordure d'un seul cô 
>té, ou différentes bordures sur différents côtés. 
200    </p>
201    <table style="border:1px solid #36b; padding:1em; background-
>color:#fffff4; margin-bottom:1em;"> 
202      <caption style="font-weight:bold; text-align:left; margin-t
>op:1em;"> 
203        Exemples
204      </caption>
205      <tbody>
206        <tr>
207          <td>
208            Cette règle change la couleur de fond et la bordure s
>upérieure des éléments de titre&nbsp;: 
209            <div style="width:40em;">
210              <pre class="eval">
211h3 {
212  border-top: 4px solid #7c7; /* vert moyen */
213  background-color: #efe;     /* vert pâle */
214  color: #050;                /* vert foncé */
215  }
216</pre>
217            </div>
218            <p>
219              Le résultat ressemble à ceci&nbsp;:
220            </p>
221            <table>
222              <tbody>
223                <tr>
224                  <td>
225                    <p style="font-size:133%;font-weight:bold;bac
>kground-color:#efe;border-top:4px solid #7c7;color:#050;padding-r 
>ight:6em;"> 
226                      Un titre avec du style
227                    </p>
228                  </td>
229                </tr>
230              </tbody>
231            </table>
232            <p>
233              <br>
234              Cette règle rend les images plus faciles à voir en 
>leur donnant une bordure grisée tout autour&nbsp;: 
235            </p>
236            <div style="width:30em;">
237              <pre class="eval">
238img {border: 2px solid #ccc;}
239</pre>
240            </div>
241            <p>
242              Le résultat ressemble à ceci&nbsp;:
243            </p>
244            <table>
245              <tbody>
246                <tr>
247                  <td>
248                    Image&nbsp;:
249                  </td>
250                  <td style="border:2px solid #ccc;">
251                    <img alt="Image:ligne-bleue.png" class="inter
>nal" src="/@api/deki/files/1398/=Ligne-bleue.png"> 
252                  </td>
253                </tr>
254              </tbody>
255            </table>
256          </td>
257        </tr>
258      </tbody>
259    </table>
260    <h4 id="Marges_int.C3.A9rieures_et_ext.C3.A9rieures" name="Ma
>rges_int.C3.A9rieures_et_ext.C3.A9rieures"> 
261      Marges intérieures et extérieures
262    </h4>
263    <p>
264      Utilisez les marges pour ajuster les positions des éléments
> et pour créer de l'espace autour d'eux. 
265    </p>
266    <p>
267      Utilisez les propriétés <code>margin</code> et <code>paddin
>g</code> pour changer respectivement la largeur des marges extéri 
>eures et intérieures. 
268    </p>
269    <p>
270      Si vous spécifiez une seule largeur, elle s'applique tout a
>utour de l'élément (en haut, à droite, en bas et à gauche). 
271    </p>
272    <p>
273      Si vous spécifiez deux largeurs, la première s'applique en 
>haut et en bas, la seconde sur les côtés droits et gauches. 
274    </p>
275    <p>
276      Vous pouvez spécifier les quatres largeurs dans cet ordre&n
>bsp;: haut, droite, bas, gauche. 
277    </p>
278    <table style="border:1px solid #36b; padding:1em; background-
>color:#fffff4; margin-bottom:1em;"> 
279      <caption style="font-weight:bold; text-align:left; margin-t
>op:1em;"> 
280        Exemple
281      </caption>
282      <tbody>
283        <tr>
284          <td>
285            Cette règle marque les paragraphes de la classe <code
>>remarque</code> en leur donnant une bordure rouge tout autour. 
286            <p>
287              Une marge intérieure (padding) sépare légèrement ce
>tte bordure du texte. 
288            </p>
289            <p>
290              Une marge extérieure (margin) à gauche met le parag
>raphe en retrait par rapport au reste du texte&nbsp;: 
291            </p>
292            <div style="width:30em;">
293              <pre class="eval">
294p.remarque {
295  border: 2px solid red;
296  padding: 4px;
297  margin-left: 24px;
298  }
299</pre>
300            </div>
301            <p>
302              Le résultat ressemble à ceci&nbsp;:
303            </p>
304            <table>
305              <tbody>
306                <tr>
307                  <td>
308                    <p>
309                      Ceci est un paragraphe normal.
310                    </p>
311                    <p style="border:2px solid red;padding:4px 6e
>m 4px 4px;margin:0px 0px 0px 24px;"> 
312                      Ceci est une remarque.
313                    </p>
314                  </td>
315                </tr>
316              </tbody>
317            </table>
318          </td>
319        </tr>
320      </tbody>
321    </table>
322    <table style="border:1px solid #36b; padding:1em; background-
>color:#f4f4f4; margin-bottom:1em;"> 
323      <caption style="font-weight:bold; text-align:left; margin-t
>op:1em;"> 
324        Plus de détails
325      </caption>
326      <tbody>
327        <tr>
328          <td>
329            Lorsque vous utilisez des marges pour ajuster la faço
>n dont les éléments sont placés, vos règles de style interagissen 
>t avec les réglages par défaut du navigateur de différentes maniè 
>res, qui sont parfois complexes. 
330            <p>
331              Différents navigateurs peuvent placer les éléments 
>différemment. Le résultat peut sembler similaire jusqu'à ce que v 
>otre feuille de style change des choses, et celle-ci peut parfois 
> donner des résultats surprenants. 
332            </p>
333            <p>
334              Pour obtenir le résultat voulu, il se peut que vous
> ayez à changer le balisage de votre document. La page suivante d 
>e ce tutoriel donne plus d'informations à ce sujet. 
335            </p>
336            <p>
337              Pour des informations détaillées à propos des marge
>s et des bordures, consultez <a class="external" href="http://www 
>.w3.org/TR/CSS21/box.html">Box model</a> dans la spécification CS 
>S. 
338            </p>
339          </td>
340        </tr>
341      </tbody>
342    </table>
343    <h3 id="Action_:_ajout_de_bordures" name="Action_:_ajout_de_b
>ordures"> 
344      Action&nbsp;: ajout de bordures
345    </h3>
346    <p>
347      Éditez votre fichier CSS. Ajoutez cette règle pour dessigne
>r une ligne en travers de la page au dessus de chaque titre&nbsp; 
>: 
348    </p>
349    <div style="width:30em;">
350      <pre class="eval">
351h3 {border-top: 1px solid gray;}
352</pre>
353    </div>
354    <p>
355      Si vous avez tenté le challenge sur la page précédente, mod
>ifiez la règle que vous aviez créée, sinon ajoutez cette nouvelle 
> règle pour ajouter de l'espace sous chaque élément de liste&nbsp 
>;: 
356    </p>
357    <div style="width:30em;">
358      <pre class="eval">
359li {
360  list-style: lower-roman;
361  margin-bottom: 8px;
362  }
363</pre>
364    </div>
365    <p>
366      Actualisez dans votre navigateur pour voir le résultat&nbsp
>;: 
367    </p>
368    <table style="border:2px outset #36b; padding:1em;background-
>color:white;"> 
369      <tbody>
370        <tr>
371          <td>
372            <p style="font-weight:bold;font-size:133%;margin-bott
>om:.3em;padding-top:.4em;padding-bottom:.16em; border-top: 1px so 
>lid gray;"> 
373              (A) Les océans
374            </p>
375            <ul style="list-style:disc;">
376              <li style="list-style:lower-roman;margin-bottom:8px
>;">Arctique 
377              </li>
378              <li style="list-style:lower-roman;margin-bottom:8px
>;">Atlantique 
379              </li>
380              <li style="list-style:lower-roman;margin-bottom:8px
>;">Pacifique 
381              </li>
382              <li style="list-style:lower-roman;margin-bottom:8px
>;">Indien 
383              </li>
384              <li style="list-style:lower-roman;margin-bottom:8px
>;">Antarctique 
385              </li>
386            </ul>
387            <p style="font-weight:bold;font-size:133%;margin-top:
>1em;margin-bottom:.3em;padding:.4em 4em .16em 0; border-top: 1px  
>solid gray;"> 
388              (B) Paragraphes numérotés
389            </p>
390            <p>
391              <strong>1:</strong> Lorem ipsum
392            </p>
393            <p>
394              <strong>2:</strong> Dolor sit
395            </p>
396            <p>
397              <strong>3:</strong> Amet consectetuer
398            </p>
399            <p>
400              <strong>4:</strong> Magna aliquam
401            </p>
402            <p>
403              <strong>5:</strong> Autem veleum
404            </p>
405          </td>
406        </tr>
407      </tbody>
408    </table>
409    <p>
410      &nbsp;
411    </p>
412    <table style="border:1px solid #36b; padding:1em; background-
>color:#fffff4; margin-bottom:1em;"> 
413      <caption style="font-weight:bold; text-align:left; margin-t
>op:1em;"> 
414        Challenge
415      </caption>
416      <tbody>
417        <tr>
418          <td>
419            Ajoutez une règle à votre feuille de style pour entou
>rer les océans d'une bordure épaisse dans une couleur rapellant c 
>elle de la mer — quelque chose comme ceci&nbsp;: 
420            <table style="border:2px outset #36b; padding:1em;bac
>kground-color:white;"> 
421              <tbody>
422                <tr>
423                  <td>
424                    <p style="font-weight:bold;font-size:133%;mar
>gin-bottom:.3em;padding-top:.4em;padding-bottom:.16em; border-top 
>: 1px solid gray;"> 
425                      (A) Les océans
426                    </p>
427                    <div style="border: 12px solid #69b;padding-l
>eft:1em;"> 
428                      <ul style="list-style:lower-roman;">
429                        <li style="margin-bottom:8px;">Arctique
430                        </li>
431                        <li style="margin-bottom:8px;">Atlantique
432                        </li>
433                        <li style="margin-bottom:8px;">Pacifique
434                        </li>
435                        <li style="margin-bottom:8px;">Indien
436                        </li>
437                        <li style="margin-bottom:8px;">Antarctiqu
>e 
438                        </li>
439                      </ul>
440                    </div>
441                    <p style="font-weight:bold;font-size:133%;mar
>gin-top:1em;margin-bottom:.3em;padding:.4em 4em .16em 0; border-t 
>op: 1px solid gray;"> 
442                      (B)Paragraphes numérotés
443                    </p>
444                    <p>
445                      <strong>. . .</strong>
446                    </p>
447                  </td>
448                </tr>
449              </tbody>
450            </table>
451            <p>
452              (Il n'est pas nécessaire de retrouver exactement la
> même épaisseur et la même couleur qu'ici.) 
453            </p>
454          </td>
455        </tr>
456      </tbody>
457    </table>
458    <h4 id="Pour_continuer" name="Pour_continuer">
459      Pour continuer
460    </h4>
461    <p>
462      Si vous avez eu des difficultés à comprendre cette page, ou
> si vous avez d'autres commentaires à son sujet, n'hésitez pas à  
>contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Bo%C3%AEtes" t 
>itle="Talk:fr/CSS/Premiers_pas/Boîtes">page de discussion</a>. 
463    </p>
464    <p>
465      En spécifiant des marges, vous avez modifié la mise en page
> de votre document. À la page suivante, vous apprendrez d'autres  
>manières de changer celle-ci&nbsp;: <strong><a href="/fr/CSS/Prem 
>iers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">M 
>ise en page</a></strong>. 
466    </p>
467    <p>
468      {{ languages( { "en": "en/CSS/Getting_Started/Boxes", "pl":
> "pl/CSS/Na_pocz\u0105tek/Bloki", "pt": "pt/CSS/Como_come\u00e7ar 
>/Caixas" } ) }} 
469    </p>

Retour à l'historique