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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: Utiliser le CSS dans une page web
slug: conflicting/Learn/CSS/First_steps/How_CSS_works
tags:
- Beginner
- CSS
- CodingScripting
- HTML
- NeedsActiveLearning
translation_of: Learn/CSS/First_steps/How_CSS_works
translation_of_original: Learn/CSS/Using_CSS_in_a_web_page
original_slug: Apprendre/CSS/Utiliser_CSS_dans_une_page_web
---
<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
<div class="summary">
<p>Cet article explique comment appliquer des styles {{glossary("CSS")}} à vos documents HTML.</p>
</div>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>Il peut être utile de savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">écrire une page HTML simple</a> et comment <a href="/fr/Learn/Set_up_a_basic_working_environment">configurer les éléments de base d'un site web</a>.</td>
</tr>
<tr>
<th scope="row">Objectif :</th>
<td>Apprendre trois méthodes différentes pour ajouter des éléments de style à votre page web.</td>
</tr>
</tbody>
</table>
<p>Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.</p>
<p>Voyons comment appeler des informations CSS en utilisant les balises {{htmlelement("style")}} et {{htmlelement("link")}} et analysons ce qui se passe quand les deux balises sont utilisées conjointement.</p>
<h2 id="Pédagogie_active">Pédagogie active</h2>
<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
<h2 id="Aller_plus_loin">Aller plus loin</h2>
<h3 id="La_balise_<style>">La balise <code><style></code></h3>
<p>Lorsque vous souhaitez mettre en forme une page, vous avez la possibilité d'inclure tout le formatage directement dans le document HTML à l'aide de la balise {{htmlelement("style")}} :</p>
<pre><!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<style>
body {
background:white;
color:blue;
}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html></pre>
<p>Comme nous l'avons <a href="/en-US/Learn/Set_up_a_basic_working_environment">déjà souligné</a>, ce n'est pas la meilleure méthode pour mettre en forme une page web puisque, dans ce cas, il sera nécessaire de répéter cette portion de code dans toutes les autres pages de votre site. Cela sollicitera de la bande passante supplémentaire et vous fera également perdre du temps puisqu'il faudra recopier les styles à chaque fois pour mettre à jour chaque page.</p>
<p>Néanmoins, comme nous le verrons à la fin, cette façon de procéder peut s'avérer utile lorsque l'objectif est d'appliquer un style à une seule page de votre site.</p>
<h3 id="La_balise_<link>">La balise <code><link></code></h3>
<p>La balise <code>{{htmlelement("link")}}</code> permet, entre autres choses, d'appliquer un formatage au document donné à partir d'une feuille de style externe. Lorsqu'un certain nombre de documents HTML utilisent cette même feuille de style, vous pouvez simplement modifier la mise en page de l'ensemble des documents grâce à un seul fichier.</p>
<p>Prenons l'exemple de ce code CSS et plaçons le dans un fichier <code>demo.css</code> :</p>
<pre>/* demo.css */
body {
background:white;
color:blue;
}</pre>
<p>Chaque fois qu'on a besoin d'appliquer ce style à un document, il suffit alors d'appeler le fichier <code>demo.css</code> grâce à la balise <code>link</code> :</p>
<pre><!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html></pre>
<div class="note">
<p>Pour en savoir plus sur la configuration des fichiers sur un serveur, vous pouvez vous reférer à la section <a href="/fr/Learn/Set_up_a_basic_working_environment">Comment configurer les éléments de base d'un site web</a>.</p>
</div>
<p>Chaque page qui appellera le fichier <code>demo.css</code> via la balise <code>link</code> bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier <code>demo.css</code> autant de fois que nécessaire alors qu'il ne sera chargé en mémoire qu'une seule fois. Les performances en seront très largement améliorées.</p>
<div class="note">
<p id="Inferior_alternative.3A_<style>_.2B_.40import"><strong>Alternative imparfaite : <code><style></code> + <code>@import</code></strong></p>
<p>A la place de la balise <code><link></code>, vous trouverez peut-être parfois cette syntaxe :</p>
<pre><style type="text/css">
@import url(demo.css);
</style></pre>
<p>C'est une autre façon d'arriver au même résultat, mais nous recommandons d'utiliser <code><link></code> pour des raisons de performance (à l'inverse d' <code>@import</code>, la balise <code><link></code> permet en effet le téléchargement en parallèle de plusieurs ressources CSS). Il y a quelques années il était courant d'utiliser <code>@import</code> dans certains cas spécifiques de manière à ce que les anciens navigateurs ne lisent pas les instructions de formatage qu'ils ne supportaient pas correctement.</p>
</div>
<h3 id="Utiliser_<style>_et_<link>_ensemble">Utiliser <code><style></code> et <code><link></code> ensemble</h3>
<p>Les possibilités deviennent encore plus intéressantes lorsqu'on mélange les deux méthodes. Dans les paragraphes précédents, nous avons mentionné le fait que la balise <code>style</code> pouvait être utile si la mise en forme s'applique à un seul document du site.</p>
<p>Dans un premier temps on appelle donc toujours le fichier <code>demo.css</code>, ainsi la page affiche un texte bleu sur un fond blanc. Mais pour des raisons spécifiques, il se trouve que pour cette page on préfère un texte rouge. On va alors coupler ces deux méthodes :</p>
<ol>
<li>Comme d'habitude on lie en premier notre feuille de style grâce à la balise <code>link</code>.</li>
<li>Grâce à la cascade, chaque style s'applique l'un après l'autre.</li>
<li>Puis avec une balise <code>style,</code> on annule le texte bleu défini par <code>color</code> sur une seule page du site.</li>
</ol>
<p>Voici le code du fichier <code>demo.css</code> :</p>
<pre>/* demo.css */
body {
background:white;
color:blue;
}
</pre>
<p>On comprend que tout le texte de la page doit être en bleu sur un fond blanc. Voici maintenant le document HTML :</p>
<pre><!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<link rel="stylesheet" href="demo.css">
<style type="text/css">
body {
color:red;
}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html></pre>
<p>On appelle d'abord la feuille de style de façon à obtenir le fond blanc et un texte bleu. Ensuite, pour cette page seulement, on ignore le formatage du texte en bleu pour le remplacer par la couleur rouge à l'aide de la balise <code><style></code> (<code>demo.css</code> continue néanmoins de gérer tous les autres styles).</p>
<h2 id="Prochaines_étapes">Prochaines étapes</h2>
<p>Maintenant que vous savez comment appliquer des styles CSS à un document HTML, deux options s'offrent à vous :</p>
<ul>
<li>Revoir <a href="/fr/Apprendre/CSS/Les_propriétés_CSS">les propriétés CSS et comment s'en servir</a>.</li>
<li>Perfectionner vos connaissances en design, en commençant par l'<a href="/fr/docs/Learn/What_is_accessibility">accessibilité</a>.</li>
</ul>
|
