1
00:00:00,000 --> 00:00:05,660
>> [Jouer de la musique]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Prenons donc un de plus
vidéo pour parler une langue de plus.

3
00:00:08,740 --> 00:00:10,800
Cette fois, nous allons parler de CSS.

4
00:00:10,800 --> 00:00:13,460
Donc, CSS, qui est court pour
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
est un autre langage que nous utilisons
lors de la construction des sites Web.

6
00:00:16,149 --> 00:00:17,190
Pensez-y comme ça.

7
00:00:17,190 --> 00:00:20,900
Si HTML est ce que nous utilisons pour organiser la
contenu que nous voulons mettre sur notre page,

8
00:00:20,900 --> 00:00:25,390
CSS est l'outil que nous utilisons généralement
pour personnaliser nos sites Web regardent,

9
00:00:25,390 --> 00:00:30,410
et comment l'expérience utilisateur vraiment
est, en interaction avec notre site Web.

10
00:00:30,410 --> 00:00:32,535
>> Similaire à HTML, CSS est
pas un langage de programmation.

11
00:00:32,535 --> 00:00:33,451
Il n'a pas la logique.

12
00:00:33,451 --> 00:00:34,595
Il n'a pas les variables.

13
00:00:34,595 --> 00:00:38,890
Il n'a pas de genre de ce que
écouler choses liées que c ne.

14
00:00:38,890 --> 00:00:40,150
Il est un langage de style.

15
00:00:40,150 --> 00:00:42,810
Et sa syntaxe est assez
simple, et décrit simplement

16
00:00:42,810 --> 00:00:46,240
comment les éléments de notre
page ont certaine HTML

17
00:00:46,240 --> 00:00:48,190
éléments doivent être modifiés.

18
00:00:48,190 --> 00:00:51,170
À cette fin, si vous avez pas
encore regardé notre vidéo sur HTML,

19
00:00:51,170 --> 00:00:53,290
ou ne sont pas familiers avec
HTML généralement, vous

20
00:00:53,290 --> 00:00:57,430
peut vouloir jeter un oeil à ce que
d'abord, parce que cette discussion sur CSS

21
00:00:57,430 --> 00:01:00,700
va dépendre
une certaine connaissance du langage HTML.

22
00:01:00,700 --> 00:01:03,740
>> Alors, voici un très
simple, feuille de style CSS.

23
00:01:03,740 --> 00:01:06,480
Même si vous avez jamais
programmé avec CSS avant,

24
00:01:06,480 --> 00:01:10,624
Je suis sûr que vous pouvez comprendre
exactement ce que cette feuille de style fait.

25
00:01:10,624 --> 00:01:11,290
Qu'est ce que ça fait?

26
00:01:11,290 --> 00:01:15,470
Eh bien, appliquée sur le corps de notre web
la page, tout entre les balises du corps

27
00:01:15,470 --> 00:01:19,631
sur notre HTML, et il définit la
couleur de fond de cette page en bleu.

28
00:01:19,631 --> 00:01:21,130
Eh bien, il est une feuille de style très simple.

29
00:01:21,130 --> 00:01:23,269
Il est en fait très humaine
un langage adapté, CSS.

30
00:01:23,269 --> 00:01:26,560
Donc même si vous avez jamais utilisé auparavant,
vous avez probablement pu le deviner ce que cela fait.

31
00:01:26,560 --> 00:01:30,140
En fait, si nous avons chargé une page, où
cette feuille de style a été incorporé en quelque sorte,

32
00:01:30,140 --> 00:01:36,240
la couleur de notre page d'arrière-plan serait
être bleu, le blanc et non standard.

33
00:01:36,240 --> 00:01:37,670
>> Alors, comment pouvons-nous construire des feuilles de style?

34
00:01:37,670 --> 00:01:39,700
Eh bien d'abord, nous devons
identifier un sélecteur.

35
00:01:39,700 --> 00:01:42,970
Dans le dernier exemple,
qui était sélecteur corps.

36
00:01:42,970 --> 00:01:45,050
Ensuite, nous avons un processus ouvert
accolade, et nous sommes

37
00:01:45,050 --> 00:01:48,410
va commencer à définir la
feuille de style pour que sélecteur.

38
00:01:48,410 --> 00:01:51,800
Entre les accolades, nous
avoir juste une liste de paires clé-valeur.

39
00:01:51,800 --> 00:01:56,205
La paire de valeur précédente était
couleur de fond de point-virgule bleu,

40
00:01:56,205 --> 00:01:57,830
mais nous pourrions faire de plus en plus de ces derniers.

41
00:01:57,830 --> 00:02:02,330
Vous pourriez avoir de multiples choses application
à cette balise, que le corps de sélecteur.

42
00:02:02,330 --> 00:02:05,960
Chacun d'eux est séparé par un
virgule, et nous appelons chacun d'eux

43
00:02:05,960 --> 00:02:08,949
une déclaration, une déclaration de CSS.

44
00:02:08,949 --> 00:02:12,410
Quand nous aurons fini avec tout le style de nous
vouloir appliquer à cette étiquette particulière,

45
00:02:12,410 --> 00:02:15,300
nous avons juste un bouclés fermeture
accolade pour mettre fin à la feuille de style,

46
00:02:15,300 --> 00:02:19,640
et nous avons terminé de définir la feuille de style
pour cette sélection particulière.

47
00:02:19,640 --> 00:02:21,341
>> Quelles sont certaines des propriétés CSS communes?

48
00:02:21,341 --> 00:02:23,590
Eh bien, peut-être que vous voulez mettre
une frontière autour de quelque chose.

49
00:02:23,590 --> 00:02:26,850
Donc vous pouvez dire, frontière,
ce serait votre clé,

50
00:02:26,850 --> 00:02:29,460
puis vos valeurs seraient,
ce style, la couleur, et la largeur

51
00:02:29,460 --> 00:02:30,209
vous voulez qu'il soit.

52
00:02:30,209 --> 00:02:33,530
Ainsi, le style pourrait être un solide
ligne, une ligne en pointillés, une ligne en pointillés,

53
00:02:33,530 --> 00:02:36,020
une ligne de crête, ce qui serait la ligne ondulée.

54
00:02:36,020 --> 00:02:38,790
Peut-être que vous voulez l'avoir
être bleu ou noir ou vert.

55
00:02:38,790 --> 00:02:41,490
Peut-être que vous voulez qu'il soit
1 ou 2 ou 10 pixels de large.

56
00:02:41,490 --> 00:02:43,254
Vous pouvez spécifier toutes ces choses.

57
00:02:43,254 --> 00:02:46,420
Peut-être que vous voulez définir l'arrière-plan
couleur de votre page d'une manière particulière.

58
00:02:46,420 --> 00:02:49,215
Nous avons déjà vu que, le réglage de la
fond du corps pour être bleu.

59
00:02:49,215 --> 00:02:52,080
>> Ensuite, vous pouvez utiliser un mot clé,
CSS a donc certaines couleurs

60
00:02:52,080 --> 00:02:55,950
qui sont construits en elle, bleu, vert,
noir, une des couleurs très simples que nous connaissons.

61
00:02:55,950 --> 00:02:59,110
Mais vous pouvez aussi spécifier quelle
hexadécimal de la couleur que vous souhaitez.

62
00:02:59,110 --> 00:03:05,190
Rappelons que les couleurs peuvent être identifiés
par un ensemble de trois nombres hexadécimaux

63
00:03:05,190 --> 00:03:08,500
de 0 à 255, et b rg, la
composante rouge, verte et bleue.

64
00:03:08,500 --> 00:03:10,590
Et si nous pouvons spécifier
quelle couleur que nous voulons par,

65
00:03:10,590 --> 00:03:15,520
au lieu d'utiliser le bleu ou le vert ou noir,
utilisant livre et puis six chiffres hex,

66
00:03:15,520 --> 00:03:18,310
et cela nous donnerait
la couleur à six chiffres.

67
00:03:18,310 --> 00:03:19,850
Voilà donc la couleur de fond.

68
00:03:19,850 --> 00:03:21,975
>> Nous avons aussi l'avant-plan
la couleur, qui est habituellement

69
00:03:21,975 --> 00:03:24,140
va être le texte de votre page.

70
00:03:24,140 --> 00:03:28,850
Et vous pourriez faire de même
avec le mot clé et ou six chiffres hex.

71
00:03:28,850 --> 00:03:32,140
Ainsi, vous pouvez spécifier quelle couleur que vous
voulez pour le texte de votre page

72
00:03:32,140 --> 00:03:36,370
contre un particulier
couleur de fond, au-dessus.

73
00:03:36,370 --> 00:03:39,100
Vous pouvez également modifier et traiter
avec la police, et le texte de façon

74
00:03:39,100 --> 00:03:40,400
est rendue sur la page.

75
00:03:40,400 --> 00:03:42,010
>> Ainsi, vous pouvez changer votre taille de la police.

76
00:03:42,010 --> 00:03:46,320
Vous pouvez utiliser des mots clés, comme supplémentaire,
Très petite, ou xx petite ou moyenne,

77
00:03:46,320 --> 00:03:47,660
large, et ainsi de suite.

78
00:03:47,660 --> 00:03:50,750
Vous pouvez utiliser des points fixes, 10
points, 12 points, et ainsi de suite.

79
00:03:50,750 --> 00:03:55,850
Vous pouvez utiliser des pourcentages, 80%, 20%,
où 100% est la police par défaut

80
00:03:55,850 --> 00:03:59,220
taille, qui est habituellement va
être quelque chose comme 11 ou 12 points.

81
00:03:59,220 --> 00:04:01,659
Ou vous pouvez même baser off
la plus récente de la taille de la police.

82
00:04:01,659 --> 00:04:04,950
Si vous venez d'écrire quelque chose et vous savez
ce que vous voulez est pour qu'il soit plus petit,

83
00:04:04,950 --> 00:04:08,241
mais vous ne savez pas quelle taille vous exactement
veux que ce soit, ainsi, vous pouvez juste dire,

84
00:04:08,241 --> 00:04:09,330
la taille de police plus petite.

85
00:04:09,330 --> 00:04:14,344
Et elle fondera hors de la,
juste au-dessus, il est la taille.

86
00:04:14,344 --> 00:04:15,760
Et vous pouvez obtenir plus ou moins grande.

87
00:04:15,760 --> 00:04:18,390
Donc, il ya beaucoup de différents
façons de spécifier la taille de police.

88
00:04:18,390 --> 00:04:20,690
>> Vous pouvez également spécifier ce que
famille de police que vous voulez.

89
00:04:20,690 --> 00:04:23,360
Si vous avez un particulier
nom, il ya une façon CSS--

90
00:04:23,360 --> 00:04:27,270
on ne va pas en parler
ici-- pour définir une police très spécifique

91
00:04:27,270 --> 00:04:28,980
et l'intégrer dans votre page.

92
00:04:28,980 --> 00:04:30,620
Vous pouvez également utiliser des noms génériques.

93
00:04:30,620 --> 00:04:33,540
Il ya beaucoup de polices de sécurité Web
qui sont pré-définis dans CSS.

94
00:04:33,540 --> 00:04:36,352
Et si vous êtes un utilisateur de Microsoft
Bureau dans les 20 dernières années,

95
00:04:36,352 --> 00:04:38,810
vous êtes probablement familier avec
beaucoup de ces polices de sécurité Web

96
00:04:38,810 --> 00:04:44,640
déjà, Times New Roman, Arial,
Courier New, la Géorgie, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
et ainsi de suite.

98
00:04:45,470 --> 00:04:47,170
Ceux sont tous considérés web des polices de sécurité.

99
00:04:47,170 --> 00:04:49,169
Et en fait, une partie de la
raison pour laquelle ils sont venus pour être

100
00:04:49,169 --> 00:04:54,140
devait être utilisé pour faire web-- chaque page
l'accès à ce défaut avait mis des polices

101
00:04:54,140 --> 00:04:58,480
avec différents empattements, et tout cela
trucs police nous ne serons pas entrer dans,

102
00:04:58,480 --> 00:05:01,130
mais ceux-ci sont habituellement
accessible dans votre CSS,

103
00:05:01,130 --> 00:05:04,029
même si vous ne le faites pas
Sinon définir les polices.

104
00:05:04,029 --> 00:05:07,070
Enfin, vous pouvez aligner votre texte,
au lieu d'être, par défaut, aligné

105
00:05:07,070 --> 00:05:09,310
vers la gauche, vous pourriez
aligner à droite,

106
00:05:09,310 --> 00:05:13,740
ou vous pourriez aligner centré, ou
justifié de sorte qu'il a frappé deux marges.

107
00:05:13,740 --> 00:05:16,800
Donc, ceux qui sont toutes les options que vous pouvez utiliser
de changer ce que votre texte ressemble,

108
00:05:16,800 --> 00:05:20,120
et comment il est affiché sur votre page.

109
00:05:20,120 --> 00:05:22,180
>> Vos sélecteurs ne le font pas
doivent être des balises uniquement.

110
00:05:22,180 --> 00:05:25,539
Nous avons déjà vu une balise body
sélecteur, et sélecteur de balises

111
00:05:25,539 --> 00:05:26,580
ne regarde juste comme ça.

112
00:05:26,580 --> 00:05:30,020
Vous nommez une étiquette, et puis vous
définir une feuille de style pour ce tag.

113
00:05:30,020 --> 00:05:32,660
Mais vous pouvez aussi faire quelque chose
appelé un sélecteur d'ID.

114
00:05:32,660 --> 00:05:34,390
Un sélecteur d'identité semble assez similaire.

115
00:05:34,390 --> 00:05:38,100
Mais remarque, que maintenant je ne suis pas à l'aide
une balise HTML, je suis en utilisant, dans ce cas,

116
00:05:38,100 --> 00:05:40,720
#unique, ou hash unique.

117
00:05:40,720 --> 00:05:42,930
Si vous vous souvenez de notre
vidéo sur le langage HTML, nous avons parlé

118
00:05:42,930 --> 00:05:45,620
sur la façon dont les étiquettes peuvent avoir des attributs.

119
00:05:45,620 --> 00:05:48,340
>> Et un attribut qui applique
à peu près toutes les balises HTML,

120
00:05:48,340 --> 00:05:51,440
mais nous ne parlions pas à ce sujet,
est ce qu'on appelle une étiquette d'identification.

121
00:05:51,440 --> 00:05:55,250
Donc, ce serait notamment CSS
appliquer qu'aux tag HTML qui a

122
00:05:55,250 --> 00:05:58,530
Une pièce d'identité très spécifique, que vous avez nommé.

123
00:05:58,530 --> 00:06:01,000
Donc, si vous avez quelque part
dans votre code, quelque part

124
00:06:01,000 --> 00:06:06,090
dans votre fichier HTML, une balise et vous
spécifier comme un attribut de cette balise,

125
00:06:06,090 --> 00:06:09,060
ID est égal unique, cette
notamment la feuille de style

126
00:06:09,060 --> 00:06:15,030
ici ne se appliquera entre
cette balise avec l'ID d'unique.

127
00:06:15,030 --> 00:06:17,180
>> Vous pouvez aussi faire quelque chose
appelé un sélecteur de classe.

128
00:06:17,180 --> 00:06:19,920
Donc, en plus d'avoir
ID attributs, vous pouvez aussi

129
00:06:19,920 --> 00:06:23,130
ajouter un attribut class pour les balises HTML.

130
00:06:23,130 --> 00:06:27,140
Et lorsque vous utilisez un attribut de classe,
elle peut être appliquée à plusieurs variables.

131
00:06:27,140 --> 00:06:31,880
Donc, si vous avez plusieurs choses qui
sont similaires, peut-être que vous voulez dire,

132
00:06:31,880 --> 00:06:35,890
tag ouverte blah, blah, blah,
bla, classe équivaut étudiants.

133
00:06:35,890 --> 00:06:38,190
Et puis ce particulier
stylesheet appliquerait

134
00:06:38,190 --> 00:06:42,041
à chaque balise dont la classe est étudiants.

135
00:06:42,041 --> 00:06:44,290
Dans ce cas, nous aurions mis la
couleur de fond jaune,

136
00:06:44,290 --> 00:06:46,706
et nous aimerions définir l'opacité, qui
est une étiquette que nous ne parlions pas,

137
00:06:46,706 --> 00:06:52,510
mais juste traite de façon transparente
quelque chose est, à 70%, dans ce cas.

138
00:06:52,510 --> 00:06:54,430
>> Il ya deux options pour
feuilles de style d'écriture.

139
00:06:54,430 --> 00:06:56,680
Vous pouvez les écrire
directement dans votre code HTML

140
00:06:56,680 --> 00:06:59,690
en plaçant les feuilles de style
entre les deux balises de style.

141
00:06:59,690 --> 00:07:03,850
Et ces balises de style vont à l'intérieur du
les balises head de votre page web.

142
00:07:03,850 --> 00:07:08,240
La manière peut-être plus préféré faire
il est d'écrire un fichier .css séparée,

143
00:07:08,240 --> 00:07:12,360
puis le relier à votre
document en utilisant les balises de liens.

144
00:07:12,360 --> 00:07:14,690
Les balises de liens, encore une fois, sont
différent de liens hypertextes,

145
00:07:14,690 --> 00:07:16,760
si vous vous souvenez de notre vidéo un fichier HTML.

146
00:07:16,760 --> 00:07:19,030
Et les balises de liens sont comment nous
tirez dans des fichiers séparés.

147
00:07:19,030 --> 00:07:23,900
Il en quelque sorte comme l'équivalent de
#include pour la programmation web.

148
00:07:23,900 --> 00:07:27,140
>> Donc, nous allons jeter un oeil à table.html.

149
00:07:27,140 --> 00:07:29,380
Si vous vous souvenez de notre
HTML vidéo, je montrais

150
00:07:29,380 --> 00:07:32,000
un exemple d'un très
simple multiplication

151
00:07:32,000 --> 00:07:35,160
table qui avait l'air assez
laid, et peut-être il ya

152
00:07:35,160 --> 00:07:38,650
un moyen de faire mieux avec
CSS, pour faire croire effectivement

153
00:07:38,650 --> 00:07:41,120
plus comme une multiplication
table, ou quelque chose

154
00:07:41,120 --> 00:07:43,730
qui est non seulement collé ensemble
avec pas de division réelle

155
00:07:43,730 --> 00:07:45,532
entre les lignes et les colonnes.

156
00:07:45,532 --> 00:07:47,490
Donc, nous allons la tête sur
CS50 IDE, et de prendre un coup d'oeil

157
00:07:47,490 --> 00:07:50,780
comment CSS peut, en quelque sorte, tordre
ce que nous avons commencé avec avant,

158
00:07:50,780 --> 00:07:53,290
et faire quelque chose de beaucoup mieux.

159
00:07:53,290 --> 00:07:55,650
>> Donc, nous sommes dans CS50 IDE
maintenant, et si familier,

160
00:07:55,650 --> 00:07:58,710
nous arrêtons dans ce
Table cette page HTML.

161
00:07:58,710 --> 00:08:01,090
Table.html essentiellement
définit simplement le contenu

162
00:08:01,090 --> 00:08:05,044
d'un multiple-- il était censé être
une table quatre par quatre de multiplication.

163
00:08:05,044 --> 00:08:06,210
Il est assez simple.

164
00:08:06,210 --> 00:08:09,410
Et nous pensons qu'il serait
regarder assez bien organisé.

165
00:08:09,410 --> 00:08:15,277
Mais en fait, quand nous Aperçu cette page,
nous voyons qu'il est un peu laid, non?

166
00:08:15,277 --> 00:08:16,860
Clairement, nous avons des lignes et des colonnes ici.

167
00:08:16,860 --> 00:08:18,350
Il une sorte de séparation.

168
00:08:18,350 --> 00:08:20,040
Mais il est pas une séparation significative.

169
00:08:20,040 --> 00:08:23,105
Nous ne sommes pas réellement obtenir
trop d'informations ici.

170
00:08:23,105 --> 00:08:25,730
Et il n'y a pas de séparation entre
les lignes et les colonnes en termes

171
00:08:25,730 --> 00:08:28,460
des règles horizontales ou verticales.

172
00:08:28,460 --> 00:08:31,530
Nous pourrions probablement faire de cette
mieux regarder un peu.

173
00:08:31,530 --> 00:08:32,934
Essayons donc.

174
00:08:32,934 --> 00:08:34,559
Donc, je vais fermer cet onglet vous ici.

175
00:08:34,559 --> 00:08:37,434
Et je vais fermer mon table.html,
et je ai une autre version ici

176
00:08:37,434 --> 00:08:39,490
appelé table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Nous allons ouvrir que jusqu'à.

178
00:08:40,655 --> 00:08:42,530
Le corps de la page est
plus ou moins la même chose,

179
00:08:42,530 --> 00:08:44,238
mais je l'ai changé
peu en haut.

180
00:08:44,238 --> 00:08:47,132
Et je vais défiler vers le haut ici.

181
00:08:47,132 --> 00:08:49,340
Remarquez que cette fois, je suis
en utilisant les balises de style embarqués.

182
00:08:49,340 --> 00:08:53,550
Je l'ai ouvert une balise de style, et je suis maintenant
la définition d'une feuille de style CSS juste à l'intérieur

183
00:08:53,550 --> 00:08:54,310
de celui-ci.

184
00:08:54,310 --> 00:08:56,310
Je dois une feuille de style qui dit, table.

185
00:08:56,310 --> 00:08:58,170
Voilà mon sélecteur de balises.

186
00:08:58,170 --> 00:09:01,340
Je ne suis pas en utilisant point ou hachage,
que je ferais si je

187
00:09:01,340 --> 00:09:03,710
était en utilisant une carte d'identité ou un sélecteur de classe.

188
00:09:03,710 --> 00:09:06,190
Je ai un sélecteur de balises tableau ici--.

189
00:09:06,190 --> 00:09:10,090
Ce style va
appliquer à chaque balise de table.

190
00:09:10,090 --> 00:09:14,950
Apparemment, je veux mettre un un
pixel de large, bordure bleue solide,

191
00:09:14,950 --> 00:09:15,779
à l'intérieur de ma table.

192
00:09:15,779 --> 00:09:18,320
Qui sonne comme il serait probablement
aider à la situation, non?

193
00:09:18,320 --> 00:09:20,320
Nous allons avoir
les choses semblent beaucoup mieux.

194
00:09:20,320 --> 00:09:21,190
Donc, cela est bien beau.

195
00:09:21,190 --> 00:09:23,540
Stylistiquement, je viens
embarqué ma feuille de style ici.

196
00:09:23,540 --> 00:09:25,100
Il est certainement un
façon acceptable de faire.

197
00:09:25,100 --> 00:09:26,391
Voyons voir à quoi cela ressemble.

198
00:09:26,391 --> 00:09:29,790
Donc, je vais revenir ici-bas, et
Je vais un aperçu de mon table2.HTML.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
Eh bien, ce ne est pas tout à fait ce que je voulais,
mais il est exactement ce que nous avons demandé.

201
00:09:36,470 --> 00:09:39,530
Nous avons dit que ce style est
va appliquer à notre table.

202
00:09:39,530 --> 00:09:43,810
Notre table a maintenant un seul pixel
large, solide bordure bleue.

203
00:09:43,810 --> 00:09:46,237
Nous ne sommes pas réellement obtenir
les cellules du tableau.

204
00:09:46,237 --> 00:09:47,570
Nous sortons tout juste à la table.

205
00:09:47,570 --> 00:09:49,310
Donc CSS travaillé.

206
00:09:49,310 --> 00:09:51,890
Il a appliqué une
feuille de style à notre table.

207
00:09:51,890 --> 00:09:53,981
Mais n'a pas tout faire
ce que nous voulions qu'il fasse.

208
00:09:53,981 --> 00:09:55,730
Comment pouvons-nous faire
ce que nous voulons qu'il fasse?

209
00:09:55,730 --> 00:09:59,287
>> Eh bien, nous allons jeter un oeil à un de plus
version de ce dans table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Donc je vais juste de fermer ces onglets.

211
00:10:00,870 --> 00:10:03,890
Je vais revenir sur ici pour mon
arborescence de fichiers, et d'ouvrir table3.HTML.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
Encore une fois, ça va faire joli
similaire ici au début.

214
00:10:10,350 --> 00:10:14,460
Mais remarquez, cette fois, au lieu d'utiliser
une feuille de style intégré juste là,

215
00:10:14,460 --> 00:10:18,870
Je vais dans un lien
feuille de style en utilisant la balise link.

216
00:10:18,870 --> 00:10:22,480
Donc, je suis apparemment reliant dans un
stylesheet appelé tables.CSS,

217
00:10:22,480 --> 00:10:25,090
et ce bien est égale
stylesheet juste désigne: ainsi,

218
00:10:25,090 --> 00:10:28,645
ce qui est ce dossier par rapport à ce que
Je suis doing-- est une feuille de style que je suis

219
00:10:28,645 --> 00:10:29,821
l'aide pour ma page.

220
00:10:29,821 --> 00:10:32,320
Donc, si je veux vraiment voir ce que
Je fais avec le CSS ici,

221
00:10:32,320 --> 00:10:35,010
Je dois aller ouverte
table.CSS fichier ainsi.

222
00:10:35,010 --> 00:10:37,490
Donc, nous allons revenir sur ici
nouveau à notre arborescence de fichiers.

223
00:10:37,490 --> 00:10:38,660
Il ya table.CSS.

224
00:10:38,660 --> 00:10:40,490
Nous allons pop ouverte.

225
00:10:40,490 --> 00:10:43,070
Maintenant, nous voyons un peu de la CSS.

226
00:10:43,070 --> 00:10:45,630
Apparemment, je dois un couple
des choses qui se passent ici.

227
00:10:45,630 --> 00:10:48,950
Je veux apparemment pour poser un cinq
pixel de large, bordure rouge solide,

228
00:10:48,950 --> 00:10:50,287
autour de ma table.

229
00:10:50,287 --> 00:10:52,870
Nous savons déjà que ça va
juste aller sur le périmètre.

230
00:10:52,870 --> 00:10:56,180
Nous avons vu que, dans table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Avec chaque rangée, je
veulent apparemment pour spécifier

232
00:10:58,770 --> 00:11:01,950
que la hauteur de la ligne est de 50 pixels de haut.

233
00:11:01,950 --> 00:11:05,680
Donc, pour chaque ligne, souvenir
qui est ce que la balise tr fait,

234
00:11:05,680 --> 00:11:08,550
Je le fais 50 pixels de haut.

235
00:11:08,550 --> 00:11:09,804
>> Enfin, je dois ce commentaire.

236
00:11:09,804 --> 00:11:11,470
Et voilà comment nous faisons des commentaires dans CSS.

237
00:11:11,470 --> 00:11:16,174
Il est très similaire à saisir bloc
commentaires étoiles slash syntaxe.

238
00:11:16,174 --> 00:11:17,090
Tout le texte que vous voulez.

239
00:11:17,090 --> 00:11:19,470
Il n'y a pas slash slash bien en CSS.

240
00:11:19,470 --> 00:11:23,400
Pour les courts commentaires en ligne, nous avons
d'utiliser ce format particulier ici.

241
00:11:23,400 --> 00:11:26,830
On dirait que je fais un
beaucoup de choses dans mes tags td.

242
00:11:26,830 --> 00:11:29,710
Rappelez-vous les balises td ou une table
données, qui sont vraiment juste

243
00:11:29,710 --> 00:11:32,210
les colonnes à l'intérieur de
nos lignes, et apparemment

244
00:11:32,210 --> 00:11:35,090
pour chaque élément de données
dans ma table, je veux

245
00:11:35,090 --> 00:11:38,850
pour définir la couleur d'arrière-plan
être noir, la couleur est blanche,

246
00:11:38,850 --> 00:11:40,320
la couleur est couleur de premier plan.

247
00:11:40,320 --> 00:11:42,360
Donc cela va être
le texte de ma page.

248
00:11:42,360 --> 00:11:45,140
Je veux grande police, 22
signaler police, et je veux

249
00:11:45,140 --> 00:11:47,001
qu'il soit de la famille de la police, de la Géorgie.

250
00:11:47,001 --> 00:11:48,750
Donc, je ne vais pas
avoir la police par défaut.

251
00:11:48,750 --> 00:11:51,820
Je vais préciser la Géorgie, qui
est une de ces polices de sécurité Web

252
00:11:51,820 --> 00:11:53,830
que nous avons vu auparavant.

253
00:11:53,830 --> 00:11:57,284
Je veux que mon texte soit aligné
central, au milieu de la boîte,

254
00:11:57,284 --> 00:11:59,450
Je ne veux pas qu'elle soit laissée
alignés ou aligné à droite.

255
00:11:59,450 --> 00:12:03,461
Et je veux que ma largeur de colonne
être de 50 pixels de large ainsi.

256
00:12:03,461 --> 00:12:05,210
Jetons un oeil à
à quoi cela ressemble,

257
00:12:05,210 --> 00:12:07,470
et voir si cela est peut-être une amélioration.

258
00:12:07,470 --> 00:12:12,890
Donc, je vais aller à table3.HTML, qui
rappel, comprend table.CSS comme un lien,

259
00:12:12,890 --> 00:12:14,830
et nous allons le prévisualiser.

260
00:12:14,830 --> 00:12:16,800
Cela fait beaucoup mieux, non?

261
00:12:16,800 --> 00:12:20,004
Ceci est effectivement commence à ressembler
beaucoup plus comme une table de multiplication.

262
00:12:20,004 --> 00:12:21,920
Je dois cette frontière rouge
autour de ma table, mais maintenant

263
00:12:21,920 --> 00:12:26,700
Je l'ai également précisé que
chaque ligne est de 50 pixels de large,

264
00:12:26,700 --> 00:12:30,220
ou il est 50 pixels tall-- excuse
moi-- chaque colonne est de 50 pixels de large.

265
00:12:30,220 --> 00:12:34,251
Les données de chaque colonne, et que
les données, a un fond noir.

266
00:12:34,251 --> 00:12:36,000
Voilà pourquoi ceux
lignes blanches sont là.

267
00:12:36,000 --> 00:12:38,836
Étant donné que dans l'espace
entre l'ensemble de ces cellules,

268
00:12:38,836 --> 00:12:40,710
il est pas une frontière dans
et de lui-même, il est juste

269
00:12:40,710 --> 00:12:43,170
Je ne fais que remplir le
cellules, qui fait

270
00:12:43,170 --> 00:12:46,310
rend les frontières de la table, qui
n'a apparemment exister tout au long, il

271
00:12:46,310 --> 00:12:47,887
était simplement des lignes blanches minces.

272
00:12:47,887 --> 00:12:48,720
Maintenant, ils sont visibles.

273
00:12:48,720 --> 00:12:50,380
Maintenant ils sautent hors de l'écran.

274
00:12:50,380 --> 00:12:52,920
Et donc cela est très simple
feuille de style que je l'ai appliqué,

275
00:12:52,920 --> 00:12:56,850
et maintenant ma table ressemble beaucoup plus comme
une table quatre par quatre de multiplication,

276
00:12:56,850 --> 00:13:00,950
au lieu d'un gâchis tout confus, où
tout est clairement lignes et de colonnes,

277
00:13:00,950 --> 00:13:03,717
mais pas super bien organisé.

278
00:13:03,717 --> 00:13:06,800
Nous sommes vraiment juste de rayer la surface
de ce que vous pouvez faire avec CSS ici.

279
00:13:06,800 --> 00:13:10,330
Heureusement la documentation CSS
est assez simple.

280
00:13:10,330 --> 00:13:14,000
Vous utiliserez plusieurs de ses
attributs, assez fréquemment.

281
00:13:14,000 --> 00:13:16,087
Ceux dont nous avons parlé
plus tôt dans cette vidéo.

282
00:13:16,087 --> 00:13:18,170
Il ya plusieurs que vous
ne sera probablement pas utiliser tous.

283
00:13:18,170 --> 00:13:19,469
Et cela est très bien, aussi.

284
00:13:19,469 --> 00:13:22,010
Mais il suffit de savoir, qu'il ya une
beaucoup de documentation là-bas.

285
00:13:22,010 --> 00:13:25,110
Donc, même si nous ne couvrons pas tout,
vous n'êtes certainement pas à gauche sur votre propre.

286
00:13:25,110 --> 00:13:26,780
Mais CSS est vraiment amusant
à expérimenter.

287
00:13:26,780 --> 00:13:29,040
Et je vous encourage fortement
de jouer avec vos pages Web,

288
00:13:29,040 --> 00:13:32,180
et voyez comment vous pouvez les faire
regarder et se sentir à améliorer l'utilisateur

289
00:13:32,180 --> 00:13:34,790
expérience de visiter votre page.

290
00:13:34,790 --> 00:13:35,710
Je suis Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Ceci est CS50.

292
00:13:37,980 --> 00:13:40,151