You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
En faisant ceci, vous n'ajoutez aucun nouveau fichier à votre projet : vous reliez simplement des fichiers hébergés sur Internet à votre projet. Essayez maintenant de rafraîchir votre page. Et voilà !
26
+
En faisant ceci, vous n'ajoutez aucun nouveau fichier à votre projet : vous reliez simplement des fichiers hébergés sur Internet à votre projet. Essayez maintenant de rafraichir votre page. Et voilà !
27
27
28
28
![Figure 14.1][1]
29
29
@@ -67,7 +67,7 @@ Nous n'allons pas trop nous attarder sur les CSS aujourd'hui. Nous vous invitons
67
67
68
68
[2]: http://www.codecademy.com/tracks/web
69
69
70
-
Que pourrions-nous faire rapidement ? Pourquoi ne pas changer la couleur de notre en-tête ? Pour indiquer la couleur que nous souhaitons utiliser, nous devons utiliser un code particulier. Ces codes commencent par `#` et sont suivis de 6 lettres (A-F) et chiffres (0-9). Afin de trouver le code associé à la couleur de votre choix, vous pouvez consulter le site http://www.colorpicker.com/. Vous pouvez aussi utiliser des [couleurs prédéfinies][3], comme `red` ou `green`.
70
+
Que pourrions-nous faire rapidement ? Pourquoi ne pas changer la couleur de notre entête ? Pour indiquer la couleur que nous souhaitons utiliser, nous devons utiliser un code particulier. Ces codes commencent par `#` et sont suivis de 6 lettres (A-F) et chiffres (0-9). Afin de trouver le code associé à la couleur de votre choix, vous pouvez consulter le site http://www.colorpicker.com/. Vous pouvez aussi utiliser des [couleurs prédéfinies][3], comme `red` ou `green`.
@@ -132,7 +132,7 @@ Maintenant, votre fichier doit ressembler à ceci :
132
132
</html>
133
133
```
134
134
135
-
Ok, on sauvegarde et on rafraîchit la page !
135
+
Ok, on sauvegarde et on rafraichit la page !
136
136
137
137
![Figure 14.2][5]
138
138
@@ -152,15 +152,15 @@ Ajoutez ceci à votre fichier CSS, sauvegardez-le et voyons le résultat !
152
152
153
153
[6]: images/margin2.png
154
154
155
-
Et si nous changions aussi la police de caractères de notre en-tête ? Collez ceci dans la partie `<head>` de votre fichier `blog/templates/blog/post_list.html` :
155
+
Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans la partie `<head>` de votre fichier `blog/templates/blog/post_list.html` :
Cette ligne nous permet d'importer la police de caractères *Lobster* depuis Google Fonts (https://www.google.com/fonts).
162
162
163
-
Maintenant, ajoutons `font-family: 'Lobster';` à l'intérieur du bloc déclaratif `h1 a` dans le fichier CSS `blog/static/css/blog.css`. Le bloc déclaratif est le code situé à l'intérieur des accolades `{` et `}`. N'oubliez pas ensuite de rafraîchir la page.
163
+
Maintenant, ajoutons `font-family: 'Lobster';` à l'intérieur du bloc déclaratif `h1 a` dans le fichier CSS `blog/static/css/blog.css`. Le bloc déclaratif est le code situé à l'intérieur des accolades `{` et `}`. N'oubliez pas ensuite de rafraichir la page.
164
164
165
165
```css
166
166
h1a {
@@ -175,9 +175,9 @@ h1 a {
175
175
176
176
Super !
177
177
178
-
Comme nous l'avions mentionné précédemment, il existe une notion de classe dans CSS. En gros, cela vous permet de donner un nom à un morceau de code HTML auquel vous souhaitez appliquer un style particulier sans que cela ne concerne le reste du code. C'est particulièrement pratique lorsque vous avez deux divs qui font quelque chose de différent (par exemple, votre en-tête et votre post) et que vous ne voulez pas qu'ils soient identiques.
178
+
Comme nous l'avions mentionné précédemment, il existe une notion de classe dans CSS. En gros, cela vous permet de donner un nom à un morceau de code HTML auquel vous souhaitez appliquer un style particulier sans que cela ne concerne le reste du code. C'est particulièrement pratique lorsque vous avez deux divs qui font quelque chose de différent (par exemple, votre entête et votre post) et que vous ne voulez pas qu'ils soient identiques.
179
179
180
-
Allons donner des noms à certaines parties de notre code html. Ajouter la classe `page-header` à votre `div` qui contient votre en-tête. Votre fichier doit ressembler maintenant à ceci :
180
+
Allons donner des noms à certaines parties de notre code html. Ajouter la classe `page-header` à votre `div` qui contient votre entête. Votre fichier doit ressembler maintenant à ceci :
181
181
182
182
```html
183
183
<divclass="page-header">
@@ -279,7 +279,7 @@ Ce code se trouve dans le fichier `blog/templates/blog/post_list.html`. Il doit
279
279
</div>
280
280
```
281
281
282
-
Sauvegardez les fichiers modifiés et rafraîchissez votre site web.
282
+
Sauvegardez les fichiers modifiés et rafraichissez votre site web.
283
283
284
284
![Figure 14.4][8]
285
285
@@ -289,6 +289,6 @@ Woohoo ! C'est pas mal, non ? Le code que nous avons collé n'est pas bien compl
289
289
290
290
N'ayez pas peur et jouez un peu avec la CSS : essayez par exemple d'en changer des morceaux. Vous avez cassé quelque chose ? Pas de problème : vous pouvez toujours annuler vos modifications !
291
291
292
-
Voilà pour la partie CSS. Nous vous encourageons vivement à suivre le tutoriel gratuit de [Code Academy][2] : considérez ce tutoriel comme un petit travail à faire une fois rentrée chez vous. Vous connaîtrez ainsi tout ce qu'il y a à savoir pour rendre son site bien plus joli !
292
+
Voilà pour la partie CSS. Nous vous encourageons vivement à suivre le tutoriel gratuit de [Code Academy][2] : considérez ce tutoriel comme un petit travail à faire une fois rentrée chez vous. Vous connaitrez ainsi tout ce qu'il y a à savoir pour rendre son site bien plus joli !
0 commit comments