1
00:00:00,000 --> 00:00:05,660
>> [Música tocando]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Então, vamos dar mais uma
vídeo para falar mais de um idioma.

3
00:00:08,740 --> 00:00:10,800
Desta vez vamos falar sobre CSS.

4
00:00:10,800 --> 00:00:13,460
Então, CSS, que é curto para
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
é uma outra linguagem que usamos
na construção de websites.

6
00:00:16,149 --> 00:00:17,190
Pense nisso como este.

7
00:00:17,190 --> 00:00:20,900
Se o HTML é o que usamos para organizar o
conteúdo que deseja colocar na nossa página,

8
00:00:20,900 --> 00:00:25,390
CSS é a ferramenta que geralmente usamos
para personalizar a forma como os nossos sites olhar,

9
00:00:25,390 --> 00:00:30,410
e como a experiência do usuário realmente
é, interagindo com o nosso site.

10
00:00:30,410 --> 00:00:32,535
>> Semelhante ao HTML, CSS é
não uma linguagem de programação.

11
00:00:32,535 --> 00:00:33,451
Não tem lógica.

12
00:00:33,451 --> 00:00:34,595
Não tem variáveis.

13
00:00:34,595 --> 00:00:38,890
Ele não tem qualquer tipo de que
fluir as coisas relacionadas que faz C.

14
00:00:38,890 --> 00:00:40,150
É uma linguagem de estilo.

15
00:00:40,150 --> 00:00:42,810
E sua sintaxe é bastante
simples, e apenas descreve

16
00:00:42,810 --> 00:00:46,240
como os elementos do nosso
A página tem certeza de HTML

17
00:00:46,240 --> 00:00:48,190
elementos deve ser modificado.

18
00:00:48,190 --> 00:00:51,170
Para esse fim, se você não tem
Ainda não assisti o nosso vídeo em HTML,

19
00:00:51,170 --> 00:00:53,290
ou não estão familiarizados com
HTML geralmente, você

20
00:00:53,290 --> 00:00:57,430
pode querer dar uma olhada no que
em primeiro lugar, porque esta discussão sobre CSS

21
00:00:57,430 --> 00:01:00,700
vai depender de
algum conhecimento de HTML.

22
00:01:00,700 --> 00:01:03,740
>> Então aqui está um realmente
simples folha de estilo CSS.

23
00:01:03,740 --> 00:01:06,480
Mesmo se você nunca
programado com CSS antes,

24
00:01:06,480 --> 00:01:10,624
Tenho certeza que você pode descobrir
exatamente o que este estilo faz.

25
00:01:10,624 --> 00:01:11,290
O que isso faz?

26
00:01:11,290 --> 00:01:15,470
Bem, aplicados ao corpo do nosso web
página, tudo entre as tags do corpo

27
00:01:15,470 --> 00:01:19,631
em nosso HTML, e define o
cor de fundo da página para azul.

28
00:01:19,631 --> 00:01:21,130
Bem, é um estilo muito simples.

29
00:01:21,130 --> 00:01:23,269
Na verdade, é muito humano
linguagem amigável, CSS.

30
00:01:23,269 --> 00:01:26,560
Assim, mesmo se você nunca usou antes,
você provavelmente poderia adivinhar o que fez.

31
00:01:26,560 --> 00:01:30,140
Na verdade, se nós carregamos uma página, onde
este estilo foi incorporado de alguma forma,

32
00:01:30,140 --> 00:01:36,240
a cor da nossa página de fundo faria
ser azul, e não o padrão branco.

33
00:01:36,240 --> 00:01:37,670
>> Então, como vamos construir folhas de estilo?

34
00:01:37,670 --> 00:01:39,700
Bem, primeiro, temos de
identificar um selector.

35
00:01:39,700 --> 00:01:42,970
No último exemplo,
selector que era o corpo.

36
00:01:42,970 --> 00:01:45,050
Então nós temos um diálogo aberto
chaveta, e estamos

37
00:01:45,050 --> 00:01:48,410
vai começar a definir o
folha de estilo para esse selector.

38
00:01:48,410 --> 00:01:51,800
Em entre as chaves, nós
só tem uma lista de pares de valores-chave.

39
00:01:51,800 --> 00:01:56,205
O par valor anterior era
cor azul do fundo ponto e vírgula,

40
00:01:56,205 --> 00:01:57,830
mas podemos fazer mais e mais destes.

41
00:01:57,830 --> 00:02:02,330
Você pode ter várias coisas aplicando
a essa marca, que o corpo selector.

42
00:02:02,330 --> 00:02:05,960
Cada um deles é separado por um
ponto e vírgula, e chamamos a cada um deles

43
00:02:05,960 --> 00:02:08,949
uma declaração, uma declaração CSS.

44
00:02:08,949 --> 00:02:12,410
Quando acabarmos com toda a nós styling
deseja aplicar a essa marca particular,

45
00:02:12,410 --> 00:02:15,300
só temos uma de fechamento
prepare para acabar com a folha de estilo,

46
00:02:15,300 --> 00:02:19,640
e estamos a fazer definindo a folha de estilo
para que selector particular.

47
00:02:19,640 --> 00:02:21,341
>> Quais são algumas das propriedades CSS comuns?

48
00:02:21,341 --> 00:02:23,590
Bem, talvez você quer colocar
uma borda em torno de algo.

49
00:02:23,590 --> 00:02:26,850
Então você pode dizer, beira,
que seria sua chave,

50
00:02:26,850 --> 00:02:29,460
e, em seguida, seus valores seriam,
o estilo, cor e largura

51
00:02:29,460 --> 00:02:30,209
você quer que seja.

52
00:02:30,209 --> 00:02:33,530
Assim, o modelo pode ser um sólido
linha, uma linha pontilhada, uma linha tracejada,

53
00:02:33,530 --> 00:02:36,020
uma linha do cume, o que seria linha ondulada.

54
00:02:36,020 --> 00:02:38,790
Talvez você quiser tê-lo
ser azul ou preto ou verde.

55
00:02:38,790 --> 00:02:41,490
Talvez você quer que ele seja
1 ou 2 ou 10 pixels de largura.

56
00:02:41,490 --> 00:02:43,254
Você pode especificar todas essas coisas.

57
00:02:43,254 --> 00:02:46,420
Talvez você queira definir o fundo
cor de sua página de uma forma particular.

58
00:02:46,420 --> 00:02:49,215
Já vimos que, definindo a
fundo do corpo a ser azul.

59
00:02:49,215 --> 00:02:52,080
>> Então você pode usar uma palavra-chave,
assim CSS tem certas cores

60
00:02:52,080 --> 00:02:55,950
que são construídos para ele, azul, verde,
preto, umas cores muito simples que conhecemos.

61
00:02:55,950 --> 00:02:59,110
Mas você também pode especificar qualquer
hex cor que você gostaria.

62
00:02:59,110 --> 00:03:05,190
Lembre-se que as cores podem ser identificados
por um conjunto de três números hexadecimais

63
00:03:05,190 --> 00:03:08,500
de 0 a 255, RG e b, o
componente vermelho, verde e azul.

64
00:03:08,500 --> 00:03:10,590
E assim podemos especificar
qualquer cor que queremos por,

65
00:03:10,590 --> 00:03:15,520
em vez de usar azul ou verde ou preto,
usando libras e, em seguida, seis dígitos do hex,

66
00:03:15,520 --> 00:03:18,310
e que nos daria
a cor de seis dígitos.

67
00:03:18,310 --> 00:03:19,850
Então essa é a cor de fundo.

68
00:03:19,850 --> 00:03:21,975
>> Temos também o primeiro plano
cor, que é geralmente

69
00:03:21,975 --> 00:03:24,140
vai ser o texto de sua página.

70
00:03:24,140 --> 00:03:28,850
E você poderia fazer isso de forma semelhante
com palavra-chave e ou seis dígitos hex.

71
00:03:28,850 --> 00:03:32,140
Então você pode especificar qualquer cor que você
quer para o texto de sua página

72
00:03:32,140 --> 00:03:36,370
contra uma determinada
cor de fundo, lá em cima.

73
00:03:36,370 --> 00:03:39,100
Você também pode alterar e lidar
com a pia batismal, ea forma de texto

74
00:03:39,100 --> 00:03:40,400
é processado na página.

75
00:03:40,400 --> 00:03:42,010
>> Assim você pode mudar o tamanho da fonte.

76
00:03:42,010 --> 00:03:46,320
Você pode usar palavras-chave, como extra,
pequeno extra, ou xx pequeno ou médio,

77
00:03:46,320 --> 00:03:47,660
grande, e assim por diante.

78
00:03:47,660 --> 00:03:50,750
Você pode usar pontos fixos, 10
ponto, ponto 12, e assim por diante.

79
00:03:50,750 --> 00:03:55,850
É possível utilizar percentagens, 80%, 20%,
onde 100% é a fonte padrão

80
00:03:55,850 --> 00:03:59,220
o tamanho, o qual é geralmente vai
ser algo como 11 ou 12 pontos.

81
00:03:59,220 --> 00:04:01,659
Ou você ainda pode basear-lo
do tamanho da fonte mais recente.

82
00:04:01,659 --> 00:04:04,950
Se você acabou de escrever alguma coisa e você sabe
o que você quer é para que ele seja menor,

83
00:04:04,950 --> 00:04:08,241
mas você não sabe o tamanho que você exatamente
quer que seja, bem, você pode simplesmente dizer,

84
00:04:08,241 --> 00:04:09,330
tamanho de fonte menor.

85
00:04:09,330 --> 00:04:14,344
E vai basear fora do,
apenas acima, é o tamanho da fonte.

86
00:04:14,344 --> 00:04:15,760
E você pode obter menor ou maior.

87
00:04:15,760 --> 00:04:18,390
Portanto, há um monte de diferente
maneiras de especificar o tamanho da fonte.

88
00:04:18,390 --> 00:04:20,690
>> Você também pode especificar o que
família de fonte desejado.

89
00:04:20,690 --> 00:04:23,360
Se você tem um especial
nome, há uma maneira em CSS--

90
00:04:23,360 --> 00:04:27,270
nós não vamos falar sobre isso
aqui-- para definir um tipo de letra muito específico

91
00:04:27,270 --> 00:04:28,980
e incorporá-lo em sua página.

92
00:04:28,980 --> 00:04:30,620
Você também pode usar nomes genéricos.

93
00:04:30,620 --> 00:04:33,540
Há um monte de web fontes seguras
que são pré-definidos no CSS.

94
00:04:33,540 --> 00:04:36,352
E se você é um usuário do Microsoft
Escritório nos últimos 20 anos,

95
00:04:36,352 --> 00:04:38,810
você provavelmente está familiarizado com
muitas dessas fontes seguras web

96
00:04:38,810 --> 00:04:44,640
já, Times New Roman, Arial,
Courier New, Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
e assim por diante.

98
00:04:45,470 --> 00:04:47,170
Aqueles são todos considerados web fontes seguras.

99
00:04:47,170 --> 00:04:49,169
E, na verdade, parte do
razão pela qual eles vieram a ser

100
00:04:49,169 --> 00:04:54,140
era para ser usado para fazer web-- cada página
tinha acesso a este padrão definido de tipos de letra

101
00:04:54,140 --> 00:04:58,480
com vários serifas, e tudo isso
material de fonte não vamos entrar,

102
00:04:58,480 --> 00:05:01,130
mas estes são geralmente
acessíveis no seu CSS,

103
00:05:01,130 --> 00:05:04,029
mesmo se você não fizer isso
caso contrário definir as fontes.

104
00:05:04,029 --> 00:05:07,070
Por último, você pode alinhar seu texto,
ao invés de ser, por padrão, alinhado

105
00:05:07,070 --> 00:05:09,310
para a esquerda, você poderia
alinhá-lo para a direita,

106
00:05:09,310 --> 00:05:13,740
ou você pode alinhá-lo centrado, ou
justificados para que ele bateu ambas as margens.

107
00:05:13,740 --> 00:05:16,800
Portanto, estas são todas as opções que você pode usar
para mudar o seu texto parece,

108
00:05:16,800 --> 00:05:20,120
e como ele é exibido em sua página.

109
00:05:20,120 --> 00:05:22,180
>> Os seus seletores não fazer
tem que ser apenas as etiquetas.

110
00:05:22,180 --> 00:05:25,539
Nós já vimos um tag body
seletor, e seletor de tags

111
00:05:25,539 --> 00:05:26,580
parece apenas como aquele.

112
00:05:26,580 --> 00:05:30,020
Você nomeia um tag, e então você
definir uma folha de estilo para essa marca.

113
00:05:30,020 --> 00:05:32,660
Mas você também pode fazer alguma coisa
chamado um seletor de ID.

114
00:05:32,660 --> 00:05:34,390
Um seletor ID parece muito similar.

115
00:05:34,390 --> 00:05:38,100
Mas observe, que agora eu não estou usando
uma tag HTML, eu estou usando, neste caso,

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

117
00:05:40,720 --> 00:05:42,930
Se você se lembrar do nosso
vídeo em HTML, nós falamos

118
00:05:42,930 --> 00:05:45,620
sobre como as tags podem ter atributos.

119
00:05:45,620 --> 00:05:48,340
>> E um atributo que se aplica
para praticamente todas as tags HTML,

120
00:05:48,340 --> 00:05:51,440
mas nós não falamos sobre isso,
é algo chamado uma etiqueta de identificação.

121
00:05:51,440 --> 00:05:55,250
Então, isso seria especial CSS
só se aplicam a tag HTML que tem

122
00:05:55,250 --> 00:05:58,530
uma identificação muito específico, que você tenha nomeado.

123
00:05:58,530 --> 00:06:01,000
Então se você tem algum lugar
em seu código, em algum lugar

124
00:06:01,000 --> 00:06:06,090
em seu arquivo HTML, uma marca e você
especificar como um atributo a essa marca,

125
00:06:06,090 --> 00:06:09,060
ID iguala original, este
especial de estilo

126
00:06:09,060 --> 00:06:15,030
aqui só se aplica entre
essa marca com a identificação do original.

127
00:06:15,030 --> 00:06:17,180
>> Você também pode fazer algo
chamado um selector de classe.

128
00:06:17,180 --> 00:06:19,920
Assim, para além de terem
Atributos ID, você também pode

129
00:06:19,920 --> 00:06:23,130
adicionar um atributo de classe de tags HTML.

130
00:06:23,130 --> 00:06:27,140
E quando você usa um atributo de classe,
ele pode ser aplicado a várias marcas.

131
00:06:27,140 --> 00:06:31,880
Então se você tem várias coisas que
são semelhantes, talvez você quer dizer,

132
00:06:31,880 --> 00:06:35,890
tag aberta blah, blah, blah,
blah, classe iguala alunos.

133
00:06:35,890 --> 00:06:38,190
E então este particular
stylesheet se aplicaria

134
00:06:38,190 --> 00:06:42,041
para cada tag cuja classe é alunos.

135
00:06:42,041 --> 00:06:44,290
Neste caso, nós definir o
cor de fundo para amarelo,

136
00:06:44,290 --> 00:06:46,706
e nós definir a opacidade, que
é uma tag que não falar,

137
00:06:46,706 --> 00:06:52,510
mas apenas trata de como transparente
algo é, para 70%, neste caso.

138
00:06:52,510 --> 00:06:54,430
>> Há duas opções para
folhas de estilo de escrita.

139
00:06:54,430 --> 00:06:56,680
Você pode escrevê-los
diretamente em seu HTML

140
00:06:56,680 --> 00:06:59,690
colocando as folhas de estilo
entre as tags de estilo.

141
00:06:59,690 --> 00:07:03,850
E essas marcas de estilo ir para dentro de
as tags de cabeçalho da sua página web.

142
00:07:03,850 --> 00:07:08,240
A maneira mais preferida talvez fazer
é escrever um arquivo CSS separado,

143
00:07:08,240 --> 00:07:12,360
e depois vinculá-lo em seu
documento usando links tags.

144
00:07:12,360 --> 00:07:14,690
Tags de link, mais uma vez, são
diferente de hiperligações,

145
00:07:14,690 --> 00:07:16,760
se você se lembra do nosso vídeo de um HTML.

146
00:07:16,760 --> 00:07:19,030
E link tags são como nós
puxe em arquivos separados.

147
00:07:19,030 --> 00:07:23,900
É mais ou menos como o equivalente a
o # include para programação web.

148
00:07:23,900 --> 00:07:27,140
>> Então, vamos dar uma olhada table.HTML.

149
00:07:27,140 --> 00:07:29,380
Se você se lembrar do nosso
Vídeo HTML, mostrei

150
00:07:29,380 --> 00:07:32,000
um exemplo de uma muito
multiplicação simples

151
00:07:32,000 --> 00:07:35,160
tabela que parecia bastante
feio, e talvez haja

152
00:07:35,160 --> 00:07:38,650
uma maneira de torná-lo melhor com
CSS, para torná-la realmente olhar

153
00:07:38,650 --> 00:07:41,120
mais como uma multiplicação
mesa, ou algo assim

154
00:07:41,120 --> 00:07:43,730
que não está apenas preso em conjunto
com nenhuma divisão real

155
00:07:43,730 --> 00:07:45,532
entre as linhas e as colunas.

156
00:07:45,532 --> 00:07:47,490
Então vamos cabeça para
CS50 IDE, e dê uma olhada

157
00:07:47,490 --> 00:07:50,780
a forma como o CSS pode, de certa forma, tweak
o que começamos antes,

158
00:07:50,780 --> 00:07:53,290
e torná-lo algo muito melhor.

159
00:07:53,290 --> 00:07:55,650
>> Então, nós estamos em CS50 IDE
agora, e se não familiar,

160
00:07:55,650 --> 00:07:58,710
vamos puxar para cima neste
tabela que página HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML basicamente
apenas define o conteúdo

162
00:08:01,090 --> 00:08:05,044
de um multiple-- que era suposto ser
uma mesa de quatro por quatro multiplicação.

163
00:08:05,044 --> 00:08:06,210
É bastante simples.

164
00:08:06,210 --> 00:08:09,410
E nós pensamos que seria
olhar muito bem organizado.

165
00:08:09,410 --> 00:08:15,277
Mas, na verdade, quando visualizar esta página,
vemos que é uma espécie de feio, certo?

166
00:08:15,277 --> 00:08:16,860
É evidente que temos linhas e colunas aqui.

167
00:08:16,860 --> 00:08:18,350
Há algum tipo de separação.

168
00:08:18,350 --> 00:08:20,040
Mas não é uma separação significativa.

169
00:08:20,040 --> 00:08:23,105
Nós não estamos realmente recebendo
demasiada informação aqui.

170
00:08:23,105 --> 00:08:25,730
E não há nenhuma separação entre
as linhas e colunas em termos

171
00:08:25,730 --> 00:08:28,460
das regras horizontais ou verticais.

172
00:08:28,460 --> 00:08:31,530
Nós provavelmente poderia fazer isso
olhar um pouco melhor.

173
00:08:31,530 --> 00:08:32,934
Então, vamos tentar.

174
00:08:32,934 --> 00:08:34,559
Então eu vou para fechar este guia aqui em cima.

175
00:08:34,559 --> 00:08:37,434
E eu vou fechar minha table.HTML,
e eu tenho uma outra versão aqui

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

177
00:08:39,490 --> 00:08:40,655
Nós vamos abrir isso.

178
00:08:40,655 --> 00:08:42,530
O corpo da página é
basicamente o mesmo,

179
00:08:42,530 --> 00:08:44,238
mas eu mudei um
pouco na parte superior.

180
00:08:44,238 --> 00:08:47,132
E eu vou rolar para cima aqui.

181
00:08:47,132 --> 00:08:49,340
Observe que, desta vez, sou
usando tags de estilo incorporadas.

182
00:08:49,340 --> 00:08:53,550
Eu abri uma marca de estilo, e eu estou agora
a definição de uma folha de estilo CSS apenas no interior

183
00:08:53,550 --> 00:08:54,310
do mesmo.

184
00:08:54,310 --> 00:08:56,310
Eu tenho um estilo que diz: mesa.

185
00:08:56,310 --> 00:08:58,170
Esse é o meu seletor de tags.

186
00:08:58,170 --> 00:09:01,340
Eu não estou usando ponto ou de hash,
que eu estaria fazendo se eu

187
00:09:01,340 --> 00:09:03,710
estava usando um ID ou um seletor de classe.

188
00:09:03,710 --> 00:09:06,190
Eu tenho um seletor de tag tabela aqui--.

189
00:09:06,190 --> 00:09:10,090
Este estilo vai
se aplicam a cada marca de tabela.

190
00:09:10,090 --> 00:09:14,950
Aparentemente eu quero colocar um
pixel de largura, borda azul sólida,

191
00:09:14,950 --> 00:09:15,779
dentro da minha mesa.

192
00:09:15,779 --> 00:09:18,320
Isso soa como seria provavelmente
ajudar a situação, certo?

193
00:09:18,320 --> 00:09:20,320
Nós vamos ter
as coisas parecem muito melhor.

194
00:09:20,320 --> 00:09:21,190
Então, isso é ótimo.

195
00:09:21,190 --> 00:09:23,540
Estilisticamente, eu tenho apenas
incorporado meu estilo aqui.

196
00:09:23,540 --> 00:09:25,100
É certamente um
forma aceitável para fazê-lo.

197
00:09:25,100 --> 00:09:26,391
Vamos ver o que isso parece.

198
00:09:26,391 --> 00:09:29,790
Então, eu vou voltar aqui em baixo, e
Vou irá visualizar meu table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Bem, isso não é bem o que eu queria,
mas é exatamente o que pedimos para.

201
00:09:36,470 --> 00:09:39,530
Nós dissemos que este estilo é
indo para aplicar para a nossa mesa.

202
00:09:39,530 --> 00:09:43,810
Nossa mesa tem agora um um pixel
ampla, sólida borda azul em torno dele.

203
00:09:43,810 --> 00:09:46,237
Nós não estamos realmente recebendo
nas células da tabela.

204
00:09:46,237 --> 00:09:47,570
Estamos apenas começando na mesa.

205
00:09:47,570 --> 00:09:49,310
Então CSS trabalhou.

206
00:09:49,310 --> 00:09:51,890
Ele aplicou uma
folha de estilo para a nossa mesa.

207
00:09:51,890 --> 00:09:53,981
Mas não chegou a fazer
o que queríamos fazer.

208
00:09:53,981 --> 00:09:55,730
Como é que vamos começar a fazer
o que quer que ele faça?

209
00:09:55,730 --> 00:09:59,287
>> Bem, vamos dar uma olhada em mais um
versão deste em table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Então, eu estou indo só para fechar essas guias.

211
00:10:00,870 --> 00:10:03,890
Eu vou voltar aqui para o meu
árvore de arquivos, e abrir table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Mais uma vez, ele vai ficar bonita
semelhante aqui no início.

214
00:10:10,350 --> 00:10:14,460
Mas aviso, desta vez, em vez de usar
uma folha de estilo embutida exatamente lá,

215
00:10:14,460 --> 00:10:18,870
Vou ligar em um
folha de estilo usando a tag link.

216
00:10:18,870 --> 00:10:22,480
Então, eu estou ligando aparentemente em um
estilo chamado tables.CSS,

217
00:10:22,480 --> 00:10:25,090
e esta é igual a bem
stylesheet apenas means-- bem,

218
00:10:25,090 --> 00:10:28,645
o que é esse arquivo em relação ao que
Estou doing-- é uma folha de estilo que eu sou

219
00:10:28,645 --> 00:10:29,821
usando para minha página.

220
00:10:29,821 --> 00:10:32,320
Então, se eu realmente quero ver o que
Eu estou fazendo com o CSS aqui,

221
00:10:32,320 --> 00:10:35,010
Eu preciso ir aberto que
table.CSS arquivo também.

222
00:10:35,010 --> 00:10:37,490
Então, nós vamos voltar aqui
novamente para a nossa árvore de arquivos.

223
00:10:37,490 --> 00:10:38,660
Há table.CSS.

224
00:10:38,660 --> 00:10:40,490
Vamos colocá-la aberta.

225
00:10:40,490 --> 00:10:43,070
Agora estamos vendo um pouco da CSS.

226
00:10:43,070 --> 00:10:45,630
Aparentemente, eu tenho um par
de coisas acontecendo aqui.

227
00:10:45,630 --> 00:10:48,950
Eu aparentemente quer pôr um cinco
pixel de largura, borda vermelha sólida,

228
00:10:48,950 --> 00:10:50,287
em torno de minha mesa.

229
00:10:50,287 --> 00:10:52,870
Nós já sabemos que o que está acontecendo
ir apenas no perímetro.

230
00:10:52,870 --> 00:10:56,180
Vimos que em table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Com cada linha, I
aparentemente deseja especificar

232
00:10:58,770 --> 00:11:01,950
que a altura da linha é de 50 pixels de altura.

233
00:11:01,950 --> 00:11:05,680
Assim, para cada linha, lembre-
isso é o que a tag tr faz,

234
00:11:05,680 --> 00:11:08,550
Eu estou fazendo isso 50 pixels de altura.

235
00:11:08,550 --> 00:11:09,804
>> Por último, eu tenho esse comentário.

236
00:11:09,804 --> 00:11:11,470
E é assim que nós fazemos comentários no CSS.

237
00:11:11,470 --> 00:11:16,174
É muito semelhante a aproveitar bloco
Comentários estrela barra sintaxe.

238
00:11:16,174 --> 00:11:17,090
Todo o texto que você quer.

239
00:11:17,090 --> 00:11:19,470
Não há nenhuma barra barra embora em CSS.

240
00:11:19,470 --> 00:11:23,400
Para comentários in-line curtos, temos
para usar este formato particular aqui.

241
00:11:23,400 --> 00:11:26,830
Parece que eu estou fazendo um
monte de coisas na minha tags td.

242
00:11:26,830 --> 00:11:29,710
Lembre-se tags td, ou mesa
dados, o que realmente são apenas

243
00:11:29,710 --> 00:11:32,210
as colunas no interior de
nossas linhas e, aparentemente,

244
00:11:32,210 --> 00:11:35,090
para cada pedaço de dados
na minha mesa, eu quero

245
00:11:35,090 --> 00:11:38,850
para definir a cor de fundo para
ser preto, a cor a ser branca,

246
00:11:38,850 --> 00:11:40,320
cor é cor de primeiro plano.

247
00:11:40,320 --> 00:11:42,360
Portanto, esta vai ser
o texto da minha página.

248
00:11:42,360 --> 00:11:45,140
Eu quero uma pia batismal grande, 22
apontar fonte, e eu quero

249
00:11:45,140 --> 00:11:47,001
que ele seja do tipo de letra, Geórgia.

250
00:11:47,001 --> 00:11:48,750
Então eu não vou
tem a fonte padrão.

251
00:11:48,750 --> 00:11:51,820
Eu estou indo para especificar a Geórgia, que
é uma dessas fontes seguras web

252
00:11:51,820 --> 00:11:53,830
que já vimos antes.

253
00:11:53,830 --> 00:11:57,284
Eu quero o meu texto a ser alinhado
centralmente, no meio da caixa,

254
00:11:57,284 --> 00:11:59,450
Eu não quero que ele seja deixado
alinhado ou alinhado à direita.

255
00:11:59,450 --> 00:12:03,461
E eu quero a minha largura da coluna
para ser de 50 pixels de largura bem.

256
00:12:03,461 --> 00:12:05,210
Vamos dar uma olhada
o que isso parece,

257
00:12:05,210 --> 00:12:07,470
e ver se esta é talvez uma melhoria.

258
00:12:07,470 --> 00:12:12,890
Então, eu estou indo para ir para table3.HTML, que
recall, inclui table.CSS como um link,

259
00:12:12,890 --> 00:12:14,830
e vamos visualizá-lo.

260
00:12:14,830 --> 00:12:16,800
Isso é muito melhor, certo?

261
00:12:16,800 --> 00:12:20,004
Este é realmente começando a olhar um
muito mais como uma tabela de multiplicação.

262
00:12:20,004 --> 00:12:21,920
Eu tenho que borda vermelha
em torno de minha mesa, mas agora

263
00:12:21,920 --> 00:12:26,700
Eu também especificou que
cada linha é de 50 pixels de largura,

264
00:12:26,700 --> 00:12:30,220
ou é 50 pixels tall-- desculpa
me-- cada coluna é de 50 pixels de largura.

265
00:12:30,220 --> 00:12:34,251
Os dados em cada coluna, e apenas
os dados, tem um fundo preto.

266
00:12:34,251 --> 00:12:36,000
É por isso que aqueles
linhas brancas estão lá.

267
00:12:36,000 --> 00:12:38,836
Uma vez que o espaço na
entre todas as células,

268
00:12:38,836 --> 00:12:40,710
não é uma fronteira em
e de si mesmo, é só

269
00:12:40,710 --> 00:12:43,170
Eu só estou preenchendo o
As células, que na verdade

270
00:12:43,170 --> 00:12:46,310
faz com que as bordas da tabela, o que
aparentemente, existia o tempo todo, ele

271
00:12:46,310 --> 00:12:47,887
era apenas linhas brancas finas.

272
00:12:47,887 --> 00:12:48,720
Agora eles estão visíveis.

273
00:12:48,720 --> 00:12:50,380
Agora eles saltam na tela.

274
00:12:50,380 --> 00:12:52,920
E por isso esta é uma forma muito simples
folha de estilo que eu apliquei,

275
00:12:52,920 --> 00:12:56,850
e agora minha mesa parece muito mais como
uma mesa de quatro por quatro multiplicação,

276
00:12:56,850 --> 00:13:00,950
em vez de apenas uma bagunça confusa, onde
tudo o que é claramente linhas e colunas,

277
00:13:00,950 --> 00:13:03,717
mas não super bem organizado.

278
00:13:03,717 --> 00:13:06,800
Nós realmente estamos apenas arranhando a superfície
de que você pode fazer com CSS aqui.

279
00:13:06,800 --> 00:13:10,330
Felizmente, a documentação CSS
é bastante simples.

280
00:13:10,330 --> 00:13:14,000
Você vai usar vários dos seus
atributos, com bastante frequência.

281
00:13:14,000 --> 00:13:16,087
Os que falamos
anteriormente neste vídeo.

282
00:13:16,087 --> 00:13:18,170
Há vários que você
provavelmente não vai usar todos.

283
00:13:18,170 --> 00:13:19,469
E isso é bom, também.

284
00:13:19,469 --> 00:13:22,010
Mas só sei que há uma
grande quantidade de documentação lá fora.

285
00:13:22,010 --> 00:13:25,110
Assim, mesmo se nós não cobrir tudo,
você certamente não é deixado em seu próprio país.

286
00:13:25,110 --> 00:13:26,780
Mas CSS é realmente divertido
para experimentar.

287
00:13:26,780 --> 00:13:29,040
E eu gostaria fortemente incentivamos
para brincar com suas páginas web,

288
00:13:29,040 --> 00:13:32,180
e veja como você pode torná-los
olhar e sentir para melhorar o usuário

289
00:13:32,180 --> 00:13:34,790
experiência de visitar sua página.

290
00:13:34,790 --> 00:13:35,710
Eu sou Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Este é CS50.

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