1 00:00:00,390 --> 00:00:06,690 Então, a próxima coisa em que eles possam querer se concentrar é pensar que ela o envelheceu um pouco mais. 2 00:00:07,080 --> 00:00:16,110 Então, o que eu vou querer fazer aqui é seguir em frente e adicionar a data neste parágrafo neste parágrafo da 3 00:00:16,350 --> 00:00:23,220 citação e então também podemos querer agrupar nossos elementos ou nossas postagens para que possamos ter 4 00:00:23,220 --> 00:00:26,510 um post como elemento e para faça isso. 5 00:00:26,790 --> 00:00:32,590 Apenas vou usar uma div aqui, então vou fazer uma nova classe div igual a postagem. 6 00:00:32,700 --> 00:00:36,070 Então, estou apenas dando uma aula apenas para deixar claro o que é isso. 7 00:00:36,080 --> 00:00:39,240 Porque apenas dizendo div, não está muito claro o que está fazendo. 8 00:00:39,450 --> 00:00:46,610 E esta será uma publicação e depois teremos outro post de classe div para o segundo aqui. 9 00:00:46,980 --> 00:00:50,430 Então, vamos em frente e adicione uma data também. 10 00:00:50,760 --> 00:00:54,010 E para essa data que realmente poderia ser qualquer coisa. 11 00:00:54,300 --> 00:00:59,800 Eu vou fazer com que outra classe div seja igual a data, mas isso também poderia ser um parágrafo se 12 00:00:59,820 --> 00:01:00,600 você quisesse ser. 13 00:01:00,600 --> 00:01:02,790 Na verdade, não importa neste caso. 14 00:01:03,390 --> 00:01:08,520 só vou fazer um parágrafo aqui, mas vou fazer isso um pouco diferente, é claro, 15 00:01:09,450 --> 00:01:15,240 porque eu preciso estilo diferentemente do que esses parágrafos, então eu Vou dizer que vamos dar uma 16 00:01:15,240 --> 00:01:16,350 classe chamada citação. 17 00:01:18,840 --> 00:01:23,190 E então, outra coisa que queremos fazer é adicionar nesta citação e 18 00:01:25,110 --> 00:01:27,740 E então, enquanto estivermos aqui, vamos adicionar nossa data aqui. 19 00:01:27,900 --> 00:01:32,400 23 de novembro de 2015 e seguro. 20 00:01:32,400 --> 00:01:36,620 Então, se você estiver fresco agora, ficará muito perto do que estamos procurando. 21 00:01:36,630 --> 00:01:38,640 Temos que mudar a data um pouco. 22 00:01:39,000 --> 00:01:44,020 Quando você muda o tamanho da fonte deste H-1 Aqui, deixe-me fazê-los lado a lado. 23 00:01:44,280 --> 00:01:47,260 Precisamos adicionar nesta margem esquerda aqui no orçamento. 24 00:01:47,610 --> 00:01:53,310 Quando você altera a cor se este for o espaçamento, se for necessário, é necessário adicionar isso. 25 00:01:53,850 --> 00:02:00,140 Então, vamos em frente e comecemos pelo estilo. 26 00:02:00,420 --> 00:02:02,170 Isso deixou Forder aqui. 27 00:02:02,280 --> 00:02:08,640 Então lembre-se de que temos a classe que chamamos de citação aqui. 28 00:02:09,150 --> 00:02:10,730 Vamos querer voltar para RC ss. 29 00:02:10,740 --> 00:02:13,960 É uma citação similar. 30 00:02:16,800 --> 00:02:20,730 E então, tudo o que precisamos fazer é adicionar na ordem 31 00:02:24,600 --> 00:02:28,470 esquerda 5 pixels e a cor é a mesma que essa. 32 00:02:28,470 --> 00:02:34,180 Então, cinco pixels de cinza sólido que som de cinza. 33 00:02:34,560 --> 00:02:35,590 E é isso. 34 00:02:36,000 --> 00:02:37,200 E damos uma olhada. 35 00:02:37,530 --> 00:02:38,040 ESTÁ BEM. 36 00:02:38,040 --> 00:02:39,510 Então está olhando perto. 37 00:02:39,510 --> 00:02:43,140 A única coisa que você notará é que há algum espaçamento aqui. 38 00:02:43,140 --> 00:02:48,300 E, claro, esse espaçamento é entre a borda do limite esquerdo e o elemento. 39 00:02:48,450 --> 00:02:50,970 Então, isso seria preenchimento que precisamos mudar. 40 00:02:51,360 --> 00:02:59,550 mudar esse preenchimento, vou fazer o preenchimento cinco pixels para atualizar e isso parece muito bom. 41 00:02:59,550 --> 00:03:00,610 Então, para 42 00:03:00,630 --> 00:03:05,190 Você pode ver estes parecerem idênticos. Agora, os dois parágrafos da citação. 43 00:03:05,190 --> 00:03:08,460 Então, em seguida, temos algumas escolhas. 44 00:03:08,760 --> 00:03:12,410 Avançemos e abordemos a data. 45 00:03:12,480 --> 00:03:15,060 Então, há algumas coisas que queremos tornar tudo em letras maiúsculas. 46 00:03:15,140 --> 00:03:20,720 Eu quero mudar a cor e queremos adicionar esse espaçamento de linha ou o espaçamento das letras. 47 00:03:21,120 --> 00:03:26,370 Então vou passar para a esquerda, selecione a classe de data. 48 00:03:26,370 --> 00:03:30,880 É o que nós chamamos de dia da data da aula. 49 00:03:32,370 --> 00:03:34,300 Então, data do ponto. 50 00:03:34,890 --> 00:03:40,100 E enquanto eu estiver aqui vamos pegar a cor que é essa sombra particular de azul. 51 00:03:40,290 --> 00:03:47,480 E vamos apenas atribuir a cor para ser tão azul e atualizar, você pode ver onde parte do caminho. 52 00:03:47,970 --> 00:03:59,110 Então, para tornar tudo em maiúsculas usando CSSA, você pode se lembrar do texto de vídeo da Selecta transformar maiúsculas. 53 00:04:00,330 --> 00:04:01,470 E se estivéssemos frescos. 54 00:04:01,800 --> 00:04:04,600 Ok, isso parece muito perto. 55 00:04:04,620 --> 00:04:09,190 Praticamente a única coisa que restamos a fazer é o espaçamento das letras. 56 00:04:09,570 --> 00:04:12,040 Então, temos um monte de opções para espaçamento entre letras. 57 00:04:12,510 --> 00:04:18,840 No que diz respeito ao tamanho e às unidades que usamos, mas a propriedade é chamada de espaçamento de letras. 58 00:04:19,350 --> 00:04:20,400 E então podemos dar um número. 59 00:04:20,400 --> 00:04:23,490 Então eu estou usando para 10 pixels primeiro para mostrar. 60 00:04:23,490 --> 00:04:28,560 E isso nos dá 10 pixels entre números que é bastante e muito mais do que precisamos. 61 00:04:28,560 --> 00:04:37,560 Então, o que eu realmente vou usar é outra unidade chamada r e m e R. E. M. é exatamente como IEMs que são 62 00:04:37,560 --> 00:04:41,000 relativos ao elemento em que eles estão aninhados dentro de. 63 00:04:41,100 --> 00:04:44,550 Exceto que os RPMs não são definidos pelo elemento pai. 64 00:04:44,550 --> 00:04:47,170 Eles são realmente definidos pelo elemento raiz na página. 65 00:04:47,370 --> 00:04:59,100 Então o que isso significa é se eu acessar dentro do corpo 2. 00 R. E. M. e eu coloco o tamanho da fonte para ser 2. 00 R. E. M. 66 00:04:59,580 --> 00:05:06,240 e eu faço isso em vez de citar, eles realmente estão se referindo ao mesmo tamanho da fonte, se isso 67 00:05:06,240 --> 00:05:13,970 fosse EM, seria configurar o corpo para ser duas vezes maior do que o elemento pai e, em seguida, a citação que está 68 00:05:13,980 --> 00:05:17,760 dentro do corpo seria duas vezes tão grande quanto este aqui. 69 00:05:17,760 --> 00:05:19,220 Então é relativo. 70 00:05:19,290 --> 00:05:22,860 Quando adicionamos R. E. M. embora esteja se referindo ao elemento raiz. 71 00:05:22,860 --> 00:05:28,110 Então, esta é uma ótima maneira de basicamente fazer fontes proporcionais sem ter que se preocupar com o 72 00:05:28,110 --> 00:05:29,740 que está aninhado dentro do que. 73 00:05:29,850 --> 00:05:38,110 Então não vou mudar o tamanho da fonte e o corpo, mas para a nossa data o que queríamos. 74 00:05:38,760 --> 00:05:44,710 Eu vou usar zero ponto para RLM. 75 00:05:44,760 --> 00:05:50,820 Então, isso só vai levar o tamanho normal da fonte e adiciona um pouco de espaçamento extra entre as letras 76 00:05:50,940 --> 00:05:56,640 aponta para o tamanho da fonte para que você veja aqui, acabamos com o que parece ser o mesmo. 77 00:05:56,700 --> 00:06:03,120 É o ponto 2 e não espero que você saiba que eu soube que era o ponto 2 porque eu escrevi, mas 78 00:06:03,120 --> 00:06:08,180 se eu estivesse fazendo isso do zero, eu teria jogado um pouco e eu teria tentado o 79 00:06:09,630 --> 00:06:11,910 ponto cinco primeiro ver O que parece ser. 80 00:06:11,910 --> 00:06:13,510 OK, isso é muito grande. 81 00:06:13,890 --> 00:06:16,720 E você sabe que não é isso, não é uma ciência exata. 82 00:06:16,860 --> 00:06:20,110 É só neste caso porque eu fui quem escreveu. 83 00:06:20,910 --> 00:06:21,570 ESTÁ BEM. 84 00:06:22,110 --> 00:06:24,620 Então, nós fizemos isso parece muito bom. 85 00:06:24,990 --> 00:06:31,410 Vamos comparar estes agora realmente tudo o que faltava. 86 00:06:31,410 --> 00:06:39,620 Além do conteúdo extra feito aqui é fazer este H2 maior e mudar ligeiramente a cor. 87 00:06:40,260 --> 00:06:41,800 Então, vamos fazer a cor primeiro. 88 00:06:41,820 --> 00:06:50,820 anos e a cor que tenho aqui mesmo, um azul escuro vai definir a cor se estivermos frescos. 89 00:06:50,820 --> 00:06:53,670 Nós vamos selecionar todos os dois 90 00:06:53,670 --> 00:06:57,560 É realmente difícil de ver, mas mudou tão ligeiramente. 91 00:06:58,260 --> 00:06:59,900 E então há duas outras coisas. 92 00:06:59,940 --> 00:07:03,700 Bem, há uma coisa principal que queremos fazer, que está mudando o tamanho da fonte. 93 00:07:04,410 --> 00:07:09,840 E eu sei que isso é duas vezes o tamanho da fonte como o resto. 94 00:07:09,840 --> 00:07:13,360 Então isso seria 2. 0 rpms. 95 00:07:13,470 --> 00:07:22,970 Então, vamos configurar o tamanho da fonte 2. 0 R. E. M. salve a atualização e acabamos com isso. 96 00:07:22,980 --> 00:07:28,650 Então, vamos comparar isso agora e tudo é exatamente o mesmo. 97 00:07:28,650 --> 00:07:32,780 Até este parágrafo que estamos perdendo aqui, então tudo abaixo. 98 00:07:33,480 --> 00:07:36,660 Então, vamos em frente e adicione este parágrafo. 99 00:07:36,720 --> 00:07:38,290 Eu apenas vou copiar o texto. 100 00:07:38,610 --> 00:07:43,470 Mas sinta-se livre para usar qualquer texto em seu senhorio algum que você quiser e então vamos adicionar em outra 101 00:07:43,470 --> 00:07:45,450 postagem do blog e ver como isso parece. 102 00:07:46,110 --> 00:07:53,000 Então voltei para o h t m l e eu vou apenas adicionar outro parágrafo na parte inferior e colar isso. 103 00:07:54,420 --> 00:08:01,520 OK, então esta é a nossa primeira postagem no blog. 104 00:08:01,540 --> 00:08:03,360 Nós os comparamos. 105 00:08:03,360 --> 00:08:06,190 Parecem idênticos, exceto para este H. R. Então, essa é uma coisa que vamos querer acrescentar, há H R que vai embora até o fim 106 00:08:06,210 --> 00:08:11,350