Skip to content

Commit d0bcda6

Browse files
committed
go back to 1990 reforme
1 parent 4318053 commit d0bcda6

1 file changed

Lines changed: 9 additions & 9 deletions

File tree

fr/css/README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Pour installer Bootstrap, vous avez besoin d'ajouter ceci dans le `<head>` de vo
2323
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
2424
```
2525

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 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à !
2727

2828
![Figure 14.1][1]
2929

@@ -67,7 +67,7 @@ Nous n'allons pas trop nous attarder sur les CSS aujourd'hui. Nous vous invitons
6767

6868
[2]: http://www.codecademy.com/tracks/web
6969

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`.
7171

7272
[3]: http://www.w3schools.com/cssref/css_colornames.asp
7373

@@ -132,7 +132,7 @@ Maintenant, votre fichier doit ressembler à ceci :
132132
</html>
133133
```
134134

135-
Ok, on sauvegarde et on rafraîchit la page !
135+
Ok, on sauvegarde et on rafraichit la page !
136136

137137
![Figure 14.2][5]
138138

@@ -152,15 +152,15 @@ Ajoutez ceci à votre fichier CSS, sauvegardez-le et voyons le résultat !
152152

153153
[6]: images/margin2.png
154154

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` :
156156

157157
```html
158158
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
159159
```
160160

161161
Cette ligne nous permet d'importer la police de caractères *Lobster* depuis Google Fonts (https://www.google.com/fonts).
162162

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.
164164

165165
```css
166166
h1 a {
@@ -175,9 +175,9 @@ h1 a {
175175

176176
Super !
177177

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.
179179

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 :
181181

182182
```html
183183
<div class="page-header">
@@ -279,7 +279,7 @@ Ce code se trouve dans le fichier `blog/templates/blog/post_list.html`. Il doit
279279
</div>
280280
```
281281

282-
Sauvegardez les fichiers modifiés et rafraîchissez votre site web.
282+
Sauvegardez les fichiers modifiés et rafraichissez votre site web.
283283

284284
![Figure 14.4][8]
285285

@@ -289,6 +289,6 @@ Woohoo ! C'est pas mal, non ? Le code que nous avons collé n'est pas bien compl
289289

290290
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 !
291291

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 !
293293

294294
Prête pour le chapitre suivant ? :)

0 commit comments

Comments
 (0)