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
|
---
title: Pourquoi utiliser CSS
slug: CSS/Premiers_pas/Pourquoi_utiliser_CSS
tags:
- CSS
- 'CSS:Premiers_pas'
translation_of: Learn/CSS/First_steps/How_CSS_works
translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
---
<p> </p>
<p>Cette page explique pourquoi les documents utilisent CSS. Vous utiliserez CSS pour ajouter une feuille de style à votre document de démonstration.</p>
<h3 id="Information_:_utilit.C3.A9_de_CSS" name="Information_:_utilit.C3.A9_de_CSS">Information : utilité de CSS</h3>
<p>CSS vous aide à garder l'information contenue dans votre document séparée des détails de sa présentation. Ces détails de présentation d'un document sont appelés son
<i>
style</i>
. La séparation du style et du contenu permet :</p>
<ul>
<li>D'éviter des duplications</li>
<li>Une maintenance plus facile</li>
<li>D'utiliser le même contenu avec différents styles pour différents usages</li>
</ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>
Exemple</caption>
<tbody>
<tr>
<td>Votre site Web peut avoir des milliers de pages qui ont un aspect similaire. Avec CSS, vous conservez les informations de style dans des fichiers communs partagés par toutes les pages.
<p>Lorsqu'un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page.</p>
<p>Lorsqu'il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire.</p>
</td>
</tr>
</tbody>
</table>
<p>En général, avec, CSS, vous utilisez le langage de balisage pour décrire les informations contenues dans le document, et non son style. CSS est utilisé pour spécifier son style et non son contenu. (Plus loin dans ce tutoriel, vous verrez qu'il peut y avoir certaines exceptions à cet arrangement.)</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>
Plus de détails</caption>
<tbody>
<tr>
<td>Un langage de balisage comme HTML fournit également certaines manières de préciser un style.
<p>Par exemple, en HTML, il est possible d'utiliser une balise <code><B></code> pour rendre du texte gras, ou de spécifier la couleur de fond d'une page dans sa balise <code><BODY></code>.</p>
<p>Lorsqu'on utilise CSS, on évite généralement d'utiliser ces possibilités du langage de balisage afin que toutes les informations de style du document se retrouvent à la même place.</p>
</td>
</tr>
</tbody>
</table>
<h3 id="Action_:_cr.C3.A9ation_d.27une_feuille_de_style" name="Action_:_cr.C3.A9ation_d.27une_feuille_de_style">Action : création d'une feuille de style</h3>
<p>Créez un autre fichier texte dans le même dossier que précédemment. Ce fichier sera votre feuille de style. Appelez-le : <code>style1.css</code></p>
<p>Dans votre fichier CSS, copiez et collez cette simple ligne, puis enregistrez le fichier :</p>
<div style="width: 40em;">
<pre class="eval">strong {color: red;}
</pre>
</div>
<h4 id="Lier_votre_document_.C3.A0_votre_feuille_de_style" name="Lier_votre_document_.C3.A0_votre_feuille_de_style">Lier votre document à votre feuille de style</h4>
<p>Pour lier votre document à votre feuille de style, éditez votre fichier HTML. Ajoutez la ligne montrée ici en gras :</p>
<div style="width: 50em; color: gray;">
<pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Sample document</title>
<strong style="color: black;"><link rel="stylesheet" type="text/css" href="style1.css"></strong>
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
</pre>
</div>
<p>Enregistrez le fichier et actualisez l'affichage de votre navigateur. La feuille de style rend les lettres initiales rouges, comme ceci :</p>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>
Challenge</caption>
<tbody>
<tr>
<td>En plus du rouge (red), CSS permet d'utiliser d'autres noms de couleurs.
<p>Sans regarder dans une référence, trouvez cinq autres noms de couleurs qui fonctionnent dans votre feuille de style.</p>
</td>
</tr>
</tbody>
</table>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa <a>page de discussion</a>.</p>
<p>Maintenant que vous avez un document lié à une feuille de style séparée, vous pouvez en apprendre plus sur la manière dont votre navigateur les combine lors de l'affichage du document : <b><a href="/fr/docs/CSS/Premiers_pas/Fonctionnement_de_CSS">Fonctionnement de CSS</a></b>.</p>
<p> </p>
|
