CSS em ação: como adicionar estilos, formatação e funcionalidade

1. Introdução: Ei, todo mundo. Bem-vindo à inação CSS. Hoje vamos analisar CSS ou folhas de estilo em cascata e como elas podem ser aplicadas ao conteúdo. Às vezes, eles podem parecer magia negra, mas vamos analisar as regras básicas que estão subjacentes CSS e facilitar a sua aplicação ao seu conteúdo. Se você é um desenvolvedor ou designer, tenha experimentado ou não, esta é uma boa classe para você. Vamos cobrir o básico rapidamente para colocar todos a par da velocidade e vamos seguir em frente a partir daí. Eu fornecerei tudo o que você precisa para a classe, links, recursos e espaço de trabalho on-line e, se você tiver experiência, haverá arquivos que você pode baixar e trabalhar da maneira que preferir. Todo o trabalho que estamos fazendo hoje será em CSS. Eu vou lhe fornecer um documento HTML, mas você não vai ter que se preocupar em editá-lo. Estamos todos começando com o mesmo conteúdo e terminando com algo exclusivamente seu. No ponto médio do projeto, todos nós vamos estar trabalhando para a mesma página web. Ele terá polido, estilo e um ótimo ponto de referência para comparar e fazer perguntas a outros alunos da classe para ver o que você pode ter feito de errado. Depois disso, vou lhe dar mais algumas ferramentas e então você vai sair por conta própria. Use sua imaginação e veja o que você pode fazer a esta página web. É incrível ver o que com exatamente o mesmo conteúdo, um pouco de CSS e criatividade podem criar. Estou animado para ver o que você pode fazer no final da aula de hoje. 2. Como começar o projeto: Vamos usar o CodeSandbox.io para tornar o projeto de hoje rápido e fácil de entrar. Se você tem experiência de desenvolvimento suficiente, então você prefere trabalhar em seu próprio ambiente local, sinta-se livre para baixar os dois arquivos fornecidos e editá-los como você está mais confortável. Uma vez que a classe é concluída, você pode enviá-los para CodeSandbox ou colocá-los em outro lugar inteiramente para compartilhar seu progresso. Daqui em diante, porém, assumirei que você está me acompanhando. CodeSandbox nos permite começar na mesma página usando o link fornecido para o projeto inicial. Assim que você fizer uma edição em qualquer um desses arquivos, seu projeto receberá uma nova URL e se tornará exclusivo para você. Usaremos esse fato para facilitar o compartilhamento de nosso projeto sempre que você tiver dúvidas ou quando estiver pronto para mostrar seu próprio resultado final. Este é o aspecto do seu projeto depois de seguir o nosso link inicial. Existem apenas alguns arquivos no projeto, package.json, que vamos ignorar totalmente para hoje, não se preocupe com isso, index.html, que é onde todo o nosso conteúdo vive, e styles.css, que vive na pasta de estilos no caso de Está escondido. Agora, nós vamos estar olhando para o conteúdo do arquivo HTML em breve, mas primeiro, eu quero lembrar a todos, nós não estaremos editando nada em index.html. Todo o nosso trabalho hoje é feito em styles.css. O que significa que não importa o quão diferente, complexo ou completamente único seja o projeto final de todos, eles são baseados literalmente no mesmo conteúdo. Ver quão variada sua apresentação CSS pode tornar uma página ajuda a ilustrar o quão poderoso é o que estamos aprendendo hoje. 3. Olhar rápido no nosso conteúdo: Embora não mudemos nada neste arquivo HTML, vamos nos referir a ele, muito. O CSS tem muitas ferramentas para estilizar conteúdo de maneiras tanto difundidas e muito precisas. Mas todos eles dependem de como seu conteúdo HTML é realmente escrito. Vamos dar uma olhada rápida em como nosso conteúdo está definido, agora, não se preocupe em memorizar todos esses detalhes que estamos apenas indo para uma visão geral agora, eu vou atualizar detalhes específicos mais tarde para você conforme eles se tornarem relevantes. Você sempre pode consultar o arquivo HTML no seu próprio ritmo. O conteúdo em si também contém dicas e detalhes que talvez não sejam abordados diretamente nesses vídeos. Vá em frente e leia enquanto estamos trabalhando É importante lembrar que tudo em HTML está aninhado. Por exemplo, aqui abrimos o elemento Header e aqui o fechamos. Tudo no meio é considerado dentro do cabeçalho, mesmo que não haja nada visual na página, para realmente falar sobre isso ainda sem olhar para o código, corretamente recuo HTML dá dicas sobre aninhamento por empurrando elementos aninhados de mais e mais, a fim de tornar mais fácil de julgar em um piscar de olhos, como você vê aqui, tenha em mente que os elementos podem ser aninhados vários níveis profundos. Logo abaixo do cabeçalho, temos um elemento de navegação que contém um elemento de lista UL ou Unorder, que contém um monte de LI, List elementos, cada item da lista até tem um link dentro deles, mesmo que eles não estão divididos em duas linhas separadas e recuado. Para evitar que arquivos HTML incrivelmente grandes sejam inutilmente longos. Muitas vezes, o conteúdo simples, como um link dentro de um item de lista, é mantido em uma única linha, como você vê aqui. 4. Caixa de ferramentas em CSS: Existem três métodos primários de aplicação de CSS que usaremos hoje, elementos, classes e IDs. Esses três métodos de escrever instruções CSS podem ser usados juntos para aplicar nossos estilos com precisão e lógica, uma vez que entendemos como eles funcionam. Mas não se preocupe em adicionar qualquer um dos CSS que estou digitando nesta seção, vamos apenas apagá-lo em um momento de qualquer maneira. Avisarei quando começarmos a escrever um código que queremos manter. Primeiro, vamos falar sobre elementos. Um elemento é a maneira mais generalizada de aplicar CSS ao conteúdo. Quase qualquer conteúdo em uma página HTML pode ser considerado um elemento estilável. Vejamos o primeiro parágrafo na página sob o cabeçalho de conteúdo R. O texto é encapsulado em uma tag p para parágrafo. Esta tag p é o nosso elemento. Se fôssemos escrever CSS para tornar todos os parágrafos na página maiores, poderíamos usar este elemento geral para fazê-lo assim. Em seguida, temos aulas. E se quiséssemos adicionar alguns estilos a apenas alguns dos nossos parágrafos, mas não a todos eles? Classes são nomes reutilizáveis que podemos aplicar ao nosso conteúdo peça por peça. Eles nos permitem escolher e escolher de forma mais seletiva do que apenas segmentar cada elemento na página. Adicionei classes em todo o conteúdo HTML, mas vamos vê-los em ação. O primeiro parágrafo em cada seção tem uma classe de primeiro parágrafo. Podemos usar isso para transformar seletivamente esses parágrafos, e apenas esses parágrafos, vermelho. Observe, para CSS, usamos um ponto antes do nome da classe para dizer ao nosso arquivo que é especificamente uma classe que estamos chamando. Não adicionamos nada extra ao nosso elemento. Finalmente, temos identificações. Pense em um ID como uma classe que você só pode usar uma vez por página. Bem, uma classe é útil porque é reutilizável e flexível e ID é tudo sobre ser única. Você pode ter certeza de que todos os estilos aplicados a um ID serão aplicados somente a esse conteúdo exato. Entraremos em detalhes mais tarde, mas as IDs são incrivelmente úteis quando você precisa garantir que um determinado conteúdo tenha um estilo único, mesmo que outros estilos de classe estejam em conflito. Enquanto as classes obtêm um ponto para separá-los, IDs usam um símbolo de hash, como este. 5. Layout de imagem grande: Vamos começar a modelar nosso projeto agora olhando para algumas das mudanças mais amplas que podemos fazer. Deve haver um elemento já na sua folha de estilo o único CSS que escrevi para você antes da aula começar. Ele seleciona o elemento body, que é um elemento que contém tudo visível na página e define a fonte para ser Arial,, com um fallback para qualquer fonte Sans Serif se Arial está ausente do seu sistema por algum motivo. Vamos começar adicionando a este elemento. Por agora adicione CSS ao meu lado, pausando o vídeo conforme necessário como uma forma de aprender e praticar suas novas habilidades de codificação. Uma vez que cheguemos a um certo ponto da turma, deixarei você saber que chegou a hora de adicionar seu próprio toque criativo e tornar o projeto completamente seu. Até lá, estamos todos trabalhando para o mesmo objetivo. Por padrão, nosso navegador adiciona um pouco de espaço em branco ao redor de nosso conteúdo, para que ele não esfregue diretamente nas bordas da janela. Embora isso seja útil, queremos escrever nossas próprias regras para definir esse conteúdo, vamos remover a margem e o preenchimento do elemento corpo como este. Isso não vai parecer ótimo imediatamente, mas estamos construindo algo. Agora há algum conteúdo espalhado por toda a página que eu senti merecido um pouco de ênfase, podemos usar a ênfase do nome da classe, que eu já adicionei a esses bits para fazê-lo. Há muitas maneiras de enfatizar seu conteúdo, mas por enquanto, vamos torná-lo ousado, vamos torná-lo itálico, e torná-lo sublinhado, lá, que deve ser mais difícil de perder. Também temos algum conteúdo que faz referência ao código real como exemplos para ajudá-lo a aprender. O CSS é um pouco mais complicado aqui e estamos dividindo-o mais detalhadamente nas próximas lições. Por enquanto, sigam e tomem notas sobre qualquer coisa que não faça sentido imediatamente. Vamos adicionar duas classes, código e código de comentário. Queremos que o código pareça ser direto do editor de código, então vamos moldar e colorir para se destacar. Lá vamos nós, que se parece um pouco mais com nosso editor de código para se destacar. Agora os comentários de código não são funcionalmente código, mas pequenas dicas ou notas para mim sobre o que deve estar dentro do seu código fora dos exemplos. Para ter certeza de que não ficamos confusos, vamos torná-los verdes e torná-los facilmente separados visualmente. 6. Personalizando o cabeçalho: Em seguida, vamos fazer nosso cabeçalho parecer um pouco mais como um cabeçalho real. Na última lição, aplicamos alguns layouts e cores aos elementos em nosso conteúdo com uma classe de comentário de código e código. Vamos trazer alguns detalhes de cor e layout para o nosso cabeçalho também. Primeiro, vamos nos concentrar no título da página, o elemento H1. HTML usa uma série de elementos de cabeçalho: H1, H2, H3, etc. Assim, o conteúdo pode conter muitos níveis de importância para seus cabeçalhos. Normalmente, você verá um único H1 em uma página, embora não haja nenhuma restrição obrigatória sobre isso. H2 pode ser usado para anotar uma seção específica do conteúdo. Cada uma das seções maiores em nossa página, como nosso conteúdo, está em H2. Se forem outras seções dentro desse tópico, você pode usar H3s e assim por diante. Como a tag body, os navegadores geralmente têm espaçamento padrão adicionado a esses cabeçalhos que eles caem se você não escrever regras específicas em seu CSS. Neste caso, vamos dizer aos nossos elementos H1 exatamente quanta margem queremos que ele tenha. Queremos ser centrados, e queremos ter uma cor particular. Agora queremos que o subtítulo menor corresponda. Não está dentro do H1, mas sim seu próprio elemento de parágrafo. Vamos segmentar esse elemento como fizemos anteriormente e escolhe alguns estilos. Queremos um pouco maior, então é obviamente parte do título visualmente. A unidade que estou usando aqui EMS é de tamanho relativo para elementos tipográficos. Eu fornecerei recursos para profundidade adicional para pesquisar isso, mas por enquanto, basta considerar 1,2 em significa 120 por cento do tamanho que o texto normalmente teria. Também estaremos definindo a margem e o preenchimento explicitamente aqui para substituir o espaçamento padrão de parágrafo. Vamos adicionar alguma cor azul de aparência legal, e vamos adicionar uma borda para que possamos separar a parte superior da parte inferior do título. Agora o cabeçalho está parecendo muito bom, mas eu acho que nosso CSS teve algumas consequências indesejadas abaixo. 7. Entendendo o Fallow: O que aconteceu? Conseguimos definir nosso cabeçalho e título exatamente como queríamos, mas os estilos para o subtítulo foram realizados e aplicados a todos os parágrafos da página. Isso torna nosso conteúdo difícil de ler e perde completamente o ponto de ter estilos de cabeçalho exclusivos em primeiro lugar. Acredite ou não, este enorme grau de estilo amplamente aplicado é uma das maiores características do CSS, não um bug. É por isso que eles são chamados de folhas de estilo em cascata. Desde que você conheça as regras, é muito mais fácil criar um estilo de 1000 parágrafos em uma página com esta cascata do que seria fazer manualmente cada um deles. Como podemos conter essa cascata? Há algumas maneiras que consideraremos ao longo da duração deste curso, mas a mais simples é com algo chamado especificidade. Além de ser um grande twister língua para dizer cinco vezes rápido, especificidade é um dos maiores métodos de escrever CSS para se comportar exatamente como você quer que ele funcione. Lembra quando conversamos sobre nidificação há alguns minutos? CSS está muito ciente de como seu conteúdo é aninhado, e é assim que podemos usar a especificidade para selecionar apenas os elementos aninhados que queremos. Veja como nossas tags h1 e parágrafo estão aninhadas dentro de nossa tag de cabeçalho? Veja como refletimos isso em nosso CSS. Use um espaço entre elementos para direcionar qualquer h1 que esteja dentro de um elemento de cabeçalho e qualquer parágrafo que esteja dentro de um elemento de cabeçalho. Temos apenas um elemento de cabeçalho em nosso conteúdo. Este CSS tem como alvo exatamente o que queremos de forma rápida e eficiente. 8. Dive: Antes de seguirmos em frente, vamos falar um pouco sobre especificidade. Tire as mãos do teclado novamente, não há necessidade de adicionar qualquer um dos CSS que estou mostrando aqui. Só vai ser um código falso para explicar do que estou falando. Vamos pegar de volta escrevendo CSS real da próxima seção. Vimos dois exemplos de como escrever especificidade, ambos restringindo nossos estilos a qualquer H1 ou qualquer parágrafo encontrado dentro de qualquer elemento de cabeçalho. Lembre-se, se tivéssemos 10 cabeçalhos diferentes nesta página, todos eles seguiriam essas novas regras, mas quais outras ferramentas estão disponíveis dentro da especificidade? Primeiro, o nível de aninhamento que você começa com é arbitrário. Enquanto temos cabeçalho H1 aqui, ele também pode ser escrito como HTML, corpo, cabeçalho, H1. Tudo nessa página de conteúdo está dentro das tags HTML e body, mas não precisamos fazer isso. É, em grande parte, o mesmo efeito para o nosso CSS atual. É importante saber, porém, que quanto mais específico seu CSS, mais importância é colocada sobre ele. Por exemplo, eu posso definir o tamanho da fonte do nosso H1 acima e, em seguida, substituí-lo completamente aqui com CSS mais específico e agora, não importa como eu alterei a regra menos específica, isso não importa. Não há muitas situações em que especificidade como esta deve ser a sua ferramenta para resolver conflitos de estilo, mas pode ser um ótimo lugar para começar a procurar bugs indesejados. Em seguida, vejamos como classes e IDs se encaixam nesta imagem. Eu os introduzi na ordem do elemento, depois classe, depois ID, por uma razão. Se você escrever um estilo para um elemento de parágrafo, então um estilo diferente para a nossa classe nesse elemento de parágrafo, a classe ganha em importância. Além disso, qualquer estilo anexado a uma ID ganha tanto sobre o elemento quanto sobre a classe. Veja aqui, você pode usar uma combinação de elementos, classes e IDs ao criar uma ordem de especificidade única, como vemos aqui em cima. Nós não vamos abrir esses worms hoje, porém, existem várias metodologias para o que escrever um bom CSS parece, mas hoje estamos apenas mantendo isso simples. Se você quiser brincar com especificidade complicada como parte de suas personalizações, lembre-se disso, elementos individuais são menos importantes e classes que são menos importantes do que IDs. Quanto mais específico seu CSS permitir algo assim, mais importante será considerado. Adicionar mais especificidade a um estilo se algo está confuso ou conflituoso, é a opção nuclear, não deve abusar dele. Finalmente, uma nota em algo que parece especificidade, mas não é. Usar uma vírgula como esta, não é mirar um H3 dentro de um H2 dentro de um H1. vírgulas fazem disso uma lista, dizendo ao CSS que todas as regras escritas devem se aplicar a tudo nessa lista. É uma maneira manual rápida em vez de escrever H1, H2, H3, economiza tempo e espaço e você pode aplicar código uniforme dessa maneira. Agora, nós mal estamos arranhando a superfície de todas as nuances em especificidade, então certifique-se de fazer perguntas e olhar através dos materiais extras fornecidos com o curso para obter uma melhor compreensão deste tópico muito importante daqui para frente. 9. Trabalhando com listas e na navegação: Armado com uma nova compreensão de especificidade, vamos avançar no estilo da navegação da nossa página. Listas são uma forma muito comum e muito poderosa de estruturar a navegação para páginas web e recursos. Dito isto, eles vêm com ainda mais estilos de navegador padrão do que a maioria dos elementos. Precisamos nos certificar de desfazer isso para nossos próprios propósitos. Como antes, vamos começar com um elemento maior contendo e trabalhar nosso caminho para baixo em especificidade aninhada. Estamos prestes a falar sobre o que esse estilo de bloco de exibição realmente significa na próxima seção, mas isso ajuda a definir o cenário para nossas listas agora. Aguente firme por um pouco mais nisso. Vamos chegar a ele, prometo. Queremos que essa navegação seja ampla, mas não toque nas bordas do navegador como está agora. Vamos definir a largura para 98% e seguida, usar o suporte de margens no centro como este. Especificamente, acabamos de dizer ao navegador que nosso elemento nav deve ter margem zero na parte superior, margem automática em ambos os lados e 40 pixels de margem na parte inferior. Finalmente, só por precaução, precisamos dizer explicitamente que não queremos nenhum preenchimento. Os estilos básicos para a lista não ordenada em si são bastante simples. O último estilo que acabamos de escrever para este elemento diz que não queremos marcadores, círculos ou outros ícones de estilo de lista aplicados aos nossos itens de lista. Nós mesmos cuidaremos desse layout. Muito obrigado. Finalmente, vamos adicionar uma série de estilos para os próprios links dentro da lista. Aqui é onde a navegação começará a mudar de uma lista para um layout de site apropriado. 10. Layouts e formatos de exibição: À medida que saímos do reino de texto simples, marcadores e outros detalhes tipográficos, precisamos olhar para outro aspecto do CSS, layout de conteúdo e formatos de exibição. Existem alguns tipos principais de valores de exibição que usamos regularmente. Se olharmos para trás para o nosso CSS já escrito, temos até os dois primeiros. No nosso menu de navegação, definimos os links para exibir o valor chamado bloco. Sem quaisquer outros estilos explícitos, isso significa que esses elementos agora começam naturalmente nas novas linhas escritas e ocupam o máximo de largura que puderem nessa linha. Vamos começar a restringir isso em breve com mais estilos, mas um elemento com seu conjunto de exibição de bloco é muito comum para muitos layouts modernos. Na classe de código, usamos para exibir o valor chamado inline-block. Esta exibição é semelhante ao bloco e como podemos adicionar margens e padrão a ele juntamente com uma cor de fundo. Difere, porém, por não iniciar naturalmente os elementos em uma linha totalmente nova na largura máxima. É ótimo para adicionar estilos e layouts personalizados em meio conteúdo sem quebrar a linha de texto ou os recursos complexos de layout, exatamente onde usamos quando fizemos para nossos trechos de código. Há muitos valores de exibição adicionais que você pode definir manualmente, incluindo tabela, item de lista e muito mais. Muitos deles são o valor padrão com seu respectivo elemento, então você não precisa se preocupar em usar o manual com muita frequência. Pode ser bom estar familiarizado com eles embora apenas por precaução. Na próxima lição, vamos estar olhando para duas das mais recentes opções de exibição e como sua poderosa mudança do jogo quando se trata de layout CSS. 11. Floats vs. Flex (e grade!): Para entender as novas e poderosas ferramentas disponíveis no CSS, é importante saber o que tem sido usado até agora. Na idade escura do CSS, absolutamente tudo estava em tabelas. Imagine visitar seu site moderno favorito e, em seguida, tentar reconstruí-lo em uma planilha do Excel. Não é um pensamento feliz. Bem, as tabelas ainda têm o seu lugar para dados tabulares, informações. Eles não devem ser usados para estruturar o layout geral de uma página. Para deixar esse tempo terrível para trás, começamos a usar algo chamado “carros alegóricos”. O uso pretendido para um valor flutuante em CSS era fazer um layout simples, como ter um grande encapsulamento de parágrafo ao redor do lado de uma imagem relacionada. Pense como um livro didático, para o melhor ou o pior, eles são capazes de fazer muito mais do que isso. Vamos ver o que acontece quando adicionamos float à esquerda aos nossos links de navegação. Para uma única linha de CSS, isso não é ruim. Eles se parecem muito mais com botões e eles se encaixam em uma fileira. O principal problema com carros alegóricos é que, como eles não foram destinados ao planejamento de layout estrutural, há um monte de capturas e pegas que você tem que cobrir toda vez que você usá-los. Veja o que acontece quando redimensionamos nossa janela um pouco. Em vez de cobrir como lidar com todos os pequenos detalhes para usar carros alegóricos de forma semi oficial, vamos seguir em frente e olhar para uma das ferramentas mais recentes disponíveis para nós por enquanto. Se você continuar a aprender em CSS embora, ele pode algum dia ter que trabalhar na manutenção do código de outra pessoa. Aprender os prós e contras dos carros alegóricos será importante. Eles ainda estão em uso generalizado em grandes projetos na internet. Tomar tempo para se familiarizar com os materiais extras do curso irá atendê-lo bem. Agora vamos falar sobre flexbox. Este valor de exibição foi um dos mais poderosos a serem adicionados ao CSS em algum tempo, e é o primeiro passo em uma nova era de métodos de design e layout. É assim que funciona. Você declara flexibilidade de exibição no pai dos itens aninhados que você deseja colocar para fora, como este. Parece com os nossos carros alegóricos. Mas nosso conteúdo mantinha o espaçamento muito melhor, e veja o que acontece quando encolhemos a janela agora? [ inaudível]. Isso é muito melhor. Ainda mais importante, o flex nos dá acesso a algumas ferramentas de layout muito importantes. Para nossa navegação, vamos definir o alinhamento do item, que é centralização de cima para baixo, e justificação do item, que é centralização da esquerda para a direita. Estamos usando o espaço entre para nossa justificação, que é um valor enganosamente poderoso. Ele leva o primeiro e o último link e coloca-os no início e no final do espaço, respectivamente. Em seguida, calcula o espaço em branco restante e o coloca uniformemente entre todos os itens restantes no meio. Tentar recriar isso através de carros alegóricos seria complicado e provavelmente um código bastante frágil para manter. Há muito mais valores para flexbox que eu encorajo você a pesquisar em breve dentro dos materiais extras dos cursos. Estaremos cobrindo alguns usos mais avançados no final da aula. Mas uma compreensão fundamental é inestimável para um designer e desenvolvedor modernos. 12. A energia do CSS: Nós cobrimos muita coisa hoje. Bom trabalho aguentando até agora. Usando o que aprendemos, há surpreendentemente pouco trabalho a fazer para fazer com que a grande maioria do conteúdo ainda na página se encaixe. Usaremos elementos nas aulas para aplicar rapidamente estilos de amplo alcance em nossa página. Se olharmos para index.html, maior parte do nosso conteúdo é embrulhado em seções e artigos, então vamos começar por estilizá-los. A maior parte do CSS deve parecer bastante familiar. Estamos definindo um valor de exibição de bloco, uma largura de 90 por cento para garantir que nossas seções não estejam completamente em toda a página, e temos margem configurada incluindo auto em ambos os lados, para que elas flutuem no centro da página em vez de estar à esquerda ou à direita. Todos os artigos estão olhando muito bom, vamos em frente e lidar com o conteúdo dentro deles. E se nós definirmos esses primeiros parágrafos em cada artigo para que ele realmente pareça um único em comparação com o resto do nosso conteúdo? Lá vamos nós, uma seção inicial para cada artigo de conteúdo. Agora, podemos resolver rapidamente os vários cabeçalhos também. Em vez de simplesmente deixá-los como texto simples, vamos ter um pouco de diversão e realmente estilizá-los. Nós estamos indo para ir para uma guia de pasta tipo de aparência, então é óbvio em uma rápida olhada quais títulos estão conectados a quais seções de conteúdo. Lá vamos nós, isso parece melhor. Vamos dar aos subcabeçalhos h3 um pouco de atenção também. Temos uma última coisa que precisa ser parada. Esse segundo pedaço de texto na parte superior da página, se verificarmos index.html, não é realmente parte de uma tag de parágrafo, está sob extensão. Não admira que nossos estilos não estivessem sendo aplicados. Eu coloquei uma identificação lá, então vamos retocá-la usando isso. Lá vamos nós, parece melhor. Enquanto eu não vou usá-los para esta classe, certifique-se de observar que cada seção de conteúdo tem um ID exclusivo associado a ela. Use isso como uma ferramenta de especificidade enquanto estiver trabalhando em suas próprias personalizações, e você pode fazer com que cada seção pareça totalmente diferente. 13. Pseudo-Classes: Estamos chegando perto do fim. Há um conjunto mais poderoso de ferramentas. Mas quero mostrar uma ação, Pseudo Classes. Há aulas pseudo-suficientes e truques incríveis para preencher dois ou três cursos inteiros. Mas vamos cobrir o básico. Uma pseudo-classe é usado para definir o estado de um elemento. Há duas pseudo-classes que vamos analisar hoje para ajudar a esclarecer essa definição. O primeiro é pairar. Vamos usar a pseudo-classe pairar para dizer aos nossos links de navegação para alterar seus estilos quando detectarem o mouse do usuário pairando sobre eles. Isso significa que o estado padrão dos links é desfocado. Quando, em seguida, muda para passar o mouse, queremos fazer algumas alterações nos estilos. O CSS em si é bastante simples. Tudo o que estamos fazendo é trocar a cor de fundo, ordem e cor da fonte e acabamos com um botão muito legal que interage diretamente com o usuário. A classe pseudo é apenas, dois pontos e, em seguida, o tipo de pseudo-classe, Neste caso, pairar. Agora, a segunda pseudoaula é um pouco menos excitante, mas é muito importante para a apresentação. Esta pseudo-classe é chamada visitada. Um navegador da Web mantém o controle de quais links você visitou antes. Por padrão, os links não visitados são um azul brilhante enquanto os visitados são roxos. Para garantir que nossos botões azuis não tenham, de repente, um tom de cruzamento de olhos de texto roxo, quando nosso usuário começa a clicar, usamos o visitado, assim para garantir que o texto permaneça branco. Lá vamos nós. Agora, quando você está reforçando uma regra como esta com uma pseudo-classe, onde os links já são brancos por padrão, há uma maneira ainda mais rápida de fazê-lo. Em vez de escrever a regra fresca, basta adicioná-la com uma vírgula. Como este. Certifique-se de dar uma olhada extra nos recursos da classe e ver quais outras pseudo-classes você pode rastrear para realmente levar seu projeto para o próximo nível de personalização. 14. Flex Fancy: Para ajudar você a pensar em algumas adições criativas para sua opinião sobre este projeto, eu montei uma demonstração, algumas personalizações divertidas por conta própria. Para manter as coisas simples, você deve adicionar seu CSS personalizado à parte inferior do arquivo styles.css em que estivemos trabalhando assim que você estiver pronto para começar a codificação. Para sua referência, entretanto, adicionei todos os meus novos estilos ao custom.css. Não se preocupe muito com a mecânica de adicionar outra folha CSS. Só saiba que tudo o que escrevi em custom.css é feito para montar os estilos que construímos juntos em styles.css. Isso torna mais fácil para você verificar, e ver qual é a diferença que realmente transformou minha versão personalizada. Dê uma boa olhada no conteúdo e veja o que eu mudei, o layout do cabeçalho, as guias de navegação animadas e muito mais. Veja se você pode escolher pelo menos uma alteração e, em seguida, rastrear como eu fiz isso em custom.css. Uma coisa importante que eu quero mostrar é como eu reordenei completamente o conteúdo na página. A primeira coisa que vemos na minha versão personalizada são recursos adicionais, que é o último conteúdo em um projeto compartilhado, então como eu faria isso sem realmente alterar o HTML? Com o poder da flexbox. Primeiro, defini todo o corpo para exibir flex, o que me permite controlar muito como todas as seções individuais são dispostas. Também é importante notar, eu adicionei uma propriedade flex wrap com valor wrap. Por padrão, o flexbox gostaria de manter tudo em uma linha, e fazer com que esta página tenha uma enorme barra de rolagem horizontal. Flex wrap apenas colinas nosso conteúdo que realmente queria embrulhar, e ficar na página. Em seguida, usei IDs exclusivos em cada seção para dar a ela uma cor de fundo e um valor de pedido. Quaisquer elementos aninhados dentro de uma flexbox, como essas seções no corpo da flexbox, podem ser reorganizados usando esse valor de ordem. Como você pode ver, eu misturei e correspondi o conteúdo em uma nova ordem inteiramente através de CSS. Eu encorajo muito a olhar mais para a flexbox antes de começar seu próprio trabalho personalizado. Se você realmente quer fazer um splash, o dever de casa de crédito extra está verificando algo chamado CSS grid. Ignore quaisquer artigos discutindo sobre flex versus grid. Flex lida com o conteúdo que vai em uma linha. Embora essa fila possa se enrolar como estamos fazendo aqui. A grade abre a porta para layouts complexos com várias linhas e posições, mas geralmente é um exagero para conteúdo simples, como estamos fazendo. Não seja sugado para a armadilha de pensar que é um ou outro. Quando entender como usar cada um em conjunto é a melhor rota para a frente. A classe de grade CSS por Rachel Andrews aqui em compartilhamento de habilidades é um ótimo lugar para começar. 15. Sua volta e conclusão: Há muito mais para aprender sobre todas as ferramentas que o CSS tem para oferecer, mas agora você está equipado com uma compreensão fundamental das regras. É hora de examinar os materiais do curso, guias de referência, ideias de design e muito mais, para ajudar a capacitar seus próprios designs criativos. Se você realmente gostou de trabalhar em CSS e está interessado em mergulhar em mais aplicações e ideias do mundo real, há muitos lugares para começar. Dois fundamentos importantes que posso sugerir pesquisar, são acessibilidade e design responsivo. Acessibilidade é tudo sobre garantir que nenhum dos seus designs divertidos e envolventes tornem acidentalmente mais difícil para os usuários aproveitarem seu conteúdo, enquanto o design responsivo ou o design responsivo móvel, é como planejar e implementar projetos para ficar bem em todos os lugares, desde um telefone até um monitor gigante ou TV. Lembre-se, se o seu projeto ficar tão amarrado em nós que parece irrecuperável, você sempre pode voltar para os links fornecidos e começar uma nova cópia do projeto. Há links para ambos como um primeiro ponto de partida sem CSS, bem como para a versão que todos escrevemos juntos. Não tenha medo de mergulhar fundo e aprender quebrando coisas. Ser capaz de ver seu código em ação e compartilhar o projeto, significa que você pode pedir ajuda de mim ou de qualquer um dos outros alunos. Quando estiver satisfeito com a aparência do seu projeto, certifique-se de exibi-lo. Estou ansioso para ver o que cada um de vocês pode fazer com as lições que abordamos hoje.