Introdução ao CSS: adicione estilos fundamentais a um site de portfólio

1. Trailer: Folhas de estilo em cascata nos permitem adicionar apresentação à nossa página sem graça somente HTML. Nesta classe, vamos pegar nosso site de portfólio somente HTML de quatro páginas e vinculá-lo a um novo documento CSS. Vamos aplicar estilos básicos aos nossos elementos e ver como eles entram em vigor em nosso documento HTML. Vamos começar no início do CSS, e cobrir todos os fundamentos necessários para obter a camada de apresentação em nossos projetos. Se você nunca ouviu falar de folhas de estilo em cascata antes ou procurando uma atualização no CSS, essa classe é para você. Vamos abordar o básico de como escrever CSS conectado às nossas páginas e também falar sobre solução de problemas. Você deve saber o básico de HTML antes de fazer minha aula. Se você tomou minha introdução à aula HTML, este é o acompanhamento perfeito. Eu fornecerei o HTML com o qual estarei trabalhando para que você faça o download e o acompanhe. Nossos estilos CSS podem ser aplicados a qualquer HTML que quisermos mesmo que seja um site sobre cães porque eles são bonitos também. 2. Olá!: Oh. Oi, novos amigos. É ótimo ter você aqui. Eu sou Jenn, e hoje, vamos falar sobre CSS, também conhecido como Cascading Style Sheets. CSS é o grande acompanhamento para se você já levando minha classe HTML ou outra classe HTML em algum lugar, ou se você precisa de uma atualização sobre CSS, como ele funciona e o que ele pode fazer. CSS é tão incrível quanto fornece estilos para todas as nossas páginas web. Então, as coisas parecem um pouco mais bonitas, e hey, todos nós gostamos disso. Antes de começarmos, pensei em te contar um pouco sobre mim, e pensei em fazer isso jogando duas verdades e uma mentira. Então eu vou te dizer três coisas. Uma coisa será mentira. Primeiro, o primeiro site que fiz foi em 1999. Número dois, vi Bon Jovi duas vezes no concerto. Número três, uma vez fui ao Price is Right e ganhei $700 jogando Plinko. Tudo bem. Então, eu não ganhei $700 jogando Plinko. Ainda não, de qualquer maneira. Eu discordo. Vamos para baixo com o CSS. Ei, essa é a única vez que vou rimar essa aula inteira. Eu meio que prometo. CSS significa Cascading Style Sheets, e nesta classe, vamos estar construindo um projeto baseado em uma base HTML para o nosso portfólio. Temos um site de portfólio de quatro páginas, com o qual trabalharemos, e além desse HTML simples, adicionaremos CSS para adicionar têxteis, cores e tornar as coisas um pouco mais agradáveis aos nossos olhos. Então, vamos pegar o HTML para o portfólio de Jon Arbuckle aqui, que com HTML só se parece um pouco com isso, e vamos pegar isso, e adicionar estilos usando CSS. Então, vamos levar o nosso HTML a partir deste para este emparelhado com CSS. Aprenderemos um pouco sobre como cores de texto, cores de fundo, famílias de fontes e tamanhos de fonte, bem como decoração de texto, podem ajustar nossas páginas de acordo para adicionar mais interesse visual ao nosso HTML simples. Então, quando estiver pronto para começar, volte para a próxima lição e falaremos sobre quais ferramentas precisamos para começar a construir nosso site com CSS. 3. Reúna as ferramentas: Vamos começar baixando algumas ferramentas que precisaremos para escrever nosso CSS. Assim como um HTML, podemos usar qualquer editor de texto para escrever CSS. Os benefícios de usar um editor de texto para código são coisas como realce de sintaxe, atalhos de teclado e ajuda de formatação, para nos ajudar a escrever código mais eficiente. Se você levou a aula de Introdução ao HTML comigo, então você estará familiarizado com Sublime Text 2. Vamos usar Sublime Text 2 para novamente. A coisa que é grande sobre Sublime Text 2, é que você pode usá-lo para Windows e Mac, e eles também têm teste gratuito ilimitado, que irá levá-lo a comprar o software que, se você gostar, você deve, mas enquanto você está experimentando você pode usá-lo gratuitamente. Você vai encontrar isso em sublimetext.com/2 e a partir daí você pode baixar a versão mais recente com base em qualquer sistema operacional em que você está. Então, por que você não vai em frente e baixar isso se você ainda não fez, e depois instalá-lo e voltar. Depois de instalar o Sublime Text, a próxima coisa que precisaremos é de um navegador moderno. Vou usar a versão mais recente do Chrome para isso. Você pode usar qualquer navegador que você deseja, eu recomendaria usar o mais recente, pois geralmente é o mais fácil de trabalhar com e eles têm um monte de mais ferramentas para desenvolvedores em versões posteriores. Vou usar o Chrome especificamente porque adoro o Chrome Web Inspector. O Chrome Web Inspector, vamos ver um pouco mais tarde, mas essencialmente ele nos permite inspecionar quaisquer elementos na página e ser capaz de ver o HTML e CSS para eles. Então, é muito legal. Recomendamos vivamente o uso do Chrome para isso. Se você estiver usando o Firefox, o Firefox tem algo semelhante em que você pode inspecionar elementos na página. Isso será muito próximo do que estamos fazendo no Chrome. Internet Explorer também tem ferramentas de desenvolvedor, assim como o Safari. Então, novamente, você tem algumas outras opções, mas eu usarei o Chrome para essa classe. Se quiser continuar com isso, estará aqui. A última coisa que precisaremos é HTML para esta classe, que você poderá encontrar nas etapas do projeto e baixar este arquivo jon-arbuckle-site.zip. Aqui você vai descompactar seu arquivo e, em seguida, armazená-lo em algum lugar onde você pode encontrá-lo facilmente. Às vezes, isso está em sua área de trabalho, às vezes pasta de documentos, às vezes uma pasta de sites , o que funciona para você, onde você não vai esquecer e pode ser facilmente encontrado por agora. Então, obter toda essa configuração e, em seguida, vamos em frente e começar a olhar para a visão geral dos arquivos que vamos trabalhar com. 4. Visão geral dos nossos arquivos HTML do curso: Na introdução à classe HTML, criamos um site para o portfólio de Jon Arbuckle, nosso cliente fictício. Vamos usar o HTML para essa classe como base para aprender CSS. Se você criou o seu próprio portfólio ou a partir dessa classe, ou há algum outro HTML com o qual você quer trabalhar, isso é totalmente bom. Se você quer seguir exatamente com o que estou fazendo aqui, então vá em frente e pegue este arquivo e vamos trabalhar com isso. Então, depois de descompactar o arquivo e você sabe onde sua pasta está, vamos em frente e abrir Sublime Text. Quando você abre o texto Sublime pela primeira vez, você não vai ver muito. texto Sublime não abre nenhum arquivo em que você estava trabalhando pela última vez, então você vai ter que dizer ao Sublime Text que você gostaria que ele abrisse a pasta ou arquivo em que gostaríamos de trabalhar. A outra coisa que vamos querer fazer é personalizá-lo um pouco de acordo com nossas preferências. Então, a primeira coisa é que eu vou clicar, Ver, Barra Lateral, Mostrar Barra Lateral, ea seção Barra Lateral vai abrir novamente. Novamente, isso é View, Side Bar, Show Side Bar. Agora, poderemos ver os arquivos com os quais estamos trabalhando. A partir daí, eu vou para o arquivo aberto e navegar para a pasta neste caso, a pasta Jon Arbuckle com a qual eu gostaria de trabalhar. Então, File, Open ou Control ou Command O, se você quiser usar o atalho de teclado. Então verei a pasta do site do Jon Arbuckle. Agora, eu poderia abrir um dos arquivos, mas eu gostaria de ver tudo com o que estamos trabalhando. Então, eu vou mantê-lo destacado no site Jon Arbuckle e, em seguida, eu vou clicar em Abrir. Uma vez que eu fizer isso, você verá Jon Arbuckle site com todos os arquivos e pastas que eu tenho dentro dessa pasta. Outra coisa que você vai notar, é um pouco estranho sobre Sublime Texto é, isso realmente abre na frente daquela janela de flocos que estávamos apenas olhando. Sempre que você apenas abrir arquivo, ele abre uma janela completamente nova ou navegador Chrome, então você pode simplesmente ir em frente e fechar uma antiga porque não precisamos mais dela. Então, mais uma vez para orientá-lo, Eu abro texto sublime, eu vou para Arquivo, Abrir e, em seguida, eu navego para a pasta que eu quero abrir e clique em Abrir. Uma outra opção que você tem para ver os arquivos, é se você tiver sua pasta aqui na barra lateral, basta ir em frente e arrastar isso e os Arquivos se abrirão ali mesmo sem abrir outra janela. Então, agora que temos isso aberto, vamos dar uma olhada em alguns dos arquivos com os quais temos que trabalhar para o portfólio de Jon Arbuckle. Vou abrir isso no navegador para ver visualmente o que temos. Então, eu vou abrir esta pasta, e eu estou indo para Clique no índice HTML, que lembrar é a nossa página inicial. Veja aqui você pode ver é a página inicial do portfólio Jon Arbuckle. Temos um logotipo, que liga de volta para a página inicial ou para a página de índice do site. Temos navegação principal que liga a três subpáginas que trabalham o sobre e o contato. Temos o nosso rumo sobre Jon Arbuckle, ilustrador freelance e autor. Temos a nossa imagem de herói que será substituída mais tarde assim que soubermos qual será essa imagem. Temos alguns títulos, baseados nas coisas que Jon faz para sua vida e tempo livre, como seus quadrinhos web, juntamente com a descrição e um link para ver mais. Sua música vai junto com uma imagem, para seu CD Polkaholic e eu vou ligar para comprá-lo. Temos outro título sobre Jon no Twitter com um parágrafo, então podemos ler sobre Jon no Twitter seguindo sua conta no Twitter, que o link está aqui. Temos um elemento blockquote. Este elemento blockquote é um testemunho de um cliente do Jon. Em seguida, temos outro parágrafo com uma chamada à ação para entrar em contato que vai para a página de contato. Em seguida, temos nossa foto que aparecerá em cada página com os direitos autorais, juntamente com nossa entidade HTML copyright. Saltamos para algumas dessas sub-páginas, podemos ver a página de trabalho tem o exemplo de Jon Web Comics, como o LASAGNA CHRONICLES e CAT TOWN. Além disso, podemos ver que estes são os retratos que Jon se ofereceu para fazer. Novamente, sua música, Jon realmente gosta de promover sua música. Em seguida, temos a página Sobre. Na página Sobre. Podemos aprender um pouco mais sobre o Jon também. Então, adicionamos uma imagem de Jon, um título e então temos dois parágrafos para descrever Jon. Nós também temos outro título para descrever a lista de serviços profissionais que ele oferece juntamente com lista desordenada descrevendo as coisas que Jon faz. Mais uma vez, você verá nosso conteúdo de filtro abaixo disso. Finalmente, temos nossa página de contato que acabou de explicar que você pode entrar em contato com Jon através de seu e-mail com um e-mail para link, e, em seguida, também um link para sua presença social no Twitter, Facebook ou Pinterest sob o título Em outro lugar no Interwebs. Então, vamos olhar para este site no navegador. Lembre-se, se você quiser abrir qualquer um dos seus arquivos, você pode apenas clicar duas vezes para abri-los, contanto que eles tenham that.html no final deles, e eles serão abertos em seu navegador preferido. Vamos voltar ao Sublime Text e dar uma olhada no HTML. Então, para abrir uma pasta, lembre-se se você apenas clicar uma vez, ela não será realmente Abrir, mas se você clicar duas vezes, você verá a guia aparece, que diz que é Aberto. Você pode ver o pequeno ícone de x aqui, o que significa que não há alterações a serem salvas agora. Você também verá que minha fonte é bem pequena. Então, eu vou aumentar isso um pouco. Posso fazer isso com o comando ou controle mais. Há atalho para isso. Você também pode ver que eu tenho este pequeno minimapa aqui, e o que isso faz, ele apenas nos mostra um pequeno mapa de todo o nosso código. Acho que isso meio que fica no meu caminho. Então, eu vou fazer vista, esconder minimapa, para me livrar disso, novamente ver esconder minimapa e você vai ver que desaparece que eu sou um fã de fazer isso desaparecer. Então, dando uma olhada em nossa página inicial, novamente temos nossa tag doctype ou HTML. Dentro de nossa cabeça, definimos o atributo meta e charset, temos o título da nossa página que é o portfólio de Jon Arbuckle, e então vamos para o corpo, onde temos nossas informações de cabeçalho. Marcamos isso com os comentários HTML, nosso link âncora volta para a página inicial porque queremos que essa imagem seja capaz de vincular de volta para casa. As listas não ordenadas para a nossa navegação e, em seguida, temos o conteúdo da nossa página. No conteúdo da nossa página, novamente você pode ver que marcado pelo comentário apenas para manter o nosso código agradável e organizado. Temos o nosso nível de cabeçalho um que explica o que é o site, a imagem do herói, o título da Web Comics, que é um h dois abaixo do h um. Nosso parágrafo vincula, novamente seguindo a mesma fórmula, outro título, outra imagem. Um nível de título três porque ele aninha sob o nível de título dois da música. Vimos o Jon no Twitter. Quando o olhamos no navegador, podemos vê-lo aqui também. Temos nossa seção blockquote, e dentro de nossa blockquote, temos nossas tags de parágrafo novamente com nossas entidades para garantir que obtemos as aspas para as aspas corretas em uma entidade dash para obter isso. Em seguida, temos o nosso parágrafo com um link para a página de contato e nosso rodapé. Essa é a nossa página inicial. Olhando para a página Sobre. Novamente, o cabeçalho deve ser o mesmo porque nós copiamos de página para página, e apenas o conteúdo da página será um pouco diferente com uma imagem h1. Alguns parágrafos na lista não ordenada aqui. Em seguida, vamos dar uma olhada rápida na página de contato. As páginas de contato são página bastante curta. Novamente, a única coisa diferente em todas as nossas páginas é a seção de conteúdo da página, e essa tem novamente um h1, que devemos ter em cada página e é o título mais importante. Nosso parágrafo e, em seguida, nosso outro lugar na web junto com nossa lista não ordenada. Último é a página de trabalho. A página de trabalho novamente, conteúdo da página diferente. Nós temos nossos títulos, nós temos subtítulos para web Comics, os títulos para os diferentes tipos de quadrinhos. Sob os quadrinhos é o link da imagem, e sob a música é o mesmo tipo de material aqui. Então, dê uma olhada nisso. Se você não fez este portfólio de Jon Arbuckle no outro site, não há problema. Basta alguns minutos para se familiarizar com o código se você quiser usar isso. Caso contrário, sinta-se livre para usar qualquer base HTML que você gostaria de usar para o site. Vamos falar de CSS e isso pode ser aplicado a qualquer HTML. Então, não se preocupe se você não gostaria de ajudar Jon Arbuckle. Tenho certeza que ele não vai segurá-lo contra você e vamos começar na próxima seção olhando exatamente o que é CSS, e como ele se aplicará ao nosso HTML. 5. O que é CSS?: Então, o que é CSS? Bem, CSS significa folhas de estilo em cascata e folhas estilo em cascata são o que usamos para adicionar estilos aos nossos elementos HTML. Então, coisas como layouts, cores, fontes, tudo isso é controlado usando CSS ou folhas de estilo em cascata. Isso é boca cheia e difícil de dizer cinco vezes rápido , então vamos apenas para CSS de agora em diante. CSS é o que é conhecido como a camada de apresentação. Quando se trata do front-end de um site que é o que chamamos basicamente como você muda um design em código antes de atingir a tecnologia de backend, então coisas como bancos de dados, o front-end lida com HTML, CSS e JavaScript também conhecido como camadas de conteúdo, apresentação e comportamento. Então CSS é a camada de apresentação como ele lida com toda a apresentação. CSS foi criado para que pudéssemos separar o conteúdo da formatação, então, se algum de vocês fez um monte de Web design nos anos 90 ou início dos anos 2000, você pode se lembrar de coisas como tags de fonte e fizemos muitas coisas dentro do HTML para fazer o estilo para ele. Coisas como negrito, usar tags negrito apenas para obter uma aparência ousada, mas queremos fazer isso com CSS agora porque usar CSS para lidar com o estilo significa que nosso HTML é mais portátil. Significa que podemos reutilizá-la para coisas diferentes. Ajuda com a acessibilidade e podemos formatar mais de um documento super facilmente e ser capaz de atualizar os estilos realmente facilmente quando mantemos as coisas separadas. O site csszengarden.com é um ótimo exemplo de tudo o que CSS pode fazer. A idéia por trás do site quando ele foi lançado é pegar o mesmo HTML e ver como, aplicando uma folha de estilo diferente, podemos obter layouts muito diferentes e olhar para a estética para o mesmo código. Então vamos dar uma olhada em alguns dos designs que eles têm aqui e ver como, embora todos eles usem o mesmo HTML, eles parecem bem diferentes. Se olharmos para o arquivo HTML, visualizando a fonte da página, podemos ver que este mesmo HTML é usado para criar esta página inicial e é o mesmo para criar esta página, mesmo HTML, mas CSS diferente, para criar isto ou isto e isto. Você pode ver que mesmo que o HTML seja o mesmo, ele parece completamente diferente. Podemos fazer com que nossos sites pareçam como queremos que eles pareçam apenas alterando o CSS e os estilos que estamos aplicando à página. Então não se preocupe novamente se você não quiser usar a mesma marcação, qualquer marcação fará, podemos usar o CSS em cima disso, mas vamos ver como aplicar estilos você terá todo o controle sobre a aparência da sua página. O que é realmente legal é que se usarmos nosso Chrome DevTools, mais uma vez podemos ver o que está acontecendo aqui. Então, se eu inspecionar elemento clicando com o botão direito do mouse ou control-clicando, você pode se lembrar na classe HTML que usamos isso para olhar para nossos elementos HTML, mas também no lado direito você verá aqui é o CSS que é usado em para criar os estilos para o site. Então, se eu voltar para o topo e eu dar uma olhada neste cabeçalho CSS ZEN GARMENTS, eu posso ver que é um H1 e, em seguida, aqui você verá estes são todos os estilos CSS que estão sendo aplicados para fazer isso acontecer. Não se preocupe se isso não fizer sentido agora, será quando terminarmos. Mas é assim que você usa seu inspetor e ele vai fazer isso, então você vai ver aqui, por exemplo, cor, e é cor azul. Mas se olharmos para um dos outros projetos e inspecionarmos seu H1, veremos que o H1 ainda é o mesmo que o CSS Zen Garden. Vamos puxar isso para que você possa ver isso um pouco melhor. Você pode ver os estilos aqui parecem bem diferentes do que vimos lá, incluindo a cor que é uma espécie de cor preta mais escura. Então, isso começa a dar uma idéia sobre como apenas ajustar estilos CSS seremos capazes de obter diferentes looks. Então, vamos entrar em como escrevemos CSS e a sintaxe e terminologia no próximo vídeo. 6. Sintaxe e terminologia CSS: CSS é composto de duas partes, o seletor e a declaração. O seletor vai nos dizer o alvo do qual estamos desenhando. Então, algo como um parágrafo ou um título. Seja qual for o elemento ou objeto, queremos estilizar. Isso é o que nos referimos como o seletor. A declaração vai especificar a propriedade em valor. Então, o que nós realmente vamos mudar sobre esse objeto. Então, se quisermos mudar a cor, ou se quisermos mudar o tamanho de algo, há algo que tínhamos especificado dentro da nossa declaração. Então, o que exatamente isso significa afinal? Bem, digamos que queríamos todas as tags de parágrafo em nossa página. Então, todos os nossos parágrafos que são marcados por uma tag p em HTML, se quisermos que todos sejam azuis? Bem, essencialmente os parágrafos então se tornam nosso seletor, e o valor de azul é adicionado em nossa declaração. Nós também temos que especificar a propriedade que azul está sendo aplicado. Neste caso, estamos a dizer a cor. Então, em inglês simples, queremos mudar a propriedade color para ser azul de todos os nossos parágrafos. Bem, como escrevemos isso? Quero dizer, certamente podemos gritar com o computador, mas provavelmente não vai nos ouvir. Então, em vez disso, vamos escrevê-lo com CSS. Então, o que vamos precisar fazer é dizer ao nosso CSS, qual é o nosso seletor, e então vamos dizer a ele a propriedade que estamos mudando, e o valor para o qual estamos alterando. Parece exatamente assim com seletor, e, em seguida, dentro declaração está contida dentro das chaves. Nós escrevemos a propriedade, e, em seguida, dois pontos, em seguida, o valor, e um ponto e vírgula. Toda a formatação CSS se parece com isso. Então, para sub-em um exemplo do mundo real como o que estávamos falando apenas para seletor de parágrafos. Dizemos p porque esse é o equivalente HTML a uma tag p. A propriedade torna-se cor porque essa é a propriedade CSS que estávamos alterando. O valor torna-se azul porque esse é o valor que queremos atribuir à propriedade. Então, essencialmente, você está sempre quer sub nesta fórmula com para o que você está tentando alterar em seu HTML com CSS. Então, qualquer seletor pode entrar aqui seus parágrafos, cada um deles um código de bloco. Qualquer coisa pode saltar aqui, e veremos isso um pouco mais tarde. Também é importante notar que nossas declarações podem ter mais de um par de valor de propriedade. Não queremos nos limitar a dizer textos que podem ser azuis. Então, vamos também dizer que se quisermos que a cor de todos os nossos parágrafos seja azul e todo o tamanho da fonte seja 14 pixels, podemos fazer isso. Tudo o que você precisa fazer novamente é escrever tamanho da fonte: 14 pixels; Então novamente, propriedade: value; O ponto-e-vírgula basicamente diz ao seu CSS, que você está prestes a começar a dizer uma nova propriedade, ou é o fim da propriedade. Ele não tem que ir em uma nova linha assim como HTML espaço em branco não importa. No entanto, acho mais fácil de ler especialmente quando começar. Quando você mantém todas as suas propriedades diferentes em uma nova linha. Mas agora que sabemos como escrever CSS. Como fazemos para que isso realmente se aplique ao nosso HTML? No próximo vídeo, vamos falar sobre vincular coisas como nossos parágrafos azuis ao nosso HTML real para fazer isso funcionar. 7. Como adicionar CSS às nossas páginas: Então, vamos adicionar o CSS às nossas páginas que já criamos com nossos projetos HTML. Se você estiver usando seu próprio projeto, vá em frente e abra isso no Sublime Text, se você estiver usando jon-arbuckle porfolio, nós vamos querer abrir isso também. Então, abra o Texto Sublime se ainda não o fez, e abra o arquivo e navegue até essa pasta, neste caso, jon-arbuckle-site, e clique em “Abrir”. Se tiver a barra lateral ligada, verá todas as pastas e ficheiros do lado esquerdo, tal como nós gostamos. Temos três opções quando se trata de adicionar CSS às nossas páginas e isso é através de estilos embutidos, em stylesheet interna e em stylesheet externa. Alerta de spoiler, vamos querer usar o último. No entanto, quero orientá-los através de cada um para explicar os prós e contras deles e por que eles são diferentes, e por que você pode querer usar alguns deles e o que fazer se você vê-los. Então, o primeiro com o qual vou começar é estilos inline. Vou abrir qualquer uma das nossas páginas. Neste caso, eu só vou começar com a página sobre. Abra a página sobre no texto Sublime clicando duas vezes. Apenas um lembrete, é assim que a nossa página sobre se parece atualmente. Então, tudo é estilizado basicamente com o que é chamado de padrões do navegador. Os padrões do navegador são a aparência da nossa página sem CSS. Então, neste caso, ele diz que, como este é um H1, o navegador diz, “Bem, faça isso maior e mais ousado do que outras fontes na página.” Nosso parágrafo é que um texto que é bastante legível em uma fonte Serif. Nosso H2 é novamente mais ousado porque é um título, mas um pouco menos grande que o nosso H1 porque não é tão importante. Nossa lista já tem balas como marcador. Estes são o que é chamado de estilos padrão do navegador. Assim, sempre que não adicionarmos um estilo qualquer texto ou HTML que colocamos em nossa página receberá os padrões do navegador. Vamos substituir isso com nosso CSS para dizer especificamente como queremos que nossa página fique. Então, a primeira maneira que vamos fazer isso com esses estilos inline. Eu vou rolar para baixo até o texto do meu parágrafo, e dentro da minha tag de parágrafo eu vou adicionar algo, e o que eu vou adicionar é um atributo. Você se lembra de nossa lição HTML que os atributos fornecem mais informações para a tag. Assim, por exemplo, em nossas tags vinculadas nosso H ref não era atributo, ou aqui em nossa imagem você pode ver a fonte é o que é chamado de atributo, e o texto alt é um atributo. Em seguida, o valor sempre vai dentro das aspas após o sinal de igual. Então, nossos estilos inline são essencialmente vai ser outro atributo e esse atributo é o atributo style. Assim como qualquer outro atributo, vamos começar por dizer o que é neste caso, estilo, em seguida, é igual a aspas. Dentro do valor do atributo, vamos dizer qual o estilo que queremos que seja. Então, em nosso último vídeo, demos uma olhada em declarações que estão emparelhadas com seletores, e nesse caso, nossa declaração tinha uma propriedade e um valor. Vamos escrever a propriedade e o valor dentro do nosso atributo de estilo. Então, neste caso, cor, e assim como fizemos no exemplo de sintaxe CSS, dois pontos, azul, semi dois-pontos, então eu vou salvar o arquivo. Lembre-se que é sempre importante para salvar, Eu posso dizer que meus arquivos não salvos porque ele tem o círculo lá. Então arquive, salve ou controle S, ou comando S. Eu vou deixar que abrir essa página sobre em um navegador entrar, se você não tem ele aberto novamente lembre-se apenas navegue até ele. Em seu localizador e seus documentos, onde quer que você os tenha salvo. Abra essa pasta e, em seguida, clique duas vezes para abrir. Então, aqui estamos nós na página aberta renovada, e hey, lá vai você. Olhe para que o nosso texto agora é azul assim como dissemos para ser com um estilo embutido. Se você queria adicionar algo mais, se você não se lembra em nosso exemplo anterior, falamos sobre ter várias propriedades e valores em nossa declaração. Podemos fazer isso em estilo inline também. Então, logo após esse semi dois-pontos, que indica que o par de valor de propriedade é feito, podemos escrever outra propriedade. Neste caso, vamos alterar o tamanho da fonte. A propriedade CSS para fazer isso é chamada de tamanho FAAB. Então, nós escrevemos font-size, dois pontos para dizer que vamos dar o valor para esta propriedade, e vamos apenas mudar para algo como 18 pixels. Para dizer que terminamos de declarar nosso valor, um ponto-e-vírgula. Novamente, vamos querer salvar isso, voltar, atualizar a página, e agora você pode ver que nosso tamanho de fonte foi alterado. Este é o CSS que aplicamos para alterar a cor e o tamanho da fonte, e fizemos isso com o que é conhecido como um estilo embutido. Então estilo inline está dizendo: “Vamos usar um atributo de estilo em uma tag para obter a cor, tamanho, ou qualquer outra propriedade CSS que queremos alterar.” Então, o que acontece se quisermos que todos os nossos parágrafos sejam azuis e tamanho da fonte 18? Bem, teríamos que ir a todos os nossos parágrafos em uma página e digitar outros atributos de estilo. Então o estilo é igual a cor, dois pontos, azul, tamanho da fonte semi vírgula, dois pontos, 18 pixels, semi dois-pontos. Eu posso salvar isso, voltar para o Chrome, atualizar, e agora esse parágrafo é azul e 18 pixels também. Isso é ótimo, quero dizer, é legal termos tanto controle, mas você pode ver o quão entediante isso ficaria se você tiver mais de dois parágrafos em seu site, que provavelmente terá? Se você pensar em sites grandes, imagine ter que passar e declarar cada propriedade CSS que você quer que ele direito na tag? Isso iria feder, e aposto que tem coisas melhores que gostaria de fazer com o seu tempo. Então, isso se torna um problema com o estilo embutido. Outro problema com o estilo inline é digamos que no final da estrada você decide que você esquisita odeia azul. Azul é só um idiota e você não quer que seus parágrafos sejam mais azuis. Digamos que, em vez de suas novas cores favoritas vermelho. Para mudá-lo para vermelho, você pode entrar aqui, excluir o azul, digite vermelho. Claro, isso vai funcionar e se voltarmos e atualizarmos você pode ver que é vermelho, mas agora você tem que encontrar todos os lugares onde você disse azul e mudar isso para vermelho. Isso seria um processo muito tedioso, e muitas mudanças e seria muito fácil para você perder uma. Então, a boa notícia é que temos uma solução melhor. Então vamos dar uma olhada nas folhas de estilo internas a seguir. Então, eu vou ir em frente desfazer esses estilos inline porque eles não são a maneira preferida que eu gostaria de escrever nosso CSS. Então, eu só vou ajustar isso de volta. O que eu vou fazer é essencialmente, eu quero dizer ao nosso CSS para aplicar a tudo. Quero fornecer informações sobre os estilos do documento. Isso soa um pouco familiar? Lembra onde definimos outras informações para o documento geral e o que significava? Talvez a nossa meta-informação? Mantivemos isso na nossa cabeça, certo? Lembre-se, o cabeçalho descreve metadados para a página. Então, com em Nossa cabeça é realmente onde vamos definir o nosso documento de estilo. Para criar uma folha de estilo em linha, vamos precisar de uma tag de estilo. Vou adicionar o elemento de estilo dentro da nossa cabeça. Só vou fazer alguns, olhe, muitos espaços. Apenas dois espaços abaixo apenas para eu ser capaz de ver isso um pouco melhor, e quando começar escrevendo e abertura tag estilo. S, como você pode ver, no texto Sublime uma das coisas que ele faz porque é um editor de texto HTML é que ele começa sugerir auto-completar para o que estamos tentando escrever. Então, ele me vê digitando S, T, e ele assume que eu gostaria de escrever uma tag de estilo. Claro, eles estão corretos que pode ser muito bom se eu apertar enter, ele auto-complete isso para mim. No entanto, vou desligar isso por enquanto. Você pode desligar isso nas preferências, e eu vou fazer isso porque será um pouco mais fácil para você ver o que eu estou fazendo se eu digitar tudo, e porque às vezes eu acho que é importante digitar as coisas quando você está começando a aprender pela primeira vez. Então, para fazer isso, vou para minhas preferências de Texto Sublime e definir minhas preferências de usuário. Agora, você pode ou não pode ver nada aqui, meu tamanho da fonte está lá porque eu ampliei o tamanho da fonte mais cedo e ele salvou essa preferência para mim. Então, contex permite que você adicione quantas preferências quiser. Você pode saber mais sobre as preferências de texto Sublime simplesmente pelo Googling. Então, digamos que eu queira desativar o preenchimento automático e eu não tinha certeza de como. Eu poderia fazer um rápido Google para Sublime Text autocomplete, e você vai obter os resultados para isso. Sinta-se livre para fazer isso, e se não, podemos copiar o que estou fazendo aqui, que seria vírgula, porque estamos prestes a ampliar uma nova propriedade, então eu vou apenas escrever, auto_complete, dois-pontos, false. Eu vou salvar isso, e agora quando eu voltar e começar a digitar, preenchimento automático estaria desligado. Mais uma vez, lembre-se, se eu quisesse ver isso, ou se eu me esquecesse de como escrever algo assim, eu poderia simplesmente ir ao Google e procurar por Sublime Text para autocompletar. Você vai ver aqui, eles vão te dar essa informação. Nesse caso, você poderia simplesmente copiar e colar isso de lá se você quisesse, controlar C ou comando C para copiar ou editar cópia, então você poderia voltar para suas preferências e simplesmente colá-lo lá em vez disso. Claro, não precisamos fazer isso porque eu já digitei, então vou salvar isso e fechar isso. Agora, voltando para nossas tags de estilo, eu faço estilo aberto e você vai se lembrar de HTML que se eu vou abrir uma tag, eu também quero fechá-la. Então eu vou fechar isso para lá. Em seguida, com tag estilo inline é onde eu vou escrever meus seletores CSS e declarações. Então, você se lembra de volta quando olhamos para a sintaxe, a sintaxe essencialmente se parece com isso, seletor , chave e, em seguida, a propriedade, dois-pontos, valor, semi dois-pontos. Tudo o que temos que fazer é se quisermos aplicar propriedades e valores reais aos nossos seletores é substituir esta fórmula pelo que estamos realmente tentando manipular. Então, neste caso, no seletor eu vou torná-lo um P para a tag P, a propriedade que estou mudando é cor, e os valores para os quais estou alterando é azul. Sublime Text está nos dando cor de realce de sintaxe aqui, então ele reconhece que os valores que acabamos de colocar são propriedades e valores CSS reais, e isso é um elemento real ou seletor de tags. É por isso que eu mudei da cor branca para o rosa e o azul para que ele registre que é realmente uma propriedade CSS funcional. Então, temos nosso seletor de tipo, neste caso, o tipo é um parágrafo, um P. Nossas cores são propriedade e nosso azul é nosso valor. Vamos salvar isso, voltar ao Chrome, atualizar a página. Agora, todos os nossos parágrafos são azuis. Lembre-se, nosso conteúdo de rodapé é, na verdade, um parágrafo com nossas informações de direitos autorais, modo que ficou azul também. Tudo o resto deve ficar como era porque não é um parágrafo, e é assim que começamos com folhas de estilo internas. A mesma coisa, se eu quiser aplicar mais propriedades e valores eu posso fazer isso. Eu vou para uma nova linha, eu vou digitar esse tamanho da fonte, propriedade, então tamanho da fonte 18 pixels. Vamos dar uma olhada na propriedade de cor e fonte um pouco mais tarde, mas eu só quero que você veja isso em ação para que vocês possam ver como ele vai se conectar à nossa página. Vou salvar isso, atualizar a página, agora todos os meus parágrafos são 18 pixels. Então, nossa folha de estilo interna é definitivamente melhor do que nossos estilos embutidos. Mais fácil de escrever, não precisamos copiá-lo para cada elemento de parágrafo. Somos muito legais, certo? Está parecendo muito bom. Onde o problema com estilos embutidos surge é que provavelmente seu site não será apenas uma página. Provavelmente, você deseja que cada página do seu site seja semelhante para que as pessoas saibam que ela pertence ao mesmo site. Se quiséssemos que os estilos da nossa página Sobre também estivessem nos estilos da nossa página de trabalho, teríamos que copiar nosso elemento de estilo, abrir a página de trabalho, colá-la aqui, salvar isso. Abra esta cópia de segurança, vá para a nossa página de trabalho, e lá nossos parágrafos são azuis e 18 pixels. Eu não sei quantos parágrafos nesta página, mas você pode ver o que está começando a ficar irritante, certo? Agora, eu preciso copiar e colar isso no elemento principal de cada página do meu site. Se você tem um site de 40.000 páginas que não vai ser uma experiência agradável. Então, isso nos deixa com nossa terceira escolha, nossas folhas de estilo externas. A folha de estilo externa é um arquivo separado que vai conter nosso CSS. Então, vamos fazer nossa folha de estilo externa. Como fazemos isso é criar um novo arquivo, você possa arquivar um novo arquivo ou botão direito e clicar em novo arquivo na pasta. Vou arquivar um novo arquivo. O que eu posso fazer aqui agora é começar a escrever meu conteúdo CSS. Então, neste caso, eu vou copiar tudo o que eu tinha aqui sem a tag estilo dentro do que será o meu documento CSS. Então, lembre-se que eu vou dizer, “Eu quero que todos os meus parágrafos sejam de cor azul.” Então, P, chaves, cor, azul, ponto-e-vírgula e salve. Agora, quando eu salvar, ele vai me perguntar com a caixa de salvamento, a caixa de diálogo Salvar, Ele vai dizer, “Como você quer salvá-lo como?” Agora, não aperte Return muito rápido, porque caso contrário, ele vai salvar como “P chave encaracolada”, que é a primeira linha do nosso documento. É claro que não queremos isso. O que queremos que ele salve como, é algo como, “Styles”. Agora, a parte realmente importante é nomeá-lo as.CSS. Então, assim como nós arquivos had.HTML, para dizer que é um arquivo HTML, temos o arquivo got.CSS. Isto diz ao navegador que esta é uma folha de estilo em cascata e que terá estilos para o nosso HTML. Então, você pode salvar isso como, styles.css. Eu gosto de chamá-lo styles.css é um nome bastante curto para digitar, é fácil de lembrar. Alguns nomes como JohnArbucklestyles.css que é tipo de lote vamos apenas ir com styles.css. Vamos salvá-lo no mesmo nível de todas as nossas páginas HTML, então salve. Agora, você verá assim que eu salvei, o realce da sintaxe de cores começou porque Sublime Text 2 sabe que é o arquivo a.CSS, que significa que ele sabe destacá-lo com base no texto CSS. Então, agora, eu vou voltar e pegar esta folha de estilo interno. Vou apagar isso, vou salvar isso de volta. Acesse o Chrome, estou na página de trabalho e quero estar na página Sobre. Vou apenas clicar em voltar, atualizar a página e voltar aos padrões do navegador. Bem, por que eu volto para os padrões do navegador? Eu disse que deveríamos usar esta folha de estilo externa, certo? Bem, nós criamos o styles.css, mas o que não fizemos? Nós não ligamos os dois arquivos de qualquer maneira, certo? Temos em about.html, temos um styles.css, não dissemos a ele para aplicar styles.ccs à nossa página Sobre e HTML, então temos que fazer isso. Fazemos isso anexando nossa folha de estilo externa com uma tag de link. A tag vinculada é diferente da nossa tag âncora que define links, então um pouco semelhante em nomes, mas definitivamente uma coisa diferente. O link vai anexar o arquivo que queremos usar para o nosso CSS. Nós vamos adicionar em nossa tag link para definir outro arquivo que uma vez vinculamos. Então, vamos digitar colchete aberto, link e, em seguida, vamos precisar de alguns atributos. Essencialmente, o link é uma tag autônoma que apenas contém atributos e nenhum conteúdo. Então, a primeira coisa que vamos dizer é rel="stylesheet”. Os atributos rel vai salvar a relação deste arquivo de link para o documento. Neste caso, está dizendo que sua relação é que é uma folha de estilo. Então, o próximo atributo que escrevemos deve parecer familiar como você já viu antes e que é o href. Lembre-se o href disse foram o documento que estávamos vinculando está localizado e vamos fazer a mesma coisa para onde devemos vincular o arquivo CSS. Então, href= "”, então nós vamos preencher isso com onde a folha de estilo está localizada. Então, neste caso, vai ser bem fácil. Assim como o nosso trabalho nas páginas de contato funcionou, estamos atualmente na página Sobre e queremos ir para styles.css. Então, estamos no mesmo nível, o que significa que não precisamos subir um nível ou em nenhuma pasta. Styles.css e, em seguida, feche nossa tag de link. Agora, se eu estivesse segurando meu styles.css em uma pasta chamada CSS ou algo assim, lembre-se, eu teria que salvar a pasta que eu queria entrar, então uma barra entraria na pasta. Mas já que estamos no mesmo nível, eu vou excluir isso e apenas salvá-lo um styles.css porque ele está no mesmo nível em nossa estrutura de pastas como nossa página sobre. Eu vou salvar com comando, controle S, voltar ao nosso navegador novamente, atualizar a página, rolar para baixo aqui. Você pode ver que todos os nossos parágrafos são azuis porque agora nossa folha de estilo está vinculando corretamente. No próximo vídeo, analisaremos o uso do Inspetor da Web para ver como nosso CSS está sendo aplicado à página e como podemos ajustar as coisas para ver como as coisas ficarão. Também vamos dar uma olhada na solução de problemas. Então, se seus estilos não estão aparecendo agora, assista ao próximo vídeo e vamos ver como podemos ter certeza de que estamos fazendo os arquivos se conectarem corretamente e podemos vê-los no navegador. 8. Resolução de problemas e o Web Inspector: Se você não pode ver seu texto ficando azul agora, bem, isso é uma super chatice. Então, vamos dar uma olhada em algumas das coisas que podem estar dando errado. Primeiro, certifique-se de que você está olhando para a página correta. No momento, só adicionamos nossa tag de link em nosso about.html. Não o adicionamos em nenhuma das outras páginas como nosso trabalho, nosso índice ou nosso contato. Então, se você está olhando para qualquer uma dessas outras páginas, então isso não vai funcionar para você. Se você colocar a tag de link em uma dessas outras páginas, então ela não vai estar na página sobre. Então, vamos nos certificar de que temos nossa página sobre aberta, e que nossa tag de link está lá dentro. Em seguida, é muito importante verificar coisas como suas cotações. Lembre-se, às vezes, se você deixar algo assim, o CSS não será lido corretamente. Então, use o realce de sintaxe de cores para se certificar de que você está vendo a sintaxe styles.css realçada corretamente. Em seguida, verifique se o caminho está correto. Você realmente nomeou isso, styles.css? Se você nomeou algo diferente de mim, então você vai querer mudar isso para o que você nomeou. Então, se você precisava de algo como colors.css ou catsrule.css, então você quer ter certeza de que é isso que ele diz. Neste caso, dissemos styles.css. Às vezes, o que eu gosto de fazer é se há um nome complicado ou talvez algo que eu não possa digitar facilmente, eu posso clicar aqui para Renomear, basta selecionar tudo para copiá-lo. Eu não vou realmente renomeá-lo. Eu vou voltar para cerca e apenas colar isso para ter certeza de que eu estou entendendo exatamente como deveria ser. Em seguida, você se certificou de que está no mesmo nível? Se você tiver outras pastas, lembre-se que o caminho vai ser um pouco diferente. Então, para imagens, temos que ir para a nossa pasta Imagem. Isso é algo que você pode querer ver. Outra coisa que você pode fazer para ter certeza de que o arquivo está realmente sendo vinculado e então o problema está no arquivo e não seus seletores reais aqui, é ir em frente e olhar para isso em um navegador. Então, vou guardar as coisas de volta ao que eram, voltar e refrescar-me. Bem, digamos que não está funcionando porque talvez eu tenha esquecido de fechar ou abrir uma cotação. Se eu voltar aqui, você pode ver que o styles.css não está mais funcionando porque meu atributo não foi nomeado corretamente. Então, uma das coisas que eu posso fazer é abrir de volta ou nosso Inspector Elemento para fazer Web Inspector ou eu posso ver nossa fonte. Então, View, Developer, View Source, e você notará sempre que visualizarmos o código-fonte, veremos que nossos links são azuis exatamente como vimos em páginas web normais. Se eu quisesse abrir isso em uma nova guia, eu realmente poderia porque este é um link para que logo.png. Isso me permite saber que esse link está realmente funcionando e indo para o lugar certo. Então, eu poderia tentar fazer a mesma coisa com estilos aqui, então abrir link na nova guia e eu vejo esta página da web não foi encontrada, e eu posso começar a ver que há um problema aqui porque eu vejo esta citação aqui, ali não deve haver nenhuma cotação no URL do meu arquivo? Então, deixe-me voltar aqui e dizer, “Isso é estranho.” Isso pode me ajudar a identificar que algo está errado com a forma como estou ligando. Outra coisa que podemos fazer é usar nosso validador HTML. Você pode se lembrar disso da nossa última aula, então você quer ir em frente para o Serviço de Validação W3. Vou copiar todo o meu código. Vou fazer isso com o controle A ou o comando A para selecionar tudo, ou Editar, Selecionar Tudo. Vou selecionar tudo e depois vou copiar. Vou até o validator.w3.org e ir para Direct Input, colar meu código lá e clique em Verificar. Agora, você verá que estou recebendo um erro agora quando eu passar isso através do validador. Então, deixe-me descer e ver qual é o erro e o erro diz, “Em valor de atributo não citado.” Isso é fabuloso, está me dizendo exatamente o que está errado. Então, linha 10 atributo não citado, eu volto aqui. Isso foi com a linha nove, mas você tem a área geral e eu posso ver, oh caramba, eu esqueci esta citação, e guarde isso. Então, essa é uma maneira. Agora, deixe-me ir em frente e quebrar isso um pouco, voltar para o nosso navegador, atualizar isso. Novamente, não está funcionando. Então, vamos voltar ao que eu fiz antes. O que eu fiz foi ter certeza que os estilos estavam lá. Outra maneira de fazer isso inspecionando Element. Lembre-se, Inspector nos permite ver todo o HTML na página? Eu vou abrir meu elemento cabeça, eu vou para o meu styles.css, eu vou clicar sobre isso, e eu posso ver que ele está realmente carregando o styles.css. Então, o problema não está mais vinculando, o problema é algo dentro do meu styles.css. Tudo bem, deixe-me voltar e verificar isso. Então, eu passo para styles.css, e neste ponto, eu realmente não tenho certeza do que está errado. É muito fácil perder um ponto e vírgula ou dois pontos de vez em quando. Então, se eu não ver isso imediatamente, eu posso novamente usar algo como um validador. Não há apenas validação HTML, há também a validação CSS. Então eu vou copiar meu código daqui, então eu vou para o CSS Validation Service. Isso é jigsaw.w3.org/css-validator ou apenas fazer uma pesquisa rápida do Google para o validador CSS e clique no link que aparece. Vou ao Direct Input. Claro, você também pode colocar um URL real do documento ou fazer upload do arquivo, mas eu já copiei tudo, então deixe-me apenas colar isso lá. Eu vou verificar, e agora ele vai dizer que eles encontraram um erro em 2, área de texto p, cor Erro de análise azul. Isto identifica-me onde está o problema. Agora eu posso encontrar na linha 2, e eu posso olhar e dizer, cor, ponto e vírgula azul, oh espere, eu realmente não coloquei dois pontos dentro Então, deixe-me adicionar o cólon. Agora, você pode ver Sublime Text às vezes gosta de autocompletar para você, que pode ser um pouco irritante porque eu não quero isso agora. Então, vamos deletar isso, então eu volto a estar pronto e no negócio. Então, deixe-me salvar isso, voltar ao meu navegador, atualizar isso, e as coisas ficam azuis novamente. Então, agora que temos tudo funcionando, vamos em frente e copiar a folha de estilo externa para nossos outros arquivos. Lembrem-se, neste momento, está apenas na nossa página sobre. Entäo, se eu for ao nosso Lar, os parágrafos ainda estäo no estilo preto em vez do estilo azul que abordamos. Então, eu vou para a minha página sobre, eu vou copiar este elemento de link, e então eu vou abrir todas as minhas outras páginas. Vou substituir isso. Lembre-se, eu gosto de manter as coisas arrumadas, então eu vou apontar isso lá dentro, ir para a página Contato, soltar isso lá dentro. Finalmente, nossa página inicial, você também pode adicionar isso lá, e salvar. Parece que esqueci de salvar o contato e esqueci de salvar o trabalho, deixe-me salvá-los. Agora, se eu voltar para o navegador, e atualizar, podemos ver que os estilos estão sendo aplicados. Também podemos usar nosso Inspetor para ver os estilos que estão sendo aplicados no momento. Assim como usamos para procurar cada HTML, também podemos visualizar nosso CSS. Vou rolar para baixo para poder ver isto. Você pode ver que eu estou no meu blockquote, e então meu parágrafo e você pode ver no lado direito aqui, nós temos nossa guia Styles. Nossa guia Estilos nos diz que a cor do parágrafo é azul. Então, podemos ver quais estilos estão sendo aplicados à nossa página inspecionando os elementos para o nosso CSS também. Outra coisa legal que você pode fazer no Inspetor é realmente ver como outra cor ficaria. Então, eu posso ir até aqui, você percebe que quando eu clicar, é destacado, e digamos que eu não quero que as coisas fiquem azuis mais. Lembre-se, nós não gostamos de azul. Vamos torná-lo vermelho. Eu posso digitar vermelho, e agora você pode ver que o texto é vermelho. Então, o Inspetor nos permite ver uma prévia ao vivo para ver se talvez gostamos de outra coisa melhor. Claro, isso não vai salvar em seu CSS real, mas você pode testar as coisas para ver como elas ficam, decidir se você gosta de algo e então você se sente como, você sabe o que, vermelho parece bom, voltar para seus estilos e mudar isso para vermelho . Então, é assim que o uso do Inspetor funciona e um pouco sobre como podemos solucionar problemas para garantir que nossos estilos estejam realmente chegando à nossa página. Claro, acabamos de começar a riscar a superfície sobre o que podemos fazer com CSS. Então, na próxima lição, vamos dar uma olhada mais profunda nas propriedades CSS com as quais temos que trabalhar para aplicar ao nosso HTML. 9. Propriedades de fonte: CSS propriedades são o que usamos para alterar a aparência do nosso HTML. Neste caso, analisamos duas propriedades CSS até agora, cor e tamanho da fonte. tamanho da fonte, assim como o nome indica, altera o tamanho de nossas fontes. Podemos voltar para o nosso styles.css e vamos reaplicar um tamanho de fonte para nossos parágrafos. Neste caso, digamos 16 pixels. Bem, nós não vamos querer apenas mudar nossos parágrafos, nós provavelmente também vamos querer mudar coisas como nossos títulos e nossa lista. Por enquanto, vamos começar com nossos títulos, e vamos dizer que nosso h1 terá 30 pixels. Agora, a fim de fazer outra propriedade para outro seletor, vamos apenas fazer a mesma coisa que fizemos aqui e seguir nossa sintaxe do valor da propriedade seletor. Neste caso, nosso seletor será nosso nível de direção um. Para escrever isso, lembre-se que nosso HTML é h1. Aparelhos curtos, é onde fazemos as nossas declarações. Neste caso, vamos dizer font-size: 30 pixels. Isso diz usar a unidade de medida de pixel e torná-la 30 pixels. Vamos salvar isso. Eu vou abrir minha página de contato e eu vou atualizar, e lá está ela. Não parece muito diferente, certo? Bem, vamos dar uma olhada no que está acontecendo e ter certeza de que está realmente funcionando. Nosso h1 tem 30 pixels, e nossos parágrafos são azuis e 16 pixels. Ok, então talvez estejamos um pouco perto do que os padrões do navegador eram de qualquer maneira. Vamos aumentar isso. Quanto devemos aumentar? Eu não sei. Vamos brincar aqui até encontrarmos algo que gostemos. Só estou a clicar na seta para cima. A seta para cima e para baixo alterarão o valor do pixel em uma quantidade. Ei, isso parece muito bom, 52. Vou guardar isso. Bem, não posso salvá-lo daqui. Eu tenho que voltar e realmente mudá-lo aqui para o meu arquivo, e eu vou fazer isso, agora vamos apenas fazer 50. Meus h1 50 pixels. É assim que ele define o tamanho da fonte. Pixels é apenas uma unidade de medida que podemos usar para definir o tamanho de nossas fontes. Assim como poderíamos descrever as coisas em talvez metros ou polegadas ou pés, você também pode descrever seus tamanhos de fontes em diferentes unidades de medida. Outro exemplo é usar uma palavra-chave. Alguns dos valores de palavra-chave que possivelmente temos são pequenos, ou extra, extra grandes, que seriam escritos assim. Podemos salvar isso, voltar ao nosso navegador e ver como isso parece. Bem, realmente não é tão grande comparado com o que tínhamos antes, mas é assim que você faz extra grande. Você pode ver, porém, que nossos parágrafos são muito pequenos. Nós também podemos ver como ele se parece em extra pequeno ou extra, extra pequeno, e isso é muito pequeno. Eu não uso óculos ainda, mas eu acho que eu faria se tudo fosse tão pequeno. Outros valores possíveis que temos são em, então poderíamos dizer algo como 1em ou 5em. Podemos salvar isso, atualizar, e você pode ver que isso ficou bastante maior, e 1em é basicamente o padrão do tamanho da fonte de qualquer maneira. Você poderia usar decimais nisso também, então você poderia dizer algo como 1.5em ou 2em. Nós também temos porcentagens, então você pode dizer algo como 100 por cento ou 300 por cento. Poupe isso, volte. O tamanho da fonte é baseado na porcentagem do elemento pai. Neste caso, a página inteira. Este tamanho de fonte, você pode cavar profundamente no lado quais medidas de tamanho de fonte são as melhores para você. Eu vou dizer que pixels são os mais fáceis de começar e tipo de mais fácil entender sua cabeça ao redor porque nós sabemos o quão grandes 16 pixels serão, então vamos voltar para isso. Vamos fazer o tamanho da fonte 20 pixels para parágrafos, e h1 como 40 pixels. Sinta-se livre para brincar com algumas das outras unidades que você pode usar para o tamanho da fonte. A próxima propriedade de fonte que veremos é o peso da fonte. E se quisermos que o peso da fonte seja negrito? Bem, já vimos algumas fontes em negrito com nossos títulos. E se quiséssemos tornar os nossos parágrafos em negrito também? Podemos fazer isso com a propriedade do peso da fonte. Então, peso da fonte: negrito. Vou salvar isso, Arquivo, Salvar e atualizar a página. Agora você pode ver o texto do meu parágrafo está em negrito. Se eu quisesse ver como ele parecia sem negrito, apenas uma visualização no inspetor do navegador, vamos apenas ativar e desativar as propriedades, e você pode ver as diferenças que eles estão fazendo à medida que vamos. Agora você pode estar pensando, “Como eu poderia saber que a palavra é ousada para isso?” Sim, claro, estou te dizendo isso agora, mas como você sabe disso? É aí que os Googles voltam. Não se preocupe em memorizar tudo isso agora. O bom de trabalhar em CSS é que você vai escrever CSS em um computador. Agora, concedido esperando que você tenha uma conexão com a Internet, muito provavelmente, você está como uma guia de apenas Googling qual é o valor da propriedade CSS para isso. Digamos que eu não me lembrava, mas eu sabia que queria deixar meu peso de fonte ousado. Bem, eu posso ir a um site de referência. Um dos sites de referência que eu realmente gosto é HTML Dog. HTML Dog tem esta lista de referências no site. Você pode ter olhado para as tags HTML antes, nós também podemos olhar para as propriedades CSS. Eu sei que eu quero mudar o peso da minha fonte, e bem aqui, olhar em Texto e Fontes, eu vejo o peso da fonte. Eu clico nisso, e então o que ele vai fazer aqui é listar os valores possíveis que eu posso definir para essa propriedade. Normal, mais ousado, ousado, mais leve e, em seguida, peso. O peso começa do mais leve ao mais ousado. Nesse caso, você pode até ver um exemplo, font-weight: bold, que é o que estamos digitando aqui. Você também pode desativar o peso da fonte: negrito dos títulos, se quiser, e você pode fazer isso usando font-weight: normal. Para o h1, posso dizer font-weight, e depois escrever normal. Eu tenho esse valor normal novamente a partir daqui, eu vou salvar meu arquivo, voltar aqui, e agora assistir o h1. Não é mais ousado porque decidimos definir isso ao normal. É assim que você começaria a adicionar pesos de fonte à sua página. Você pode querer deixar seus cabeçalhos em negrito para que as pessoas saibam que esses são realmente cabeçalhos, mas nós já aumentamos nosso tamanho de fonte para 40 pixels que é bastante óbvio que este não é apenas o texto de parágrafo que estamos procurando em. Por enquanto, eu me sinto bem removendo os pesos da fonte de negrito e ajustando-o de volta ao normal. Em seguida, temos a propriedade Font Style. O estilo da fonte nos permite ajustar o estilo da fonte. Exemplos que temos são itálico ou oblíquo. Se quiséssemos fazer... Vamos montar os H2s. Eles ainda não têm nenhum amor CSS. Então, h2 para o nosso seletor, chaves e, em seguida, dentro de que são propriedade e valor. Neste caso, estamos falando de estilos de fonte, então font-style፦ Então vamos dizer Itálico. Guarde isso. Atualize o navegador e você pode ver que nosso nível de cabeçalho dois mudou para Itálico. Isso parece um pouco pesado ser itálico e ousado, então podemos combinar coisas para que possamos ter font-style e font-weight. Então vamos mudar o peso da fonte para normal e remover esse negrito. Agora, aqui temos o nosso rumo, que é o peso itálico e normal. Novamente, se eu quisesse saber quais opções eu tinha para fontes, eu poderia voltar para minhas propriedades CSS em htmldog e verificar o estilo da fonte. Aqui, você vai encontrar as diferentes opções que eu tenho. Então, nós ajustamos algumas coisas melhor fonte até agora, mas uma das coisas que não mudamos em tudo é a fonte real que estamos usando. Talvez você não seja um grande fã dessa fonte serif. Talvez queira usar uma fonte sans-serif. Podemos ajustar totalmente isso e vamos fazer isso com a propriedade font-family e a font-family nos diz qual fonte você gostaria de usar. Então, vamos mudar nossos parágrafos para a família de fontes. Então vamos mudar isso para a família de fontes de Arial. Então, o que vamos fazer é para valor sobre propriedade, vamos escrever o nome da fonte que queremos usar, neste caso Arial. Vou dizer isto e Arial é uma fonte sans-serif. Então, todas as fontes que temos procurado são serifas, que têm esses caras de linha no final exceto pelo nosso logotipo, é claro, mas isso é uma imagem. Eu vou salvar isso e agora você vai ver que o texto do nosso parágrafo mudou de nosso navegador padrão para Arial. Então é assim que você define uma fonte. Existem algumas maneiras diferentes que você pode fazer famílias de fontes e uma delas é descrever o botão específico que estamos usando, como Arial, mas também podemos usar uma família de fontes genérica. Então, você me ouviu usar a palavra “Serif e sans-serif”. Bem, você pode apenas dizer, em geral, que eu quero qualquer sans-serif. Isso é o que chamamos de nome genérico de família. Você pode voltar aqui, clique que você verá que é muito semelhante ao navegador que podemos estar usando Arial. Mas o que ele essencialmente faz o navegador diz “Encontre o padrão sans-serif que você tem e sirva”. Os outros nomes genéricos de família que temos são serif, como vimos para que possamos mudar isso de volta para um serif. Também podemos fazer cursiva. Guarde isso. Volte aqui e você pode ver que ele muda para qualquer fonte cursiva padrão do computador. A próxima família de fontes genéricas é monospace. Poupe isso, volte aqui e o monoespaço que verá é como carreira. Você essencialmente usa isso para algo como código. Amostras é um lugar que você veria que você usa muitas vezes e o último que temos que pode ser o meu favorito para famílias de fontes genéricas é fantasia. Guarde isso e terá algo doce. Talvez para Pyros em um Mac ou Comic Sans se você tiver o prazer de usar o Windows e começar a ver essa beleza. Então, eu estou totalmente bem se você quiser definir toda a sua cópia para fantasia. Eu acho que isso é legal. Algumas pessoas podem não concordar, mas “Ei, é o seu site”. Então, uma das coisas que uma família genérica faz é essencialmente ela serve qualquer tipo de letra que está disponível para a máquina. Nem todas as fontes estão disponíveis em todos os computadores. Existem fontes diferentes baseadas em se você estiver em um computador Mac ou Windows ou Linux. Existem fontes diferentes com base em se você decidiu instalar fontes ou excluir fontes. As fontes em cada máquina são uma espécie de até qual sistema operacional você está executando e preferência do usuário. Porque nem todas as fontes estão em todas as máquinas, estamos limitados no que podemos servir. Posso querer servir a Helvetica, mas pode não estar no seu computador. Essas famílias genéricas servem qualquer fonte disponível nesse gênero familiar genérico, então ele vai procurar qualquer que seja o padrão do sistema operacional para cursivo ou serif e é isso que ele servirá. Temos o que é conhecido como fontes seguras para a Web. Fontes seguras para a Web com esta lista de seis fontes que encontraram seus serviços estavam disponíveis em quase todas as máquinas. Então Arial, Georgia, Verdana, Courier, Trebuchets, Times New Roman, essas são coisas que você verá comumente na maioria dos computadores. Então você pode estar bem seguro usando qualquer um desses. No entanto, também temos a pilha de fontes e a pilha de fontes é uma maneira de servir fontes de fallback. O que isso significa é que você pode servir sua primeira escolha de fonte e, em seguida, se essa fonte não estiver disponível, a próxima fonte na lista será servida para o computador em vez disso. Então, vamos ver algo como dizer, “Eu queria servir Helvetica.” Eu poderia escrever Helvetica, mas então eu quero dizer que se o computador não tem Helvetica, sirva esta fonte em vez disso e eu faria isso com uma lista separada por vírgulas. Então eu posso fornecer vários valores para algumas propriedades com uma lista separada por vírgulas de valores. Então, é claro que você não vai ter um valores separados por vírgula para peso da fonte porque você não vai dizer negrito vírgula normal. A fonte vai ficar em negrito. No entanto, font-family é a situação em que você gostaria fazer algo assim e onde o trabalho pode ser válido porque você pode ter várias fontes especificadas no caso de você precisar usar um fallback. Então, digamos que não há Helvetica servir Arial em vez disso. Se não houver Arial, a última fonte que queremos listar em nossa pilha de fontes será o nome de família genérico. Neste caso, são todas fontes sans-serif, então eu vou dizer se você não tem uma Helvetica e você não tem Arial para servir qualquer sans-serif que você pode desenterrar naquela máquina. Então, vamos salvar isso e atualizar a página. Então, você pode ver a atualização aqui. E se eu colocar uma fonte maluca, uma fonte que eu sei que não tenho? Lucida é uma fonte que tem algumas versões diferentes. Esta versão básica do Lucida, Eu não tenho na minha máquina. Então, se eu adicioná-lo aqui e clicar em Salvar e Atualizar, eu ainda vou obter o próximo na minha pilha de fontes porque eu não tenho essa fonte. Se você quiser fora da fonte que tem vários nomes nele, como Times New Roman, você faz isso colocando-o entre aspas. Então, “Times New Roman” e volte aqui e agora você verá minha fonte trocada para Times New Roman. A boa notícia é que, com o passar dos anos, as pessoas se cansaram seis fontes seguras da Web e encontraram uma maneira de finagle tecnologia para usar fontes da Web, que significa que nós realmente controlamos mais fontes. Então, vamos começar com essas seis fontes em nosso site, mas não se preocupe, você terá mais opções mais tarde. Então, eu vou definir o texto do meu parágrafo para um serif porque às vezes pode ser fácil de ler e eu vou enviá-lo para a Geórgia, com um backup de serif e para os meus títulos eu vou torná-los Verdana. Então eu vou dizer que a família de fontes Verdana e o backup para isso será um sans-serif. A mesma coisa para a minha família de fontes H2 Verdana, sans-serif. Eu vou salvar isso, volte para cá. Então, eu mudei isso. Eu realmente não amo o Itálico e a Verdana juntos. Então, vou tirar isso. Então eu vou remover esse estilo de fonte. Isso é um pouco melhor para mim. Vou aceitar isso por enquanto. Então, nossas fontes estão parecendo um pouco melhor. No entanto, este azul é meio horrível. Então, no próximo vídeo, vamos começar a dar uma olhada nas cores, especificamente na cor do texto e nas cores do plano de fundo e ver como podemos ajustar algumas delas. 10. Cor do texto e do plano de fundo: Então, nós gostamos de ter em nossa propriedade de cor CSS, mas agora nós só temos este azul terrível. Bem, existem diferentes maneiras de definir nossos valores de cor para nossa propriedade de cor. Quando dizemos azul, isso é o que é conhecido como um nome de cor ou uma palavra-chave. Existem algumas opções de palavra-chave diferentes que temos que usar. Aqui estão alguns exemplos. Você pode ver que podemos definir as coisas como preto, branco, marrom, fúcsia, que é um dos meus favoritos junto com aqua, amarelo, azeitona, limão, verde. Há um monte para escolher, mas eles são todos uma espécie de reminiscência de meados dos anos 90 e talvez nós queiramos um pouco mais de controle sobre nossa cor. Bem, não se preocupe, podemos fazer isso. Podemos fazer isso com essas outras opções de valor de cor. O primeiro que vamos olhar é hexadecimal. Notações hexadecimais basicamente para encontrar os valores vermelho, verde e azul, usando números hexadecimais de três ou seis dígitos. Existem algumas maneiras diferentes de obter um número hexadecimal. Se você tem um programa de edição de imagens, como o Photoshop, muitas vezes você verá o seletor de cores aqui, e à medida que você move e altera a cor, o valor aqui é nosso número hexadecimal. Então, talvez eu queira um azul que seja um pouco mais manso, talvez como um azul-verde como este. O que eu posso fazer é copiar este número, este número hexadecimal, voltar para o meu Texto Sublime, e então em Texto Sublime, eu vou me livrar da nossa palavra-chave azul. Para dizer que estamos fazendo um número hexadecimal, começamos com o sinal de libra, e então colamos em nosso número de seis dígitos. A partir daí, vamos clicar em Salvar e, em seguida, vamos visualizá-lo novamente no navegador. Então, quando eu voltar e me refrescar, você pode ver que o azul não é mais tão intenso. Você ainda verá que há um pouco de azul nessa página e isso é realmente para nossos links. Por padrão, o padrão do nosso navegador torna todos os links não visitados azuis. Mas o nosso parágrafo por enquanto é mais deste azul-verde e parece um pouco mais calmo. Então, vamos mudar isso. Nós vamos fazer isso um valor cinza e vamos usar o valor cinza de 333333, eu vou salvar isso, atualizar. Lá eu agora tenho textos cinzentos. Números hexadecimais podem ter três ou seis dígitos porque você pode escrever um atalho para eles se você tiver números repetidos. 333333 é o mesmo que 333. Se você tivesse um número como ff3300, você também poderia escrevê-lo como f30. O navegador lerá isso como uma repetição dupla. Então, neste caso, sempre que você tiver seus dois dígitos para seus valores vermelho, verde ou azul repetindo, você pode fazer um atalho. Vamos ter 333 por enquanto. Podemos salvar isso como nosso valor hexadecimal, mas temos outras opções além disso. Também temos valores RGB ou vermelho, verde, azul. Então vamos dizer que eu queria fazer meus textos de cor roxa. Eu poderia pegar esse valor RGB aqui. Então 129, 45, 112 e eu poderia ligar isso ao Sublime Text. Vou me livrar do nosso número hexadecimal e tentar um valor RGB. Vou escrever RBG e entre parênteses, e meu valor para o roxo vai entre parênteses. Então, se eu trapacear e olhar para o que era 129, 45, 112, eu posso voltar aqui e dizer 129, 45, 112. Esses valores são valor vermelho, ou valor verde, ou valor azul. Os valores separados por vírgulas serão aplicados a este RGB. Se eu salvar isso e voltar para o Chrome e atualizar, agora tenho essa cor roxa no valor RGB. RGBA é outro valor que temos, e que significa, vermelho, verde, azul, alfa. Podemos usar o número alfa para transparência. Então, se eu mudar nosso RGB para RGBA e, em seguida, adicionar outra vírgula para outro valor , por padrão, é um valor de 1, e isso significa que é totalmente opaco. Se eu mudar isso para algo como 0,5, isso fará com que a opacidade seja 50 por cento. Então vamos voltar para o Chrome, e você verá quando eu atualizar, isso desaparece porque nós definimos a opacidade para o nível alfa para 0,5. Então, isso é um pouco sobre como você usa RGB e RGBA. HSL e HSLA são muito semelhantes a isso, exceto que representam matiz, saturação, leveza. Se você não tem Photoshop, tudo bem. Há também um monte de seletores de cores online. Este site é colourlovers.com e Amantes de Cor mostram algumas paletas comumente usadas. Se formos em frente e apenas navegar em algumas paletas, isso pode lhe dar algumas idéias de paletas de cores que você pode usar em seu site ou que irá inspirá-lo a usar cores diferentes em seu site. Você pode clicar nele e descobrir mais se você gosta de uma paleta de cores como esta para “Eu exijo uma panqueca”. Se rolarmos para baixo, não tenho certeza se quero uma panqueca azul, mas gosto da aparência desta paleta. Você pode ver que eles mostram as cores aqui, e você pode ver que eles fornecem o valor hexadecimal, bem como o valor RGB. Então você poderia conectar esses valores em seu CSS se você quisesse usar algo assim. Então eu poderia copiar isso, voltar para Sublime Text. Estou usando RGB e não RGBA, então vou mudar isso aqui e colar isso. Agora, quando eu voltar, eu estou usando o valor cinza que eu copiei daqui. Este é o seletor HSL, e seletor HSL dá-lhe um pouco de um controle deslizante aqui, e você verá como eu mover as coisas ao redor, ele muda a cor aqui Você pode alterar todos os tipos de valores até que você obtenha a cor que você Quero. Aqui embaixo está a opacidade ou camada alfa para que você possa ver isso mudando lá. Vamos aumentar isso para 1. Podemos ver isto. Agora estamos trocando a leveza. Então, se você gosta disso, você pode pegar o número hexadecimal, o valor RBGA e, em seguida, o valor HSLA que também usa porcentagens para a saturação e leveza. Então vamos dizer que eu gosto dessa cor verde, e eu gosto do valor HSLA, eu posso copiar isso, voltar para o meu Texto Sublime, e então eu posso mudar a cor dos meus H1 apenas colando isso, clicando em Salvar e voltando. Agora meu nível de direção está verde. ColorPicker.com é outro seletor de cores semelhante ao valor do Photoshop, e você pode ver se você pode apenas ajustar, a fim de escolher uma cor a partir disso. Você pode conferir outras ferramentas como kuler.adobe.com. Pergunto-me se isso deveria ser pronunciado de cor. Eu realmente não tenho certeza. De qualquer forma, se ele tem um seletor de cores, eu percebo que eu realmente não digo essas coisas em voz alta que muitas vezes, mas você pode tipo de definir uma cor base aqui, e ajustar as coisas e você pode dizer se você quer ou não monocromático ou complementar e ele lhe dará sugestões para uma paleta de cores para você usar, juntamente com os valores RGB e hexadecimais que você pode usar em seus documentos. Então, há um monte de ferramentas lá fora. Se você apenas fizer a cor CSS em uma pesquisa do Google, você receberá uma tonelada delas que esperamos inspirá-lo em algumas opções de cores. Então eu vou selecionar isso. Agora, de volta ao meu código, vou dizer cor e colá-lo lá dentro. Você vai notar que quando eu copiar para fora de lá, estava em maiúsculas para as letras neste. Isso não importa. É insensível a maiúsculas. Farei com que meu minúsculo seja consistente. Eu também posso alterar meus nomes de família de fontes para serem minúsculas se eu quiser manter isso consistente e, em seguida, salvar. Então você pode ver, você pode misturar todos os tipos de valores. Você pode ter RGB, HSL, HSLA, hexadecimal. Qualquer um dos valores funcionará para essas cores. Guarde isso, atualize aqui. Agora você verá que temos mais algumas cores em nossa página. Bem, e se eu quiser mudar toda a nossa cor do texto de uma vez? E se eu quiser substituir os estilos do navegador e fazer com que tudo na nossa página seja uma cor? Há alguma maneira de eu fazer isso além de apenas mirar em cada um, o p, o H1, o H2? A resposta é sim. Não seria mau se a resposta fosse não? Não se preocupe, é sim. Então o que podemos fazer é em vez de definir nossas propriedades em algo como nosso parágrafo ou H1 ou H2, temos outra coisa que podemos usar. Agora estamos aplicando a propriedade color para a tag que está cercando esse texto específico, mas temos outra tag que está em torno de nosso texto H1, H2 ou parágrafo. Esse é o nosso elemento corporal. Assim como o nosso H1 ou H2, também podemos aplicar estilos ao corpo. Voltando para cá, por agora vou remover as nossas propriedades de cor. Então eu vou adicionar um novo. Vou adicioná-lo ao topo da página, e isso vai ser para os nossos elementos corporais. Então agora no corpo, assim como qualquer outra tag e em qualquer outro seletor, posso dizer cor. Então eu posso usar uma de nossas palavras-chave se eu quiser aqui, como verde. Eu vou salvar e voltar para o Chrome, atualizar e agora você pode ver menos os links que estão sendo controlados pelos padrões do navegador e menos o texto no logotipo, todo o texto é verde porque ele caiu em cascata para todos os nossos elementos. Então essa é uma das maneiras que podemos usar a tag body para aplicar estilos. Outra coisa que podemos usar a tag body para é mudar toda a cor de fundo da nossa página. Agora temos um branco brilhante e talvez não queiramos isso. O que podemos fazer é alterar outra propriedade CSS, a propriedade cor de fundo. Queremos aplicar isso ao nosso body tag porque o nosso corpo contém toda a nossa página. Então vamos em frente e fazer isso. Então agora vamos usar uma nova propriedade, e essa propriedade é cor de fundo: e então, assim como pudemos usar nossas palavras-chave ou valores RGB ou hexadecimais, podemos fazer a mesma coisa para definir uma cor de fundo aqui. Então, se eu quisesse, poderia dizer algo como água. Tenho certeza de que todos vocês estão imaginando o quão bonito isso vai ficar quando eu salvá-lo e atualizá-lo no navegador. Quando eu me refrescar, cuidado com seus olhos, todo mundo. Isso é algum web design brilhante, mas como você pode ver, isso funcionou. Então podemos usar nosso body tag para controlar a aparência geral de nossas páginas, e então poderemos substituir mais tarde se precisarmos. Neste caso, podemos querer voltar e ajustar alguns desses valores porque, bem, parece um pouco forte. Digamos que eu queria voltar a ser branco. Bem, eu tenho algumas maneiras de fazer isso. Posso usar o nosso valor de palavra-chave, que é a palavra branco. Eu poderia usar um valor hexadecimal, como número ffffff, que também é o valor hexadecimal para branco. Poderíamos usar um atalho, que seria apenas fff. O valor RGB para isso seria 255, 255, 255. Como você pode ver, há muitas maneiras diferentes de definir nossos valores de propriedade. Cabe a você o que você quiser usar. Por enquanto, poderíamos colocá-la em branco. Mas se você quiser algo talvez um pouco menos brilhante, basta ajustar isso para uma cor esbranquiçada, neste caso o valor hexadecimal de efebdf, e você pode ver que isso é um pouco mais fácil para os olhos. Eu também vou mudar a cor do nosso texto de verde para este valor hexadecimal de 27211f. Guarde isso, atualize e agora estamos de volta a uma cor mais escura tradicional. Isso é um pouco preto. Vamos também mudar a cor do nosso H1 porque queremos que ele seja diferente do nosso texto do corpo preto. Vamos dizer cor, e vamos adicionar o valor hexadecimal aqui. Então isso será e96f4b. Agora ele vai nos dar um pouco de como um salmão, como um vermelho rosa salmão, e agora vai nos dizer que este é um cabeçalho maior. Também podemos aplicar essa mesma cor aos nossos H2s, se quisermos. Então, podemos copiar e colar isso ou reescrevê-lo. Vamos copiar e colar isso. Agora ajustamos as cores para muitos dos elementos em nossa página, bem como nossa cor de fundo. Então é assim que aplicamos cores. Vamos dar uma olhada na próxima lição de transformar nosso texto um pouco mais do que apenas os tamanhos e as famílias de fontes que usamos até agora. 11. Estilo básico do texto: Então, vamos dar uma olhada em algum outro estilo de texto que podemos aplicar às palavras em nossa tela usando CSS. Aqui está a nossa página Sobre e para o nosso Sobre Jon, temos um cabeçalho, uma imagem, e temos algum texto. Bem, vamos mudar o texto um pouco. Por exemplo, e se quisermos centralizar nosso rumo? E se quisermos que About Jon apareça no meio da página? Bem, podemos fazer isso. Para fazer isso, usaremos nossa propriedade text-align. Então, nossa propriedade text-align é text-align. Temos algumas propriedades diferentes para isso, mas como queremos nossa linha de centro de tecnologia, vamos usar o valor de centro. Agora, quando eu atualizar a página, você pode ver que Sobre Jon agora está centrado em nosso site. Você pode aplicar text-align: esquerda ou direita ou justificado também. Então, digamos que queríamos coisas à direita. Se mudarmos isso para a direita, agora você pode ver que nosso texto está à direita. Eu vou colocar isso de volta ao centro, e eu também vou fazer todo o nosso H2 centrado também. Então, agora todos os nossos títulos que temos até agora aparecerão centrados na página. Então, salvando isso, e agora você pode ver nosso h1 e nosso h2 estão centrados na página. Então, isso é text-align. Também podemos ter uma propriedade chamada text-decor. O uso mais comum de decoração de texto é sublinhar nosso texto. Então, a fim de aplicar text-decor, é text-decor e, em seguida, neste caso, vamos dizer sublinhado para o nosso h1, e voltar e ver como isso parece no navegador. Vejo que o nosso título tem um sublinhado. Há alguns outros valores, alguns dos quais são honestamente um pouco mais brega do que outros para este, como outros usando nosso Inspetor aqui para mostrar alguns deles. Temos outras opções, como overline para linha acima do nosso texto, ou temos line-through, e isso fornece algum texto riscado. Então, se você precisar de line-through, overline ou sublinhado, é assim que você faria isso. Neste caso, vamos definir isso de volta para sublinhar em nosso Inspetor aqui para que possamos ver como ele vai realmente olhar. Esta é outra propriedade que eu gosto. Então, eu vou ir em frente e copiá-lo para o H2 também. Também temos uma propriedade de recuo de texto. Então, digamos que queríamos usar recuo de texto para recuar o início de todos os nossos parágrafos. Poderíamos fazer isso. Então, neste caso, direi recuo de texto e, em seguida, um valor como 20 pixels. Salve isso, atualize, e agora você pode ver que o texto do meu parágrafo está recuado 20 pixels. Lembre-se, isso também é aplicado à cópia do rodapé do meu parágrafo também. O último que vamos olhar é transformar texto. Transformação de texto nos permite fazer coisas como tornar nossas letras maiúsculas. Então, podemos dizer text-transform: maiúsculas. Guarde isso. Agora, quando eu atualizar, nosso h1 está em maiúsculas. Outros valores que temos para isso são minúsculas, que irá mudar todo o nosso texto para minúsculas, não importa como ele é digitado dentro do nosso HTML, e nós também temos maiúsculas, que irá capitalizar a primeira letra, que aconteceu para ser como escrevemos dentro do nosso HTML de qualquer maneira. Então, você não verá nenhuma diferença lá. Então, há alguns olhares de mais algumas coisas que podemos fazer com nosso texto e como podemos controlá-los em nossa página. Vejamos algumas coisas avançadas em nossas próximas lições, como espaçamento de letras e altura de linha. 12. Controle avançado do texto: Vamos dar uma olhada no texto do nosso parágrafo e fazer alguns ajustes aqui. Primeiro, vamos nos livrar deste ousado, é um pouco intenso e nós realmente não precisamos disso para a cópia do corpo na página. Então, lembre-se que podemos fazer isso alterando isso para font-weight normal, mas por padrão, nosso texto de parágrafo era normal, então não precisaremos disso. Então, nós podemos apenas remover essa regra completamente e agora você pode ver que estamos de volta ao texto de peso normal da Geórgia. No entanto, estou achando que é um pouco difícil de ler entre as linhas e eu gostaria de separar isso um pouco mais. Gostaria de adicionar um pouco de ar a isto. Muitas vezes você pode ter ouvido isso referido como deixar, em CSS em vez de ter uma propriedade de let, nós chamamos de propriedade de altura de linha. Então, se eu for até nossos parágrafos, eu posso dizer altura da linha e então eu posso defini-lo para o valor que eu estou procurando. Então, agora nosso tamanho de fonte é de 20 pixels, eu poderia defini-la para um valor de pixel como 40 pixels. Se eu voltar aqui e me refrescar, você pode ver que a altura da linha subiu muito , o que é muito legal, mas talvez um pouco demais. Nós também podemos fazer valores unitless para line-height. Então, se o definirmos de volta para um e atualizar, você pode ver que estamos de volta a ser muito apertados. Eu posso configurá-lo para um valor como 1.5 e agora você pode ver que é muito mais fácil para os olhos, torna mais fácil para mim digitalizar isso e ser capaz de ler estes parágrafos em nossa página. Então, eu gosto 1.5, talvez seja um pouco, talvez eu queira ir para 1.4, isso é muito bom. Eu posso ler isso muito facilmente e é muito bom especialmente se nós temos um monte de texto corporal. Então, eu vou deixar a minha altura de linha por enquanto como 1.4. Mas sinta-se à vontade para brincar com o valor da altura da linha e ajustá-lo para que seja mais como você gostaria que seus leitores vissem seu texto. Temos algumas outras coisas que podemos ajustar quando se trata do nosso texto. Se te lembras, fizemos o “Sobre o John “em maiúsculas. Quando você faz as coisas em maiúsculas, às vezes, isso pode ser um pouco apertado e difícil de ler, então o que podemos fazer, é ajustar os valores de kerning deste, e o kerning é o espaço entre cada letra. Nós não chamamos isso de kerning em CSS, vez disso chamamos de espaçamento entre letras. Então, se eu voltar para o meu h1, eu vou aplicar uma propriedade de espaçamento de letras e, novamente, eu posso usar diferentes unidades de medida. Neste caso eu vou dizer um pixel e isso vai aplicar um pixel de espaçamento de letras entre cada uma de nossas letras. Então, agora refrescante, você pode ver que ele espaça um pouco o que é um pouco mais agradável para o nosso rumo. A propriedade CSS do último efeito que vamos olhar hoje é espaçamento de palavras e assim como soa, isso afetará o espaço entre nossas palavras. Vamos aplicá-lo aos nossos parágrafos porque temos algumas palavras aqui dentro. Então, espaçamento de palavras e, em seguida, apenas para que possamos ver as coisas em ação, digamos 15 pixels. Bem, isso é um monte de espaçamento, mas dependendo do que você está tentando fazer talvez isso seja o seu beco, você poderia ficar ainda mais louco, claro, ao contrário de 115, uau, isso não é fácil de ler em tudo mas talvez você esteja indo para alguns arte de instalação do site. Então, basta tomar nota que a propriedade está disponível para você, eu vou remover o espaçamento de palavras porque eu quero que o navegador para renderizá-lo como ele faz como um padrão que é muito fácil de ler, mas é assim que você iria adicionar espaçamento de palavras para o seu sites. Então nós estamos olhando bem aqui, você vai notar que uma coisa que não foi afetada em tudo até agora, é nossa lista de itens aqui. Então, na próxima lição, vejamos algumas das coisas que podemos fazer para alterar nossas propriedades de lista. 13. Propriedades de lista: Então, olhando para nossos itens da lista, queremos dar um pouco de amor a eles também. Agora eles só têm o estilo padrão do navegador. Podemos verificar qualquer coisa que tenha sido aplicada a eles até agora. Então, você pode ver aqui que eles têm a cor do corpo, mas é só isso. Então, vamos mudar isso porque queremos que eles tenham algum amor também, e assim como somos capazes de selecionar nossos parágrafos, nosso corpo, e nossos cabeçalhos, podemos fazer a mesma coisa com nossos elementos de lista. Então, dando uma olhada nisso, nossos serviços profissionais são um ul marcado com Li. Então, o que podemos fazer é usar o elemento li como nosso seletor e estilizá-los de acordo. Vou perguntar o final da nossa página. Eu só vou fazer alguns retornos extras só para que você possa ver o que eu estou digitando facilmente aqui, e aqui eu vou escrever li, e então eu vou escrever cor, e vamos ajustar a cor um pouco. Vamos torná-los 666 que é um cinza médio. Então, há nossas primeiras mudanças na lista, e você pode notar que o texto e o marcador que vemos aqui ajustados para ser essa cor cinza. Você também notará que os marcadores em nossa lista de navegação não ordenada também mudaram para cinza porque isso também é um elemento li. Vamos também mudar a fonte aqui. Vamos definir a família de fontes como Georgia, e vamos definir o tamanho da fonte como 16 pixels. Tamanho da fonte 16 pixels. Vamos salvar isso, e lá está nossa lista atualizada. Mas e essas balas? E se eu realmente não gostar desses itens? Bem, nós também podemos mudar isso com nossa propriedade tipo lista. Então, para mudar as balas, vamos dizer list-style-type, e então podemos mudá-lo para uma variedade de opções diferentes. Então, por padrão, é um disco. Nós também podemos alterá-lo para círculo, e agora você pode ver são círculo não preenchido. Há também opções de coisas como quadrado, e agora temos balas quadradas. Se você não quer balas você pode ter isso também, e para fazer isso você diria nenhuma, e agora não temos balas. Mas, por enquanto, vamos voltar ao quadrado, porque é hip ser quadrado e o mundo de Jon Arbuckle e em todos os nossos. Então, agora temos itens da lista quadrada. Se você estiver usando uma lista ordenada, você também pode querer mudar o marcador para isso. Então, só para que eu possa mostrar como isso parece, temporariamente, eu vou fazer isso uma lista ordenada. Então, para fazer isso nós apenas mudar isso para um ol, eu volto aqui e eu me refresco. Tudo deve parecer o mesmo agora, porque em vez de estilizar o ul, nós estilo os li e li também estão em ol de. Mas agora vamos trocar. Então, lembre-se que se eu tirar isso por padrão, listas ordenadas têm números. Então agora nós temos list-style-type decimal que é o que as coisas são por padrão com uma lista ordenada, mas nós também poderíamos dizer algo como decimal leading-zero, e se voltarmos aqui você pode ver que adiciona um zero antes do nosso números, também temos outras opções para lista ordenada, como alfa inferior, e agora nossa lista ordenada é alfabeticamente marcada. Poderíamos também dizer baixo romano, e agora temos algarismos romanos mais baixos para nossas listas. Então, você pode ver que há muitas opções para isso. Eu vou definir isso de volta ao quadrado, e então eu também vou definir minha página sobre volta para uma lista não ordenada porque neste caso estamos digitando uma lista não ordenada, e salvar isso. Então, isso é um pouco mais sobre listas, e na próxima lição vamos dar uma olhada em imagens de fundo e como podemos começar obter mais imagens em nossa página usando CSS e não apenas a tag de imagem. 14. Imagem de fundo: Nosso site parece bem com este fundo fora branco, mas vamos dizer que queremos ficar um pouco mais interessante. Vamos colocar mais algumas imagens em nossa página. Talvez queiramos uma imagem para o fundo do nosso site. Então, vamos pegar um desses e podemos vincular a imagens da mesma maneira que faríamos em HTML com um caminho absoluto ou um caminho relativo. Digamos que eu quero mostrar algum trabalho de John e eu vou mostrar esta imagem e eu quero isso no fundo da nossa página. Bem, eu posso ver a imagem e eu posso pegar o link a partir daqui e então vamos adicioná-lo ao nosso site com CSS. Até agora, acabamos de aplicar uma propriedade de fundo e essa tem sido nossa cor de fundo, mas temos outros valores e propriedades que podemos ajustar para o nosso plano de fundo também, começando com a imagem de fundo. A fim de escrever uma imagem de fundo, nós vamos escrever imagem hífen de fundo e, em seguida, a partir daí, nós vamos ter que dizer ao CSS onde essa imagem está, e nós fazemos isso escrevendo URL e, em seguida, entre parênteses, nós terá a URL para a qual estamos tentando vincular. Isso pode ser um caminho local ou arelativo ou, neste caso, vamos vincular a um caminho absoluto, um arquivo de imagem que existe em outro lugar na Internet. Entre aspas, vou colar este Wikimedia Garfield and Friends PNG, eu vou salvar o arquivo, e então vamos dar uma olhada nele no navegador. Aqui estou eu, e vou atualizar a página e wow. Pensei que estávamos ocupados antes, mas agora as coisas foram para uma festa de imagem séria. Como você pode ver, temos a imagem aqui e a imagem de fundo está se repetindo em todo o nosso site. Não importa o quão grande ou pequeno isso é, podemos ver que a imagem de fundo está em todo o nosso site. Somos capazes de ajustar como isso está se repetindo com outra propriedade CSS, a propriedade de repetição de fundo. Hífen de fundo repetir e, em seguida os valores que temos são o padrão que está repetindo, podemos certamente dizer que é o que está acontecendo agora. Então outra coisa que temos é não repetir. Então, se mudarmos isso para nenhuma repetição, voltar e atualizar, você pode ver que a imagem está apenas na página em segundo plano uma vez. Porque está na imagem de fundo, todo o texto vai ficar em cima disso. Por padrão, os fundos também começam na posição esquerda, uma posição de fundo de 0,0 indo dos valores esquerdo e superior. Podemos ajustar isso também usando nossa propriedade posição de fundo. Então, posição hífen de fundo e, em seguida, atualmente, é 0,0, a mesma coisa que dizer zero pixels, zero pixels. Podemos mudar isso para que seja algo como 20 pixels da esquerda e 100 pixels do topo e agora você pode ver que ele foi movido da esquerda 20 e do top 100. Nós também podemos usar valores de palavra-chave para isso para que possamos dizer algo como centro, centro. Agora, você verá que a imagem está centralizada verticalmente e horizontalmente com base na largura e altura da nossa página. Nós também poderíamos dizer algo como centro, topo e agora você pode ver que ele está centrado a partir do topo da nossa página. Podemos misturar valores, então algo como centro e 30 pixels e que será centralizado à esquerda e à direita, mas depois 30 pixels do topo. Diferentes valores de repetição que temos são no-repeat repeat, repita hífen X, e então ele irá repetir ao longo do eixo X, e então nós temos repetição hífen Y que, como você pode imaginar, irá repetir ao longo do eixo Y exatamente assim através do topo do nosso página. Isso é bastante ocupado e um pouco difícil de ler, então talvez queiramos um tipo diferente de imagem de fundo. Talvez queiramos apenas uma imagem de fundo sutil, talvez um padrão de ruído, talvez. Nós poderíamos fazer isso, é um programa como o Photoshop no qual eu acabei de aplicar uma pequena pixelação de ruído a uma cor de fundo, então eu posso salvar este arquivo. Então, eu vou salvar isso como um JPG e eu posso reduzir a qualidade alguns e aquilo. Eu só vou salvar isso direito na minha pasta de imagens e eu vou chamá-lo de bg-noise.jpg. BG só para mim, me permite saber que é uma imagem de fundo e é um padrão de ruído. Vou guardar isso dentro da pasta do site John Arbuckle, dentro da pasta de imagens. Agora, em nosso CSS, há uma postagem vinculando a essa imagem absoluta que é boa porque nós realmente não deveríamos estar vinculando ao conteúdo de outras pessoas por motivos de direitos autorais e/ou porque eles podem removê-lo como nós nenhum controle sobre seu link para a Wikimedia eles sempre possam alterar essa extensão de arquivo ou excluí-la. Então, vamos nos certificar de que estamos hospedando nossos próprios arquivos. Para fazer uma URL de imagem de fundo, nós essencialmente queremos fazer a mesma coisa como se estivéssemos vinculando a uma imagem dentro do nosso atributo de origem de imagem. Atualmente, agora, estamos em styles.css. Nós vamos ter que ir para a nossa pasta img e, em seguida, carregar o bg-noise.jpg. Temos que ir para a pasta img e, em seguida, para ir para uma pasta, vamos digitar o nosso /bg-noise.jpg. Quando eu salvar isso e voltar para o Chrome e atualizar bem, possamos ver que nossa imagem do Garfield desapareceu e é muito difícil de ver aqui, mas você pode ver, se você olhar bem de perto, que no meio da página, para que possamos ver que nossa imagem do Garfield desapareceu e émuito difícil de ver aqui, mas você pode ver, se você olhar bem de perto, que no meio da página, é este ruído de fundo repetindo Y. Vamos mudar isso porque não queremos que ele apenas repita Y. Porque este é um padrão de fundo, queremos repetir ambos os lados. Então, vou guardar isso e repetir. Agora, você pode ver que temos um pequeno padrão de ruído na parte de trás do nosso site. Você pode usar qualquer tipo de padrões como este, diagonais, listras, círculos, qualquer que seja o seu padrão de fundo favorito para adicionar. Se você gosta das imagens de fundo barulhentas, mantenha isso também. Mas é assim que vamos adicionar um padrão de ruído ou qualquer tipo de imagem de fundo em todas as nossas páginas. Até agora, nós realmente apenas olhamos para nossa página sobre, vamos ver como nosso CSS está afetando o resto de nossas páginas e ver como podemos fazer ajustes no futuro para itens específicos. Isso está chegando na próxima lição. 15. Adicionando arquivos CSS em nosso site: Até agora, nós realmente só olhamos para como os estilos têm sido afetando nossa página sobre. Mas lembre-se que estamos aplicando nossas folhas de estilo em cascata em todo o site. Precisamos ver o que está fazendo com nossas outras páginas. Então aqui está nossa página inicial, e podemos ver que os estilos vieram junto com recuo de texto, centralização, sublinhados em nossos h2, todos eles estão afetando nosso conteúdo em todo o site. Aqui está a nossa página de trabalho e, por último, a nossa página de contacto. Então, comecei a olhar para isso talvez percebamos que precisamos fazer alguns ajustes globais. Talvez a centralização não esteja funcionando, talvez o recuo do texto não esteja funcionando. Talvez queiramos fazer alguns ajustes e, de fato, centralizar nosso rumo. Talvez queiramos centralizar a imagem do logotipo. Não seria legal se pudéssemos nos livrar dessas balas em cima do nosso trabalho ou do nosso contato, ou pelo menos fazê-las aparecer um ao lado do outro em vez de como essa lista? Bem, podemos fazer essas coisas. Uma maneira de fazer isso, é aplicar nosso alinhamento de texto globalmente em todo o nosso site. Então, em vez de apenas aplicá-lo ao nosso h1, se aplicássemos nosso centro de alinhamento de texto ao nosso body tag? Então, o hífen de texto alinhar, então ajuda a soletrar alinhar corretamente e, em seguida, centralizar. Agora você pode ver quando eu faço que tudo nesta página está centrado, atualizando as outras páginas que você também vai ver que acontece, e lá está, e lá. Você pode ver que isso parece um pouco engraçado em torno de algumas coisas nos outros, então talvez não queiramos fazer isso em todo o site. Você também notará que quando centralizamos coisas como nossos itens de lista, algumas balas são deixadas todo o caminho para a esquerda, e isso parece um pouco louco. Parece que o que precisamos é de um pouco mais de controle sobre as coisas. Claro, podemos entrar e dizer que tudo bem, vamos alinhá-los à esquerda, e podemos fazer isso apenas sobrescrevendo. Então, dizemos text-align à esquerda, e então aqueles voltam, mas isso não é realmente uma solução para isso também. O que precisamos fazer é controlar coisas individuais como a lista de navegação separadamente de outras listas em nossa página, ou o cabeçalho e o logotipo do cabeçalho de forma diferente de nossos outros títulos. Vamos ser capazes de fazer isso usando alguns outros seletores CSS que ainda não falamos, seletores de ID, seletores de classe e seletores descendentes. Então, vamos dar uma olhada em como podemos consertar nosso site para ter um pouco mais de aspectos únicos ao longo dele, na próxima lição. 16. Selecionadores CSS adicionais: Então, em vez de aplicar este centro de alinhamento de texto globalmente, queremos aplicá-lo à nossa imagem de logotipo. Então, vamos voltar ao nosso CSS e remover o centro de alinhamento de texto. Em vez disso, queremos apenas na nossa imagem de cabeçalho. Então, até agora, agora, temos apenas olhando para os seletores de elementos. Isso significa que se quisermos centralizar isso, essencialmente temos uma imagem e um A para trabalhar. Mas vamos querer mais do que isso. Vamos querer atingir apenas este link ou apenas esta imagem. A outra coisa que vamos querer fazer para o alinhamento de texto, é envolver com até agora é este elemento inline. Lembre-se que falamos sobre elementos embutidos e blocos em nossa classe html e links âncora e tags de imagem são ambos elementos inline, significa que eles aparecerão na mesma linha, ao contrário de elementos de bloco que farão um retorno de linha dura. A fim de alinhar texto centralizar as coisas, precisamos aplicar a um elemento de nível de bloco. Então, vamos em frente e vamos aninhar esta âncora dentro de uma tag de parágrafo. Então, vamos adicionar um pouco de html. Então, P e depois seu P. de fechamento Você vai descobrir que ao adicionar CSS a uma página, às vezes é necessário voltar e adicionar elementos de contêiner em seu html para estilizar as coisas corretamente. Tentamos evitar isso o máximo possível, mas às vezes você vai precisar de coisas assim. Então temos este parágrafo que agora está segurando nossa âncora e nossa imagem. Voltando ao Chrome, lembre-se que tiramos as coisas. Então, nós não temos mais texto alinhando nesta área, nós apenas temos um parágrafo em torno dela. Então, o que queremos fazer é basicamente alinhar texto centralizar esse parágrafo. Nós não queremos fazer isso para todos os parágrafos porque , em seguida, cada parágrafo na página será alinhado no centro. O que podemos fazer é usar uma aula. Um seletor de classe nos permite direcionar um ou mais elementos específicos com um atributo de classe nele. A fim de aplicar uma classe, você deve apenas adicionar outro atributo. Neste caso, vamos dizer classe igual e, em seguida, o nome do que estamos tentando fazer. Neste caso, vamos dizer que classe é igual a logotipo. Queremos nomear coisas, coisas com significado semântico. Então, coisas que realmente fazem sentido para o que estamos tentando fazer. Este parágrafo está segurando nosso logotipo, então faz sentido para nós chamarmos isso de uma classe de logotipo, ao contrário de uma classe de, como, rosto de elefante, que não teria nada a ver com o que estamos fazendo e seria apenas confuso para você, seus companheiros de equipe, qualquer um que se deparou com isso. Então, vamos com algo que tem significado para isso. Então, algo como classe é igual a logotipo. Agora, em nossa folha de estilos, podemos aplicar estilos a essa classe. Então, o que podemos dizer é.logo, porque é assim que fazemos uma aula. Então, como faria com qualquer outro seletor, nossas chaves, e então dentro disso, vamos aplicar nossa declaração. Então, alinhe o centro de texto. Então, qualquer coisa com uma classe de logotipo será centralizado em alinhamento de texto. Quando volto e clico em Atualizar, nada aconteceu. Nada aconteceu porque eu não salvei minha página de contato atualizada. Então, deixe-me ter certeza que eu guardei isso, e eu reconheci isso porque o círculo estava aqui. Volto ao nosso contato, clico em atualizar, e agora a imagem está centrada porque nosso parágrafo com a classe de logotipo tem centro de alinhamento de texto aplicado a ele. Você também pode aplicar a classe de logotipo a outra coisa, como este parágrafo aqui. Agora, esse parágrafo será centrado porque ele também tem uma classe de logotipo. Da mesma forma, os seletores de classe são seletores de ID. IDs são muito semelhantes às classes em que dizemos ID é igual a um atributo com o nome dele, assim como se você quisesse nomear algo ID é igual ao logotipo. Duas das diferenças são em vez de fazer.sintaxe, para dizer que se uma classe, usamos uma libra ou uma hashtag para dizer que estamos fazendo um seletor de ID. Você só pode ter um ID em uma página. Por causa disso, pode ser um pouco limitante se você decidir que deseja reutilizar isso para outra coisa. Eu costumo usar classes porque elas são mais reutilizáveis e são mais fáceis para o processamento do navegador. Mas, se você vir um ID na página ou se você assumir o código de outra pessoa e os IDs de aviso, é importante saber o que eles estão fazendo. Por enquanto, porém, vamos continuar com o uso de aulas. Vamos aplicar mais algumas aulas. Então, vamos também centralizar esses itens de navegação. Podemos fazer isso aplicando uma classe a eles. Vamos aplicar uma aula aqui de navegação, para navegação. Lembre-se, eles precisam ir em citações que eu apenas fiz errado, e eu era facilmente capaz de perceber isso porque ele não estava mudando para amarelo. Então, classe é igual a aspas nav, fim de aspas. Agora temos uma classe para direcionar essa UL específica para que não tenhamos que ter os estilos que queremos para nossa navegação em outras listas mais gerais e não ordenadas dentro de nosso documento. Então, agora em nosso CSS, vamos fazer outro seletor de classe, o seletor de navegação porque isso é o que acabamos de nomear nossos elementos de navegação. Eu fui com nav em vez de navegação só porque era um pouco mais curto e mais fácil de digitar, mas ainda bastante claro o que eu estava me referindo. Então, aqui novamente, eu posso dizer centro de alinhamento de texto. Volte para o navegador, atualize e não está funcionando. Não está funcionando porque você deve se lembrar, eu escrevi text-align à esquerda em nossos LI's. Queremos remover isso porque tudo foi ajustado de volta para text-align à esquerda agora. Vamos ver um pouco por que isso está acontecendo na próxima lição, mas até lá, vamos mudar isso para centro de alinhamento de texto. Mas, de novo, temos o problema com as balas. Bem, e se removermos as balas porque não as queremos, talvez, na nossa navegação principal? Lembre-se, podemos fazer isso com nosso estilo de lista. Então, lista, estilo, digite none, então, e fora de nossa navegação, temos um centro de alinhamento de texto e um list-style none. Eu volto aqui. Novamente, nos deparamos com o problema de que nada mudou. Isso ocorre porque eu realmente tenho o tipo de item de lista quadrado direito em um elemento LI, e o LI está mais próximo do que o UL para o nosso texto real. Então, nós vamos ter que anular isso, também. Como fazemos isso é usando algo chamado um seletor descendente. Um seletor descendente tem como alvo um elemento dentro de outro elemento. Então, poderíamos dizer algo como todas as âncoras dentro de tags P e direcioná-lo dizendo P, espaço, A em nosso CSS. Isso faria com que todas as âncoras dentro do meu parágrafo marcassem a cor vermelha. Você o alvo com um espaço entre eles. Se você escrevesse P e A sem espaço, você obteria PA e, em seguida, o CSS estaria procurando um elemento PA, o que não é uma coisa. Então, essencialmente, ele diz que quaisquer âncoras dentro de um parágrafo, vamos aplicar o estilo a. Bem, nós também podemos misturar classes e elementos para nossos seletores descendentes, então o que podemos dizer neste caso, é qualquer LI's dentro de nav, e em vez de colocar este tipo de lista nenhum aqui, queremos mover isso Para aqui. Então, agora temos encontrar qualquer LI dentro de uma classe nav e, em seguida, remover o estilo da lista. Então, agora, quando voltarmos aqui, vocês verão que essas balas se foram porque nós substituímos especificamente o estilo LI com o nav LI. É assim que você usaria um seletor descendente. Então, vamos fazer outra coisa com o nosso item de navegação. Todos os nossos links estão aparecendo como elementos de nível de bloco porque um item de lista em LI é um nível de bloco. Isso significa que temos o difícil retorno um após o outro. E se quisermos que apareçam um ao lado do outro? Bem, assim como podemos dizer que as coisas são bloqueadas ou inline com base nos padrões do navegador, podemos substituí-las também. Então, agora, por padrão, nossos itens LI são todos blocos de exibição. Display é outra propriedade CSS e uma das quais podemos substituir. Mesmo que, assim como nossa lista tinha balas por padrão, nós podemos substituí-los, nós também podemos substituir a tela. Então, em vez de bloco de exibição, vamos fazê-los exibir inline. Agora, quando eu volto para o navegador e carrego em atualizar, eles exibem em linha como nossas tags m, nossas tags âncora, ou nossas tags de imagem. Então, isso é outra coisa que você pode substituir com seu CSS. Então, mudar as coisas de inline ou block é outra coisa que podemos controlar com nosso CSS. Um outro seletor que temos é o seletor universal. O seletor universal seleciona tudo na página. Para fazer isso, usamos um asterisco. O asterisco diz aplicar este estilo a tudo. Então, se quiséssemos fazer decoração de texto sobreposta a tudo, usaríamos o seletor universal. Nós atualizamos isso, e então, assim como pedimos, para o melhor ou para o pior, há nossa decoração de texto sobre todos os nossos elementos. Então, é assim que você usaria o seletor universal. Vimos que encontramos algumas coisas que podem ser inesperadas. Coisas com herança e cascata. Na próxima lição, vamos olhar um pouco mais sobre essas folhas de estilo em cascata e em cascata e ver como elas estão funcionando. 17. A cascata: Então, em nossa última lição, vimos como ainda estamos para usar seletores descendentes, a fim de obter mais específicos com nossos estilos para garantir que nossos itens de lista estavam recebendo os estilos que queríamos que eles fossem. Isto é o que é conhecido como especificidade, bem como herança e a cascata. Estas são todas as maneiras das quais, quando estamos usando CSS, afetarão os estilos que estão sendo aplicados às nossas páginas. Então, vamos dar uma olhada em algumas das coisas que podem acontecer. Vamos nos livrar dessa sobreposição que temos em nosso seletor universal, isso é um pouco bizarro. Não vamos usar isso. Então adeus a isso. Agora, vamos falar um pouco sobre como as coisas estão sendo aplicadas à nossa página. Neste momento, o nosso cólon está a ser aplicado à nossa etiqueta corporal, e isso está a descer para o resto dos elementos. Coisas como os nossos parágrafos estão aninhados dentro do nosso corpo que significa que ele está herdando o estilo do corpo. Qualquer coisa que está aninhada dentro de outro elemento, vai assumir esses estilos para coisas como cor. Então, já que estamos dizendo que a cor do corpo é 27211f, o parágrafo também recebe essa cor. Isto é o que é conhecido como herança. O que vamos fazer se quisermos mudar a cor do parágrafo para ser outra coisa, é que teríamos que usar especificidade para dizer que um parágrafo deve ter uma cor diferente. Então, agora, há essa cor preta escura. Vamos refrescar isso, nos livrar desse cinza. Mas e se quiséssemos que nossos parágrafos fossem verdes? Bem, se colocarmos cor verde, o que acontecerá é que os parágrafos serão verdes. Vamos olhar para o nosso inspetor e ver o que está acontecendo. Essencialmente, quando a página é carregada, o computador passa muito rápido e começa na parte superior do nosso documento CSS. Então, ele lê a primeira regra, que é aplicada ao corpo e diz “Ok, vamos fazer tudo de cor preta.” Isso é muito rápido? Nós não podemos nem ver o que está acontecendo quando ele vai para a nossa tag de parágrafo e diz “Ok, espere, agora ele diz para tornar todos os parágrafos verdes.” Então, ele muda da cor de preto para esta cor de verde substituindo a etiqueta de corpo. Podemos ver no nosso Inspetor aqui onde diz “P cor verde”. Se você rolar para baixo, nós realmente vemos a cor do corpo cinza e ele está sendo alinhado para fora. Está sendo alinhado porque está sendo substituído pela especificidade da cor verde que é aplicada em nossas tags de parágrafo. Assim, ele pode mostrar como a especificidade está afetando os estilos que são aplicados ao nosso texto. Isso é muito importante se quiser saber o que está acontecendo. Talvez estejas à espera que isto seja preto, mas acaba por ser verde. Este Inspetor nos permite uma maneira rápida de ver como os estilos estão sendo aplicados. O que acontece se trocarmos nosso parágrafo e nosso corpo. Então, agora, quando falamos sobre a cascata, dissemos que foi de cima para baixo. Então, primeiro dizia, “faça tudo preto”, depois disse, “faça todos os parágrafos verdes”. Se tendemos a dizer isso, você acha que os parágrafos serão verdes ou pretos? Vamos voltar e descobrir. Você pode ver que eles ainda são verdes. Há algumas coisas em jogo aqui. Primeiro, tornou-os pretos porque isso está na etiqueta do corpo. Mas além de ir de cima para baixo, a outra coisa que é importante quando se trata de CSS, é quão próximo ou específico o elemento é que estamos direcionando. Então, porque o corpo é o pai do parágrafo e a tag de parágrafo que está sendo definida como verde está mais próxima do texto real, o estilo que será lido será o que está sendo aplicado mais perto dos elementos. Nesse caso, o estilo de parágrafo verde está mais próximo do texto da página do que o corpo. Então, outra coisa sobre especificidade é os estilos aplicados ao seu elemento recipiente mais próximo será o que será aplicado ao texto. Isto é definitivamente um pouco complicado. Há alguns artigos que vou colocar nos recursos para acompanhamento. Às vezes, honestamente, brincar com isso e ver como a ordem afetará seu código, é uma das melhores coisas que você pode fazer. Agora, vemos que ainda temos essa classe p de logotipo aplicada ao nosso texto aqui, e isso está ficando verde, claro, porque nossos parágrafos são verdes. O que você acha que acontecerá se dissermos que o logotipo deve ser vermelho? Bem, vamos descobrir. Cor vermelha e agora, quando atualizamos, você pode ver que aquele específico será substituído por vermelho. Então você pode ver que ele tentou obter a cor verde, mas o logotipo escuro tinha mais poder inerente do que a tag de parágrafo. Então, primeiro, era este preto e depois era verde. Mas a classe escura teve mais impacto no estilo. Você pode ver neste artigo útil, falamos sobre mais valor de especificidade e menor valor de especificidade. Atributo de estilo, depois ID, em seguida, uma classe, em seguida, elemento, é como ele funciona. Você pode ver que há uma espécie de sistema de pontos aqui. Então, as coisas têm estilo inline ou IDs ou classes, como isso será determinado o estilo que levará. Eu recomendo ler este artigo e também apenas novamente brincando e vendo como os diferentes estilos, classes e ordem afetarão os elementos em sua página. Prometo que quanto mais trabalharem nisso, mais se acostumarão a isso e tudo começará a fazer sentido. Vamos ver como podemos agrupar seletores em nossa próxima lição. 18. Agrupando seletores: Então, sempre queremos escrever CSS eficiente e código em geral. Vamos voltar e limpar o nosso CSS um pouco, e certificar-nos de que todas as nossas páginas estão olhando como queremos. Então, lembre-se que aplicamos o parágrafo com uma classe de logotipo em torno do nosso logotipo, mas todos nós fizemos isso em nossa página de contato. Então, vamos voltar e atualizar nosso HTML para ter certeza de que todas as nossas páginas têm o mesmo texto. Vou pegar na página de contato, pegar uma cópia, e então vou atualizar toda essa linha. Salve, salve e salve. É um pouco tedioso, mas sabemos exatamente o que precisamos adicionar, então vamos nos certificar de que atualizamos essas quatro páginas. Também nos lembramos, estamos dando uma olhada na classe de logotipo. Nós realmente não queremos que a classe de logotipo apareça lá. Então, vamos nos livrar disso. Então, vamos remover essa classe de logotipo. Lá vamos nós. Nós também ficamos com estes parágrafos verdes, que nós realmente não queremos. Então, nós olhamos um pouco para a herança, vamos nos livrar desse vermelho, e vamos nos livrar do verde, que é aqui em cima. Está bem. Então, as coisas estão um pouco melhores do que como eram. Então, você vai notar que eu lembrei de atualizar o cabeçalho, mas nós também atualizamos a navegação, certo? Eu não fiz essa atualização quando fiz essa mudança. Então, precisamos ter certeza de que estamos adicionando a classe UL de navegação em todos os nossos ULs. Você notará que muitos HTML e CSS podem parecer um pouco tediosos, mas uma vez que você descobrir o que você está fazendo um pouco mais, você será capaz de detectar esses obstáculos que aparecem muito. Coisas como solução de problemas e coisas como esquecer de copiar coisas se tornarão muito mais naturais. Então, atualmente, você notará que nossos H1 e H2 têm um sublinhado de decoração de texto. Eles também estão centrados na página. Como fizemos isso até agora é repetindo propriedades e valores CSS. Temos repetido declarações entre aqui e aqui. Então, neste, tínhamos a cor da mesma cor. Eles também compartilham o peso da fonte normal, sua família de fontes, seu centro de alinhamento de texto e seu sublinhado de decoração de texto. Certamente, deve haver uma maneira mais eficiente de escrever isso. Caso contrário, eu provavelmente não estaria falando com você sobre isso. Mas estou assim, digamos que sim. Se queremos aplicar os mesmos estilos a dois elementos diferentes, se esses conjuntos de um seletor de elementos, um seletor de classe, um seletor de ID, qualquer um dos que podemos fazer isso. Como fazemos isso com uma lista separada por vírgulas de seletores. Então, H1, H2 e, em seguida, chaves. Isso significa que o H1 e H2 receberão o que eu colocar aqui. Neste caso, eu poderia remover cor de ambos e apenas listar para aquela propriedade lá em cima. Poderia também retirar a decoração do texto sublinhada daqui, bem como a partir daqui, e também a decoração do texto, a família das fontes e o peso das fontes estão a ser repetidos. Então, deixe-me fechar isso. Ponha isso aí. Livre-se do peso da fonte, do font-family e do text-align. Lá você pode ver tudo o que estava sendo aplicado a H2 na verdade foi aplicado ao nosso H1. Então, de forma mais eficiente, eu poderia ter escrito isso, mas eu não sabia disso até que passamos por este experimento e talvez todos queiram substituir algo em um H2 aqui. Então, vamos deixar isso como está, salvar e voltar e eu posso ver as coisas parecerem exatamente iguais porque estamos aplicando os mesmos estilos de uma maneira mais eficiente. Também podemos dizer algo como cor de fundo roxo. Agora, você pode ver que o roxo está sendo aplicado ao nosso H1 e H2 provando que isso está realmente funcionando. Então, digamos que tivemos isso, digamos que também queremos aplicar isso aos nossos H3s. Podemos apenas manter a lista separando vírgula, para que todos os nossos títulos tenham pelo menos este bloco base. Então podemos anular. Então, digamos que na verdade não queremos que a cor de fundo do H2 seja roxo. Podemos dizer que queremos que seja amarelo. Se salvarmos isso, o que o navegador vai fazer, vamos passar e dizer vamos fazer o fundo roxo e depois lembrar a cascata. Então, ele acerta isso primeiro e depois acerta isso. Então, se eu atualizar é amarelo. Se eu mudar para este H2 em cima, vai ser roxo ou amarelo? Vai ser roxo. Escrever isto é a mesma coisa que escrever isto. Ele ignora todas as outras vírgulas, então é exatamente o que você sempre quis como primeiro. A cascata vai de cima para baixo e diz H2 roxo primeiro, e depois amarelo H2. É assim que funciona em termos de agrupamento de seletores. Você pode usar isso onde você achar mais eficiente para ser capaz aplicar o mesmo estilo a um grupo de seletores. Vamos nos livrar de algumas dessas palavras-chave que temos aqui porque nós realmente não precisamos delas enchendo nossos olhos. Vamos também descentralizar nosso rumo. Nossos títulos centrados podem ser um pouco de distração com a maioria de nossa tecnologia. Então, vamos remover isso do nosso rumo geral, e agora mover as coisas de volta para a esquerda. Vamos também nos livrar dessa transformação de texto em nosso H1. É um pouco gritando com a gente. Acho que não precisamos gritar sobre John com ninguém. Isso está um pouco mais sob controle. Então, nossa página Sobre está parecendo bem agora. Menos gritos, é um pouco mais fácil digitalizar e ler com tudo o que resta alinhado com o CSS que fizemos até agora. Nossa página de contato parece muito bem e fácil de ler. Vamos ver como está a nossa página inicial. Então, está parecendo bem. Talvez possamos fazer alguns ajustes aqui e ali. Talvez queiramos centralizar nosso rumo em nossa página inicial, talvez queiramos centralizar nossa imagem e H1 em nossa página inicial. Então, até agora temos uma classe para fazer isso. Essa é a nossa classe de logotipo, exceto nossa H1 e nossa imagem de herói não é realmente um logotipo. Então, se quisermos reaplicar essa classe de logotipo para outras coisas, vamos chamá-la de algo um pouco mais semântico. Talvez possamos nomear algo como destaques mostrando que estamos usando esse estilo para destacar essa informação. Faz mais sentido porque agora não estamos aplicando apenas ao nosso logotipo. Claro, o computador vai ler isso muito bem se você ou não chamá-lo de logotipo ou destaque. Mas será mais fácil para nós, como humanos, entender nossas intenções quando nos depararmos com algo assim. Se você entregar isso ao cliente ou companheiro de equipe, se eles virem algo como destaque, fará mais sentido para eles por que você está fazendo isso e qual guia de estilo você está tentando fornecer nomeando algo dessa maneira. Então, quando eu voltar para nossas páginas e lembrar que removemos a classe de logotipo. Então, temos que atualizar o destaque. Vamos fazer isso tudo, destaques é uma palavra divertida para digitar. Então isso é bom, destaque e agora vamos também aplicá-lo em nossa página Índice. Para H1, podemos fazer classe igual realce e, em seguida, vamos adicionar outro desses parágrafos de destaque em torno de nossa imagem. Então, classe P é igual a destaque. Lembre-se, vamos precisar disso para centralizar isso e, em seguida, fechar esta tag de parágrafo. Agora, você pode ver que o topo da nossa página inicial tem muito mais elementos centrados e faz com que pareça um pouco mais com uma área de página inicial. Com antecedência, CSS, é claro, será capaz de fazer mais ajustes para isso. Mas, por enquanto, estamos muito bem com nossos estilos de texto e nossos estilos de alinhamento. Talvez também queiramos mudar os estilos para blockquote para reconhecer que é algo diferente. Vamos fazer isso também. Então, sob nosso último elemento, vou manter nossas aulas um pouco separadas a partir de agora. Vou escrever blockquote e aqui vou mudar o estilo da fonte para itálico. Volte aqui e agora você pode ver que nosso estilo de fonte é itálico, o que é algo comum que você verá quando se trata de citações. Mas provavelmente não queremos que a Dra. Liz Wilson seja uma citação. Então, vamos mudar isso e podemos fazer isso. Isso está em nossa página inicial e nós somos capazes de segmentar este bloco P, nós não podemos usar o seletor de frases, certo? Porque isso vai ter ambos Ps, podemos aplicar outra classe. Basicamente, estamos a dizer quem é este que disse esta citação. Então, vamos fazer disso uma classe de quem. De volta ao nosso styles.CSS direito sob blockquote, vamos escrever quem e vamos dizer normal estilo de fonte. É assim que se anula esta cascata. Então, agora, quando atualizamos, ele volta ao normal. Talvez também queiramos mudar nosso rodapé para que você possa dizer que é um pouco de uma cópia diferente do nosso outro texto em nossa página. Talvez vai torná-lo um cinza mais claro e pode ser vamos torná-lo texto menor. Então, atualmente você vai se lembrar que nosso marcador para rodapé é apenas um parágrafo. Vamos adicionar outra classe a isso. Então, classe é igual ao rodapé. Volte para nossos estilos e vamos dizer rodapé ponto e vamos mudar o tamanho da fonte para 12 pixels. Agora, é muito mais óbvio que isso é cópia de rodapé e não conteúdo corporal geral. Nós também temos este apelo à ação para Hire John para suas necessidades de retrato de animal de estimação! Vamos dar essa aula e é um apelo à ação. Vamos dar uma aula de CTA. Queremos que ele pareça um pouco diferente, então ele agarra alguma atenção visual. Então, vamos dizer CTA e poderíamos dizer algo como font-weight cheio e ver como isso parece. Eu posso ver que é um pouco mais óbvio que novamente este é um tipo diferente de conteúdo que temos em nossa página. Neste caso, uma chamada à ação. Então, por último, temos a página de trabalho. Você sabe o que eu estou dizendo isso eu estou vendo que realmente o texto sublinha não está funcionando muito bem nos H1s. Então, vamos voltar para cima e vamos realmente remover o sublinhado de decoração de texto completamente e ver como isso funciona. Tudo bem. Bem, talvez precisemos disso em alguns dos outros ou talvez devêssemos ajustar isso. Aqui, temos um H1 e H2 e um H3, você pode ver que talvez esteja ficando um pouco difícil de ver qual é a diferença em termos de qual é a organização do título. Então, vamos fazer alguns ajustes nisso. Vamos mudar o nosso H3 para ser uma cor diferente. Vamos dar uma cor mais escura como o corpo do texto que temos. Então, nós não estamos realmente usando era H2s. Vamos mudar isso para um H3. Você não tem que definir tudo, é claro. Nós vamos dizer que a cor, vamos adicionar o sinal de libra na frente será esta cor mais escura novamente. Talvez queiramos adicionar o sublinhado de volta aos nossos H2s. Então, na verdade vamos pegar aquele H2 de volta. Então, H2 text-decoração sublinhado e isso parece bem. Talvez queiramos mudar nossos H3s e queremos que eles sejam itálico. Talvez queiramos que sejam itálico e queiramos mudar a família das fontes. Vamos fazer a família das fontes aqui, Georgia. Quero dizer, vamos lá e lá estão os nossos H3s. Você pode ver que nossas imagens estão aparecendo na mesma linha que nossos links. Isso é porque lembre-se que ambos são imagens e links são elementos inline. Podemos ajustar isso de duas maneiras diferentes. Um, poderíamos colocar a tag de link dentro de um texto de parágrafo dentro de apenas por conta própria. Ou podemos adicionar classe e em vez de fazer exibição na linha podemos fazer um display preto. Neste caso, eu quero voltar para o H2 realmente um texto de parágrafo em torno dele. Porque poderíamos argumentar que poderia ser um parágrafo. Então, vamos fazer isso. Nós vamos dizer parágrafo, parágrafo e eu vou apenas recuar para que possamos ver isso um pouco melhor e eu vou fazer a mesma coisa aqui em cima para Leia as Crônicas da Lasanha. Então, P tag, P tag. Agora, quando eu voltar e atualizar, você pode ver que eles estão recebendo estilos de parágrafos e aparecem na próxima linha. Eu também posso ver que talvez nossos H3s estão ficando um pouco perdidos com o tamanho da fonte, vamos bombear o tamanho da fonte um pouco. Então, podemos fazer font-size. Vamos fazer 22 pixels e ver como isso parece. Isso é um pouco melhor em comparação com o texto do nosso parágrafo que ainda pode ser um pouco grande. Vamos mudar nossos parágrafos para 18 pixels para relaxar um pouco. Vamos voltar e ver como isso afeta o resto do nosso site. Lembre-se, quando você fizer uma alteração em seu CSS, ela afetará tudo. Vamos nos certificar de que as coisas ainda parecem bem. Eles fazem. Eles ainda estão parecendo muito bons. Perdemos um link aqui, então vamos nos certificar de que adicionamos um texto de parágrafo em torno disso. Então, para “Compre este CD” parágrafo e parágrafo. Quando eu estou confuso sobre se eu deveria ou não adicionar parágrafos a algo assim eu tento imaginar se não havia um link aqui. Se estivéssemos apenas digitando “Compre o CD” isso seria um texto de parágrafo, então eu posso ir em frente e colocar isso dentro de um parágrafo, vou salvar isso e voltar. Agora, nossa página está muito boa, exceto por uma coisa. Estes links roxos e azuis que são bastante irritados. Então vamos na próxima lição, veja como podemos ajustar nossos estilos de elemento de link. 19. Vínculos e pseudoclasses: Por último, vamos querer olhar para o estilo dos nossos links. Então, temos esses links roxos e azuis, roxos para links visitados e azuis para links não visitados, e vamos torná-los mais do nosso estilo. Então, um link é como qualquer outro seletor de elemento, o que significa que poderíamos direcioná-lo usando seu nome de elementos, que é apenas um A. Então, vamos manter nossos links azuis. Será realmente bastante óbvio para todos que é um elo por ser azul, mas vamos torná-lo não tão intensivo como um azul. Então, em vez disso, vamos usar 42a795, e você pode ir em frente e, claro, escolher um azul diferente ou escolher qualquer outra coisa, um roxo, amarelo ou vermelho, há muitas cores para você escolher. Então, vamos apenas alterar nossos links, para que haja diferentes do padrão. Vamos salvar nosso arquivo e, em seguida, atualizar, e agora você pode ver que é menos de um azul cegante. Além disso, nossos links roxos mudaram para azul também. Bem, definimos todos os nossos A's para serem novos azuis, também estamos definindo nossos estados visitados e de link. Links têm o que é conhecido como pseudo-classes e pseudo-classes é outro conceito. Neste caso, temos pseudo-classes para nossos links. A-link é a nossa pseudo-classe padrão, então é assim que um link se parece por padrão. A visitado seria como fornecemos uma cor diferente ou qualquer tipo de propriedade de texto para links que foram visitados. Passe o mouse e Foco, pode fazer coisas semelhantes isso seria um bom seletores de agrupamento separados por vírgulas e isso é o que acontece com o Hover, é quando você realmente passa o mouse sobre um link, e Foco é quando você usa o teclado para navegue até um link. Ativo é para quando você está pressionando o link antes de deixar. Então, essas são pseudo-classes de ligação. Então, vamos ver como podemos adicionar isso à nossa folha de estilo. Outra coisa que é importante notar, é a ordem da qual você define como importante. Então, se você vai encontrá-los todos, você tem que fazê-los neste link de ordem visitado, passar o mouse e, em seguida, ativo. Você pode deixar alguns de fora, então você não precisa defini-lo em um link visitado. Na verdade, vou deixar essa de fora. Mas, podemos definir um link, um hover e um ativo. Nós também não precisamos escrever um link de dois pontos. Porque, por padrão, a é o mesmo que o A-link. Então, agora vamos adicionar um estado de foco. Então, vamos dizer um pairar, vírgula um foco. Vamos definir nosso foco e foco ao mesmo tempo, porque eles vão ter o mesmo efeito. Queremos ter certeza de que nossos usuários de teclado quando estiverem usando o teclado para navegar por nossos links, também podem ver qual link está no momento e prestes a visitar. Então, para isso, podemos apenas mudar a cor e vamos tornar a cor mais escura quando passarmos sobre ela. Eu só vou usar o valor 5f6b69. Você poderia usar algo como preto ou 333 seria um número hexadecimal para algo mais escuro. Eu vou salvar isso, eu vou voltar. Agora você pode ver, que quando eu passar o mouse sobre um link, estamos definindo o estado de foco. Portanto, alterando a aparência do link. Se eu estiver usando meu teclado, agora estou pressionando Tab, e o primeiro link em nossa página, é claro, é o nosso logotipo, então é isso que acontece quando eu tab sobre o logotipo, vamos obter um esboço. Então eu passo para o nosso trabalho e você pode ver que nós temos o contorno azul e a grande mudança, porque nós definimos nosso estado de foco também. Isso permite que os usuários do teclado saibam qual link eles estão prestes a clicar. Também podemos definir um ativo se lançarmos, tão a-ativo e talvez queiramos dizer algo como sinistro, a cor de fundo será branca. Então, agora, quando eu atualizo, você pode ver que agora, eu estou segurando fisicamente o botão do mouse, e durante esse momento é quando você começa o estado ativo. Então, quando eu libero, eu realmente vou para essa página. Aí está o meu pairar e o meu ativo. Vamos remover o ativo por enquanto, então não é algo que realmente precisamos. Mas, se isso é algo que você quer fazer, talvez você queira adicionar um pouco de ovo de Páscoa de uma jóia para as pessoas quando eles clicam em seus links, e para mostrar-lhes algo quando ele está ativo, você certamente pode fazer isso. É assim que aplicamos estilos diferentes ao nosso link. Lembre-se, você não precisa apenas trocar cores, nós também podemos mudar coisas como talvez nós queiramos tirar a decoração do texto, então podemos dizer text-decor nenhum e então talvez no foco do mouse, podemos colocar o subjacente de volta, então sublinhado de decoração de texto. Você pode ver como isso parece aqui, então quando eu passar o mouse sobre, a linha aparece. Talvez eu não queira fazer uma mudança de cor então, eu posso apenas fazer um sublinhado enquanto eu estou pairando sobre. Eu vou voltar atrás, porque eu gosto de fazer meus links agradáveis e obviamente, eeu quero que porque eu gosto de fazer meus links agradáveis e obviamente, e as pessoas saibam que é um link, então vamos deixar isso sublinhado lá dentro. É assim que vamos estilizar nossos links. Em nossa última lição, vamos olhar para algumas propriedades abreviadas, então como podemos escrever coisas um pouco mais fáceis para coisas como: cores, fontes e propriedades de fundo. 20. Propriedades abreviadas: Até agora, olhamos para as longas maneiras de escrever as coisas. Nós olhamos para a estenografia de cor um pouco. Então, lembre-se que para números hexadecimais, se os valores são os mesmos. Então, 666666, pule para seis lá, nós podemos realmente apenas fazer um 666. Então, é assim que faríamos curtanos de cor, mas também abreviados para outras coisas como propriedades de fonte e propriedades de fundo. Então, neste momento, estamos dizendo que o tamanho da fonte em nossos parágrafos é 18 pixels, e a família de fontes é Georgia e Serif. Podemos combinar isso só dizendo “Font”. Então, fonte 18 pixels, Georgia, Serif será a mesma coisa que escrever isso, mas é assim que faríamos abreviação para fonte. Você pode ver que ainda está recebendo os mesmos estilos, mas fonte 18 pixels Georgia. Quando se trata de taquigrafia, a ordem em que escrevemos as coisas é importante. Então, digamos que em nossos h2s, tínhamos tamanho da fonte 40 pixels, peso da fonte é negrito, estilo da fonte Itálico, e font-family, Fantasy. Estou sempre à procura de uma desculpa para usar a fantasia, por isso vamos usá-la nesta demo. Vamos voltar aqui e ver os nossos H2s foram ajustados. Agora, se quisermos escrever isso como uma abreviação, podemos, mas é importante escrevê-las em uma determinada ordem. Então, vamos dizer “Fonte”, e a ordem para a nossa abreviação de fonte começará com estilo de fonte, então Itálico. Em seguida, o peso da fonte neste caso, Negrito. Então, vamos fazer nosso tamanho de fonte, então 40 pixels. Se tivermos alturas de linha, também podemos colocar isso aqui, e fazemos isso escrevendo barra. Poderíamos escrever isso como uma barra de 80 pixels altura da linha. Isso vai ser muito grande, e então vamos colocar nossa font-family, então Fantasy. Então, novamente, só para ver como isso vai parecer [inaudível] vamos adicionar a altura da linha aqui, para que você possa ver, e é assim que escrevemos em uma abreviação. Então, se eu excluir tudo isso e atualizarmos, podemos ver que seus h2s ainda estão recebendo o estilo. Eles também estão adicionando a altura da linha que adicionamos, é por isso que ficou um pouco maior antes e depois do texto, e é assim que escrevemos nossa abreviação. Se você esquecer como escrever abreviaturas, não se preocupe. É apenas uma pesquisa do Google de distância para uma abreviação de fonte, e você pode ver muitos resultados aqui. Eu gosto dos truques CSS uns, então eu vou vir aqui, e apenas ver se eles vão me lembrar a ordem, então font-style, font-variant, font-weight, e um exemplo disso em uso. Então, itálico, pequenas tampas, normal 13 pixel/ 150%, Arial, Helvetica, Sans Serif, recurso muito bom para apenas certificar-se de que você se lembra de como escrever sua fonte abreviada. Nós também podemos escrever abreviação para o nosso fundo. Lembrem-se, temos o fundo do nosso corpo para fazer o barulho. Então, em vez de escrever tudo isso, podemos, em vez disso, escrever fundo. Começamos com nossa cor, então efebdf, então escrevemos nossa imagem de fundo. Neste caso, img/bg-noise.jpg. Então, vamos dizer nossa repetição, e já que estamos repetindo, nós realmente não precisamos mais da posição de fundo, então nós poderíamos apenas começar de volta no canto superior esquerdo, que é 00. Mas, se você fosse fazer uma posição de fundo, seria no final após sua repetição. Então, vou deletar isso. Nós nos livramos dessas quatro linhas, atualizamos, e tudo ainda é o mesmo, claro, porque estamos limpando isso. Se eu mudar para não repetir aqui, então você pode ver que nós apenas temos eles naquele canto superior. Lembre-se, nós sempre podemos alterar esses valores, então 100 pixels, 100 pixels, e agora vemos que nosso quadrado se moveu aqui, 100 pixels. É como um jogo Word Waldo tentando encontrar esse padrão de ruído, mas é aí que ele está. Então, essas são algumas maneiras que você pode escrever CSS mais eficiente usando esses abreviados. No próximo vídeo, vamos olhar para os comentários CSS. 21. Comentários CSS: Então você pode se lembrar em HTML que tivemos comentários HTML, mas também temos comentários para CSS. Então, quando estamos limpando um pouco nossos estilos, queremos adicionar alguns comentários. Então, primeiro, vamos mover o corpo acima do parágrafo só porque o corpo contém tudo. Então eu quero ter isso primeiro em nossa página. Agora o que eu vou fazer é escrever uma nota para mim aqui em cima e eu vou escrever minha nota para dizer algo como, “Estilos para o fundo do corpo”. Agora, é claro, isso vai tentar ser lido pelo navegador, então eu tenho que colocar algo em torno dele que faz o navegador ciente de que este é um comentário. Em CSS, você escreve seus comentários com uma barra, estrela e, em seguida, estrela, barra, e você pode ver em Sublimetext, ele ficou cinza. Não importa se há ou não espaços aqui. Eu só gosto de colocar espaços para que seja mais fácil de ler, e estes são realmente bons para fazer anotações para si mesmo. Então, talvez aqui em baixo, eu vou fazer um comentário que diz, “estilos de cabeçalho”, e aqui em baixo, eu vou começar a entrar em substituições de classe, porque é aqui que estamos usando classes para substituir nossos seletores de elemento geral. Você pode deixar quantas notas quiser aqui. Lembre-se, é possível que as pessoas visualizem suas notas. Se alguém quiser ver sua fonte e ver seu CSS, é claro que ele pode ver isso, então não escreva nada mau ou não escreva nada de mau gosto porque as pessoas poderiam encontrar isso. Você também pode usar comentários para comentar certas seções do código se quiser ver como as coisas ficarão. Então, e se eu for tipo, “Quer saber, eu realmente não sei se eu quero ter essa cor, mas eu não quero excluí-la também.” Então, por agora, estou apenas comentando temporariamente, volto aqui, e agora posso ver como as coisas ficam se estiverem na cor mais escura da classe corporal. Eu não sou realmente um fã disso, então eu vou voltar e ou controlar Z ou simplesmente ir em frente e excluir estes. Não tenho certeza sobre essa fantasia de família de fontes, então talvez eu queira comentar isso. Por isso, vou comentar isto, e também posso deixar algumas notas para mim. Qualquer coisa dentro dos comentários será ótimo assim e você pode notar que é um comentário, e eu posso deixar uma nota aqui para mim que diz, “fonte abreviada por exemplo”. Então se eu quiser dizer a mim mesmo, “Comentei porque não parece bonito.” ou algo assim, e essa é uma maneira de eu saber por que eu comentei isso. Mais tarde, antes de ir ao vivo com meu site, talvez eu queira remover todos esses comentários, mas por enquanto, mantenha-o e decida mais tarde se eu mudar de idéia sobre essa fantasia. Então é por isso que os comentários são realmente bons. Você também pode fazer alguns comentários para si mesmo no topo da página. Talvez você queira deixar comentários para sua paleta de cores. Então você pode dizer algo como - e lembre-se que você pode fazer qualquer formatação que você quiser, então talvez eu queira fazer todas as maiúsculas para que seja fácil de ver, e eu posso dizer algo como a cor preta que estamos usando é o número 27211f, a cor coral que estamos usando é este: e96f4p. Esta pode ser uma maneira de as pessoas verem facilmente as cores. Dessa forma, se você mudar de idéia, você pode atualizar aqui também, e é um lugar onde as pessoas podem rapidamente pegar esses valores e conectá-los. Então, o azul que estamos usando está no nosso A. Vamos copiar isso e colocá-lo aqui. Isso são apenas algumas notas que você pode manter para si mesmo se você estiver interessado em usar uma paleta de cores e talvez você queira alterá-la mais tarde, apenas algo rápido e fácil para você manter seu CSS organizado. Vamos falar sobre o suporte do navegador, um pouco chato, mas algo para falar em nossa próxima lição. 22. Compatibilidade de navegador: Então, assim como um HTML onde temos especificações diferentes, temos diferentes especificações de CSS. Houve diferentes versões, rascunhos e documentos que dizem como os navegadores devem ler CSS. Você pode ver que existem diferentes padrões e rascunhos de CSS, coisas como CSS Nível 2 e Seletores Nível 3, que definem as diferentes propriedades CSS com as quais temos que trabalhar. Seletores Nível 3 tornou-se uma recomendação em 2011 e tem um alto suporte entre a maioria dos navegadores modernos que usaremos. No entanto, nem tudo é um navegador moderno. Às vezes, se você olhar para a análise do seu site, você verá que as pessoas estão chegando ao seu site a partir de navegadores mais antigos, talvez não a versão mais recente do Chrome em um Mac ou Firefox no Windows. Você deseja certificar-se de que as propriedades CSS que você está usando podem ser usadas e serão bem-suportadas. Caniuse.com é um ótimo site que lhe diz compatibilidade para HTML5, CSS3, SVG, e outras coisas em relação a como eles vão olhar e reagir em um navegador. Podemos dar uma olhada na coluna CSS à esquerda. Se houver uma propriedade aqui que você está pensando em usar, você pode ver se você será capaz de usá-la. Falamos um pouco sobre valores de cores diferentes antes, como HSL e RGB. Você pode ver a partir deste gráfico que nas versões mais recentes de um monte de navegador, há suporte para isso. Mas de volta no IE8, ele não suporta todas essas cores CSS3. Isso é importante saber, se o seu site está sendo visitado por muitas pessoas no IE8, você pode querer usar valores hexadecimais. Se você estiver bem com as pessoas no IE obterem uma cor de backup ou fornecerem dois valores, então você pode pedalar na cor hexadecimal e, em seguida, no próximo slide, fornecer uma cor RGB. Essa é outra maneira de resolver esse problema. É um pouco de trabalho extra para garantir que as pessoas no IE8 possam ver isso e obter suporte, mas isso depende de você e do cronograma para o seu projeto. Vamos comentar isso por agora e dizer, em vez disso, o fundo da minha página, eu quero que seja RGBA e foi 255, 255, 255,1. Essencialmente, isso é branco. O que podemos fazer em vez disso se quisermos suportar navegadores mais antigos, você diz número de fundo fff. O que acontece aqui são navegadores que entendem isso, como IE8, vão ler isso. Então, quando chegarem a esta linha, vamos ignorá-la completamente. Para navegadores que suportam isso ou leem isso, aplique-o, mas substitua-o por esse valor. Essa é uma maneira de contornar a compatibilidade mais antiga. Nós demos uma olhada nas imagens de fundo mais cedo e há outros tipos de coisas de fundo que podemos adicionar no CSS3, como clipe de fundo ou tamanho de fundo, e podemos ver o suporte diferente para coisas assim aqui também. Quando você estiver brincando com novas propriedades CSS, que eu encorajo você a fazer depois desta aula, apenas certifique-se de que você está se referindo a coisas como caniuse.com para ver que tipo de suporte de navegador está disponível. No próximo vídeo, vamos ver algumas das coisas que podemos usar e encerrar isso. 23. Próximos passos: Bem, isso encerra nossa introdução ao CSS. Espero que tenham se divertido muito. Eu certamente fiz, assim como Steve aqui. Não se esqueça que há muito mais propriedades que podemos adicionar ao nosso site. Se vocês querem conferir CSS3 Generator, que vai começar a dar alguns exemplos de coisas. Observamos algumas propriedades de texto que controlamos, mas também podemos controlar coisas como sombra de texto. Então, se dermos uma olhada em algo assim, você pode ver aqui está um exemplo de como aplicaríamos sombra de texto à nossa página. Então, poderíamos copiar essa sombra de hífen de texto, cinco pixels, cinco pixels, dois pixels, e então esse valor X, e aplicá-lo a alguns de nossos estilos também. Então, talvez queiramos aplicar isso em nossas rubricas. Bem, se fizermos isso, você pode ver, uau, isso não parece bom. Mas como você pode ver, há muito mais coisas que podemos começar a adicionar com CSS3 e outras propriedades. Nós também temos coisas como gradientes CSS. Então, você pode ver que você pode brincar por aqui, ajustar cores como esta. Se você clicar duas vezes sobre isso, você pode alterar a cor. Então, talvez queiramos remover alguns desses também, talvez queiramos adicionar um gradiente ao nosso plano de fundo da nossa página e podemos fazer isso se assim o desejarmos. Então, digamos que eu tinha um gradiente como este. Então, se eu tivesse esse gradiente aqui, eu posso clicar em “copiar”. Venha para o meu CSS, vá até o meu corpo e, em vez de usar este fundo, vamos comentar isso e colar no código CSS gerado aqui. Volte para o meu site e agora você pode ver o fundo tem esta imagem gradiente. Claro, eu vou dizer que é importante entender o que as propriedades CSS você está fazendo, mas eu também acho que é divertido ver o que você pode fazer e o tipo de propriedades diferentes que temos que jogar. Então, eu acho que é importante para vocês saberem o que está lá fora, saber que há um monte de coisas legais que podemos fazer com CSS que vão além do que fizemos hoje. Então, eu espero que você continue testando algumas dessas regras, volte a limpar seu CSS, limpe seu HTML, limpe seu HTML, certifique-se de que as coisas pareçam eficientes e legíveis, e tente alternar as coisas. Tente alternar cores, tente alternar tamanhos de fonte e veja a combinação que você gostaria de usar para seu currículo, e estilos que você acha que se encaixariam Jon Arbuckle talvez de forma diferente do que fizemos aqui hoje. Espero ver todos vocês na próxima aula onde falamos sobre CSS avançado para layout e posicionamento e começar a cavar um pouco mais fundo sobre o que CSS pode fazer. Até então, eu espero que você tenha um monte de diversão adicionando muitas cores e fontes para fazer Jon Arbuckle, ou seu site portfólio super incrível. Até lá, vejo-te na próxima vez.