1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> ENCEINTE: Il s'avère que le HTML n'est pas
le seul langage que vous pouvez utiliser à l'intérieur

3
00:00:03,310 --> 00:00:03,895
d'une page web.

4
00:00:03,895 --> 00:00:08,100
Vous pouvez utiliser quelque chose appelé CSS, ou
Cascading Style Sheets, ainsi.

5
00:00:08,100 --> 00:00:12,120
CSS vous permet de spécifier beaucoup plus
précisément l'esthétique d'un web

6
00:00:12,120 --> 00:00:16,930
page, y compris la mise en page et la taille et
couleurs et les polices et beaucoup plus.

7
00:00:16,930 --> 00:00:20,820
Par exemple, nous allons créer une page Web
ici appelé css0 qui représente une

8
00:00:20,820 --> 00:00:22,740
page d'accueil pour, par exemple, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Sur cette page, nous avons John Harvard
nom sous lequel sera

10
00:00:25,480 --> 00:00:28,500
un beau message pour ses visiteurs, sous
qui sera un pied de page, avec

11
00:00:28,500 --> 00:00:30,590
dire que certains informations de copyright.

12
00:00:30,590 --> 00:00:34,650
Pour ce faire, nous allons définir trois divisions
pour la page en utilisant un mot-clé

13
00:00:34,650 --> 00:00:35,670
appelé div.

14
00:00:35,670 --> 00:00:43,880
Ouvrir support div, John Harvard, près
support div, un autre div parenthèse ouverte,

15
00:00:43,880 --> 00:00:48,330
et maintenant nous allons spécifier quelque chose
comme, bienvenue à ma page d'accueil!

16
00:00:48,330 --> 00:00:50,420
Et nous allons fermer cette div, ainsi.

17
00:00:50,420 --> 00:00:53,700
>> Et maintenant, une troisième et dernière
div, le droit d'auteur.

18
00:00:53,700 --> 00:00:58,250
Juste pour être de fantaisie, permettez-moi d'utiliser une page HTML
entité, un symbole qui représente

19
00:00:58,250 --> 00:01:01,140
un personnage que vous ne pouvait pas autrement
tapez sur votre clavier.

20
00:01:01,140 --> 00:01:07,490
En particulier, je vais faire
esperluette, livre, 169, point-virgule.

21
00:01:07,490 --> 00:01:10,620
Il s'avère que c'est le code numérique
le symbole du droit d'auteur.

22
00:01:10,620 --> 00:01:14,260
Puis nous allons préciser John Harvard
ici, sur la partie inférieure.

23
00:01:14,260 --> 00:01:17,180
Fermons la div et enregistrez le fichier.

24
00:01:17,180 --> 00:01:18,910
>> Maintenant, quelle est cette balise div?

25
00:01:18,910 --> 00:01:21,970
La balise div définit simplement une division
de la page, qui est essentiellement un

26
00:01:21,970 --> 00:01:23,310
région rectangulaire.

27
00:01:23,310 --> 00:01:26,850
Donc, à ce moment-là, j'ai trois
régions rectangulaires, l'une sur le dessus

28
00:01:26,850 --> 00:01:27,620
de l'autre.

29
00:01:27,620 --> 00:01:30,610
Donc pour l'instant, l'effet est presque aussi
si j'avais trois paragraphes.

30
00:01:30,610 --> 00:01:33,490
Mais nous ne verrons pas tout à fait autant
un espace blanc entre eux.

31
00:01:33,490 --> 00:01:36,170
>> Sauvons ce fichier, changer son
autorisations, et jeter un oeil pour un

32
00:01:36,170 --> 00:01:37,990
moment dans Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Nous allons maintenant ouvrir Chrome et visite
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
En effet, voici une page d'accueil
John Harvard.

36
00:01:54,630 --> 00:01:59,370
Voyons maintenant styliser un peu plus
précisément en utilisant un peu de CSS.

37
00:01:59,370 --> 00:02:03,510
>> Retour dans gedit, allons dans ce
première balise div et ajouter un style

38
00:02:03,510 --> 00:02:11,060
attribut spécifiant que je voudrais une
taille de la police de, disons, 36 pixels, ou px.

39
00:02:11,060 --> 00:02:15,650
Et je voudrais que le poids de cette police de caractères
faire preuve d'audace plutôt que la valeur par défaut,

40
00:02:15,650 --> 00:02:16,980
ce qui est normal.

41
00:02:16,980 --> 00:02:21,170
Pour la deuxième division, nous allons préciser
un autre attribut de style qui a un

42
00:02:21,170 --> 00:02:25,550
la taille de police de 24 pixels,
un peu plus petit.

43
00:02:25,550 --> 00:02:28,410
Fermer citations après le point-virgule.

44
00:02:28,410 --> 00:02:33,255
>> Enfin, dans cette troisième div, faisons
le style est égal citation, la taille, et

45
00:02:33,255 --> 00:02:35,340
disons 12 pixels cette fois.

46
00:02:35,340 --> 00:02:37,280
Fermer citation après la virgule.

47
00:02:37,280 --> 00:02:40,200
Remarquez alors que je semble avoir
spécifié un peu de stylisation

48
00:02:40,200 --> 00:02:43,770
chacun de ces trois divs utilisant,
il s'avère, CSS.

49
00:02:43,770 --> 00:02:47,820
En fait, la syntaxe que vous voyez dans
entre ces guillemets est CSS,

50
00:02:47,820 --> 00:02:50,620
CSS spécifiquement propriétés
avec des valeurs.

51
00:02:50,620 --> 00:02:53,910
Et pour cette première balise, où j'ai eu
deux de ces propriétés, la taille de la police et

52
00:02:53,910 --> 00:02:57,290
poids police, j'ai simplement séparé
eux avec un point-virgule.

53
00:02:57,290 --> 00:02:59,940
>> Maintenant, juste pour l'amour de style, je
virgules également inclus dans

54
00:02:59,940 --> 00:03:00,880
la fin de chaque ligne.

55
00:03:00,880 --> 00:03:04,270
Mais ils ne sont pas strictement nécessaires,
en particulier lorsque vous n'avez qu'un seul

56
00:03:04,270 --> 00:03:05,580
bien défini.

57
00:03:05,580 --> 00:03:08,370
Voyons maintenant enregistrer le fichier et recharger
en chrome, et de voir ce

58
00:03:08,370 --> 00:03:11,000
l'effet net est.

59
00:03:11,000 --> 00:03:13,470
Retour en chrome ici,
cliquons Recharger.

60
00:03:13,470 --> 00:03:15,800
>> Maintenant, nous avons un peu plus intéressant
page d'accueil pour John

61
00:03:15,800 --> 00:03:19,000
Harvard, grâce à quoi la première ligne avec
son nom, qui est à l'intérieur de ce

62
00:03:19,000 --> 00:03:23,470
première division, est de 36 pixels de haut et aussi
gras, de sorte que la deuxième ligne,

63
00:03:23,470 --> 00:03:27,340
qui est dans ce deuxième division, est 24
pixels de haut, mais pas gras.

64
00:03:27,340 --> 00:03:31,500
Et dans lequel la troisième ligne de ce troisième
div est de 12 pixels de haut et aussi

65
00:03:31,500 --> 00:03:32,610
pas gras.

66
00:03:32,610 --> 00:03:35,380
Mais supposons maintenant je voudrais changer
tous de ce texte sur

67
00:03:35,380 --> 00:03:36,650
tel qu'il est centré.

68
00:03:36,650 --> 00:03:40,480
>> Je pourrais aligner chacun de l'individu
DIV comme étant centrée.

69
00:03:40,480 --> 00:03:45,330
Mais plus facilement, je pourrais conclure les
trois divs à l'intérieur d'un quatrième div, un

70
00:03:45,330 --> 00:03:49,360
div parent, pour ainsi dire, et de préciser
que cette div et l'ensemble de ses

71
00:03:49,360 --> 00:03:52,610
descendants devraient être
Texte aligné centre?

72
00:03:52,610 --> 00:03:54,120
Jetons un coup d'oeil.

73
00:03:54,120 --> 00:03:58,510
>> A l'intérieur de gedit, revenons à ma
corps et ajouter un nouveau div haut avec

74
00:03:58,510 --> 00:04:04,460
div style égale entre guillemets
centre texte d'alignement, à proximité

75
00:04:04,460 --> 00:04:06,250
citer après le point-virgule.

76
00:04:06,250 --> 00:04:10,280
Et maintenant, nous allons aller de l'avant et tiret tous
de ces lignes que nous avons tapé avant.

77
00:04:10,280 --> 00:04:15,040
Et ci-dessous que la troisième division, nous allons
fermer cette nouvelle div.

78
00:04:15,040 --> 00:04:18,829
>> En d'autres termes, parce que ces trois
divs originaux sont maintenant des enfants, ainsi

79
00:04:18,829 --> 00:04:22,110
parle, d'une nouvelle div mère et je n'ai
précisé que je voudrais aligner la

80
00:04:22,110 --> 00:04:26,140
texte de ce parent div dans le centre
de la page, cette propriété sera

81
00:04:26,140 --> 00:04:28,290
hérité par tous les enfants.

82
00:04:28,290 --> 00:04:32,370
En effet, nous allons enregistrer le fichier et
jetez un oeil dans un navigateur.

83
00:04:32,370 --> 00:04:34,650
Disons recharger dans Chrome.

84
00:04:34,650 --> 00:04:37,540
Et là, nous avons, encore plus agréable
page d'accueil pour John Harvard.

85
00:04:37,540 --> 00:04:39,872