Oi, na palestra de hoje, vamos falar sobre o estilo do seu texto em suas páginas web. Uma das melhores e mais fáceis maneiras de realmente fazer sua página parecer um pouco diferente do padrão padrão é pensar sobre como você pode querer estilizar seu texto para trazer o máximo impacto. Tantas, muitas opções e vamos falar sobre algumas delas hoje. Uma dessas opções é pensar basicamente em sua fonte. Algumas das coisas que você pode estilizar são a família da fonte, o estilo da fonte, a variante da fonte e o tamanho da fonte. Também podemos pensar em estilizar a cor e o fundo da sua fonte. Podemos falar sobre alinhamento também. E finalmente, vamos falar muito brevemente sobre a altura da linha. Estas são as quatro coisas que você pode fazer para destacar ou enfatizar as diferentes coisas que você gostaria que seu estilo produzisse. Então primeiro vamos falar sobre a família de fontes. Famílias de fontes são apenas diferentes tipos de texto. Então, se você já usou o Word antes, você entrou, você foi para a família de fontes e você pode escolher Arial ou Wingdings ou todos esses tipos diferentes de fontes. Você pode fazer as mesmas coisas em sua página da Web. Então eu tenho alguns exemplos aqui para você dos mais comuns. Você tem Helvetica, Courier, Courier New, Comic Sans, cursivo ou Verdana. Tentei colocar o tipo de fonte aqui no slide, mas pode ser difícil para você ver. E eu meio que fiz isso de propósito, porque o que parece óbvio para você quando você está projetando nem sempre parece óbvio para as pessoas que estão olhando para sua página. Eu também escolhi estes em particular porque eu queria mostrar a vocês que algumas são uma única palavra, como Helvetica. Mas Comic Sans MS é várias palavras, então eu tive que colocar entre aspas. Tudo bem. Então, como ele funciona é, novamente, você usa sua regra de sintaxe. Você tem seu seletor, sua propriedade e, em seguida, seu valor. Então, neste caso, eu disse sempre que você vê um cabeçalho h1, não use o cabeçalho padrão do navegador, em vez disso eu quero que você use a fonte Arial. Então ele muda a fonte ligeiramente para se parecer com este exemplo aqui. Agora, todos os navegadores não suportam tudo. Já vimos isso mesmo com HTML 5. Alguns navegadores suportam algum texto, outros não. Da mesma forma, alguns navegadores suportam algumas fontes e outros também não. Então o que você pode fazer é fornecer alternativas. Neste exemplo, dei ao navegador três alternativas diferentes para usar. Estou basicamente dizendo, sempre que você chegar a uma etiqueta H1, eu realmente quero que você use a fonte Courier. Mas se você não tiver a fonte Courier, vá em frente e use a fonte Impact. Se você não tem esse, vá em frente e use Arial. Agora, uma das perguntas que você pode fazer a si mesmo é, e se ele não tiver três dessas fontes? Não tem Courier, Impact ou Arial. Bem, se você se lembra, quando falamos pela primeira vez sobre folhas de estilo em cascata, dissemos que se você der uma regra e ela não pode suportar, ela sempre voltará ao padrão do navegador. Então você não precisa se preocupar com o desaparecimento da fonte porque você deu a ela uma família de fontes ruim. Sempre vai passar. Então, quando você escolhe suas famílias de fontes, há algumas coisas em que você deve pensar. O primeiro é talvez o mais importante, é que algumas fontes são muito mais amigáveis do que outras. Existem basicamente duas categorias. Você tem fontes serif e fontes sans-serif. As fontes serif são aquelas que têm o tipo de bordas extravagantes ao longo do lado que você usou quando você estava aprendendo caligrafia ou coisas diferentes como essa. As fontes sans-serif são muito limpas, não há drop downs ou qualquer coisa assim. Então, quando chega a hora de alguém explodir sua página, tipo de realmente entrar e eu estou tentando pensar na palavra certa, quando eles querem entrar, e eles querem fazer parecer maior. Fontes Serif podem realmente ficar confusas, então evite essas sempre que possível. Eu pessoalmente não uso fontes personalizadas eu mesmo, mas eu nunca fui um tipo artístico de pessoa. Então, se você decidir que você quer ter sua própria fonte, ou algum tipo de fonte personalizada especial segura para a Web, você precisa usar algo especial aqui chamado regra font-face. E o que fazemos, é que você pode ver no primeiro exemplo, você diz, hey, eu vou definir meu próprio font-face. Vou chamar-lhe MySpecialFont. Você pode chamá-lo de qualquer coisa que você quiser chamá-lo, e então você precisa dar-lhe uma fonte. Então essa fonte, esta é uma nova que você nunca viu antes. Não estamos usando href, não estamos usando fonte, estamos usando url. E a URL diz que aqui é onde você pode encontrar o arquivo que define minha fonte especial. E uma vez que você faz isso, uma vez que você escrever a regra da face da fonte uma vez, durante todo o resto da sua folha de estilo você pode ir em frente e referenciá-la. Então agora toda vez que eu usar uma fonte h1, você vai usar MySpecialFont. Então agora vamos falar sobre o estilo da fonte. É uma palavra muito mais sofisticada do que você poderia esperar, mas estamos simplesmente falando sobre você quer que sua fonte pareça normal, que é o padrão, ou você quer que ela seja itálica? Ou você quer que seja oblíqua, que é basicamente apenas um tipo especial de itálico. Então a fonte normal vai acontecer não importa o que seja, se for apenas como vai ser. Se alguém escreveu uma folha de estilo e fez tudo em itálico, é quando você pode querer dizer, não, não, eu vou substituí-la e torná-la normal. Itálico é sempre um certo tipo de magra, basicamente, para a sua fonte. Um oblíquo é quando você realmente quer ser extra especial e definir exatamente qual ângulo você quer ter seu texto inclinado para. A variante da fonte, nós realmente só temos duas opções aqui. Nós temos normal e nós temos bonés pequenos. As pessoas usam isso um pouco quando estão tentando fazer um olhar muito consistente e ainda um pouco extravagante para ele. Então aqui eu disse novamente, sempre usando h1, eu quero que minha variante de fonte seja small-caps. Então, agora, quando você olha para o meu texto, meu texto h1 para baixo na parte inferior, eu escrevi <h1>variação de letras pequenas. Mas quando o navegador o exibe, ele vai exibi-lo em maiúsculas pequenas. Então isso impede que você tenha que ir e voltar para se lembrar de mudar todo o seu texto para maiúsculas ou minúsculas. Não importa como você escreve, o navegador sempre mostrará em maiúsculas. Agora o tamanho da fonte é algo sobre o qual vamos falar praticamente durante todo este curso e em outros cursos vamos fazer também, como design responsivo, porque é realmente um monte de maneiras diferentes de fazê-lo. Então vamos começar com o mais básico. Suas opções são, você pode usar o tamanho da fonte igual a extra-extra-pequeno, extra-pequeno, pequeno e menor. Eu realmente não gosto muito disso, porque ele realmente não me dá um quadro de referência. Você pode ter médio, você pode ter grande, extra-grande, xx-grande e maior. Poucas pessoas usam essas opções, mas elas estão lá fora, então eu queria te dizer o que elas eram. Em vez disso, o que muitas pessoas usam é que usam pixels. Então, eu vou incluir no site este tipo agradável de tabela para você que relaciona quantos pixels para uma polegada, quantos pixels para picos, para que você possa ter uma idéia para isso. Mas a maioria das pessoas faz algo ao longo das linhas de 20 pixels, 35 pixels, 80 pixels. E este é um olhar muito consistente e é algo que as pessoas podem tipo de sentir como deve ser. No entanto, tenho tendência a usar percentagens em vez disso. Percentagens vão nos permitir alterar o tamanho da fonte à medida que redimensionamos a tela muito mais facilmente. Então, se você dissesse usar 100%, ele vai ser o tamanho padrão. Se você disser usar 110% será um pouco maior. Se você usasse 75%, seria três quartos do tamanho. Em seguida, vamos falar sobre cor e cor de fundo. O atributo de cor é a cor do primeiro plano, que é a palavra extravagante para apenas o texto em si. Tudo bem. A cor de fundo é a cor do fundo por trás da fonte que estamos olhando. E dependendo do tipo de texto que você está desenhando, ele pode parecer muito diferente. Então, aqui eu fiz uma regra, e você nunca viu isso antes. Eu vou seguir em frente e estilo dois seletores diferentes. Vou ao estilo h1 e span. Então, se você colocar uma vírgula bem ali, eu tenho isso aqui, entre o h1 e o span, você pode colocar quantas vírgulas quiser, e escrever quantos seletores quiser. Neste caso eu disse, hey, eu quero que minha cor seja azul, e eu quero que minha cor de fundo seja cinza. E se você não tem certeza de onde esses números estranhos vieram, vá assistir o vídeo de cores. Explicará tudo para você lá. Então agora eu entrei, e no meu HTML, eu tenho cores em uma tag h1, e eu tenho a palavra inline dentro de uma tag span. E o que eu quero que você perceba é que para o h1, o elemento bloco, a cor de fundo cobre toda a largura da página. Mas para span, para elementos embutidos, a cor de fundo só vai ao redor apenas do elemento e do próprio texto. Em seguida, vamos falar sobre alinhar texto. Alinhar texto é simples. É provavelmente uma das coisas mais fáceis que você pode fazer em HTML. E você vai ser muito feliz. Porque mais tarde, quando você decidir que quer alinhar outras coisas, é tão difícil e você vai querer colocar tudo em texto. Assim, suas opções são quando você usa o alinhamento de texto que você pode usar à esquerda, o que significa apenas alinhar o texto para a esquerda. Isso é o que nós já fazemos. Você pode ter o direito, o que significa alinhar tudo à direita, centro e justificar. Centralize tudo tanto quanto você, no meio daquela divisão. Justify tenta espalhá-lo para usar o máximo de espaço possível. Então deixe-me mostrar alguns exemplos porque essa é realmente a melhor maneira de entender o que está acontecendo aqui. Aqui eu tenho um alinhamento esquerdo. Tudo se alinha ao longo do lado esquerdo da tela. O próximo que eu usei texto em linha é igual à direita. E você pode ver que tudo está alinhado para a direita. Parece muito estranho. Há poucas razões para usares isto. A menos que você tenha algo mais acontecendo no lado do meio aqui. O próximo que vamos fazer é o centro. As pessoas usam o centro um pouco. Eles quase usam demais, mas é uma boa maneira de quebrar seu texto e fazê-lo parecer um pouco diferente. Então justificar é realmente difícil de explicar, e mesmo quando você olha pela primeira vez, você pode não notar o que está acontecendo. Mas com justify, o navegador está colocando em pequenos pedaços de espaço extra para meio que ajudá-lo a espalhá-lo para que ele tenha exatamente a mesma largura todo o caminho ao longo. Então vou mostrar-lhe o justificado com a esquerda. E eu acho que essa é a melhor maneira de ver a diferença, é que você basicamente não tem o espaço vazio aqui. Eles meio que espalharam por aqui, então ninguém tem muito espaço em branco. Em seguida, vamos falar sobre a altura da linha, e a altura da linha é realmente diferente porque não está afetando a fonte em si. Não está afetando seu texto. Está afetando a quantidade de espaço ao redor do texto. Alguns de vocês podem ter usado o Word antes, e você pode ir e exatamente quanto espaço há entre as linhas. Talvez você queira que seja uma linha, uma linha e meia, espaçamento duplo. É disso que estamos falando aqui. Então meu primeiro exemplo eu disse linha altura igual a 50%. E o próximo eu disse que a altura da linha é igual a 200%. Então, na primeira regra, essa é uma regra estranha de escrever porque eu estou dizendo que eu quero que as coisas se sobreponham umas com as outras. Na segunda regra eu estou dizendo que eu quero que você realmente se espalhe para longe. Oops, tudo bem, eu vou em frente e colocar um exemplo online mais tarde onde eu posso mostrar exatamente como essas coisas seriam. Ou melhor ainda, vou transformar isso em um momento de aprendizado e fazer você entrar lá e digitar você mesmo e ver como essas duas regras diferentes afetam o texto. Então vamos rever. Sei que passei por um monte de coisas, e pode ser esmagador. Então, uma das coisas mais importantes é com tudo o que fazemos neste curso, é levar cinco, dez minutos, digitar algumas coisas, dar uma olhada e ver o que acontece. Cometa tantos erros quanto puderes, porque esta é a hora de cometer erros, quando tiveres a mim e ao resto da multidão aqui para responder às perguntas nos diferentes quadros. Pratique em problemas com brinquedos. Não faça uma página web enorme e tente estilizá-la. Crie uma página com três ou quatro parágrafos, alguns links, e pratique neles, porque não importa, você não precisa praticar em uma página grande, você pode praticar sobre os pequenos problemas e realmente faz uma grande diferença. E, finalmente, se você decidir que está pronto para codificar e está pronto para fazer esse grande projeto, certifique-se de projetar seus projetos maiores primeiro no papel. Eu não posso enfatizar o suficiente que se você começar a codificar e estilizar sem realmente ter um plano claro, você vai ficar muito frustrado e espero, não espero, você vai ficar muito frustrado e você vai desistir. E eu não quero que você faça isso. Então planeje todos os seus projetos no papel primeiro. Se você seguir essas sugestões, se você praticar, praticar, se você fizer problemas com brinquedos, se antes de pular em grandes problemas você esboçar primeiro, eu acho que você vai se divertir muito, e você vai ter uma ótima página da qual você vai se orgulhar.