1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [Música tocando] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON Buchholtz-AU: Então estamos basicamente só vai 5 00:00:12,224 --> 00:00:14,629 para dar-lhe um resumo de CSS, porque sabemos 6 00:00:14,629 --> 00:00:16,420 que não foi coberta em todas as secções. 7 00:00:16,420 --> 00:00:20,090 E nós realmente queremos ter certeza de que você caras têm essa ferramenta à sua disposição, 8 00:00:20,090 --> 00:00:24,790 porque tem a capacidade de fazer seus sites olhar muito mais bonita. 9 00:00:24,790 --> 00:00:28,660 >> E se você está construindo um site, em seguida, você provavelmente vai querer torná-la bonita. 10 00:00:28,660 --> 00:00:31,372 Quero dizer, você não tem que, mas eu sugeri-lo. [Risos] 11 00:00:31,372 --> 00:00:35,430 Se você quiser que os usuários de usá-lo, você pode queremos torná-lo um pouco [inaudível]. 12 00:00:35,430 --> 00:00:39,130 Então, vamos tentar dar-lhe apenas algumas ferramentas básicas e compreensão, 13 00:00:39,130 --> 00:00:42,340 de modo que quando você sai e você está pesquisando coisas sobre CSS, 14 00:00:42,340 --> 00:00:45,902 não é completar jargão, como CSS, por vezes, ser. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Yeah. 16 00:00:47,240 --> 00:00:49,930 Allison disse que muito bem. 17 00:00:49,930 --> 00:00:53,250 Então eu acho que a primeira coisa que deve começar com o que é CSS? 18 00:00:53,250 --> 00:00:55,750 Então CSS é impressionante. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON Buchholtz-AU: Isso é o nome do nosso seminário. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Yeah. 22 00:00:58,434 --> 00:01:00,130 É muito importante que Você entende que ao então. 23 00:01:00,130 --> 00:01:03,090 Se você só tirar uma coisa, é que o CSS se impressionante. 24 00:01:03,090 --> 00:01:06,180 Dois é CSS significa Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Assim, em sua essência, é CSS uma folha de estilo, o que significa 26 00:01:10,380 --> 00:01:13,200 ele permite que você para denominar uma página web. 27 00:01:13,200 --> 00:01:16,609 E então o que isso significa, é uma maneira de adicionar estilo para seus sites. 28 00:01:16,609 --> 00:01:18,900 Então, pelo estilo, queremos dizer tudo que não está structural-- 29 00:01:18,900 --> 00:01:24,350 assim coisas como cores, fundo imagens, fronteiras, como, preenchimento, 30 00:01:24,350 --> 00:01:25,040 margens. 31 00:01:25,040 --> 00:01:27,310 Vamos falar sobre o que tudo isso significa que daqui a pouco. 32 00:01:27,310 --> 00:01:30,110 >> Então, nós temos apenas ido em frente e abriu tanto daqueles em gedit. 33 00:01:30,110 --> 00:01:32,680 Portanto, este é index.html. 34 00:01:32,680 --> 00:01:34,800 E este é main.css. 35 00:01:34,800 --> 00:01:36,829 Então main.css não tem nada. 36 00:01:36,829 --> 00:01:38,412 ALLISON Buchholtz-AU: No estilo até agora. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Nenhum. 38 00:01:39,245 --> 00:01:42,577 E como você vai ver, é um site muito feio. 39 00:01:42,577 --> 00:01:44,160 ALLISON Buchholtz-AU: É simplesmente. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Yeah. 41 00:01:45,820 --> 00:01:49,150 Sim, não é feio, é só minimalista. 42 00:01:49,150 --> 00:01:53,430 E então aqui temos index.html. 43 00:01:53,430 --> 00:01:55,729 E assim, para uma rápida recapitulação do HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 você quer apenas falar sobre a página? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON Buchholtz-AU: Yeah. 46 00:01:58,395 --> 00:02:01,100 Então, obviamente, temos o nosso HTML tag, que acaba de arquivo HTML nomes. 47 00:02:01,100 --> 00:02:07,080 Temos o nosso cabeçalho aqui, com CSS Awesomeness, which-- se você voltar. 48 00:02:07,080 --> 00:02:07,720 Onde fica isso? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Sim, você pode ver. 51 00:02:10,301 --> 00:02:12,092 ALLISON Buchholtz-AU: E observe o cabeçalho 52 00:02:12,092 --> 00:02:14,120 é este cabeçalho guia até aqui. 53 00:02:14,120 --> 00:02:17,130 E, em seguida, "Olá, mundo!" é o texto que temos apenas 54 00:02:17,130 --> 00:02:19,620 exibindo na web página, que é-- voltar. 55 00:02:19,620 --> 00:02:21,290 Voltar. 56 00:02:21,290 --> 00:02:24,287 Qual é apenas em nosso corpo aqui-- o texto sem formatação. 57 00:02:24,287 --> 00:02:26,120 Além disso, uma coisa a notar, se você olhar aqui, 58 00:02:26,120 --> 00:02:29,410 Tomas trocou-se estes dois do nosso slide. 59 00:02:29,410 --> 00:02:32,035 Então, enquanto você tem tudo três deles, você está bem. 60 00:02:32,035 --> 00:02:34,044 Eles podem estar em qualquer ordem que eles querem. 61 00:02:34,044 --> 00:02:39,368 O que é mais importante é apenas isso você tem cada uma dessas três coisas. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Adicionar um tipo doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON Buchholtz-AU: Yeah. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Yeah. 66 00:02:43,068 --> 00:02:43,769 Com estilo. 67 00:02:43,769 --> 00:02:46,102 ALLISON Buchholtz-AU: Aparentemente, meus microfones não gosta de mim. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, dá-nos um segundo apenas enquanto Allison troca seu microfone. 69 00:02:49,650 --> 00:02:50,500 Então, sim. 70 00:02:50,500 --> 00:02:52,030 Portanto, temos nossa página principal. 71 00:02:52,030 --> 00:02:53,890 É uma espécie de unstyled. 72 00:02:53,890 --> 00:02:54,780 Nós não temos muito. 73 00:02:54,780 --> 00:02:57,110 Nós apenas temos basicamente texto. 74 00:02:57,110 --> 00:02:59,470 Nós temos a folha de estilo. 75 00:02:59,470 --> 00:03:00,220 Nós temos o título. 76 00:03:00,220 --> 00:03:04,020 Então, só bare-desossada componentes fazer um site. 77 00:03:04,020 --> 00:03:08,880 >> Então, a partir daí, vamos falar sobre o que é CSS 78 00:03:08,880 --> 00:03:11,270 e o que parece e tudo isso. 79 00:03:11,270 --> 00:03:12,047 Assim, por isso-- 80 00:03:12,047 --> 00:03:13,755 ALLISON Buchholtz-AU: Voltar para os slides. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Voltar para os slides. 82 00:03:15,200 --> 00:03:17,240 E Allison pode assumir. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON Buchholtz-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 OK. 85 00:03:19,220 --> 00:03:22,360 Assim, no seu arquivo CSS, você vai ter 86 00:03:22,360 --> 00:03:25,010 um monte dessas coisas chamados seletores. 87 00:03:25,010 --> 00:03:27,420 Esse será apenas o base de seu arquivo CSS. 88 00:03:27,420 --> 00:03:29,480 É só passar a ser muitos e muitos destes. 89 00:03:29,480 --> 00:03:30,780 Assim, o selector de. 90 00:03:30,780 --> 00:03:32,649 Esta é apenas a anatomia geral. 91 00:03:32,649 --> 00:03:35,190 Nós vamos passar por exemplos, porque se você nunca caras 92 00:03:35,190 --> 00:03:38,400 assisti minha seção, eu me sinto como coisas em abstrato 93 00:03:38,400 --> 00:03:39,400 realmente não faz sentido. 94 00:03:39,400 --> 00:03:41,110 Ele sempre ajuda a ver os exemplos. 95 00:03:41,110 --> 00:03:42,420 >> Portanto, temos alguns selector. 96 00:03:42,420 --> 00:03:49,120 Isso vai ser um identificador para o que queremos que o estilo para aplicar. 97 00:03:49,120 --> 00:03:52,220 E então nós podemos ter qualquer conjunto de regras e valores. 98 00:03:52,220 --> 00:03:55,680 Então seletores que você pode ver poderia ser algo como corpo, 99 00:03:55,680 --> 00:04:00,262 ou parágrafo com P, ou cabeçalho, ou o que quer, 100 00:04:00,262 --> 00:04:02,000 tudo o que você quer que seus tags HTML para ser. 101 00:04:02,000 --> 00:04:03,570 >> Portanto, neste caso, temos corpo. 102 00:04:03,570 --> 00:04:06,985 E nós temos uma regra, que esta corresponde 103 00:04:06,985 --> 00:04:09,610 para o que seu estilo se aplica. 104 00:04:09,610 --> 00:04:12,720 Portanto, neste caso, temos cor de fundo e peso da fonte. 105 00:04:12,720 --> 00:04:16,200 Então, isso vai mudar o fundo de qualquer coisa 106 00:04:16,200 --> 00:04:19,640 dentro de qualquer tag corpo do nosso arquivo HTML. 107 00:04:19,640 --> 00:04:22,810 E vai dar que este valor luz azul. 108 00:04:22,810 --> 00:04:24,820 >> Por isso, vai fazer a fundo azul claro. 109 00:04:24,820 --> 00:04:28,660 E então qualquer coisa dentro do corpo é vai ter um peso negrito. 110 00:04:28,660 --> 00:04:31,142 Por isso, só vai negrito todo o nosso texto. 111 00:04:31,142 --> 00:04:32,970 E este é apenas um selector. 112 00:04:32,970 --> 00:04:34,680 Mas você poderia ter muito muitos destes. 113 00:04:34,680 --> 00:04:38,730 E como nós vamos mostrar depois, um pouco mais sobre a forma como 114 00:04:38,730 --> 00:04:40,709 que as obras e mais exemplos de lá. 115 00:04:40,709 --> 00:04:41,750 Qualquer coisa que você quer adicionar? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: No. 117 00:04:42,499 --> 00:04:43,500 Allison tem. 118 00:04:43,500 --> 00:04:46,144 Nós apenas estamos indo para cortar uma exemplo aqui no nosso exemplo site. 119 00:04:46,144 --> 00:04:47,310 Então vamos realmente tomar esta. 120 00:04:47,310 --> 00:04:48,620 É perfeito. 121 00:04:48,620 --> 00:04:54,460 Então, eu estou indo só para copiar e colar que a direita em nosso arquivo main.css. 122 00:04:54,460 --> 00:04:56,530 E eu estou indo para salvá-lo. 123 00:04:56,530 --> 00:04:59,190 E então vamos executá-lo. 124 00:04:59,190 --> 00:05:01,600 Assim, nota lado, um dos a maioria das coisas frustrantes 125 00:05:01,600 --> 00:05:04,490 é, se você não salvar um arquivo, e em seguida, você, como, recarregar a página, 126 00:05:04,490 --> 00:05:07,450 e como, porque não é a mudança acontecendo? 127 00:05:07,450 --> 00:05:07,950 Isso acontece. 128 00:05:07,950 --> 00:05:14,230 Então, aqui, vimos que fizemos a nossa website um fundo azul claro 129 00:05:14,230 --> 00:05:16,560 e algum texto em negrito. 130 00:05:16,560 --> 00:05:20,730 >> Gostaria também de mencionar, se você caras têm perguntas sobre qualquer coisa 131 00:05:20,730 --> 00:05:23,622 estamos fazendo, faça o favor livre para nos parar e perguntar-nos. 132 00:05:23,622 --> 00:05:25,330 Nós estamos totalmente dispostos para responder perguntas. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON Buchholtz-AU: Obviamente, com CSS, tudo se baseia em si. 135 00:05:31,930 --> 00:05:34,107 Portanto, se uma coisa não faz faz sentido agora, nós 136 00:05:34,107 --> 00:05:35,690 Não quero que a afundá-lo mais tarde. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Então, vamos tipo de dissecar isso. 139 00:05:41,930 --> 00:05:44,210 Então você quer começar com o selector aqui? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON Buchholtz-AU: Yeah. 141 00:05:45,979 --> 00:05:48,270 Como eu estava dizendo antes, o corpo é apenas o nosso selector aqui. 142 00:05:48,270 --> 00:05:50,950 Então, se vamos voltar para a nossa ah index--. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Que eu apenas fechado. 144 00:05:53,245 --> 00:05:54,530 Dê-me um segundo. 145 00:05:54,530 --> 00:05:58,286 Então File, Open, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON Buchholtz-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Então, se você observar aqui, nós ter essas tags do corpo, certo? 148 00:06:02,710 --> 00:06:06,270 Assim, o selector de apenas corresponde as marcas que nós estamos falando. 149 00:06:06,270 --> 00:06:07,670 Então corpo aqui. 150 00:06:07,670 --> 00:06:10,315 Então, o que nós estamos dizendo é tudo-- podemos voltar? 151 00:06:10,315 --> 00:06:12,065 Eu gostaria de poder apenas como tocar na tela. 152 00:06:12,065 --> 00:06:14,410 Seria muito mais legal. 153 00:06:14,410 --> 00:06:17,150 >> Então, qualquer coisa dentro daqueles tags do corpo, que vimos 154 00:06:17,150 --> 00:06:19,637 era apenas, como, o texto, e o corpo em geral 155 00:06:19,637 --> 00:06:20,970 refere-se, assim, ao fundo. 156 00:06:20,970 --> 00:06:22,720 Se você quiser mudar o fundo, 157 00:06:22,720 --> 00:06:25,090 que vai ser em uma tag corpo. 158 00:06:25,090 --> 00:06:27,120 Só tem essas regras aplicadas a eles. 159 00:06:27,120 --> 00:06:32,040 >> Então, se tivéssemos de ir para index.html e- na verdade, 160 00:06:32,040 --> 00:06:33,840 podemos ter alguma coisa fora do corpo? 161 00:06:33,840 --> 00:06:37,340 Se tivéssemos, como, um rodapé ou alguma coisa, não seria aplicável a este. 162 00:06:37,340 --> 00:06:40,900 Mas qualquer coisa dentro essas tags do corpo vai 163 00:06:40,900 --> 00:06:44,960 a ser afetados por este órgão selector que fizemos. 164 00:06:44,960 --> 00:06:47,405 Então, se você tivesse que digitar outra coisa há-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Vamos conseguir isso. 166 00:06:49,400 --> 00:06:55,330 Então, se tivéssemos uma div-- de modo que é apenas uma outra marca que você pode ter. 167 00:06:55,330 --> 00:06:56,350 Eu estou indo para a fechar. 168 00:06:56,350 --> 00:06:58,280 Ou vamos fazer deste um parágrafo. 169 00:06:58,280 --> 00:07:01,430 Então p significa parágrafo. 170 00:07:01,430 --> 00:07:02,560 E dentro desse parágrafo. 171 00:07:02,560 --> 00:07:05,650 E então eu digo: "Este é um texto." 172 00:07:05,650 --> 00:07:06,369 Com estilo. 173 00:07:06,369 --> 00:07:09,160 E então eu fiz essa regra se aplica a um ponto em vez do corpo. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Você vai ver como ele se aplica somente a o parágrafo recém-formada, à direita, 176 00:07:17,320 --> 00:07:18,892 não a coisa toda. 177 00:07:18,892 --> 00:07:20,090 Isso faz sentido? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON Buchholtz-AU: Então, isso é tudo o corpo, 179 00:07:21,840 --> 00:07:24,450 mas agora o nosso selector apenas corresponde ao parágrafo. 180 00:07:24,450 --> 00:07:27,050 Então, nós apenas temos negrito e azul para este ponto específico, 181 00:07:27,050 --> 00:07:30,760 porque esta é a única coisa que é colocado dentro da tag p. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Isso faz sentido classificar de como as coisas encapsular outras coisas? 183 00:07:35,349 --> 00:07:38,140 ALLISON Buchholtz-AU: Além disso, apenas para dizer, como, uma das melhores maneiras 184 00:07:38,140 --> 00:07:40,889 para realmente se sentir confortável com CSS é apenas fazer coisas como esta, 185 00:07:40,889 --> 00:07:42,050 apenas experimentá-lo. 186 00:07:42,050 --> 00:07:46,700 É muito simples de digitar algo para fora, clique em Atualizar, e ver o que acontece. 187 00:07:46,700 --> 00:07:48,940 E como a maioria dos CS, experimentação pode, muitas vezes 188 00:07:48,940 --> 00:07:51,790 levar a uma muito melhor compreensão intuitiva. 189 00:07:51,790 --> 00:07:54,432 Ainda mais do que nós apenas, como, falando com você. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absolutely 100% de acordo sobre esse ponto. 191 00:07:58,350 --> 00:08:02,430 Então, se nós voltar a este, vamos começar dissecando exatamente o que estes dois fazem. 192 00:08:02,430 --> 00:08:04,550 Portanto, temos duas regras sobre este assunto. 193 00:08:04,550 --> 00:08:07,420 Assim, o primeiro é a cor de fundo. 194 00:08:07,420 --> 00:08:10,590 E você vê que nós configurá-lo igual a um valor, a luz azul. 195 00:08:10,590 --> 00:08:15,009 >> Assim, em CSS, CSS é uma espécie de muito solto sobre como 196 00:08:15,009 --> 00:08:16,300 você está autorizado a definir a cor. 197 00:08:16,300 --> 00:08:17,800 Assim, você pode defini-los pelo nome. 198 00:08:17,800 --> 00:08:20,650 Você também pode fazer algo como "vermelho". 199 00:08:20,650 --> 00:08:25,270 E, em seguida, se voltarmos a este, você vai ver que o fundo é vermelho. 200 00:08:25,270 --> 00:08:29,040 Você também pode obter realmente-- Eu acho que você pode ficar muito criativo com isso, 201 00:08:29,040 --> 00:08:29,540 você não pode? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON Buchholtz-AU: I acho que você pode usar hex. 203 00:08:31,170 --> 00:08:31,250 Não pode? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Yeah. 205 00:08:32,083 --> 00:08:32,969 Então você pode usar hex. 206 00:08:32,969 --> 00:08:34,490 Mas estou pensando-name sábio. 207 00:08:34,490 --> 00:08:35,385 Não estão lá? 208 00:08:35,385 --> 00:08:37,260 ALLISON Buchholtz-AU: Você pode fazer muito poucos. 209 00:08:37,260 --> 00:08:43,350 Muito parecido com a maioria das cores que você pode nome-- como, eu acho que o salmão é um. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Vamos tentar salmão. 211 00:08:45,322 --> 00:08:47,530 ALLISON Buchholtz-AU: I acho chartreuse está lá. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Yeah. 213 00:08:48,050 --> 00:08:48,550 Veja? 214 00:08:48,550 --> 00:08:50,080 Então você pode ficar muito criativo. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON Buchholtz-AU: Você poderia ficar muito criativo. 216 00:08:52,246 --> 00:08:55,750 Como, se você pode pensar no nome da cor, é provavelmente lá. 217 00:08:55,750 --> 00:08:57,840 Se você realmente quer multa detalhe, você pode ir hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Yeah. 219 00:08:58,673 --> 00:08:59,390 Assim hexadecimal. 220 00:08:59,390 --> 00:09:05,280 Se vocês lembram esta de volta de seu antigo PSET, Imagem Recuperar, 221 00:09:05,280 --> 00:09:08,300 vocês tiveram que lidar com esses valores hexadecimais. 222 00:09:08,300 --> 00:09:15,280 E tipo de recapitular o que é isso, hex tem três valores armazenados nele. 223 00:09:15,280 --> 00:09:17,250 Portanto, é em grupos de dois incrementos. 224 00:09:17,250 --> 00:09:19,300 Os dois primeiros representam o valor vermelho. 225 00:09:19,300 --> 00:09:22,420 O segundo representa o valor de verde. 226 00:09:22,420 --> 00:09:25,020 E a última é azul? 227 00:09:25,020 --> 00:09:30,050 >> Então FF acontece para representar um hexadecimal 255. 228 00:09:30,050 --> 00:09:35,480 Então você tem 255 vermelho, 255 verde, e 0 para azul. 229 00:09:35,480 --> 00:09:37,670 E os valores variam entre 0 e 255. 230 00:09:37,670 --> 00:09:38,350 >> AUDIÊNCIA: Certo. 231 00:09:38,350 --> 00:09:41,472 Então, basicamente, nós poderíamos pesquisar a internet para qualquer cor que queremos, 232 00:09:41,472 --> 00:09:43,912 e identificar a verdade conhecida cor espectro de combinação, 233 00:09:43,912 --> 00:09:45,130 e, depois, pode colocá-lo? 234 00:09:45,130 --> 00:09:46,380 ALLISON Buchholtz-AU: Exatamente. 235 00:09:46,380 --> 00:09:52,900 Então você tem praticamente o controle completo sobre as cores que você quer dentro CSS. 236 00:09:52,900 --> 00:09:55,069 Vamos falar sobre imagens de fundo mais tarde? 237 00:09:55,069 --> 00:09:56,110 Ou queremos fazer isso? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Yeah. 239 00:09:56,240 --> 00:09:57,010 Absolutamente. 240 00:09:57,010 --> 00:10:00,830 Então, primeiro, só para mostrar que vermelho e verde é amarelo. 241 00:10:00,830 --> 00:10:03,120 E se você precisar de alguma ajuda para encontrar isso, você 242 00:10:03,120 --> 00:10:05,575 pode Google algo como "color picker". 243 00:10:05,575 --> 00:10:07,200 ALLISON Buchholtz-AU: Oh, isso é tão bom. 244 00:10:07,200 --> 00:10:09,090 Eu amo o Color Picker. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com é um bom exemplo. 246 00:10:11,360 --> 00:10:14,580 E aqui, você vai ver que você tem um seletor de cores Photoshop-like cheio. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON Buchholtz-AU: Hum-hum. 248 00:10:14,920 --> 00:10:16,980 Além disso, as coisas legais que você está pode gerar esquemas de cores 249 00:10:16,980 --> 00:10:18,896 de modo que você não tem, like, colidir cores. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: E depois aqui está o valor hexadecimal aqui em cima. 251 00:10:22,780 --> 00:10:27,800 Então, você sempre pode encontrar online basicamente lugares para se obter o valor hexadecimal de. 252 00:10:27,800 --> 00:10:31,667 Não é uma espécie de que apenas, como, nós ver as cores do mundo em números. 253 00:10:31,667 --> 00:10:34,000 É mais do que ir em linha e encontrar o que cor que queremos, 254 00:10:34,000 --> 00:10:36,850 e, em seguida, levar o número para baixo. 255 00:10:36,850 --> 00:10:39,590 Porque é apenas um realmente fácil maneira de referenciar as coisas em CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON Buchholtz-AU: E depois há Também-- 257 00:10:40,350 --> 00:10:41,630 Eu esqueço o nome exato do site. 258 00:10:41,630 --> 00:10:43,838 Mas há definitivamente, I pensar, algo do Adobe 259 00:10:43,838 --> 00:10:48,350 que gera esquemas de cores para você, que é muito legal, porque você 260 00:10:48,350 --> 00:10:50,580 definitely-- às vezes é difícil de descobrir, 261 00:10:50,580 --> 00:10:53,729 oh, se eu quiser usar esta cor, o que poderia ser mais um útil 262 00:10:53,729 --> 00:10:56,395 para usar em outros lugares no meu site para, como, torná-lo agradável e coesa. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison está falando um por Adobe Kuler chamado, eu acho. 265 00:11:04,260 --> 00:11:04,885 É K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON Buchholtz-AU: Eu acho que sim. 267 00:11:06,259 --> 00:11:07,610 Tenho certeza de que é o único. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: O meu favorito tem sempre foi Color Scheme Designer. 269 00:11:11,050 --> 00:11:13,998 >> ALLISON Buchholtz-AU: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> TOMAS REIMERS: Qual é agora-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON Buchholtz-AU: Ah, isso é bonito. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: E você pode basicamente dizer, como, 273 00:11:18,818 --> 00:11:21,700 Quero três cores ao lado do outro. 274 00:11:21,700 --> 00:11:25,030 E então vamos fazer algo de bom. 275 00:11:25,030 --> 00:11:29,210 E então você pode obter um exemplo daquilo que pode parecer. 276 00:11:29,210 --> 00:11:32,470 E então se você passar o mouse sobre qualquer um dos -los, dá-lhe o valor hexadecimal. 277 00:11:32,470 --> 00:11:35,010 >> Então, assim como uma boa maneira de começar pensando em esquemas de cores 278 00:11:35,010 --> 00:11:39,570 ou o que as cores em um site pode ir bem em conjunto. 279 00:11:39,570 --> 00:11:45,655 Porque isso pode ser surpreendentemente não é tão fácil de escolher como você pensa. 280 00:11:45,655 --> 00:11:48,280 E, em seguida, a outra coisa legal Eu sempre achei sobre este site 281 00:11:48,280 --> 00:11:51,480 é se você bater exemplos, ele vai mostrar o que um site exemplo 282 00:11:51,480 --> 00:11:54,800 pode parecer usando esse esquema de cores. 283 00:11:54,800 --> 00:11:56,270 Enfim. 284 00:11:56,270 --> 00:11:57,863 >> Voltar ao CSS real. 285 00:11:57,863 --> 00:12:01,112 ALLISON Buchholtz-AU: Mas, obviamente, nós Conhecemos essas referências pode ser útil. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: Não, eles definitivamente pode ser útil. 287 00:12:03,195 --> 00:12:04,720 Assim, a segunda regra, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON Buchholtz-AU: Yeah. 289 00:12:05,844 --> 00:12:08,280 A segunda regra é apenas correspondente a nossa fonte. 290 00:12:08,280 --> 00:12:11,520 Portanto, o peso da fonte é apenas um tipo de-- modo que o peso seria 291 00:12:11,520 --> 00:12:15,220 estar se você quiser apenas, como, normal ou, como, fontes mais finas, 292 00:12:15,220 --> 00:12:17,251 ou, neste caso, como, negrito. 293 00:12:17,251 --> 00:12:17,750 Eu esqueço. 294 00:12:17,750 --> 00:12:21,557 Qual é o se você queria ele-- está lá um mais fino do que apenas, como, normal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: Eu realmente não saber se há um mais fino. 296 00:12:24,140 --> 00:12:24,680 ALLISON Buchholtz-AU: Eu esqueço. 297 00:12:24,680 --> 00:12:26,300 Peso Então font nós tipicamente é só usar para negrito. 298 00:12:26,300 --> 00:12:29,010 Se você quiser ficar realmente em -lo, vamos mostrar-lhe. 299 00:12:29,010 --> 00:12:34,317 W3Schools tem todos os diferentes coisas que você pode fazer por fontes. 300 00:12:34,317 --> 00:12:36,900 Mas, basicamente, se você quiser para mudar alguma coisa sobre a pia batismal, 301 00:12:36,900 --> 00:12:39,330 ele sempre vai ser, como, font-alguma coisa. 302 00:12:39,330 --> 00:12:43,450 Então vai ser como, font-family se você é tentando mudar o tipo real. 303 00:12:43,450 --> 00:12:47,390 Vai ser font-style se você quero fazê-lo como cursiva, 304 00:12:47,390 --> 00:12:49,710 ou itálico, ou outros enfeites. 305 00:12:49,710 --> 00:12:53,570 Ou mesmo font-cor, se queríamos mudar isso. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 Assim, você pode mudar isso. 308 00:12:56,925 --> 00:12:59,360 E meio que a recapitulação agora, para que você possa 309 00:12:59,360 --> 00:13:01,400 ver que temos o seletor para cima aqui. 310 00:13:01,400 --> 00:13:03,000 Temos essas chaves. 311 00:13:03,000 --> 00:13:06,735 E então nós temos regras delimitado por ponto e vírgula. 312 00:13:06,735 --> 00:13:08,100 Isso faz sentido? 313 00:13:08,100 --> 00:13:09,130 Sim? 314 00:13:09,130 --> 00:13:10,500 Com estilo. 315 00:13:10,500 --> 00:13:13,200 Então, se isso é boa-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON Buchholtz-AU: Back. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Vamos falar especificamente sobre o tipo de seletores que temos. 318 00:13:17,590 --> 00:13:19,790 Porque agora nós temos tipo de apenas mostrado tags. 319 00:13:19,790 --> 00:13:21,696 Mas vocês poderiam vê-lo plausível. 320 00:13:21,696 --> 00:13:23,570 Digamos que você tenha dois parágrafos em uma página e você 321 00:13:23,570 --> 00:13:26,087 quer ser capaz de estilo um, mas não o outro, 322 00:13:26,087 --> 00:13:29,170 você apenas não quer limitar-se ter que usar diferentes HTML real 323 00:13:29,170 --> 00:13:33,410 tags para dar-lhes diferentes estilos. 324 00:13:33,410 --> 00:13:35,995 >> Portanto, temos três básicos tipos de seletores. 325 00:13:35,995 --> 00:13:37,120 ALLISON Buchholtz-AU: Yeah. 326 00:13:37,120 --> 00:13:39,828 Portanto, temos tag, que é o que temos vindo a falar no momento. 327 00:13:39,828 --> 00:13:42,430 Então, que tipo de como seu corpo ou p. 328 00:13:42,430 --> 00:13:46,280 E então nós temos classe, que é quando defini-lo em nosso arquivo CSS, 329 00:13:46,280 --> 00:13:49,907 ele sempre vai ser ponto, o que quer você quer que o nome da sua classe para ser. 330 00:13:49,907 --> 00:13:51,490 E isso pode se aplicar a várias coisas. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Digamos que você tenha cinco parágrafos e duas das três deles 333 00:13:57,610 --> 00:14:00,580 precisa ser o mesmo estilo, você aplicaria uma classe a ele. 334 00:14:00,580 --> 00:14:03,040 E esta é apenas a forma como o fazemos. 335 00:14:03,040 --> 00:14:05,600 Nós vamos dar-lhe um exemplo de onde esta realmente aparece. 336 00:14:05,600 --> 00:14:11,030 Mas se você tivesse talvez alguma tag p, depois dele, você escreveria, 337 00:14:11,030 --> 00:14:14,170 classe é igual a quaisquer que sejam as classes você deseja aplicar a ele. 338 00:14:14,170 --> 00:14:19,280 Então o que seletores de classe que queremos aplicar a este ponto específico, 339 00:14:19,280 --> 00:14:21,300 poderíamos escrever apenas como este. 340 00:14:21,300 --> 00:14:24,080 É claro, eu acho que um exemplo irá torná-lo muito mais concreta. 341 00:14:24,080 --> 00:14:27,270 >> O outro temos é id, que denotamos 342 00:14:27,270 --> 00:14:29,707 com um hash, ou libra, ou hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON Buchholtz-AU: octothorpe. 345 00:14:32,430 --> 00:14:34,550 Isso funciona também. 346 00:14:34,550 --> 00:14:36,640 E esta deve ser realmente único. 347 00:14:36,640 --> 00:14:39,880 Eles só devem aplicar-se a uma coisa em sua página. 348 00:14:39,880 --> 00:14:43,820 Então, se isso é um parágrafo específico, ou algum item em uma lista, ou o que quer, 349 00:14:43,820 --> 00:14:45,090 este deve ser único. 350 00:14:45,090 --> 00:14:48,730 E da mesma forma que acabamos dizer, como, class = "class1 class2" 351 00:14:48,730 --> 00:14:51,577 isso pode ser apenas o id do que quer que nós temos. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Yeah. 353 00:14:52,410 --> 00:14:54,330 Então, vamos falar definitivamente sobre exemplos aqui. 354 00:14:54,330 --> 00:14:58,170 E eu estou indo só para mergulhar direto de volta para o código. 355 00:14:58,170 --> 00:15:02,090 Então, vamos olhar para o nosso HTML. 356 00:15:02,090 --> 00:15:03,960 E por isso, agora tem um parágrafo. 357 00:15:03,960 --> 00:15:05,510 Este é um texto. 358 00:15:05,510 --> 00:15:09,151 Eu só vou para modificar lo. "Este é um texto 1." 359 00:15:09,151 --> 00:15:11,150 E então nós vamos ter uma "Este é um texto 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON Buchholtz-AU: segunda. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 Então, nós temos agora "Este é um texto 2", certo? 363 00:15:16,810 --> 00:15:21,560 E vamos ver que, se recarregar a página, o que vamos encontrar 364 00:15:21,560 --> 00:15:23,067 é que nós vamos find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON Buchholtz-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Yeah. 367 00:15:24,983 --> 00:15:27,570 Nós vamos encontrar um "Este é text 1 "e" Este é um texto 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON Buchholtz-AU: E a bela cor amarela. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: E você vai ver que o nosso selector de agora, 370 00:15:31,066 --> 00:15:34,940 que se aplica a p de, ou parágrafos, afeta ambos, 371 00:15:34,940 --> 00:15:38,700 porque ambos atender a condição de que ambos são uma tag p. 372 00:15:38,700 --> 00:15:40,360 Isso faz sentido total. 373 00:15:40,360 --> 00:15:43,340 Então a questão é, bem, o que se quiséssemos só tem uma? 374 00:15:43,340 --> 00:15:46,350 Então, exatamente como Allison estava dizendo: temos duas outras maneiras de fazer isso. 375 00:15:46,350 --> 00:15:47,320 Vou começar com id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON Buchholtz-AU: Vamos começar com o id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: E ambos destes são atributos. 378 00:15:50,405 --> 00:15:53,200 Então atributos existem em HTML. 379 00:15:53,200 --> 00:15:55,600 E o que eles são é algo que você adicionar 380 00:15:55,600 --> 00:15:58,840 dentro da marca que é separar o nome da marca. 381 00:15:58,840 --> 00:16:01,301 Assim, você pode ter vários atributos. 382 00:16:01,301 --> 00:16:01,800 Sim? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON Buchholtz-AU: Eu só estava indo quer dizer, a partir do seu exemplo de PSET 7, 384 00:16:03,950 --> 00:16:06,650 se algum de vocês tentar alinhar coisas para o centro, 385 00:16:06,650 --> 00:16:08,550 você pode ter usado "Text align = center." 386 00:16:08,550 --> 00:16:10,550 E você notou que provavelmente deveria ter centrado 387 00:16:10,550 --> 00:16:12,650 seu texto ou sua barra de navegação. 388 00:16:12,650 --> 00:16:15,499 Então, isso é apenas também um atributo que você pode estar familiarizado. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Há um grupo de atributos que você vai ver. 390 00:16:18,040 --> 00:16:18,539 Sim. 391 00:16:18,539 --> 00:16:21,250 Como boa referência para PSET 7. 392 00:16:21,250 --> 00:16:23,150 Temos id. 393 00:16:23,150 --> 00:16:25,080 Você também pode ter classe, coisas como esta. 394 00:16:25,080 --> 00:16:27,250 A única marca pode ter muitos atributos. 395 00:16:27,250 --> 00:16:33,140 Então, começando com id, vamos fingir que quero ter um id de-- eu não sei. 396 00:16:33,140 --> 00:16:35,140 Vamos chamá-lo especial, porque este, estamos 397 00:16:35,140 --> 00:16:37,867 vai fazer negrito e sublinhado, e qualquer que seja. 398 00:16:37,867 --> 00:16:39,950 ALLISON Buchholtz-AU: É Vai ser super especial. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Então, isso um, temos id especial. 400 00:16:42,360 --> 00:16:48,140 Assim, a maneira de selecionar que, então, é em main.css, ao invés de ter uma tag p, 401 00:16:48,140 --> 00:16:51,500 você faz #special, OK? 402 00:16:51,500 --> 00:16:55,538 E que seleciona o coisa com id especial. 403 00:16:55,538 --> 00:16:57,295 Será que isto faz sentido para todos? 404 00:16:57,295 --> 00:16:57,920 AUDIÊNCIA: Yeah. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Portanto, agora se vamos voltar, vamos see-- gritos. 407 00:17:04,440 --> 00:17:06,240 Sim. 408 00:17:06,240 --> 00:17:09,460 Vamos ver o que ele seleciona apenas aquele com id especial. 409 00:17:09,460 --> 00:17:10,622 Sim? 410 00:17:10,622 --> 00:17:11,900 Soa bem. 411 00:17:11,900 --> 00:17:12,570 Sim. 412 00:17:12,570 --> 00:17:15,456 >> AUDIÊNCIA: Pode ter um algo atributo de ambos classe e um id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Sim. 414 00:17:16,359 --> 00:17:16,900 AUDIÊNCIA: OK. 415 00:17:16,900 --> 00:17:20,887 E então o que acontece se você, em seguida, dar- que algumas regras das CSS que o conflito? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Absolutamente. 417 00:17:21,970 --> 00:17:23,940 Nós estamos indo definitivamente para falar sobre isso. 418 00:17:23,940 --> 00:17:31,890 Então exatamente o que você estava recebendo em, você também pode ter classes. 419 00:17:31,890 --> 00:17:36,380 Então, vamos fingir que eu tinha três parágrafos e I 420 00:17:36,380 --> 00:17:38,730 queria o estilo do primeiro dois, mas não o terceiro. 421 00:17:38,730 --> 00:17:42,850 Bem, sua primeira idéia pode ser, bem, eu poderia apenas dar o segundo um id. 422 00:17:42,850 --> 00:17:45,590 Mas você não pode, porque um id, exatamente como Allison estava dizendo: 423 00:17:45,590 --> 00:17:47,330 tem de ser único. 424 00:17:47,330 --> 00:17:50,860 >> Então, ao invés de um id, o que você pode usar é que você pode usar uma classe. 425 00:17:50,860 --> 00:17:57,880 E um class-- o que permite você precisa fazer é basicamente dizer, 426 00:17:57,880 --> 00:17:59,610 esta pertence, como parte de um grupo. 427 00:17:59,610 --> 00:18:02,410 Neste caso, o nosso grupo é chamado especial. 428 00:18:02,410 --> 00:18:06,500 E o que nós vamos fazer, então, é vamos dizer-- ao invés de libra, 429 00:18:06,500 --> 00:18:08,070 vamos usar ponto. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 E note que a libra e dot só existem dentro do arquivo CSS, 432 00:18:11,950 --> 00:18:12,797 não dentro do HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON Buchholtz-AU: Sim. 434 00:18:13,880 --> 00:18:15,185 Distinção importante. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Eu tenho tinha tanta luta, 436 00:18:17,510 --> 00:18:23,990 porque eu coloquei o hash no HTML e então me senti estúpido por um longo tempo. 437 00:18:23,990 --> 00:18:27,470 Veja como ele seleciona ambos os únicos com essa classe? 438 00:18:27,470 --> 00:18:28,210 Com estilo. 439 00:18:28,210 --> 00:18:29,950 >> Agora, as coisas podem ter várias classes. 440 00:18:29,950 --> 00:18:32,790 Digamos que eu queria fazer a primeira dois têm um fundo de amarelo 441 00:18:32,790 --> 00:18:36,770 e os dois últimos têm uma cor de fonte de azul. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Eu realmente não sei por que eu quero fazer isso, mas eu posso. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON Buchholtz-AU: não pôde recomenda-se para o seu website. 445 00:18:42,401 --> 00:18:43,880 Mas para os nossos propósitos, ele vai fazer. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Não é um bom esquema de cores. 447 00:18:46,294 --> 00:18:49,210 ALLISON Buchholtz-AU: Bem, amarelo e azul são minhas cores do ensino médio. 448 00:18:49,210 --> 00:18:50,947 Eu não sei, no entanto. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison de alta escola tinha um esquema de cores grande. 450 00:18:53,530 --> 00:18:54,520 [Risos] 451 00:18:54,520 --> 00:18:59,120 Então, o que podemos chamar isso é Vamos chamar isto-- por isso temos Especial 452 00:18:59,120 --> 00:19:00,030 e temos Pretty. 453 00:19:00,030 --> 00:19:02,405 Sugiro, por isso, use nomes muito mais descritivos. 454 00:19:02,405 --> 00:19:05,820 ALLISON Buchholtz-AU: Sim, eu faria chamar este, como, amarelo ou azul. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: Nós não somos realmente fazer um site real, 456 00:19:08,314 --> 00:19:09,730 é por isso que nós não estamos fazendo isso. 457 00:19:09,730 --> 00:19:11,521 Mas se você realmente tinha um site real, você 458 00:19:11,521 --> 00:19:16,220 pode ter, como, cabeçalho artigo, conteúdo do artigo, primeira palavra, 459 00:19:16,220 --> 00:19:21,920 coisas desse tipo, que permitem que você seja muito mais descritivo. 460 00:19:21,920 --> 00:19:23,550 Estes são realmente apenas como variáveis. 461 00:19:23,550 --> 00:19:28,390 Eles devem ser nomeados de uma forma onde você pode, como-- sim, como tal. 462 00:19:28,390 --> 00:19:29,470 Perfeito. 463 00:19:29,470 --> 00:19:30,480 >> Assim, a cor de fundo. 464 00:19:30,480 --> 00:19:35,920 E então nós vamos dizer-- de modo que o maneira de mudar a cor é apenas "cor". 465 00:19:35,920 --> 00:19:38,412 E nós estamos indo para torná-lo azul. 466 00:19:38,412 --> 00:19:40,150 Isso é legal. 467 00:19:40,150 --> 00:19:42,640 Portanto, agora temos o dois primeiros têm especial. 468 00:19:42,640 --> 00:19:45,972 Próximo um vai têm "class = bonito." 469 00:19:45,972 --> 00:19:49,180 ALLISON Buchholtz-AU: E então você vai deseja adicionar "bonito" para o do meio. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 E, em seguida, para o meio, adicionar "bonita", o que acontece 472 00:19:52,970 --> 00:19:56,880 é você apenas tem um espaço. 473 00:19:56,880 --> 00:19:59,800 Assim, o atributo de classe é uma lista separada por espaço 474 00:19:59,800 --> 00:20:02,450 de todas as classes que se aplicam a essa marca. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Não é como este pertence algum tipo de classe especial chamada 477 00:20:05,750 --> 00:20:07,180 "Especial, espaço, bonito." 478 00:20:07,180 --> 00:20:10,870 Ela pertence a dois classes-- especial e bonito. 479 00:20:10,870 --> 00:20:12,492 Sim? 480 00:20:12,492 --> 00:20:14,360 Com estilo. 481 00:20:14,360 --> 00:20:17,010 >> E, em seguida, se olharmos o que acontece, estamos 482 00:20:17,010 --> 00:20:21,850 vai ver que primeiro tem fundo amarelo, texto preto. 483 00:20:21,850 --> 00:20:22,450 Segundo um-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON Buchholtz-AU: --has negrito fundo amarelo com texto azul. 485 00:20:26,160 --> 00:20:29,330 E o nosso último só tem a texto azul que lhe é atribuído. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Como seletores de trabalhar? 488 00:20:32,491 --> 00:20:32,990 Impressionante. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON Buchholtz-AU: Queremos falar sobre o conflito agora, então? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Então, sim. 491 00:20:35,780 --> 00:20:36,310 Absolutamente. 492 00:20:36,310 --> 00:20:38,380 Então, o que acontece se você ter um conflito, certo? 493 00:20:38,380 --> 00:20:44,740 Vamos fingir que o primeiro configura algo como-- 494 00:20:44,740 --> 00:20:47,240 ALLISON Buchholtz-AU: Maybe este muda o fundo? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Yeah. 496 00:20:48,090 --> 00:20:51,699 Então, nós vamos fazer "bonito" mudar o fundo de salmão. 497 00:20:51,699 --> 00:20:54,740 ALLISON Buchholtz-AU: Você é apenas com todas as grandes cores hoje, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Yeah. 499 00:20:55,573 --> 00:20:58,200 Porque eu descobri que posso usar salmão como uma cor real. 500 00:20:58,200 --> 00:21:00,270 Então, nós estamos indo só para fazer isso. 501 00:21:00,270 --> 00:21:01,770 Eu também acho que por do sol é uma cor real. 502 00:21:01,770 --> 00:21:03,103 AUDIÊNCIA: Por do sol é uma cor real? 503 00:21:03,103 --> 00:21:04,572 ALLISON Buchholtz-AU: Vamos tentar isso. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Após esta demonstração só porque no caso ele mexe-se, 505 00:21:07,735 --> 00:21:08,943 Eu não quero ser a depuração. 506 00:21:08,943 --> 00:21:11,580 Então, nós sabemos o salmão é uma cor real. 507 00:21:11,580 --> 00:21:15,626 Assim, qualquer tentativa de o que vai acontecer? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON Buchholtz-AU: Alguma idéia? 509 00:21:17,522 --> 00:21:20,002 >> AUDIÊNCIA: [inaudível]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Yeah. 511 00:21:20,920 --> 00:21:22,150 Então você tem o valor correto. 512 00:21:22,150 --> 00:21:24,930 Basicamente, ele leva o última regra que foi dado. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON Buchholtz-AU: Então isso é onde cascata entrar em vigor. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Então se lembra como nós teve que Cascading Style Sheets? 515 00:21:31,080 --> 00:21:33,660 Então, por que, nós meio que significa que temos um monte de regras 516 00:21:33,660 --> 00:21:37,115 que se aplica em cima uns dos outros, e eles podem também substituir o outro. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON Buchholtz-AU: Então o que está em baixo 518 00:21:39,380 --> 00:21:41,540 irá substituir o que está em cima. 519 00:21:41,540 --> 00:21:45,842 Você poderia ter regras que completamente negar alguma coisa de antemão. 520 00:21:45,842 --> 00:21:48,300 É também por isso que você quer ser cuidado quando você está nomeando, 521 00:21:48,300 --> 00:21:51,465 para que você não está criando regras que você está apenas substituindo completamente. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Ou talvez você quero substituir regras. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON Buchholtz-AU: Ou talvez você faz. 524 00:21:53,920 --> 00:21:54,300 Sim. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Finja que você tem um classe que se aplica a maioria das coisas, 526 00:21:57,175 --> 00:22:01,220 mas digamos que você quer mudar o cor de fundo para o vermelho e o tipo de letra 527 00:22:01,220 --> 00:22:03,140 peso para negrito para a maioria coisas, mas para um, 528 00:22:03,140 --> 00:22:06,098 só deseja a cor de fundo a ser vermelho, mas você quer todos os outros 529 00:22:06,098 --> 00:22:09,990 propriedades, você poderia fazer algo como "font-weight = normal", 530 00:22:09,990 --> 00:22:12,760 que passaria então a desfazer essa mudança ousada. 531 00:22:12,760 --> 00:22:14,480 Sim? 532 00:22:14,480 --> 00:22:17,250 Mais uma vez, a melhor maneira, eu acho que Allison disse isso, é apenas prática. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON Buchholtz-AU: Experimentação. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Prática, prática, prática e experiência. 535 00:22:20,090 --> 00:22:22,950 Eu conheço um monte de gente que acha que CSS é apenas um monte de e-cheque palpite 536 00:22:22,950 --> 00:22:25,580 no fim do dia, quando se você quer fazer something-- como, 537 00:22:25,580 --> 00:22:27,663 você tem uma idéia aproximada, mas provavelmente você ainda precisa 538 00:22:27,663 --> 00:22:31,390 experimentá-lo para certificar-se Você sabe o que se parece. 539 00:22:31,390 --> 00:22:34,482 >> AUDIÊNCIA: Quando você está aplicando aulas, mais do que um 540 00:22:34,482 --> 00:22:37,339 ao mesmo parágrafo ou seção, não é 541 00:22:37,339 --> 00:22:39,505 importa que ordem você pode digitá-los nas citações? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: Não, não em todos. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON Buchholtz-AU: O que importa é a ordem dentro de sua folha de estilo CSS. 544 00:22:45,764 --> 00:22:47,430 AUDIÊNCIA: Você poderia repetir a pergunta? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON Buchholtz-AU: dentro classe, quando você está dando aulas 547 00:22:53,990 --> 00:22:56,964 a alguma coisa no HTML, faz importa que ordem eles estão? 548 00:22:56,964 --> 00:22:58,130 Não importa a ordem. 549 00:22:58,130 --> 00:23:02,915 O que importa é a ordem do seletores de classe dentro do seu CSS, 550 00:23:02,915 --> 00:23:04,306 dentro de sua folha de estilo. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: bom som? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON Buchholtz-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: E depois vamos continuar a-- 554 00:23:11,539 --> 00:23:13,330 ALLISON Buchholtz-AU: O que temos a seguir? 555 00:23:13,330 --> 00:23:14,245 Eu esqueço. 556 00:23:14,245 --> 00:23:16,087 Oh, só temos exemplos. 557 00:23:16,087 --> 00:23:17,295 Mas nós meio que feito aqueles. 558 00:23:17,295 --> 00:23:18,990 Fizemos exemplos na mosca. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Temos que combinar os seletores em breve. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON Buchholtz-AU: Oh, nós começamos a combinar seletores. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Então alguns exemplos é que temos 562 00:23:25,260 --> 00:23:29,630 # Libra dog--, ou hashtag, ou octothorpe, ou o que quer 563 00:23:29,630 --> 00:23:32,050 que deseja chamar isso-- afiado. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON Buchholtz-AU: Cão da Sharp. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Então você tem .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Algo tem um id de cão, só há um cão na página. 568 00:23:41,600 --> 00:23:43,870 Algo tem um id gato, há apenas um gato. 569 00:23:43,870 --> 00:23:45,665 Pode haver muitos animais de estimação na página. 570 00:23:45,665 --> 00:23:47,570 É por isso que deu esse classes. 571 00:23:47,570 --> 00:23:48,740 Você tem um exemplo de p. 572 00:23:48,740 --> 00:23:50,490 E, em seguida, assim que um dos último exemplo, onde 573 00:23:50,490 --> 00:23:53,790 é algo que nós não falamos sobre, é o que acontece quando você combiná-los. 574 00:23:53,790 --> 00:23:54,580 Então p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Então, para isso, vamos voltar para o código e introduzir another-- sim. 577 00:24:02,950 --> 00:24:04,290 Então, de volta aqui. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON Buchholtz-AU: I sinto que este é realmente-- 579 00:24:04,850 --> 00:24:08,105 como apenas olhando através de exemplos é realmente o caminho para aprender isso. 580 00:24:08,105 --> 00:24:09,360 Então é isso que estamos fazendo. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Então, vamos fingir que só deseja para selecionar o texto 2, certo? 582 00:24:14,030 --> 00:24:16,530 Então, nós definitivamente não pode fazer isso com um id. 583 00:24:16,530 --> 00:24:19,620 Bem, nós poderíamos fazer isso com um ID, mas não tem um ID. 584 00:24:19,620 --> 00:24:22,490 Eu poderia acrescentar um, mas vamos fingir que eu não quero acrescentar uma 585 00:24:22,490 --> 00:24:24,910 ou ele já tem outra coisa. 586 00:24:24,910 --> 00:24:26,516 Eu não posso fazer isso com isso. 587 00:24:26,516 --> 00:24:28,870 A tag não é definitivamente original, certo? 588 00:24:28,870 --> 00:24:30,670 E nem é a classe. 589 00:24:30,670 --> 00:24:32,314 Mas você pode combinar essas coisas. 590 00:24:32,314 --> 00:24:35,230 Vamos dizer que queria fazer algo que só se aplica a coisas que 591 00:24:35,230 --> 00:24:39,420 tem a classe especial e que têm a classe bonita. 592 00:24:39,420 --> 00:24:48,150 >> Então, o que você pode fazer é em main.css, você pode dizer, vamos primeiro excluir esta. 593 00:24:48,150 --> 00:24:50,240 Você pode combiná-las. 594 00:24:50,240 --> 00:24:51,430 Assim você pode fazer .Especial. 595 00:24:51,430 --> 00:24:52,110 Não há espaço. 596 00:24:52,110 --> 00:24:54,770 Apenas .special.pretty. 597 00:24:54,770 --> 00:25:00,550 O que isso significa é algo que é tanto especial e bonito. 598 00:25:00,550 --> 00:25:01,900 Isso faz sentido? 599 00:25:01,900 --> 00:25:04,190 E se formos aqui, o que você vai ver 600 00:25:04,190 --> 00:25:09,734 é esta regra só se aplica ao segundo, que tem ambos. 601 00:25:09,734 --> 00:25:11,400 E você pode fazer isso por um monte de coisas. 602 00:25:11,400 --> 00:25:13,270 Você pode dizer-- vamos fingir que eu só queria 603 00:25:13,270 --> 00:25:18,300 para fazer as coisas que têm a classe bastante e que também são uma marca de parágrafo. 604 00:25:18,300 --> 00:25:19,920 Então p.pretty. 605 00:25:19,920 --> 00:25:23,585 Vamos fingir que eu tinha algo bonito no corpo tag. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Eu posso correr esse e eu pode ver que ele só é 608 00:25:28,490 --> 00:25:32,720 vai aplicar-se a coisas que são parágrafos com a classe bonita. 609 00:25:32,720 --> 00:25:35,650 E você pode combiná-las, basicamente, como muitos como você deseja. 610 00:25:35,650 --> 00:25:38,580 Assim, você pode simplesmente colocá-los juntos. 611 00:25:38,580 --> 00:25:39,604 Isso faz sentido? 612 00:25:39,604 --> 00:25:41,770 ALLISON Buchholtz-AU: Então este tipo de é mais útil 613 00:25:41,770 --> 00:25:45,490 quando, Tomas estava dizendo antes, talvez você tem um site muito complicado, 614 00:25:45,490 --> 00:25:48,050 e você já tem um monte destas regras escritas, 615 00:25:48,050 --> 00:25:51,170 e você só precisa combinar dois de antes. 616 00:25:51,170 --> 00:25:55,350 Como em vez de escrever um inteiro novo seletor e mudá-lo lá, 617 00:25:55,350 --> 00:25:58,592 você pode apenas combinar -los onde se sobrepõe. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Ou você pode encontrar out-- vezes 619 00:26:00,670 --> 00:26:04,290 há uma classe que faz a cor da fonte como azul, 620 00:26:04,290 --> 00:26:06,740 e há uma outra classe que faz com que o fundo azul. 621 00:26:06,740 --> 00:26:07,840 E isso simplesmente não vai funcionar. 622 00:26:07,840 --> 00:26:10,924 Então você escreve um caso especial, onde, como-- mas se tiver ambos, o que você está 623 00:26:10,924 --> 00:26:13,548 vamos fazer é que você vai fazem deste um esse tom de azul 624 00:26:13,548 --> 00:26:15,310 e este este outro tom de azul. 625 00:26:15,310 --> 00:26:15,580 Certo? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON Buchholtz-AU: Bom para esses tipos de exceções. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Então, para pensar sobre os problemas 628 00:26:21,220 --> 00:26:25,000 que pode surgir quando você combiná-los. 629 00:26:25,000 --> 00:26:27,020 Com estilo. 630 00:26:27,020 --> 00:26:29,692 Então, de volta para a nossa apresentação. 631 00:26:29,692 --> 00:26:31,400 ALLISON Buchholtz-AU: Estamos quase lá. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: E parou de ligação. 633 00:26:34,022 --> 00:26:36,494 ALLISON Buchholtz-AU: Oh, não. 634 00:26:36,494 --> 00:26:39,125 ALLISON Buchholtz-AU: CS em o escritório, internet vai para baixo. 635 00:26:39,125 --> 00:26:40,360 Oh, a ironia. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Então, felizmente, nós podemos apresentar sem a internet, eu acho, 637 00:26:45,620 --> 00:26:47,380 porque temos todos os slides aqui. 638 00:26:47,380 --> 00:26:49,304 Então, vamos falar sobre a relação de etiquetas. 639 00:26:49,304 --> 00:26:50,470 ALLISON Buchholtz-AU: Certo. 640 00:26:50,470 --> 00:26:52,660 Assim, apenas uma espécie de ir fora do que Tomas disse: 641 00:26:52,660 --> 00:26:54,180 esta é apenas uma outra maneira de fazê-lo. 642 00:26:54,180 --> 00:26:57,840 Portanto, temos alguns pais seletor com um seletor de criança. 643 00:26:57,840 --> 00:27:02,815 Assim, neste exemplo aqui, temos alguns corpo com uma barra de navegação classe, botão de classe. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, desculpe. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON Buchholtz-AU: E Basicamente, o que isso significa 647 00:27:06,180 --> 00:27:11,070 é selecionar todas as crianças, como todos esses tipos de seletores, 648 00:27:11,070 --> 00:27:13,040 dentro deste selector de matriz. 649 00:27:13,040 --> 00:27:16,004 E esses são os únicos ele nunca vai se aplicam. 650 00:27:16,004 --> 00:27:17,755 Eu não sei se você tem uma maneira melhor de-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Então eu acho que a maneira de pensar 652 00:27:19,504 --> 00:27:22,440 sobre isso é lembrar como antes que tipo de como colocá-los juntos. 653 00:27:22,440 --> 00:27:26,340 E, em seguida, isso significa que um elemento que corresponde a todos estes. 654 00:27:26,340 --> 00:27:29,530 O que isto quer dizer é, eu quero você para combinar com tudo 655 00:27:29,530 --> 00:27:33,220 dentro some-- Eu quero -lo a encontrar um seletor. 656 00:27:33,220 --> 00:27:35,670 E, em seguida, dentro disso, eu quero você para combinar com coisas novas. 657 00:27:35,670 --> 00:27:36,170 Certo? 658 00:27:36,170 --> 00:27:40,900 Assim, em CSS, é tudo sobre tipo de ser capaz de combinar esses itens. 659 00:27:40,900 --> 00:27:43,050 E você pode tentar igualar itens dentro de outros itens. 660 00:27:43,050 --> 00:27:46,510 >> Então vamos realmente fazer um exemplo, e pensamos que vai esclarecer. 661 00:27:46,510 --> 00:27:53,090 Então, vamos fingir que temos de especial, especial bonita, que seja. 662 00:27:53,090 --> 00:27:55,690 E então nós temos uma ligação, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Então lembre-se, um é um link. 665 00:28:02,370 --> 00:28:03,900 Ele não vai a lugar nenhum. 666 00:28:03,900 --> 00:28:11,500 E nós vamos dar-lhe o link da classe, eu acho. 667 00:28:11,500 --> 00:28:13,335 Vamos dar-lhe o class-- me dar uma idéia. 668 00:28:13,335 --> 00:28:14,460 ALLISON Buchholtz-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: Coo-- vamos ir a classe bonita. 670 00:28:16,420 --> 00:28:16,930 Por que não? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON Buchholtz-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: So coisas agora bonitas 673 00:28:23,040 --> 00:28:26,000 está indo para fazer o fundo azul, cor de fundo de salmão. 674 00:28:26,000 --> 00:28:27,969 Isso faz sentido. 675 00:28:27,969 --> 00:28:28,760 E se fizermos isto-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON Buchholtz-AU: Você deseja adicionar texto 677 00:28:29,620 --> 00:28:31,078 de modo que o hyperlink realmente aparece? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Que seria uma boa pedida. 679 00:28:35,088 --> 00:28:37,921 ALLISON Buchholtz-AU: Porque direita agora nós estamos apenas vai conseguir nada. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Então este é um link. 681 00:28:39,690 --> 00:28:42,202 "Este é um link." 682 00:28:42,202 --> 00:28:45,820 Ah, e isso vai para ser mais um link. 683 00:28:45,820 --> 00:28:47,280 Vamos dar-lhe a classe "cool". 684 00:28:47,280 --> 00:28:50,295 Você está certo. 685 00:28:50,295 --> 00:28:50,795 Com estilo. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Então, agora vamos pegar isso. 688 00:28:56,010 --> 00:28:57,269 Nós vamos lançar um. 689 00:28:57,269 --> 00:28:59,060 Nós temos um no tag especial, e nós também 690 00:28:59,060 --> 00:29:01,150 vão ter um na tag bonita. 691 00:29:01,150 --> 00:29:05,449 E agora o que vamos fazer é que vamos fazer cool-- 692 00:29:05,449 --> 00:29:06,490 o que é que quer que ele faça? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON Buchholtz-AU: Podemos torná-lo maior? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Vamos dar-lhe uma borda. 696 00:29:13,800 --> 00:29:14,840 ALLISON Buchholtz-AU: Poderíamos fronteira. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Yeah. 698 00:29:15,673 --> 00:29:18,560 Então, vamos fazer alguma coisa como, é-- fronteira e estamos 699 00:29:18,560 --> 00:29:20,971 vai explicar tudo isso em um segundo. 700 00:29:20,971 --> 00:29:21,470 Por enquanto-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON Buchholtz-AU: Para o modelo de caixa. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Mas, por enquanto, estamos só vai dar-lhe uma borda. 703 00:29:27,300 --> 00:29:29,580 Então, o que isso significa é que você está vai ver estes links. 704 00:29:29,580 --> 00:29:32,788 E você vai ver que eles têm estes, como, bordas pretas feias, que 705 00:29:32,788 --> 00:29:33,820 é legal. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON Buchholtz-AU: Nosso site é tão bonita. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Yeah. 708 00:29:35,333 --> 00:29:38,930 Nosso site é incrível. 709 00:29:38,930 --> 00:29:41,585 Então, esses dois são links, e eles aparecem. 710 00:29:41,585 --> 00:29:44,160 Agora vamos fingir que eu só queria fazer isso 711 00:29:44,160 --> 00:29:50,072 se não fosse algo dentro que tinha um fundo de salmão. 712 00:29:50,072 --> 00:29:52,280 Então lembre-se que este tem um fundo de salmão, 713 00:29:52,280 --> 00:29:54,000 porque é de classe bonita. 714 00:29:54,000 --> 00:29:59,777 >> Mas queremos dizer que só esfria que estão em classe especial, e não em sala de aula 715 00:29:59,777 --> 00:30:02,890 bonita, deve ter essa fronteira. 716 00:30:02,890 --> 00:30:12,549 Bem, o que você pode fazer que você é pode-se dizer, .Especial, espaço, .cool. 717 00:30:12,549 --> 00:30:15,590 E o que está fazendo, quando você pensa sobre isso, é que é basicamente dizendo: 718 00:30:15,590 --> 00:30:19,530 OK, encontrar-me tudo que corresponde especial. 719 00:30:19,530 --> 00:30:24,104 Então, dentro dessas marcas, encontrar me tudo o que é legal. 720 00:30:24,104 --> 00:30:27,270 ALLISON Buchholtz-AU: Então, uma outra maneira que pode ser bom para pensar sobre isso, 721 00:30:27,270 --> 00:30:29,810 trazê-lo de volta para C, é assim como a idéia de escopo. 722 00:30:29,810 --> 00:30:34,020 Então, quando você tem algum selector, como os 723 00:30:34,020 --> 00:30:38,460 que temos vindo a trabalhar para, antes disso, toda a sua página web, todo o seu HTML 724 00:30:38,460 --> 00:30:40,180 está dentro do seu âmbito de aplicação, certo? 725 00:30:40,180 --> 00:30:43,090 Mas quando temos estes relações pai-filho, 726 00:30:43,090 --> 00:30:47,130 é como se você está estreitando onde você está olhando para um lugar específico, 727 00:30:47,130 --> 00:30:50,540 como se, como, nós estamos olhando para dentro uma função específica em vez 728 00:30:50,540 --> 00:30:52,007 de todo o nosso arquivo. 729 00:30:52,007 --> 00:30:55,090 AUDIÊNCIA: Então, com isso em mente, seria que importava se tivéssemos changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON Buchholtz-AU: A ordem? 731 00:30:56,423 --> 00:30:59,320 AUDIÊNCIA: --o classe em CSS para .cool, espaço, .Especial? 732 00:30:59,320 --> 00:31:01,153 ALLISON Buchholtz-AU: Sim, porque então que 733 00:31:01,153 --> 00:31:04,420 diria, o escopo para tudo o que tem legal, 734 00:31:04,420 --> 00:31:07,235 e, em seguida olhar para o que has-- Quero dizer, como, neste caso, 735 00:31:07,235 --> 00:31:08,860 Eu não acho que teria mudado. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Se tivéssemos disse o quê? 737 00:31:10,318 --> 00:31:10,906 Desculpe. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON Buchholtz-AU: Se nós alcance-o esfriar e, em seguida, 739 00:31:12,660 --> 00:31:14,550 olhar para as coisas de especial, seria o mesmo, na verdade. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Então não seria. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON Buchholtz-AU: Ele não iria? 742 00:31:16,590 --> 00:31:17,590 Oh, oh bem. 743 00:31:17,590 --> 00:31:18,090 Estou errado. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Então, a razão é diferente-- mistake-- comum 745 00:31:21,480 --> 00:31:27,140 é que agora só o link tem legal, né? 746 00:31:27,140 --> 00:31:32,176 Eu acho que a minha pergunta para vocês é, o que nesta página são acompanhadas por .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Existem duas marcas aqui, certo? 749 00:31:38,340 --> 00:31:39,770 Qual é este e este. 750 00:31:39,770 --> 00:31:40,590 Ambos corresponder legal. 751 00:31:40,590 --> 00:31:42,200 Nada mais faz. 752 00:31:42,200 --> 00:31:46,460 Então, se você disse, .cool, espaço, .Especial, o que você vai dizer é: 753 00:31:46,460 --> 00:31:48,824 dentro dessas marcas, o que é especial? 754 00:31:48,824 --> 00:31:49,865 ALLISON Buchholtz-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Isso é o que ele-- direita. 756 00:31:51,800 --> 00:31:52,310 Porque é como apenas algo aqui. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: Então ele seleciona nada. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON Buchholtz-AU: Considerando que com especial, estamos dentro dessas marcas aqui. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Aqueles e aquelas. 760 00:31:57,971 --> 00:31:58,512 AUDIÊNCIA: OK. 761 00:31:58,512 --> 00:31:58,920 Então, essas tags da barra normal? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Sim. 763 00:31:59,740 --> 00:32:01,150 Isso faz sentido? 764 00:32:01,150 --> 00:32:03,685 Como é basicamente tentando restringir seu escopo. 765 00:32:03,685 --> 00:32:04,810 ALLISON Buchholtz-AU: Yeah. 766 00:32:04,810 --> 00:32:06,870 Acho que essa é provavelmente a maneira mais fácil de pensar nisso. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Então, achamos isto, e encontramos este tanto combinado especial. 768 00:32:09,270 --> 00:32:11,400 E então nós estamos pedindo, no prazo de esses caras, o que é legal? 769 00:32:11,400 --> 00:32:12,941 E dentro deste, este fresco. 770 00:32:12,941 --> 00:32:14,500 Dentro deste, nada é legal. 771 00:32:14,500 --> 00:32:16,250 Portanto, esta é a única marca que permanece. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON Buchholtz-AU: Considerando legal é apenas dentro dessas marcas de lá. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Exatamente. 774 00:32:21,070 --> 00:32:22,403 E o que há de especial nas que são? 775 00:32:22,403 --> 00:32:22,930 Nada. 776 00:32:22,930 --> 00:32:25,270 Agora, o que eu vou dizer é se não houvesse espaço, 777 00:32:25,270 --> 00:32:29,880 você está perguntando o que é legal e especial-- ou o que é bonito e especial, certo? 778 00:32:29,880 --> 00:32:35,370 Se você disser .special.pretty, isso é o mesmo que .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Uma vez que a remoção do espaço é perguntando é, quando você diz .Especial, 780 00:32:39,220 --> 00:32:40,970 você está pedindo, OK, quais são especiais? 781 00:32:40,970 --> 00:32:43,780 E, em seguida, os que, queridos também são bonitas, 782 00:32:43,780 --> 00:32:47,010 que é o mesmo, gramaticalmente, como perguntando, o que é muito, 783 00:32:47,010 --> 00:32:49,500 e depois deles, o que também é especial? 784 00:32:49,500 --> 00:32:50,000 Certo? 785 00:32:50,000 --> 00:32:53,099 É a diferença de o que está dentro do que é. 786 00:32:53,099 --> 00:32:53,640 AUDIÊNCIA: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Yeah. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Impressionante. 790 00:32:58,030 --> 00:33:00,426 Então, com isso em mente entăo-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON Buchholtz-AU: Eu acho que a nossa última coisa é (em Fancy BRITISH ACCENT) 792 00:33:01,800 --> 00:33:02,510 o modelo de caixa. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: O box-- [Risos] Eu amo o jeito Allison diz que. 794 00:33:05,992 --> 00:33:06,950 Assim, a coisa modelo de caixa. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON Buchholtz-AU: Basta ter uma caixa, eu vou ser o seu modelo de caixa. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Então vamos falar sobre isso. 797 00:33:11,310 --> 00:33:14,070 Então, agora nós gastamos um monte tempo falando sobre seletores. 798 00:33:14,070 --> 00:33:16,944 Até agora, vocês são, provavelmente, como, mestres da selectors-- você sabe, 799 00:33:16,944 --> 00:33:21,510 como selecionar exatamente o conteúdo que você quer manipular em sua tela. 800 00:33:21,510 --> 00:33:24,740 >> Então, agora a questão é, como exatamente você pode manipulá-lo? 801 00:33:24,740 --> 00:33:27,010 Então eu acho que o mais básico maneira de pensar sobre isso 802 00:33:27,010 --> 00:33:30,294 é, bem, o que exatamente é um elemento em CSS? 803 00:33:30,294 --> 00:33:32,585 Nós passamos muito tempo falando, o que é uma tag, 804 00:33:32,585 --> 00:33:36,140 ou o que é o mais básico representação de uma etiqueta? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Uma boa maneira de pensar sobre isto é, o que forma é salmão? 807 00:33:45,170 --> 00:33:47,295 Que forma é, tipo, a de cor salmão fundo? 808 00:33:47,295 --> 00:33:47,880 >> AUDIÊNCIA: É um retângulo. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: É um retângulo, certo? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON Buchholtz-AU: Não era uma pergunta capciosa. 811 00:33:50,956 --> 00:33:51,870 [Risos] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Não tentar para enganar vocês esta tarde. 813 00:33:54,670 --> 00:33:57,510 Então nós temos este retângulo. 814 00:33:57,510 --> 00:33:59,140 E a marca é uma p, certo? 815 00:33:59,140 --> 00:34:02,280 Assim que nos dá bom crença de que o parágrafo 816 00:34:02,280 --> 00:34:07,440 é representado como um rectângulo, em menos na mente do navegador, que 817 00:34:07,440 --> 00:34:08,715 ela é. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON Buchholtz-AU: Quer dizer, navegadores são tipicamente rectangular, 819 00:34:11,423 --> 00:34:13,440 por isso faz sentido. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: A idéia aqui é que todas as etiquetas dentro do CSS 821 00:34:18,750 --> 00:34:21,790 são representados como um rectângulo. 822 00:34:21,790 --> 00:34:25,699 E cada retângulo tem quatro peças de acordo com CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Você tem o conteúdo real. 824 00:34:27,830 --> 00:34:29,644 É aí que o texto se encontra. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON Buchholtz-AU: Talvez a sua imagem. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Yeah. 827 00:34:31,303 --> 00:34:33,860 Você tem estofo, que é apenas algum tipo de espaço em branco. 828 00:34:33,860 --> 00:34:35,085 Então você tem uma borda. 829 00:34:35,085 --> 00:34:37,710 E então você tem margem, que é o espaço em branco fora dessa. 830 00:34:37,710 --> 00:34:39,460 Então, isso não faz sentido a ninguém, por isso estamos 831 00:34:39,460 --> 00:34:42,500 vou falar sobre isso por um segundo. 832 00:34:42,500 --> 00:34:47,570 Então, aqui, o que vamos fazer é que vamos criar algumas divs, OK? 833 00:34:47,570 --> 00:34:48,420 Desculpe-me quando I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON Buchholtz-AU: Sinto-me como devemos colocar uma imagem bonito em. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Nós definitivamente deveria. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON Buchholtz-AU: Eu sinto que todo mundo 837 00:34:53,389 --> 00:34:54,870 poderia beneficiar de um imagem bonito, é tudo. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Podemos todo o benefício de a-- 839 00:34:56,774 --> 00:34:57,648 >> AUDIÊNCIA: Sim, com certeza. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, legal. 841 00:34:58,790 --> 00:35:02,254 Assim, devemos colocar um bonito imagem em algum lugar. 842 00:35:02,254 --> 00:35:05,295 ALLISON Buchholtz-AU: Eu me sinto como um coelho bonito pode ser útil agora. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Claro. 844 00:35:06,190 --> 00:35:06,950 ALLISON Buchholtz-AU: Fim da semana. 845 00:35:06,950 --> 00:35:07,390 Tem algo adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: Que tal um gatinho? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON Buchholtz-AU: Um gatinho funciona também. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, porque há um site para isso. 849 00:35:11,300 --> 00:35:12,300 É chamado PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON Buchholtz-AU: Isso é ótimo. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Sim. 852 00:35:15,510 --> 00:35:18,040 ALLISON Buchholtz-AU: Just for, como, imagens de espaço reservado em seu site. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Hum-hum. 854 00:35:18,914 --> 00:35:21,520 Há também PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 E há PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON Buchholtz-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Realmente? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, nós não têm acesso à Internet aqui. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON Buchholtz-AU: [geme] 860 00:35:29,875 --> 00:35:30,375 Trágico. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Caso contrário, Gostaria de mostrar para vocês 862 00:35:32,333 --> 00:35:33,870 como colocar imagens em seu website. 863 00:35:33,870 --> 00:35:36,370 Nós vamos tentar fazer com que esta trabalhando antes temos que ir. 864 00:35:36,370 --> 00:35:38,660 Mas, por enquanto, estamos apenas vai falar em cores, em seguida. 865 00:35:38,660 --> 00:35:39,820 Queremos colocar fotos de kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON Buchholtz-AU: Nós fizemos. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --o da internet para baixo para o momento de ser. 868 00:35:43,110 --> 00:35:47,820 Portanto, temos duas divs, e estamos vai dar-lhes dois ids. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Vamos chamá-lo "Primeira" e "segunda". 871 00:35:56,760 --> 00:36:01,184 Então id = "primeiro". 872 00:36:01,184 --> 00:36:02,850 E nós vamos dar-lhes duas cores. 873 00:36:02,850 --> 00:36:08,424 Então, como vamos selecionar algo com um id de "primeiro"? 874 00:36:08,424 --> 00:36:09,840 ALLISON Buchholtz-AU: Dot ou de hash? 875 00:36:09,840 --> 00:36:10,730 AUDIÊNCIA: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfeito. 877 00:36:12,940 --> 00:36:14,950 Afiado, haxixe, o que quer nós-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON Buchholtz-AU: Muitas coisas para chamá-lo. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Nós vamos resolver em hashtag, e isso é o que nós estamos indo para ir com ele. 881 00:36:19,800 --> 00:36:20,300 OK? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON Buchholtz-AU: Hashtag. 883 00:36:20,735 --> 00:36:22,340 >> TOMAS REIMERS: Então hashtag do primeiro. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON Buchholtz-AU: Então você pode twittar a seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag legal. 886 00:36:27,582 --> 00:36:29,040 TOMAS REIMERS: Hashtag Awesomeness. 887 00:36:29,040 --> 00:36:30,730 ALLISON Buchholtz-AU: Hashtag Awesomeness, sim. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 Então nós temos "primeira" e "segunda". 890 00:36:33,660 --> 00:36:37,697 Então, primeiro, nós vamos ter uma cor de fundo do vermelho. 891 00:36:37,697 --> 00:36:39,030 ALLISON Buchholtz-AU: Uh, cólon. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON Buchholtz-AU: Eu vou ser a sua casa-checker. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison me pegou. 895 00:36:43,960 --> 00:36:45,830 Background-color de blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Purple! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Purple. 898 00:36:47,726 --> 00:36:48,830 ALLISON Buchholtz-AU: Sim. 899 00:36:48,830 --> 00:36:50,630 Purple minha cor favorita, e nós não usei ainda. 900 00:36:50,630 --> 00:36:51,546 >> TOMAS REIMERS: Violet. 901 00:36:51,546 --> 00:36:53,361 ALLISON Buchholtz-AU: Violet. 902 00:36:53,361 --> 00:36:53,860 Isso funciona. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Então, nós estamos vai ter duas divs. 905 00:36:59,880 --> 00:37:01,654 Eles vão estar totalmente vazio. 906 00:37:01,654 --> 00:37:03,070 Nós provavelmente deve ter algum texto. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Assim, "em primeiro lugar" vai ser "OLÁ". 909 00:37:09,815 --> 00:37:10,940 E o "segundo" vai dizer-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON Buchholtz-AU: Adeus. 911 00:37:11,110 --> 00:37:12,514 >> AUDIÊNCIA: - "mundo". 912 00:37:12,514 --> 00:37:14,122 Olá, adeus. 913 00:37:14,122 --> 00:37:16,580 ALLISON Buchholtz-AU: Eu vi -los em conjunto a outra semana. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: Os Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON Buchholtz-AU: Para reais. 916 00:37:20,242 --> 00:37:21,200 Eles não são tão grandes. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Eu não gosto disto. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Temos "OLÁ" e "adeus". 920 00:37:26,060 --> 00:37:29,102 E, novamente, CSS é simplesmente fantástico, porque reconhece as nossas cores. 921 00:37:29,102 --> 00:37:30,810 Não precisa mesmo se preocupe que eles existem. 922 00:37:30,810 --> 00:37:33,194 Eles fazem. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON Buchholtz-AU: Eles existem. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Então, eu acho que tem CSS 255 palavras para falar sobre a cor. 925 00:37:39,560 --> 00:37:42,986 Se você pode pensar em uma cor fora os 255, como, eu vou ficar impressionado. 926 00:37:42,986 --> 00:37:44,110 ALLISON Buchholtz-AU: Yeah. 927 00:37:44,110 --> 00:37:45,560 Eu acho que vocês podem ter acabado de chegar logo depois. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Então, aqui, você verá que nós temos duas caixas 929 00:37:47,727 --> 00:37:49,143 direito em cima uns dos outros, certo? 930 00:37:49,143 --> 00:37:50,200 OLÁ e adeus. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON Buchholtz-AU: Não há nenhum espaço entre elas. 932 00:37:51,460 --> 00:37:53,390 Eles estão apenas smooshed direito em cima do outro. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Então a primeira coisa Eu acho que devemos falar sobre 934 00:37:55,973 --> 00:38:02,960 é vamos também dizer-- sim. 935 00:38:02,960 --> 00:38:08,020 Então CSS representa-los como uma espécie de caixas. 936 00:38:08,020 --> 00:38:10,100 E, como caixas, eles têm conteúdo. 937 00:38:10,100 --> 00:38:14,540 E o conteúdo agora é uma espécie de o OLÁ ou o adeus E é isso. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Assim, uma das primeiras coisas que você pode fazer é que você pode adicionar preenchimento. 940 00:38:19,790 --> 00:38:25,610 Padding diz quanto espaço ele deve deixar em cada lado. 941 00:38:25,610 --> 00:38:29,200 Então, digamos que eu quero dizer 10 pixels em cada lado. 942 00:38:29,200 --> 00:38:31,234 E eu vou dissecar isso em um segundo. 943 00:38:31,234 --> 00:38:33,150 ALLISON Buchholtz-AU: Todas essas coisas aqui 944 00:38:33,150 --> 00:38:36,980 vão ser principalmente em pixels para o resto do seminário. 945 00:38:36,980 --> 00:38:40,980 Você vai ver que ele tem algum espaço em torno dele, certo? 946 00:38:40,980 --> 00:38:46,360 Então, o que você não vê aqui é que há este tipo invisível de preenchimento 947 00:38:46,360 --> 00:38:49,600 de cada lado, o que diz, como, OK, você tem a sua caixa de content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON Buchholtz-AU: Você quer apenas para puxar para cima o elemento inspecionar? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Sim, isso é uma boa idéia. 950 00:38:53,659 --> 00:38:56,700 ALLISON Buchholtz-AU: Além disso, eu acho que o elemento de inspecionar é uma boa forma 951 00:38:56,700 --> 00:39:01,280 para descobrir se alguma coisa está acontecendo errado, algo inesperado acontece, 952 00:39:01,280 --> 00:39:04,570 inspecionando as tags e vendo o que é como sobrescrito é útil. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Então, eu não tenho certeza se vocês podem ver esta cor. 954 00:39:05,940 --> 00:39:06,470 Você pode? 955 00:39:06,470 --> 00:39:10,120 Você verá este preenchimento sobre o tipo de borda. 956 00:39:10,120 --> 00:39:13,410 E então você vê o real conteúdo em azul, certo? 957 00:39:13,410 --> 00:39:16,820 Então esse é o muito noções básicas do modelo de caixa. 958 00:39:16,820 --> 00:39:17,674 Você tem conteúdo. 959 00:39:17,674 --> 00:39:18,590 Então você tem estofamento. 960 00:39:18,590 --> 00:39:20,440 >> AUDIÊNCIA: Por que você não apenas use a caixa de dentro as-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON Buchholtz-AU: Certo. 962 00:39:21,606 --> 00:39:24,745 Porque é apenas selecionando o elemento agora. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Outras coisas. 965 00:39:27,060 --> 00:39:29,780 Então vamos falar sobre isso comando preenchimento por um segundo. 966 00:39:29,780 --> 00:39:36,380 Assim, em CSS, medições precisa de ter uma unidade. 967 00:39:36,380 --> 00:39:39,740 Então, primeiro você tem a quantidade. 968 00:39:39,740 --> 00:39:41,460 Portanto, neste caso, já dissemos 10. 969 00:39:41,460 --> 00:39:44,780 E, em seguida, o próximo temos dito é pixels, px. 970 00:39:44,780 --> 00:39:49,160 Outros que você pode ter são coisas como centímetros, polegadas. 971 00:39:49,160 --> 00:39:51,367 Você pode fazer coisas como: o que é de 10 polegadas? 972 00:39:51,367 --> 00:39:52,700 E isso vai ser ridículo. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON Buchholtz-AU: Oh, boy. 974 00:39:52,990 --> 00:39:53,460 >> AUDIÊNCIA: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS e Allison: Yeah. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Então, isso é tudo o estofamento. 977 00:39:57,840 --> 00:39:59,255 Eu vou voltar para pixels. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON Buchholtz-AU: Pixels tendem a ser, assim, o padrão. 979 00:40:01,754 --> 00:40:04,589 Quando você olha para um monte de sites, eles trabalham principalmente em pixels. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Então você está indo para ver ou pixels-- os outros que você vê 981 00:40:07,755 --> 00:40:13,952 é em, que é um em é igual à altura da fonte 982 00:40:13,952 --> 00:40:15,160 que você está usando atualmente. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON Buchholtz-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: É uma boa maneira de dizer, como, eu quero tanto espaço como minha fonte 986 00:40:20,740 --> 00:40:21,514 é tomar. 987 00:40:21,514 --> 00:40:23,180 ALLISON Buchholtz-AU: não sabia disso. 988 00:40:23,180 --> 00:40:25,747 Você aprende algo novo a cada dia. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Há uma monte de medições em CS. 990 00:40:27,955 --> 00:40:29,260 Eu sugiro que você procurá-los. 991 00:40:29,260 --> 00:40:32,122 Para todos os seus casos, eu acho pixels deve ser suficiente. 992 00:40:32,122 --> 00:40:33,830 E eles também são o que você vai ver 993 00:40:33,830 --> 00:40:36,520 na maioria dos exemplos feita em linha. 994 00:40:36,520 --> 00:40:38,320 Então, vamos deixá-lo em pixels. 995 00:40:38,320 --> 00:40:42,420 >> Você também pode, eu deveria dizer-- assim preenchimento sets todos os preenchimentos. 996 00:40:42,420 --> 00:40:49,789 Você também pode fazer algo como "Padding-top" para apenas set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON Buchholtz-AU: Maybe vamos buscar o nosso "OLÁ" de volta. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to apenas definir o preenchimento no topo e nada mais. 999 00:40:55,480 --> 00:40:59,560 Assim, os quatro comandos são padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 e padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON Buchholtz-AU: Assim como que seria de esperar para uma caixa. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Yeah. 1003 00:41:03,530 --> 00:41:05,240 Nada muito louco lá. 1004 00:41:05,240 --> 00:41:08,230 Isso faz sentido? 1005 00:41:08,230 --> 00:41:11,990 Então esse é o preenchimento. 1006 00:41:11,990 --> 00:41:14,110 Eu estou indo para definir tudo os preenchimentos de volta para 10. 1007 00:41:14,110 --> 00:41:17,010 E então eu vou passar a fronteira. 1008 00:41:17,010 --> 00:41:21,130 >> Então, o que é fronteira é fronteira é um comando estranho. 1009 00:41:21,130 --> 00:41:24,450 Leva espécie de três coisas ao mesmo tempo. 1010 00:41:24,450 --> 00:41:28,930 Assim, o primeiro é o quão grande você quero que seja como uma medição. 1011 00:41:28,930 --> 00:41:30,662 Mais uma vez, estou usando apenas pixels. 1012 00:41:30,662 --> 00:41:32,620 E a última coisa que eu deve adicionar a medições 1013 00:41:32,620 --> 00:41:35,270 é a única coisa que não necessita de uma unidade é 0. 1014 00:41:35,270 --> 00:41:37,390 Na verdade, é incorreta 0 para dar uma unidade, 1015 00:41:37,390 --> 00:41:41,940 0 porque é entre 0 polegadas, pixels, centímetros, o que for. 1016 00:41:41,940 --> 00:41:43,960 Tudo isso só significa 0, certo? 1017 00:41:43,960 --> 00:41:46,710 Então, primeiro você dá a ele a medição. 1018 00:41:46,710 --> 00:41:48,650 >> Então você dar-lhe o estilo. 1019 00:41:48,650 --> 00:41:49,869 Então, eu vou dizer "sólido". 1020 00:41:49,869 --> 00:41:51,410 E nós vamos falar sobre o que isso significa. 1021 00:41:51,410 --> 00:41:54,290 E então, finalmente, você dar-lhe uma cor. 1022 00:41:54,290 --> 00:41:56,850 Então, eu vou dizer "negro". 1023 00:41:56,850 --> 00:41:59,637 E estas são todas as coisas que nós agora visto antes, com exceção de estilo, 1024 00:41:59,637 --> 00:42:00,720 mas nós vamos falar sobre isso. 1025 00:42:00,720 --> 00:42:04,120 Então vocês têm visto as medições, e você já viu cores. 1026 00:42:04,120 --> 00:42:10,410 E o que acontece é que obter este agradável borda preta em torno dele, certo? 1027 00:42:10,410 --> 00:42:11,620 Vocês ver como nós fizemos isso? 1028 00:42:11,620 --> 00:42:12,760 >> AUDIÊNCIA: Yeah. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Então, o que é isso? 1031 00:42:17,370 --> 00:42:19,160 Então, primeiro de tudo, é um pixel. 1032 00:42:19,160 --> 00:42:20,880 Isso é auto-evidente o suficiente, certo? 1033 00:42:20,880 --> 00:42:23,254 Como, é um pixel de espessura. 1034 00:42:23,254 --> 00:42:26,170 Ou seria um pixel, mas estou ampliada, por isso é um pouco mais 1035 00:42:26,170 --> 00:42:26,490 do que isso. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON Buchholtz-AU: E nós temos esta TV resolução ridículo. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Yeah. 1038 00:42:29,460 --> 00:42:33,640 Você pode torná-lo maior, menor, o que for. 1039 00:42:33,640 --> 00:42:35,630 Então aqui vai uma fronteira de dois pixel. 1040 00:42:35,630 --> 00:42:38,810 Você verá que é duas vezes mais grosso. 1041 00:42:38,810 --> 00:42:40,172 A próxima coisa que você tem é a cor. 1042 00:42:40,172 --> 00:42:41,130 Isso não é interessante. 1043 00:42:41,130 --> 00:42:42,710 Eu não vou falar sobre isso, realmente. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON Buchholtz-AU: Mas o estilo pode ser apenas um pouco interessante. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Yeah. 1046 00:42:45,980 --> 00:42:48,560 Então estilo, existem poucos que eu vejo comumente usado. 1047 00:42:48,560 --> 00:42:55,690 Em primeiro lugar é uma sólida, próximos um do pontilhada, eo último de uma frustradas. 1048 00:42:55,690 --> 00:42:59,290 E aqui é pontilhada. 1049 00:42:59,290 --> 00:43:02,980 Você vai ver que eles são um monte de pontos, certo? 1050 00:43:02,980 --> 00:43:09,030 Uma boa maneira de obter uma espécie de fronteira agradável indo, traços são também bastante popular. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON Buchholtz-AU: E depois, claro, eu sou 1053 00:43:13,600 --> 00:43:16,660 certeza de que há muitas outras estilos que você pode começar. 1054 00:43:16,660 --> 00:43:20,000 E nós temos um grande conjunto de links no final para vocês 1055 00:43:20,000 --> 00:43:23,470 ao tipo de ler e olhar para CSS mais legal. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: E depois a última coisa, nós somos 1057 00:43:25,954 --> 00:43:27,870 vai falar sobre o modelos de caixa rápido. 1058 00:43:27,870 --> 00:43:30,070 Oh, e depois de fronteira, exatamente como o preenchimento, 1059 00:43:30,070 --> 00:43:33,270 você também tem coisas como border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, que permitem que você para chegar a um limite específico. 1061 00:43:37,590 --> 00:43:40,650 Então, aqui é apenas a borda esquerda definida. 1062 00:43:40,650 --> 00:43:43,060 Será que isso faz sentido? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON Buchholtz-AU: É um fresco maneira de enfatizar as coisas ou adicionar 1064 00:43:46,170 --> 00:43:47,545 linhas entre os diferentes elementos. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Absolutamente. 1066 00:43:48,670 --> 00:43:50,940 Então essa é a nossa fronteira. 1067 00:43:50,940 --> 00:43:52,790 E margem do último um. 1068 00:43:52,790 --> 00:43:55,892 Como preenchimento de Margin Exceto que não é within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON Buchholtz-AU: É não em torno de seu elemento 1070 00:43:57,975 --> 00:44:00,840 mas, na verdade, em torno da totalidade caixa que temos visto. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Yeah. 1072 00:44:02,770 --> 00:44:04,090 Allison disse que perfeitamente. 1073 00:44:04,090 --> 00:44:07,550 Não é, como, dentro de sua elemento, que é em torno de toda a caixa. 1074 00:44:07,550 --> 00:44:10,900 Isso significa que coisas como fundo não se aplicam a ele. 1075 00:44:10,900 --> 00:44:13,550 E é basicamente diz, como, eu não quero nada 1076 00:44:13,550 --> 00:44:15,230 em tanto espaço para mim. 1077 00:44:15,230 --> 00:44:17,470 Assim como temos aqui uma margem de 10 pixels. 1078 00:44:17,470 --> 00:44:23,100 Portanto, nada menos de 10 pixels deve ser o próximo a mim. 1079 00:44:23,100 --> 00:44:26,210 Isso é o tipo de sua espaço, mas meio que não. 1080 00:44:26,210 --> 00:44:29,215 Então esse é o muito noções básicas do modelo de caixa. 1081 00:44:29,215 --> 00:44:30,090 Isso faz sentido? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Cool, legal. 1084 00:44:34,550 --> 00:44:35,800 ALLISON Buchholtz-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Então agora eu acho que nós apenas temos nossos recursos legais 1086 00:44:37,890 --> 00:44:41,220 que nós o levaremos caras através muito rapidamente. 1087 00:44:41,220 --> 00:44:44,815 E nós vamos actually-- bem, temos internet ainda? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS Reimers: Deixe-nos ver se consigo abrir up-- 1089 00:44:47,860 --> 00:44:50,040 deixe-me ver se eu pode obter internet rápida 1090 00:44:50,040 --> 00:44:53,317 enquanto Allison fala sobre qualquer coisa Allison quer falar. 1091 00:44:53,317 --> 00:44:55,150 ALLISON Buchholtz-AU: Então basically-- eu não 1092 00:44:55,150 --> 00:44:57,930 sei o que mais eu posso dizer neste momento. 1093 00:44:57,930 --> 00:45:01,340 Mas estes são alguns realmente bons recursos. 1094 00:45:01,340 --> 00:45:04,629 Estes são os que Tomas e eu usei 1095 00:45:04,629 --> 00:45:06,420 e que, na verdade, utilizado para preparar para isso. 1096 00:45:06,420 --> 00:45:09,940 W3Schools é aquele que você vocês deveriam ter visto antes. 1097 00:45:09,940 --> 00:45:12,440 Recomendamos para um monte de coisas com CSS. 1098 00:45:12,440 --> 00:45:15,060 Eu sei que eu recomendo a minha seção o tempo todo. 1099 00:45:15,060 --> 00:45:21,050 >> Uma das grandes coisas é que ele permite que você tipo de confusão com CSS 1100 00:45:21,050 --> 00:45:23,830 e veja as mudanças neste instantaneamente, 1101 00:45:23,830 --> 00:45:25,920 como, em dupla janela ver que ele tem. 1102 00:45:25,920 --> 00:45:29,980 Assim você não precisa se preocupar com a criação de sua própria página web, 1103 00:45:29,980 --> 00:45:33,090 ou a criação de vhost em sua appliance local e host local, 1104 00:45:33,090 --> 00:45:34,980 e receber todo o trabalho material. 1105 00:45:34,980 --> 00:45:36,830 Ele está incorporado à direita dentro da página. 1106 00:45:36,830 --> 00:45:39,042 >> E tem esses pequenos lições que você pode 1107 00:45:39,042 --> 00:45:40,750 percorrer para aprender mais sobre seletores, 1108 00:45:40,750 --> 00:45:44,610 ou aprender sobre a manipulação de sua pia batismal, ou um fundo, ou uma imagem. 1109 00:45:44,610 --> 00:45:46,990 E você tem estes resultados instantâneos que você 1110 00:45:46,990 --> 00:45:49,310 Não é necessário fazer qualquer outro trabalho de preparação para. 1111 00:45:49,310 --> 00:45:51,060 Então, eu amo W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Ele é fabuloso. 1113 00:45:51,960 --> 00:45:52,670 Está trabalhando? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Yeah. 1115 00:45:52,950 --> 00:45:53,720 Não, não é. 1116 00:45:53,720 --> 00:45:55,636 Você quer que eu tente e reinicie o computador? 1117 00:45:55,636 --> 00:45:56,410 Ou queremos a-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON Buchholtz-AU: Quer dizer, bem, este também será online. 1119 00:46:01,490 --> 00:46:02,740 Todos os slides será online. 1120 00:46:02,740 --> 00:46:05,470 Então, eu só recomendo fazer estes. 1121 00:46:05,470 --> 00:46:07,880 >> Isso é ótimo como apenas como uma folha de fraude. 1122 00:46:07,880 --> 00:46:10,690 É só todo o básico comandos que você tem. 1123 00:46:10,690 --> 00:46:13,070 É ótimo quando você é o primeiro começando o seu site. 1124 00:46:13,070 --> 00:46:15,080 Porque talvez você não faz quero entrar em todos 1125 00:46:15,080 --> 00:46:17,355 o nitty verdadeiro corajoso -design pesado coisas. 1126 00:46:17,355 --> 00:46:20,230 Você só precisa formatá-lo de uma forma que tipo de faz sentido e vontade 1127 00:46:20,230 --> 00:46:21,490 fazer por enquanto. 1128 00:46:21,490 --> 00:46:23,580 E se você realmente quer para chegar a ele, eu sei 1129 00:46:23,580 --> 00:46:27,240 isto é, tal como, um dos Referências favoritas de Tomás. 1130 00:46:27,240 --> 00:46:30,130 Estávamos usando-o para prep, e é fabuloso. 1131 00:46:30,130 --> 00:46:33,030 É o desenvolvedor da Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: Então Mozilla são as pessoas que fazem Firefox. 1133 00:46:36,490 --> 00:46:40,290 E isso é apenas o seu próprio desenvolvedor de referência, o que eu acho que é incrível. 1134 00:46:40,290 --> 00:46:44,870 E tem um maravilhoso lista de recursos. 1135 00:46:44,870 --> 00:46:45,530 Então, nós have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON Buchholtz-AU: E então última nota é 1137 00:46:48,060 --> 00:46:50,120 quando você está tentando projetar seu site, 1138 00:46:50,120 --> 00:46:53,550 inspirar-se as coisas que você acha que são bonitas. 1139 00:46:53,550 --> 00:46:56,340 Inspecionando o elemento, inspecionar o código fonte 1140 00:46:56,340 --> 00:46:59,370 pode ser super útil para tentar descobrir 1141 00:46:59,370 --> 00:47:02,080 como o estilo do seu próprio site. 1142 00:47:02,080 --> 00:47:04,540 >> Muitas vezes, eu sinto que o melhor forma, além de experimentação, 1143 00:47:04,540 --> 00:47:06,290 é só de olhar para coisas que são bonitas. 1144 00:47:06,290 --> 00:47:09,810 Eu acho que é realmente difícil de apenas tipo de projetar as coisas em seu próprio país, 1145 00:47:09,810 --> 00:47:11,090 especialmente no início. 1146 00:47:11,090 --> 00:47:14,740 Então por favor, olhe para websites que você gosta de olhar. 1147 00:47:14,740 --> 00:47:16,880 Descobrir o que faz eles atraente para você. 1148 00:47:16,880 --> 00:47:19,170 E, em seguida, sinta-se livre para tentar replicar isso. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Certo. 1150 00:47:20,410 --> 00:47:23,120 Mesmo como websites como este, você pode ver 1151 00:47:23,120 --> 00:47:25,460 há definitivamente uma div no topo. 1152 00:47:25,460 --> 00:47:29,920 E então você tem uma outra div dentro aqui, que é Awesomeness CSS. 1153 00:47:29,920 --> 00:47:32,480 E então você tem um monte de links aqui. 1154 00:47:32,480 --> 00:47:34,770 Se você realmente só inspecionar elementos, você pode classificar de 1155 00:47:34,770 --> 00:47:38,520 começar a ver o que fazer sites parecer, e como eu posso 1156 00:47:38,520 --> 00:47:40,493 recriar que, se eu quisesse. 1157 00:47:40,493 --> 00:47:41,890 Isso faz sentido? 1158 00:47:41,890 --> 00:47:43,670 Por isso, só tem três minutos do fim. 1159 00:47:43,670 --> 00:47:46,380 Então perguntas? 1160 00:47:46,380 --> 00:47:47,650 Qualquer um deles? 1161 00:47:47,650 --> 00:47:48,350 Sim. 1162 00:47:48,350 --> 00:47:50,780 >> AUDIÊNCIA: Para a cor retângulo, como você 1163 00:47:50,780 --> 00:47:53,499 have-- se você não quer que ele atravessando a página inteira, poderia 1164 00:47:53,499 --> 00:47:56,400 você tiver feito isso vá em frente só metade da página ou apenas o texto? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Sim, com certeza. 1166 00:47:59,660 --> 00:48:02,780 Então deixe-me ver realmente. 1167 00:48:02,780 --> 00:48:04,670 Eu tenho duas idéias. 1168 00:48:04,670 --> 00:48:07,265 Então, primeiro de tudo, você Também é possível usar porcentagens. 1169 00:48:07,265 --> 00:48:08,140 >> AUDIÊNCIA: Sério? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON Buchholtz-AU: Então, alguma coisa a olhar para cima é o posicionamento relativo. 1171 00:48:11,260 --> 00:48:13,385 É algo que nós Não tenho tempo para entrar, 1172 00:48:13,385 --> 00:48:16,392 mas é algo que eu definitivamente recomendo que vocês merecem ser visitados. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: porcentagens assim. 1174 00:48:17,580 --> 00:48:21,524 E ver como nós fizemos isso apenas 50% da largura? 1175 00:48:21,524 --> 00:48:24,190 ALLISON Buchholtz-AU: Se você realmente saber o número de pixels, 1176 00:48:24,190 --> 00:48:25,780 você pode ser mais preciso dessa forma. 1177 00:48:25,780 --> 00:48:27,200 Você pode mexer com ele. 1178 00:48:27,200 --> 00:48:27,700 Mas 50%. 1179 00:48:27,700 --> 00:48:31,970 Se fôssemos para redimensionar nosso navegador, seria torná-lo menor. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Bem, é basicamente 50% agora, eu acho. 1181 00:48:35,250 --> 00:48:38,820 É de 50%, e, em seguida, a margem foi adicionado a isso. 1182 00:48:38,820 --> 00:48:40,100 CSS tem um monte de manias. 1183 00:48:40,100 --> 00:48:43,195 Então, agora, este é 50% da largura da página. 1184 00:48:43,195 --> 00:48:46,860 Mas lembre-se que você tem 10 pixels decolado de cada lado. 1185 00:48:46,860 --> 00:48:49,700 Então, se você tivesse que mover essa contra à margem esquerda do browser, 1186 00:48:49,700 --> 00:48:51,550 em seguida, ele se pareceria com 50%. 1187 00:48:51,550 --> 00:48:53,884 Mais uma vez, como eu disse, CSS pode ser um monte de e-cheque palpite. 1188 00:48:53,884 --> 00:48:56,049 Tipo, você acha que algo é vai se comportar de uma maneira, 1189 00:48:56,049 --> 00:48:57,805 mas comporta-se de forma totalmente diferente. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON Buchholtz-AU: E você acabou de ficar mais esperto, 1191 00:48:59,420 --> 00:49:02,020 e você só obter uma melhor intuição para ele como você se move longitudinalmente. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: E fica pior e pior. 1193 00:49:02,730 --> 00:49:03,496 Então, é realmente apenas uma corrida. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON Buchholtz-AU: Isso é super encorajador. 1195 00:49:05,454 --> 00:49:07,070 Queremos que eles gostam CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS é impressionante. 1197 00:49:08,810 --> 00:49:10,354 Lembre-se que. 1198 00:49:10,354 --> 00:49:11,020 Outras questões? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON Buchholtz-AU: A única coisa. 1200 00:49:14,297 --> 00:49:14,880 Algo mais? 1201 00:49:14,880 --> 00:49:15,140 Com estilo. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON Buchholtz-AU: Bem, se você caras têm dúvidas, mais tarde, 1204 00:49:18,523 --> 00:49:20,919 estamos sempre disponíveis, como de costume. 1205 00:49:20,919 --> 00:49:22,960 Você provavelmente vai ver alguns de nós para projetos finais 1206 00:49:22,960 --> 00:49:24,280 e definitivamente no hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Absolutamente. 1208 00:49:25,200 --> 00:49:25,720 E na feira. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON Buchholtz-AU: E na feira. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Olhe para a frente a veja todo o awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON Buchholtz-AU: Vamos ver todos os seus sites impressionantes 1213 00:49:29,420 --> 00:49:30,572 que vai ser bonito. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Você sempre pode ver, como, os sites 1215 00:49:32,780 --> 00:49:36,234 que teve, como, bom CSS e, em seguida, como aqueles que não tentar fazer CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON Buchholtz-AU: Além disso, outra coisa, mais uma coisa de olhar para 1217 00:49:39,150 --> 00:49:40,445 é Bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 Então Bootstrap é grande. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google que se você-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON Buchholtz-AU: Google-lo. 1221 00:49:43,573 --> 00:49:44,340 Ele é fabuloso. 1222 00:49:44,340 --> 00:49:45,620 Você vai adorar. 1223 00:49:45,620 --> 00:49:48,000 E agora que você tem um conhecimento básico de CSS, 1224 00:49:48,000 --> 00:49:50,340 ele vai fazer muito mais sentido. 1225 00:49:50,340 --> 00:49:50,890 Impressionante. 1226 00:49:50,890 --> 00:49:51,480 Obrigado, pessoal. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Muito obrigado. 1228 00:49:53,330 --> 00:49:54,219