CSS: CSS intermediário. Crie sites lindos a partir do zero.

1. CSS 201: CSS. Crie sites bonitos do zero.: Bem-vindo ao CSS em 200 um CSS intermediário. Neste curso, estaremos enfrentando pedaços maiores e mais complicados de CSS. Isso significa que você já deve ter uma compreensão básica de CSS. Neste curso, vamos esticar nossas mentes um pouco mais e olhar para coisas como contorno versus fronteiras. Elementos de compensação foram posicionamento especializado, olhando para seletores avançados, explorando pseudo-seletores, pseudo-elementos, gradientes, transições, animações. Olá, sou o Caleb a contar. Eu ensino mais de 300 mil alunos a codificar em todo o mundo e tenho feito sites há mais de 20 anos. Trabalhei com pessoas como a Arctic Research Foundation, NASA e Mozilla, juntamente com duas empresas de desenvolvimento web de nível superior em todo o mundo. Mais uma vez, meu nome é Caleb dizendo e bem-vindo ao CSS 201. 2. A propriedade exibição: Se você tomou CSS um-para-um, você já deve saber os tipos de exibição 3D, inline, in-line, block e block. Neste vídeo, vamos em frente e demonstrar a diferença entre os três, porque isso é vital para saber para o resto deste curso. Tenho o meu editor aberto aqui. E eu fui ao File Open, e então eu abri uma pasta chamada Less Than files. E eu vou criar um novo arquivo aqui chamado index.html. E aqui, vamos fazer HTML dois pontos cinco, clique tabulação, e ele cria a página dela para nós. E vamos chamar esse documento de trabalho CSS 201. Agora, há três tipos diferentes de exibição aqui. E o que eu vou fazer é criar um div e um microfone realmente criar três divs e mostrar as diferenças entre eles. Então div, esta é a primeira cópia dessa linha. Esta é a segunda cópia dessa linha. E tudo que estou fazendo aqui e VS Code é controlar C, controle V. E parece copiar toda a linha para mim. E então este é o terceiro. Agora vou para o meu navegador e vou para o File Open. E eu vou abrir index.html. E tudo bem, vemos uma página chata, chata, chata. Mas o que podemos fazer aqui é apenas uma demonstração rápida. E mais uma vez, isso é super vital para saber. Então temos três divs aqui. Vamos em frente e criar um novo seletor. Vamos em frente e tudo o que eu fiz lá foi clicar com o botão direito, inspecionar e clicar em um desses dibs. Não importa qual deles e clique neste pequeno botão aqui que diz nova regra de estilo. Vou fazer isto maior também. Clique neste botão. Vai me dar automaticamente um div. E poderíamos mudar o tipo de exibição. Agora não podemos mudar esta porque ela vem padrão com suas sobrancelhas, mas podemos substituí-la e podemos dizer que bloco de exibição é o que ele é atualmente. Vamos dar a isso uma borda, borda um pixel vermelho sólido. E é assim que o bloco de exibição se parece. E isso é em grande contraste para exibir inline, onde todos os elementos estão lado a lado. E então nós podemos fazer bloco inline, que realmente não parece que ele fez muito. Ele está movendo-o para baixo Justiça e apenas um toque lá. E o que o bloco inline nos permite fazer é preencher dez pixels. E poderíamos fazer margem cinco pixels se quiséssemos cinco pixels. Agora podemos fazer uma margem, podemos adicionar uma margem, podemos adicionar um preenchimento com um elemento de bloco também. E podemos ligar e desligar isto se quisermos. Agora, uma coisa a notar é que na linha parece um pouco diferente de inline-block. Então nós podemos fazer inline, inline block e apenas mover isso para cima e para baixo. Só estou a alternar isto com as minhas teclas de seta para cima e para baixo. E então isso é inline, isso é inline-block. E é importante notar essas diferenças porque vamos usar muito bloco inline neste curso. E este é o bloco. Nós também vamos usar isso. Então estes são os três tipos de exibição que vamos começar com neste curso. E é absolutamente vital que você saiba disso porque vamos trabalhar com coisas como flexbox, Flex Box e grid. E esses não são fáceis de envolver nossas cabeças, então precisamos estar bem familiarizados com isso e cobrimos isso no CSS um-para-um. Se você está nesse curso, definitivamente sinta-se livre para voltar para a exibição menos do que o NCSS um-para-um, onde nós cobrimos isso um pouco mais em profundidade. 3. IMPORTANTE: o modelo de caixa: Certo, vamos dar uma olhada no modelo da caixa. Isso é algo que não cobrimos no CSS 101, o que eu realmente queria, mas eu acho que foi um pouco para avançar. Então o modelo de caixa é essa idéia de que você tem uma caixa e você pode ter preenchimento e margem, e depende das regras do seu navegador sobre como calcular a largura desse elemento. Então, se criarmos uma div aqui e isso é chamado de caixa de classe div, e isso é tudo o que vamos fazer. Vou guardar isso. Venha a esta página e eu já pré-abri isso antes de gravar esta lição. Então, se eu for inspecionar, eu vou ver que no meu corpo eu tenho caixa e eu posso adicionar uma classe aqui para caixa de ponto. E vamos adicionar um pouco de estilo. Então borda um pixel, vermelho sólido. Vamos dar a isto uma altura de 300 pixels, uma largura de 300 pixels. E vamos mudar essa borda em vez de um pixel. Vamos fazer uns cinco pixels. E agora quando eu venho aqui, quando eu percorrer todo o caminho para baixo, podemos ver que são 300 por 300. Ok, legal. Agora, se eu quisesse, eu poderia adicionar um preenchimento aqui, e eu poderia dizer preenchimento 30 pixels. E você percebe que quando eu ligar e desligar isso, isso torna minha caixa maior. E isso não é necessariamente o que eu quero porque quando eu adiciono preenchimento de 30 pixels, esta caixa não tem mais 300 pixels. Tem 370 pixels de largura. Ele tem cinco pixels em cada lado para 105 à esquerda, cinco na taxa, 300 pixels no interior e, em seguida, 30 pixels de preenchimento à esquerda e à direita. Então, se somarmos isso, temos cinco, trinta, trezentos e trinta aqui e outros cinco. E se rolarmos para baixo, podemos realmente ver todos esses números aqui. Borda de cinco estofamento 30 dentro de 300. Às vezes é o que queremos, mas na maior parte, não é o que queremos. O que queremos é dizer para fazer a coisa toda 300 pixels de largura ou 300 pixels de altura. E isso inclui o estofamento. Então, por padrão, o modelo de caixa, o que estamos olhando aqui são modelo de caixa aqui não inclui ter preenchimento, não inclui ter margem. Então, o que podemos dizer é o tamanho da caixa e, por padrão, é caixa de conteúdo, mas queremos caixa de borda e você pode ver que ele torna maior ou menor aqui. E estamos alterando o comportamento padrão de um navegador. Normalmente queremos border-box. O que o border-box faz, diz “Adicione essa borda no preenchimento “e certifique-se de que tudo isso junto tem uma largura de 300. E agora, quando eu passar o mouse sobre isso, podemos ver que aquela caixa é um pouco menor. E quando eu rolar para baixo, nenhum desses dígitos realmente mudam. Mas a caixa em si é menor. Diz que a coisa toda é 300 pixels. Essa é a diferença entre border-box e caixa de conteúdo. Agora, o que eu gostaria que você fizesse é dar uma chance a isso. Crie uma caixa de 300 por 300 em sua página. Não precisa ficar bem. Adicione um pouco de preenchimento para ele, e, em seguida, alterar o tamanho da caixa e apenas notar quais as diferenças e isso é realmente, muito importante para nós passar por este curso porque nós vamos estar usando caixa de conteúdo muito. 4. Contornos em fronteira: Ok, vamos dar uma olhada no esboço. Esboço é a fronteira que vai em torno de tudo. Honestamente, é a fronteira ao redor de uma fronteira. Você pode adicionar um contorno e você pode dizer-lhe para ter um deslocamento. Usamos o deslocamento de contorno para dar algum espaço entre o elemento e seu contorno demonstrará isso em apenas um segundo. Mas basicamente delinear é como ter duas fronteiras. E é muito bom para melhorias visuais. Agora, a maioria das vezes termina são realmente super importantes para a acessibilidade. Assim, sempre que você passar o mouse sobre um elemento ou quando você guia sobre, como quando você usa um teclado e aperta tab uma e outra vez em sua página, às vezes um botão terá como um contorno amarelo em torno dele ou um contorno vermelho ou um contorno preto. E não é a fronteira, é apenas este esboço e diz aos leitores de tela e pessoas com deficiência visual, pessoas que não conseguem ver muito bem o que é realmente selecionado. É também para aqueles guerreiros de teclado lá fora que gostam de usar um teclado em vez de um mouse. Isso os ajuda muito e há muitos deles lá fora. Então é muito, muito importante. Então o que eu vou fazer aqui é eu vou salvar isso como um novo arquivo chamado Outline. E o que quero aqui é que ainda tenho esta caixa. E o que eu gostaria de fazer é adicionar um esboço em torno dele. Então, se eu for aqui e isso estiver saindo da última lição, estou usando exatamente o mesmo arquivo. Tudo bem, porque eu estou no editor aqui no Inspetor Will e nossas ferramentas de desenvolvedor. Posso adicionar um esboço. E vamos fazer isso um pouquinho menor. Posso adicionar um esboço. E é muito parecido com uma fronteira. Então eu posso dizer cinco pixels, preto sólido. E você pode ver que ele está realmente do lado de fora de tudo. Se olharmos para o modelo dela, nem aparece aqui. Temos um interior, temos um estofamento, temos uma fronteira. Temos margem do lado de fora, mas na verdade não nos mostra nada sobre o esboço. E então essa é a diferença entre uma borda e um contorno de bordas realmente calculado. Um esboço não é. E você pode ver isso. Ele realmente não faz nossa caixa se mover em todas as idades, literalmente adiciona um contorno em torno dela. Agora, há uma maneira de adicionar um deslocamento. Podemos dizer contorno traço deslocamento, e podemos dar a isso um valor de pixel também. Então vamos dizer que não para, vamos nos dar um deslocamento de dez pixels. E vamos querer adicionar alguma margem aqui. Então vamos fazer a margem 30 pixels. E o que este deslocamento faz é apenas mover esse contorno para fora. Agora, o que eu gostaria que você fizesse para esta lição em particular é criar um elemento e dar-lhe uma borda, em seguida, dar-lhe um esboço. Não importa qual é a sua cor. Você pode apenas dar-lhe algum tipo de esboço. Acabei de fazer algo chato, cinco pixels preto sólido, e depois adicionar um deslocamento a ele para demonstrar que isso pode ser movido para fora. 5. Como adicionar sombras no texto: A sombra tecnológica é muito parecida com uma sombra de caixa. A única diferença realmente aqui é que uma sombra de caixa pode ter como uma sombra interna chamada de inset e o texto não tem. Tudo bem, então o que eu vou começar a fazer aqui é eu vou escrever em CSS interno, não CSS externo, não Inline CS, mas CSS, mas CSS interno. Assim, quando você baixar esses arquivos de projeto, você pode realmente ter acesso a todo esse CSS. Então eu tenho uma caixa aqui, Cuco, cuco. E vamos em frente e adicionar algum texto aqui. E este texto vai dizer olá mundo. E quando eu carrego isso no meu navegador, ele só diz olá mundo. Podemos fazer isso significativamente maior. Podemos mudar o tamanho da fonte se quisermos um pouco mais tarde, o que na verdade talvez façamos também, apenas para que possamos realmente mergulhar no CSS. Então vamos selecionar essa caixa pela nossa turma. E aprendemos sobre esse seletor e CSS 101. E então tudo isso está dizendo é selecionar este elemento por este className nos dá um tamanho de fonte de talvez 40 pixels. Vamos salvar e atualizar. Lá vamos nós. Isso é maior. E agora o que podemos fazer é adicionar uma sombra de texto. Então, sombra de texto. E isso leva um x, um y, um valor de desfoque e a cor. Então vamos em frente e mudar esse valor x. Queremos mover isso para a direita, digamos dez pixels. Em seguida, o valor y também será dez pixels. Isso vai movê-lo para baixo. Um borrão, digamos que não vai borrar nada. Então vai ser uma cópia exata, esboço exato do nosso texto. E a cor aqui vai ser lida apenas algo detestável que podemos realmente ver o que está acontecendo. Agora temos um texto, uma sombra de texto que nos move para baixo dez pixels e o move para a direita dez pixels. E se quiséssemos algo um pouco mais elegante, poderíamos fazer algo como dois pixels. E a propósito, para selecionar isso, tudo que eu fiz foi selecionar meus dez pixels ou agora são dois pixels, mas eu selecionei esses dez pixels. E se você for para Seleção, adicione a próxima ocorrência para mim, comando D, e será diferente para você, provavelmente, eu posso imaginar. Você pode digitar dois lugares ao mesmo tempo, o que é muito, muito útil. Porque um bom atalho para lembrar, pular em frente e salvar isso, atualizar, e isso parece um pouco melhor. Agora, também podemos adicionar um valor de desfoque, esse valor de desfoque atualmente um 0, que é o mesmo que não tê-lo de qualquer forma. Por padrão, não está desfocando. Vamos em frente e adicionar um valor de desfoque de cinco pixels. E tudo isso vai fazer é dizer para cada pixel que está lá atrás, cada pixel vermelho desfocado cinco pixels. E então temos um pouco borrada agradável. Eles realmente parece que isso está saindo da página um pouco. Agora o que podemos fazer é mudar a cor de fundo do corpo. Então sua cor de fundo do corpo vai ser preto. Vai ser da mesma cor que o nosso texto. E vamos em frente e refrescar isso. E agora parece um pouco assustador. Agora eu estou gravando isso em torno do Halloween, então isso é muito , muito bem, isso é aplicável porque isso é meio assustador. Mas não podemos ver mais essa mensagem, o que é muito legal. Nós também poderíamos tentar, em vez de fazer isso, nós poderíamos fazer um RGBA colorido. E realmente não importa que cor preenchemos sua cor. Vamos preenchê-lo com preto, mas vamos também torná-lo completamente transparente com um alfa 0 lá dentro. E agora só temos o texto desfocado. Então isso é sombra de texto seria, eu gostaria que você fizesse é escrever algum texto em sua página. E poderia dizer “olá mundo”. E, em seguida, adicione uma sombra tecnológica, adicione o eixo X, o eixo y ou a horizontal no alinhamento vertical em um desfoque e, em seguida, adicione uma cor. Você não precisa fazer o RGBA, nós aprendemos sobre isso e CSS 101 também. Então, se você precisa voltar para CSS um-para-um final, rapidamente aprendeu o que é RGB. Mas realmente é apenas um modo de cor está dizendo vermelho, verde, azul, alfa, alfa é a sua transparência. Então nós dissemos 000, isso é preto e torná-lo completamente transparente. 6. Foro uma largura mínima em um elemento: Certo, então esta é a largura mínima. Vamos falar sobre o que está agora no CSS 101, aprendemos sobre largura máxima, aprendemos sobre largura regular. Se você não sabe sobre largura máxima, honestamente, é exatamente o mesmo que largura mínima. No entanto, é o oposto. Então é o mesmo, mas diferente. Agora, largura máxima diz a, um elemento só pode ter uma largura máxima. E ele vai tentar ir do menor tamanho para a largura máxima antes de quebrar seu texto em uma nova linha, largura mínima é tipo do mesmo, mas oposto. Então eu posso selecionar esta caixa aqui, e eu posso dar a isso uma borda para pixels azul sólido. E vamos entrar aqui e jogar um pouco de lorem ipsum no seu braço. E então VS Code, eu apenas apertei tabulação. E isso é porque eu tenho o modelo django selecionado aqui. Este deve ser um HTML. Vamos desfazer isso. Abaixe-os. Guia. Lá vamos nós. E quando eu carrego esta página, podemos ver todo esse texto e isso é realmente uma espécie de mau exemplo. Vou apagar tudo, exceto esta linha, para que tenhamos essa largura aqui. Vamos apagar tudo isso. Salvar e atualizar. Ok, então agora isso não vai realmente fazer nada porque este é um elemento de bloco. E lembre-se que a primeira lição que eu disse bloco elementos exibição é muito, muito importante. Vamos em frente e aparar isso. Queremos fazer-nos não ocupar toda a largura. Então, podemos dizer display bloco inline, e isso nos permitirá usar o elemento de largura com ele. No entanto, também vai ocupar uma largura mínima aqui, o que é realmente bom. Então este elemento aqui tem 365 pixels de largura. Então queremos uma largura mínima de algo um pouco maior. Vamos dar a isso uma largura mínima. E digamos que a largura mínima tem que ser 450 pixels. E então o que isso vai fazer é meio que mover isso para algum lugar por aqui. Eu vou muito bom jogo. Sim, foi um bom palpite. Então vai movê-lo para cá. E se eu escrever mais texto, ele vai expandir. E podemos realmente ver isso entrando aqui. E vou copiar esta linha algumas vezes. E você pode ver que ela se expandiu todo o caminho. Então tem essa largura mínima. E tudo o que estou fazendo aqui é desfazer e refazer. Mas tem essa largura mínima, então não importa se há espaço extra ou não, vai ocupar essa largura mínima. E então uma vez que tem mais conteúdo, possivelmente muito conteúdo. O que vai fazer é então mover isso para ser uma largura de 100%. Agora nós podemos, nós podemos casar isso com largura máxima também. Podemos dizer que a largura máxima só pode estar em algum lugar por aqui. Então vamos em frente e combinar estes. Podemos dizer uma largura máxima de, digamos 500 pixels. Refresque. Parece que nada mudou. Mas o que isso vai fazer é dizer em algum lugar aqui provavelmente é a largura máxima. Então, antes que essa borda azul estivesse ocupando essa largura do pneu, este não mais bem, então eu vou clicar duas vezes aqui e colar isso algumas vezes. E podemos ver que isso só ocupa, até aqui agora. E nossos elementos de caixa, se descermos aqui, 450 pixels de largura, é o que é por padrão. Aqui em cima são 508 pixels e isso é porque está ocupando quatro pixels de cada lado. Então 500 pixels no interior, 400 pixels, quatro pixels em cada lado. E podemos mudar o tamanho da caixa. E vamos fazer border-box. E você pode realmente ver que está fazendo aquela pequena diferença de oito pixels border-box. E se voltarmos aqui, podemos ver que todo o elemento é de 500 pixels. Então agora já estamos usando o material de exibição que aprendemos com nossa lição de exibição. Também estamos aprendendo e usando o dimensionamento da caixa a partir da lição de dimensionamento da caixa ou do modelo da caixa. Então esta é a largura mínima. A idéia novamente aqui é apenas que ele vai ser uma largura mínima. E se você tiver mais conteúdo, ele pode crescer para ser maior. 7. Introdução às posições CSS: Posicionamento é como movemos elementos em torno de uma página. Existem algumas maneiras de fazer isso. Podemos fazer posições absolutas. Podemos escrever uma posição relativa, uma posição fixa ou posição pegajosa. Há também outro chamado estático, que tudo é por padrão. Mas a idéia é que se você quiser fazer um site perfeito de pixel, algo que realmente combina com o design, às vezes você vai ter que mover elementos ao redor. E nas próximas lições vamos falar sobre posicionamento relativo, posicionamento absoluto, posicionamento fixo e posicionamento pegajoso. E isso é o que vai fazer o seu site começar e pesquisar realmente agir mais como um aplicativo, especialmente quando se trata de posicionamento pegajoso. Mas também vai ajudar você a mover as coisas para que possamos criar novos componentes dinâmicos que podem ser colocados em camadas uns sobre os outros. 8. Posicionamento relativo: Posicionamento relativo é a idéia de pegar um elemento e movê-lo de um lugar onde ele naturalmente fica em sua página para outro lugar. Apenas um pouco fora para que ele leva a sua posição onde você está sentado ou parado agora. E é como mover você um centímetro para a esquerda ou um centímetro para a direita. Então eu tenho um novo documento aqui para posicionamento relativo. E o que queremos fazer é criar uma caixa e, em seguida, apenas uma espécie de movê-la um pouco. Então vamos em frente e pegar aquela aula de caixa. Vamos dar-lhe uma largura. 300 pixels, altura, 300 pixels, borda dez pixels, preto sólido. E quando eu abro isso no navegador, é apenas uma caixa normal. Já vimos isso algumas vezes ao longo deste curso. Então o que eu quero fazer aqui agora é eu posso dizer posição. E há um monte deles aqui. Mas vamos para a posição relativa e parece que nada mudou. E isso está certo, nada deveria ter mudado. Mas agora podemos usar o topo, esquerda, a direita ou a parte inferior. Os seletores não são seletores, mas propriedades. Então podemos dizer mova isso do topo, movendo-se para baixo. Vamos mover isto para baixo em dez pixels. Ok, então isso não foi muito suave, é baixo 30 pixels. E vamos mover isso para a esquerda ou para a esquerda, 30 pixels também. E quando ativamos e desativamos estes, podemos realmente ver que isso está de fato se movendo. Está movendo todo o elemento para nós. E então, novamente, o que o posicionamento relativo faz é que ele diz, ok, então este é o lugar onde seu elemento fica por padrão em sua página. Mas vamos mudar nossa posição para relativa. Então, em relação ao local onde geralmente se define cistos, do topo, mova-o para baixo 30 pixels da esquerda, mova-o para a direita, 30 pixels. Então, digamos que em vez de cima, podemos dizer inferior. E vocês podem ver que isso realmente o moveu para fora da minha janela de exibição. Viewport sendo esta grande seção branca aqui. E podemos ativá-lo e desligá-lo também. E em vez de esquerda, podemos dizer direita. E isso faz exatamente o oposto. E vamos ativá-los e desativá-los também. E então isso é um posicionamento relativo. Agora, onde isso vem realmente, muito útil é quando você tem que mover algo um pouco fora de onde ele se define naturalmente. Talvez você já esteja usando seu preenchimento, você já está usando sua margem. Você está usando preenchimento negativo ou margem negativa. E você precisa meio que afastar isso um pouco só para torná-lo perfeito. Este é o lugar onde o posicionamento relativo realmente entra em jogo. Agora, o posicionamento relativo tem outro tipo de superpoder. E isso é quando se trata de elementos filhos que usam posição absoluta, quais vamos falar a seguir. 9. Posicionamento absoluto: Posicionamento absoluto nos permite mover um elemento com base em seu elemento pai. Mas o truque aqui é que o elemento pai tem que ser posicionado em relação. Então, assumindo a última lição, o que eu tenho aqui é apenas uma caixa normal. E se eu voltar para o meu editor aqui, vamos em frente e mudar sua posição para não absoluta, mas relativa. E essa é essa caixa aqui. E vamos arranjar espaço para trabalhar. E isso realmente não faz nada desde a última lição. Agora, onde isso fica poderoso, onde o posicionamento absoluto entra é digamos que eu tenha uma segunda caixa. Então vamos fazer a segunda caixa de traço. E esta é uma abreviatura de Emmett. Então, se você está apenas se juntando a este curso agora você não tomou CSS 101 ou HTML um-para-um ou HTML2 01, onde eu falo sobre eles em abreviaturas. Tudo o que eu estou fazendo aqui é escrever um pouco de CSS e assim que você vê este M ele abreviatura, você pode clicar tab e ele cria uma div para você por padrão com uma classe de segunda caixa, assim como escrever CSS e então você apenas aperta tab. E digamos que isso precisa estar na taxa máxima. Então vamos voltar para a nossa página aqui e atualizar. E isso só diz superior à direita. Agora podemos adicionar um pouco de estilo a isso, e digamos que ele precisa ser uma caixa no quadrante superior direito. O que podemos fazer é agora selecionar esta caixa e podemos dizer segunda caixa, posição, absoluto. Vamos também dar-nos uma fronteira. Borda de três pixels, azul sólido, só para sabermos onde estamos trabalhando. E o que fazemos? Posição absoluta literalmente nada muda. Acabou de adicionar uma fronteira por aqui. Vou ampliar ainda mais aqui. Agora o que eu gostaria de fazer é que isso se mova para este quadrante superior direito como se eu estivesse fazendo um gráfico com um eixo x e y e ele tem um x negativo e um eixo y negativo. O que posso fazer é porque esta é a posição absoluta. Agora eu posso dizer, vamos colocar isso no topo. E isso vai dizer 0. Ele já está lá por padrão. Mas no caso de você ser elemento não é o que isso vai fazer é mover isso para o topo da página. E como exemplo, vamos fazer o fundo. Então os zeros inferiores vão dizer que a posição absoluta em torno deste elemento relativo vai ficar no fundo. E então poderíamos dizer certo, 0. E agora isso move-o para o canto inferior direito. Agora, para nos movermos como backup, tudo o que temos que fazer é mudar isso de baixo para cima. E então nós definimos posição absoluta topo é 0, certo? 0. E tudo isso vai fazer é mover isso para o canto superior direito. Era isso que queríamos, mas queríamos ocupar este quadrante completo aqui. Então o que podemos fazer é dizer uma largura de 50%. E vamos tentar uma altura de 50%. E agora temos uma caixa no quadrante superior direito. E é isso que a posição absoluta nos permite fazer. Permite-nos fazer algo assim. Agora, este é um exemplo meio feio, mas se quiséssemos, poderíamos dar a isso um fundo de preto. E vamos em frente e nos livrar dessa fronteira. E agora parece que esculpimos um pedaço disto. Agora, se quisermos ficar ainda mais chique, muitas vezes não vão estar trabalhando com fronteiras o tempo todo. Então vamos em frente e nos livrar dessa borda preta em nosso elemento pai para a caixa, o elemento relativo. Vamos em frente e nos livrar disso. E agora nós movemos esta caixa para algum lugar onde ela não vive naturalmente. Então há essa caixa de 300 por 300. Você pode vê-lo aqui. E nós dissemos fora que 300 por 300 caixa tomar 50% da largura, 50% da altura para um 150 por 150, movê-lo para o canto superior direito. Agora eu só vou desfazer isso rapidamente e eu vou mostrar a vocês o que acontece quando eu tomar posição relativa longe do elemento pai. Então eu estou trabalhando na caixa aqui. E se eu me livrar da posição relativa, ele vai direto para a página inteira. Ele ocupa 50% da largura da página e ocupa 50% da altura das páginas ou da janela de visualização, na verdade não a página inteira, mas apenas a porta de visualização aqui, que poderia muito bem ser a mesma coisa dependendo da sua página. Então, sim, se você quiser que um elemento tipo de ser absolutamente posicionado, você tem que se certificar de que seu elemento pai está usando posição relativa. Não, não está fazendo nenhum mal. Você vai notar que quando eu ligar e desligar isso, aquela caixa à esquerda aqui não muda nada. Ele só muda o comportamento de seus elementos filhos. E este é um conceito muito importante para se entender em CSS. Porque quando chegarmos ao fim deste curso, vamos trabalhar com muitos elementos infantis. 10. Posicionamento fixo (como cabeçalhos: Vamos dar uma olhada no posicionamento fixo e fixo. Isso é difícil de dizer com um microfone,posicionamento fixo, posicionamento fixo varas de posicionamento fixo e elementos para uma determinada parte da sua janela de exibição. E ele permite que você deslize para baixo a página enquanto a página se move para baixo. Na verdade, foi um péssimo exemplo. Você sabe, quando você está em um site e há um cabeçalho e Scott gosta de navegação e um logotipo e outras coisas. E enquanto você desliza para baixo na página, ele desliza para baixo da página com você. Este é um posicionamento fixo. Agora eu apenas redefinir minha página, tenho um estilo e uma caixa. Vamos selecionar esta caixa e adicionar um pouco de estilo. Então esta caixa, digamos que vai ter uma borda, um pixel vermelho sólido. E uma cor de fundo de, vamos fazer isso parecer um pouco mais elegante. F5, E5.5. E não vamos fazer borda um pixel vermelho sólido. Vamos ao fundo da fronteira. Dois pixels, sólido, CCC. E você pode ver essas cores aparecendo aqui. Então é uma extremidade esbranquiçada, um cinza claro. E vamos mudar isso agora. Ok, não há conteúdo lá, mas vamos adicionar algum conteúdo. Digamos que isto é um cabeçalho. E tudo bem, e isso é zoom que na direção oposta que eu estou indo. E tudo bem, isso não parece ótimo. Vamos realmente limpar isso um pouco. Vamos nos livrar da margem do corpo. Vamos fazer isto. Corpo. Há um estofamento que nunca me lembro. Vamos fazer a margem 0. Vamos redefinir isso e preencher 0. Então esses cantos deste cabeçalho realmente tocar os lados, perfeito. E nesse cabeçalho, vamos em frente e dar a isso um preenchimento de 40 pixels. Não, isso é muito desagradável para esta demonstração. Veja 20 pixels. Ok, isso não está parecendo muito ruim. Podemos viver com isso. Agora. Digamos que queremos rolar para baixo a página agora eu não tenho conteúdo suficiente para rolar para baixo a página aqui. Mas o que posso fazer é dizer que o corpo precisa ter uma altura mínima ou uma altura fixa de, digamos, 3 mil pixels. E tudo isso vai fazer é me deixar rolar todo o caminho para baixo como se eu tivesse mais conteúdo. Agora, e se eu quisesse rolar para baixo e quiséssemos que isso ficasse comigo? Podemos fazer isso. E sempre dizer que aqui é a posição fixa? Agora isso pode ser um pouco Jackie, dependendo do navegador que você está usando, dependendo da versão do navegador que você está usando. E você pode realmente ver que é um pouco jackie, Isto é uma espécie de elemento inline e elemento de bloco inline e ele não ocupou toda a largura. Bem, precisamos fazer é definir um valor, superior, direita, inferior ou esquerda. E o que podemos fazer é dizer, colocar isso no topo da página, fazer com que fique à esquerda da página como está atualmente. Mas também dar a este uma largura de um 100% da página. E eu vou mover isso um pouco para cima. E lá vamos nós. Agora eu estou rolando para baixo a página e você pode realmente ver minha barra lateral aqui enquanto eu rolar ele ficar pegajoso. Este é um péssimo exemplo. Um exemplo melhor seria se eu tivesse um parágrafo aqui e eu jogasse algum Lorem. E eu apenas copiei isso mais e mais e mais e mais e mais e mais e mais e mais e mais uma e outra vez. E então nós vamos ser capazes de ver que esta página pode realmente rolar. Então eu guardo essa atualização. E no topo da minha página, eu tenho meu lorem ipsum, mas enquanto eu rolar para baixo, ele agora fica comigo. Este é um posicionamento fixo. Isso faz com que seja uma espécie de pegajoso para o topo da página. Agora, posicionamento pegajoso é um tipo diferente de posicionamento. Nós vamos conversar, nós vamos lidar com isso em seguida. No entanto, o posicionamento fixo é muito, muito bom, porque ele vai para camada em cima de toda a sua página. Então você sabe, quando você está em um site e ele tem aquela coisinha irritante no canto inferior direito. E é como mensagens de apoio ou o que quer que seja. E está online. 50% de todos os sites hoje em dia, é meio irritante Para ser honesto, mas ele fica com você não importa onde você está na página e camadas em cima de tudo. Isso é o que a posição fixa faz para você. Sabe, o que eu gostaria que você fizesse é dar uma chance a isso. Criar um cabeçalho fixo, como o que eu tenho. Jogue um monte de conteúdo aqui. Você vai precisar de suficiente para que sua página possa realmente rolar e, em seguida, rolar para baixo sua página e certifique-se de que ela apenas camadas em cima de tudo. 11. Posicionamento Sticky (como cabeços modernos): posicionamento pegajoso é relativamente novo para o CSS. Ele nos permite ter um cabeçalho para ficar com seu elemento pai. Então, na última lição, nós olhamos para o posicionamento fixo, onde ele foi fixado para toda a página, toda a sua janela de exibição, na verdade. E nós acabamos de fazer um cabeçalho que rolou todo o caminho até a página com a gente. E parecia muito com isso. Na verdade, parecia exatamente assim porque foi isso que escrevemos. Agora pegajoso pode fazer essencialmente a mesma coisa, tão fixo. E podemos dizer que isso é pegajoso. E você pode ver como eu rolar para cima e para baixo a página, ele fica comigo também. No entanto, a diferença entre pegajoso e fixo é fixo vai estar aqui não importa o que. E mesmo se eu rolar para baixo a página onde não há conteúdo extra, ele vai ficar lá. Enquanto que com pegajoso, ele vai ser pegajoso para o seu elemento pai. Então vamos em frente e criar um exemplo aqui. Nós temos essa caixa, e vamos selecionar essa caixa. E vamos fazer exibição pegajosa. Ok, então eu acabei de escrever um monte de coisas aqui da última lição. Eu dou ao corpo uma margem de 0, preenchimento de 0, altura padrão de 3 mil. Na verdade, também não precisamos disso. E a caixa é posicionada cor de fundo pegajosa é a mesma que a última lição. Parte inferior da borda como um pouco de preenchimento. Vamos em frente e nos livrar dessa. E quando eu atualizar a página, nós só temos este bar aqui. Agora vamos em frente e jogar isso dentro de um elemento pai. Então temos esta caixa e podemos ter um parágrafo com pouca RAM em sua cópia colar, colar, colar, colar, colar. E se eu ampliar isso, vamos ver que não é mais pegajoso. E então sim, não é pegajoso, mas podemos fazer o pegajoso. Isso realmente requer outra propriedade aqui. Então, porque é posição pegajosa, ele também precisa ter superior direito, inferior esquerdo, geralmente é apenas superior. Temos uma propriedade de topo aqui, vamos dizer 0. E isso só diz onde ser pegajoso, caso contrário, não sabe. E agora, quando eu rolar a página para baixo, ela permanece pegajosa. Agora, essa é a parte um de dois. A segunda parte é torná-lo pegajoso apenas para esta seção em particular onde há todas essas coisas aqui. Então vamos em frente e adicionar um estilo em seu estilo para ter uma cor de fundo de vermelho e uma cor de branco. Atualize uma página. E nós vamos ver, oh, eu esqueci de fazer isso pegajoso adicionando top 0. Então, fique no topo. Lá vamos nós. Então agora está pegajoso. Vamos adicionar outra seção abaixo deste azul e isso mudar esse cabeçalho também. Então vamos em frente e basicamente copiar essa coisa toda. E eu só desmoronei isso com uma pequena flecha aqui. E vamos para baixo. E este vai ser cor de fundo de azul. E a mudança do que está aqui. Digamos que a seção dois da nossa caixa. Agora estamos usando, estamos reutilizando CSS. E no topo aqui, vamos fazer a seção um. Certo, vamos voltar para o topo da página. Refresque. Oh, nós não podemos ver essa cor muito bem. Cores iguais a preto. Isso é melhor. Então esta é a seção um, e enquanto eu rolar para baixo, ela vai ficar lá. E a seção dois é expulsa do caminho. E, em seguida, a Seção dois. E quando eu rolar para cima, a seção um volta ao jogo. Eu realmente gosto dessa parte. Isso é muito bom. Isso costumava ser muito difícil para nós fazer, mas vem padrão com CSS3 nos dias de hoje, que é muito, muito bom. Então é isso que pegajoso está agora em resumo, você precisa de posição pegajosa, você precisa de um valor superior. Então temos um valor superior de 0. E tudo o que fizemos aqui foi ter um elemento pai. Eu tenho alguns na linha CSS aqui. Não é a melhor maneira de fazer as coisas, mas realmente levou todo o exemplo para casa. Então, temos um contêiner dos pais aqui. E, em seguida, dentro dele, temos posição pegajosa. E ele vai ser pegajoso em torno de todo esse conteúdo porque ele é pegajoso para seu elemento pai. Agora, o que eu gostaria que vocês fizessem é dar uma chance, porque isso é realmente importante para fazer os sites parecerem e agirem muito bem em dispositivos móveis, que faz parte do desenvolvimento web responsivo. E isso faz parte do CSS mais avançado. Então, conhecer a posição pegajosa vai ser muito, muito útil para você. Então, por favor, dê uma chance se você ficar preso, não se esqueça, você sempre pode fazer perguntas e aprender a codificar grupo Facebook. 12. Controlando um texto de overflowing: Overflow é quando você pode construir a largura e a altura de um elemento. Mas então você meio que corre o risco de seu conteúdo ou um lago transbordar para o lado de fora dele. Nesta lição, vou fornecer um exemplo e como você pode criar como uma barra de rolagem dentro de suas caixas. Agora temos algumas opções diferentes. Podemos escolher esconder o transbordamento. Podemos deixar os usuários rolar para a esquerda e para a direita, cima e para baixo ou apenas para cima e para baixo. Na maioria das vezes, não queremos que o usuário role dentro de uma caixa para cima e para baixo. Então vamos em frente e adicionar algum conteúdo a esta caixa. Agora eu só tenho essa caixa regular que temos trabalhado com isso durante todo o resto deste curso estão até que esta parte do curso de qualquer maneira, isto é, que é algum lorem ipsum aqui. E vamos adicionar outra linha e outra linha. E vamos fazer isto muito longo. E a ideia aqui é que esta caixa deve ter 300 pixels de largura por 300 pixels de altura. E isso vai ser mais conteúdo do que essa caixa pode conter. Então, se eu atualizar esta página e ampliar, woo, na verdade não é o suficiente. Vamos continuar e copiar isso mais algumas vezes. Aqui vamos nós. E a idéia aqui é se eu diminuir o zoom, nós temos essa caixa e o conteúdo da arte está saindo dela. Agora a razão por que isso acontece é porque nós definimos uma largura e uma altura. Nós dissemos especificamente com este, a altura desta caixa é de 300 pixels e precisa ser de 300 pixels, porque talvez seja isso que nossos designers set ou designer disseram. Tem que ser 300 pixels, não pode ser maior. Não é permitido crescer, senão vai parecer um pouco estranho. Então o que podemos fazer é adicionar esta pequena barra de rolagem para o lado direito aqui. E nós fazemos isso muito facilmente. Então, na nossa classe de caixa, tudo o que temos a fazer é dizer “transbordamento”. E vamos mudar isso para um documento HTML. Novamente, eu li um monte de Django, então meus arquivos HTML automaticamente padrão para um template Django. padrão deve automaticamente para HTML por padrão, assim que você tiver a extensão HTML ponto em seu nome de arquivo. Então overflow, temos algumas opções diferentes aqui. E isso é realmente ótimo. Eu vou jogar fez foi mover meu mouse lá e ele diz sintaxe, visível, clipe oculto, rolar auto. Vamos fazer, vamos fazer escondido primeiro. Então, se quiséssemos ocultar esse conteúdo, oculto esconderá esse conteúdo extra. Na verdade, há mais conteúdo aqui em baixo. E nós podemos realmente ver quando eu passar o mouse sobre este texto, que este texto ocupa toda a seção, mas está sendo oculto. Também podemos dizer visível. E isso é apenas o padrão. Foi o que vimos originalmente. E então podemos fazer auto. E este é o que você vai querer mais frequentemente do que não é rolar para trás aqui, virar para trás seu overflow auto. E quando eu atualizo, ele me permite rolar para cima e para baixo assim. Agora isso vai ser muito importante se você estiver criando uma área Lake, uma lista de recursos do produto. Você não quer que ele ocupe toda a página e faça seu usuário rolar para sempre. E eles podem escolher em um dispositivo móvel apenas rolar dentro dessa caixa. Ou se você tiver uma seção de perguntas freqüentes, a mesma coisa. Você não quer ocupar toda a página. Se há umas 100 perguntas, você pode querer que ele ocupe 300 pixels e eles podem percorrer as respostas aqui. Então isso está transbordando. Vá em frente e dê uma chance. Lembre-se que você precisa definir uma altura I, você precisa ter mais conteúdo do que o que seus elementos podem atualmente segurar com essa altura e, em seguida, definir o estouro para auto. E isso só vai te dar esse pequeno bar assim. 13. Centrando elementos de bloqueio no centro da página: Para horizontalmente o centro de um elemento. Precisamos usar os elementos de bloco para que eles possam reservar toda a largura de seu tipo de seção. E tenta reservar como toda a largura. Acho que vou demonstrar isso em um segundo. E então podemos usar margin-left auto, margin-right auto. E então tudo o que eu tenho aqui é um bloco, e eu não quero que este seja bloco inline, eu quero que este seja bloco, que é o padrão. Então eu não preciso disso para um div. E então eu tenho quatro pixels, azul sólido, minWidth e largura máxima. Vamos mudar isso para uma largura e uma altura. Copiei o arquivo errado. E está tudo bem. É fácil mudar. Assim, com 400 pixels e uma altura de 400 pixels. E quando eu abro isso neste elemento ou nesta página no meu navegador, podemos ver que eu tenho essa caixa agora vamos dizer que eu queria que ela estivesse bem no centro. O que posso fazer é dizer aqui em baixo, e vou tornar isto um pouco maior. Margem esquerda auto. E isso vai aplicar automaticamente toda a margem novamente. Então nós realmente movemos para a direita. Isso é meio legal. Mas se quiséssemos que fosse no centro, fazemos margem, certo? Automático. E isso o equilibra em ambos os lados. E um atalho que você vai me ver fazer é algo como margem. Digamos que o topo vai ser 50 pixels e esquerda e direita vão ser auto. Esta é a parte superior, esta é a direita, esta é a parte inferior. Isto é deixado. E assim podemos desativá-los porque eles não estão sendo usados de qualquer forma. E agora temos margem ao redor e nosso elemento está centrado. Agora, por que isso é importante? Porque eventualmente você vai precisar ser capaz de centralizar um elemento baseado em sua margem, não apenas no texto, você quer centralizá-lo com base em sua margem. Então está sempre centrado. Agora é neste ponto que você provavelmente está se perguntando, uau, OK, isso é legal. Estamos fazendo todas essas coisas, mas não parece muito legal. E o problema com o aprendizado de CSS, como você precisa aprender esses componentes menores, essas pequenas dicas e truques. Antes que possamos realmente começar a fazer algo realmente bonito, precisamos saber como todos esses pequenos componentes funcionam juntos. E assim é assim que centramos algo no centro da nossa página. E vamos apenas fazer, fazer, fazer, fazer. Lá vamos nós. Está no centro da nossa página usando margens. Vá em frente e dê uma chance quando estiver pronto. Vamos para a próxima lição. 14. Selector avançado de CSS: Certo, vamos dar uma olhada nos seletores avançados. Temos alguns seletores diferentes com os quais podemos trabalhar. Nós realmente há uma tonelada de seletores em CSS, mas nós vamos estar trabalhando com seletores descendentes, seletores filhos em seletores Jason e seletores irmãos em geral. Então vamos em frente e criar um monte de caixas aqui. E eu vou colocar isso em um pai com uma identidade chamada pai. E vamos apenas mover isso para cima. E vamos criar todas essas caixas. E vamos estilizar essas caixas também. Então nós temos a caixa de pontos e vamos dar a isso uma altura de 20 pixels e uma borda de um pixel, azul sólido. Isso só vai criar um monte desses empilhados um em cima do outro. E isso é o que vemos em nossa página. Esta não é a coisa mais agradável de sempre, mas esta é uma lição de seletor. Não precisamos que pareça bem. Nós não precisamos que ele faça muito além de selecionar o que queremos que ele selecione atualmente. Então o que poderíamos fazer é como um seletor descendente geral, nós apenas usamos um espaço e nós aprendemos sobre isso e CSS 101. Então poderíamos dizer pai, essa é a identificação do pai e vai coincidir com isso. E depois todas as crianças da caixa aqui. E fazemos isso com um espaço. E então quando eu salvar isso, voltar aqui e eu atualizar, nós íamos ver que nada muda e isso é esperado. Mas tudo o que estamos a dizer é que se houvesse uma caixa fora disto e é devido a esta caixa, esta não é uma caixa com borda azul. Podemos ver que esta caixa, mesmo se clicarmos com o botão direito do mouse e inspecionarmos, tem a classe de caixa, mas não está sendo estilizada. E então isso é um seletor descendente. Da mesma forma, também podemos fazer apenas seletores de crianças. Então, em vez de explicitamente, explicitamente dizendo seletor descendente, podemos dizer que o dielétrico da criança usa o sinal maior que. Então este é o seu pai, o seu seletor de filhos, e este é o seu filho. E na verdade, podemos realmente ver que quando vamos aqui em VS Code, ele usa o mesmo símbolo aqui. Então temos div dot box, essa é a nossa classe e o nosso elemento. E então temos aquele sinal de maior que que vai para os nossos pais. E isso vai fazer exatamente a mesma coisa que um seletor descendente. E quando eu me atualizo, você vê que nada muda. Agora podemos fazer essa coisa onde selecionamos seletores adjacentes. Então, agora podemos dizer pai. E então eu quero selecionar todas as caixas mais caixas. E podemos dizer que a cor de fundo é igual a vermelho. E então este aqui é o nosso seletor adjacente. E ele vai apenas selecionar elementos que são, eu acho que adjacentes a ele. E assim ele não seleciona aquele primeiro, mas seleciona o próximo e o próximo, e o próximo, o próximo todo o caminho para baixo. E então isso é um adjacente para selecionar ou não está indo exatamente como o primeiro, ele vai selecionar os próximos. E então temos este seletor de irmãos geral. Então, podemos selecionar tudo em nosso pai, selecionar nossas caixas, e então temos esse til. E assim no meu teclado, ele está bem ao lado do número um no canto superior esquerdo do meu teclado. Pode ser diferente dependendo se você tiver um teclado internacional. Mas um teclado inglês genérico está ao lado do número um e é este til. É o meu convidado que é um tilde. Lembro-me de que é uma linha rabiscada de qualquer maneira. E então podemos dizer “caixa de pontos”. E vamos mudar a cor de fundo desta cor de fundo. Mas note não anexo de fundo, cor de fundo para preto. E isso não vai funcionar porque eu soletrei pai para ser Perrin, salvar, atualizar, e ele seleciona todos os semelhantes. E a idéia aqui é que na minha ferramenta de inspeção, em nossas ferramentas de desenvolvedor, ele vai selecionar a primeira. E então ele diz, oh, na verdade mais todos os outros na estrada. Então são duas maneiras diferentes de fazer a mesma coisa. Agora, o que eu gostaria que você fizesse é ir em frente e dar uma chance a isso. Uma coisa que você vai querer ter cuidado é que eu estou selecionando o pai do que a caixa filho para estilizar todos estes com um elemento azul. Ele notou que esta caixa aqui em baixo não está a ser seleccionada de forma alguma. Mas eu também posso fazer é ir em frente e me livrar dos pais. E quando eu atualizo, você pode ver que minha caixa azul ou minha caixa não delimitada agora tem uma borda azul, mas não tem nenhum fundo preto. Ou se eu comentar isso, há agora ler. Então, vou desfazer isso. Mas uma coisa a ser cuidadosa é essa coisa chamada especificidade. Então, se você está dizendo selecione o ID pai e, em seguida, selecione os elementos filho aqui, chamada caixa, e dar-lhe uma altura de 20 pixels e uma borda de um pixel, azul sólido. Em seguida, seu próximo seletor para selecionar exatamente essas mesmas caixas precisa ser exatamente este específico. Caso contrário, veja isso. E este é um curso intensivo sobre especificidade e como ele pode ser um pesadelo no CSS. Então esse fundo agora é preto. Mas se eu for em frente e me livrar disso, ele irá efetivamente ignorar isso porque isso é mais específico. Atualize a página. Ele ignorou o fundo preto e foi com os específicos para que ele corresponde dizendo selecionar o ID pai, em seguida, as classes de caixa, ID pai, classes de caixa, não há idéia pai apenas dizendo qualquer caixa com outra caixa ao lado dele. Então vá em frente e dê uma chance, brinque com isso. Sinta-se livre para experimentar com especificidade também. Se você ficar um pouco perdido com especificidade, honestamente, você não precisa saber agora, mas se você é um pouco mais interessado e você realmente quer saber sobre especificidade, você sempre pode ir e Google isso um pouco também. Isso poderia ser algum dever de casa adicional se você realmente está sentindo que você quer aprender CSS em um 150% 15. Introdução a pseudo: Pseudo-classes são uma maneira de ligar estados. Podemos controlar o estilo CSS quando você passar o mouse sobre um elemento. Aprendemos sobre isso no CSS um-para-um. E isso é um pseudo seletor ou pseudo-classe, eu acredito que é realmente chamado. Mas com outros pseudo seletores. E também podemos selecionar elementos que não devem ter uma determinada classe. Ou podemos até mesmo selecionar o elemento exato em uma página usando o seletor enésimo filho. Então, na próxima lição, vamos dar uma olhada na primeira criança e no seletor não. 16. Seletor de SEudo: começando: Pseudo-seletores. Vamos falar sobre não nth criança e pairar. Então, algumas lições atrás nós fizemos todas essas caixas. Vamos em frente e principalmente nos livrar disso. E o que eu carrego nesta página, é apenas um monte de linhas azuis. Então é só um monte de divs e podemos ver todos esses divs aqui. E então eu tenho um elemento pai. Tem uma ideia chamada Pais, e sabemos que é o pai. E um monte de caixas. Agora um pseudo-seletor, vamos usar o apenas um dois pontos regulares para usar ou para ativar o seletor. Há muitos deles. Mas nesta lição nós realmente só vamos trabalhar em não nth criança e pairar. E parece que este ponto de caixa e, em seguida, o seu nome pseudo-classe. Então este é chamado de hover, e podemos mudar esta cor de fundo para cinza se quisermos. E vamos ampliar aqui. E quando eu passar o mouse sobre eles, ele muda a cor de fundo. Não, não tem que ser apenas a cor de fundo. Podemos mudar, podemos mudar a cor da borda, podemos alterar o tamanho da fonte, podemos mudar a família da fonte. Podemos mudar literalmente tudo funciona exatamente da mesma maneira. Mas tudo o que estamos dizendo aqui é selecionar todas as classes de caixa. Então, todos estes aqui. E então quando você coloca o mouse sobre ele, quando você passa o mouse sobre ele, o que ele vai fazer? Isso é um pseudo-seletor. Agora aprendemos sobre isso e CSS um-para-um muito rápido. Vamos em frente e usar algo um pouco mais avançado. Então, agora podemos dizer caixa. Vamos usar o não e realmente ver que há muitos deles aqui. Não vamos passar por tudo isso. Há apenas tantos, e francamente a maioria deles em ganhou, tipicamente usado, mas eles são suportados. Então vamos fazer uma caixa de cólon nada. E então o que fazemos aqui é dar-lhe outro seletor. O que ele não deveria estar selecionando? Então não me selecione. Vamos copiar isso e jogar isso em, sei lá, o terceiro. E vamos acabar com isso. Faça uma cor de fundo de azul. Então estes devem agora ter uma borda azul, um fundo azul quando você passar o mouse sobre ele, todos eles vão ficar cinza. No entanto, a caixa não me selecionar, que é este, não vai ter uma cor de fundo azul. Então vamos em frente e atualizar e você pode ver que ele seleciona este bem no meio. Agora, uma coisa a ter em mente aqui é que CSS, como a maioria das linguagens de programação, funciona de cima para baixo. Então dissemos, dê-lhe uma cor de fundo de cinza quando passarmos o mouse. Mas depois dissemos, se a caixa não estiver, não me selecione, a turma não tem essa. Em seguida, altere a cor de fundo para azul. E quando voltarmos aqui, veremos que nada está acontecendo, exceto este. Para corrigir isso, basta selecionar isso e movê-lo acima. Salvar, atualizar. E agora funciona para nós do jeito que queremos que funcione. Linda, beleza, beleza ruim. Certo, digamos que queríamos selecionar um em particular. Agora, haverá um momento no futuro em algum momento em que você está trabalhando em um site que você tem, todo esse HTML e você não vai ser capaz de editar esse HTML. Talvez você esteja trabalhando com um framework como o Django e você precisa ser capaz de apenas trabalhar com HTML direto. Isto é muito, muito importante. Esta é uma das principais habilidades em CSS, é que você precisa ser capaz de não tocar em seu HTML e ainda selecionar o que você precisa selecionar. Então vamos em frente e selecionar como esta caixa aqui. Digamos que selecione o nome. E vamos mudar essa cor para branco. Em todas as caixas, a cor será branca para que possamos lê-la. Lá vamos nós. Queremos que este seja selecionado e então não queremos que nenhum dos outros seja selecionado. Agora o problema é, este é o mesmo que este é o mesmo que este é o mesmo que este. E os três inferiores são todos idênticos. Todos vivem dentro dos pais que não há nada de único neles. Como selecionamos isso? Podemos esbofetear isto com o nº seletor de crianças. E então o que podemos dizer é selecionar todas as caixas, em seguida, fazer enth filho. E é preciso chave encaracolada, chaves, mas parênteses. E este enésimo filho leva um número. E então qual deles nós queremos isso como 12345. Então jogamos o número cinco lá dentro. E vamos mudar essa cor de fundo. Já está azul. Isso não vai fazer nada que mude a cor de fundo para amarelo. E vamos mudar esta cor para preto. A cor do texto para preto. E quando atualizamos nossa página, ela seleciona apenas esta. Então sabemos que há uma quantidade definida de caixas. E nós dissemos, oh, nós só precisamos selecionar este, mas não podemos tocar no HTML. Podemos dizer pular 1234, selecionar o número cinco com o n-ésimo seletor filho e, em seguida, aplicar nosso estilo. Agora isso é realmente importante porque isso entra em seletores avançados e isso vai ajudá-lo imensamente no futuro em algum momento em que você está trabalhando com um designer, muito provavelmente. Então, quando você está trabalhando com seu web designer, web designer vai dizer, aqui está um monte de coisas que você pode estar trabalhando com um desenvolvedor back-end, volta em profundidade diz, ok, vamos fazer isso funcionar no Django e ter um monte de caixas de seleção, por exemplo. Mas queremos que o terceiro, o terceiro item na caixa de seleção tenha uma borda em torno dele para que ele realmente se destaque. Então as pessoas são mais propensas a clicar nesse. Podemos fazer isso com. E a criança. Podemos ter certeza de que quando você paira sobre algo, as coisas mudam. Podemos nos certificar de que você não seleciona determinados elementos. Você pode selecionar todos eles, exceto alguns. 17. Introdução a pseudoelementos: Pseudo elementos são semelhantes em sintaxe para pseudo-classes são seletores. O que aprendemos na última lição. A diferença é como ele age. Então, parece muito semelhante, mas é um pouco diferente. Então, nesta lição em particular, vamos usar o Colin. Então poderíamos selecionar uma caixa usada para Colin e, em seguida, qualquer que seja o seletor chamado ou não nesta lição, mas nas próximas duas lições, vamos aprender sobre esses pseudo-seletores. Vocês não são pseudo-seletores, e estes são, na verdade, pseudo-elementos. Então o que fizemos antes foi uma pseudo-classe ou um pseudo-seletor de Hover. Desta vez, vamos dizer selecione a caixa e, em seguida, poderíamos fazer antes ou ponto caixa de dois pontos, dois pontos depois. E isso vai fazer coisas diferentes para nós. Agora. Antes e depois é o que vamos aprender primeiro, estes são elementos realmente, muito interessantes. Porque o que ele faz é, e vamos aprofundar mais sobre isso nas lições particulares. Mas ele realmente vai criar elementos vai fazer certas coisas que HTML deve estar fazendo. Então CSS é uma espécie de pisar sobre seu, seu limite aqui e entrar no mundo do HTML. Outra diferença é que eles realmente não têm ações. Enquanto que o pairar é, você sabe, você está pairando sobre algo, você está realmente fazendo algo. Vai levar algum tipo de eventos de pairar. Você coloca o mouse sobre ele e ele pode mudar. Enquanto que, como antes e depois, estes não são realmente projetados para fazer isso, embora você possa absolutamente fazer isso. Mas estes serão basicamente adicionando elementos HTML à sua página. Então vamos em frente e saltar para o antes e depois. 18. Os elementos anteriores e posteriores: Antes e depois de pseudo elementos são muito como elementos HTML inline. Mas não temos que escrever qualquer HTML para isso. Para que possamos segmentar certas coisas na nossa página. E podemos basicamente ter mais HTML ou pelo menos adicionar HTML falso e, em seguida, adicionar um monte de estilo para que nós realmente não temos que modificar nosso HTML em tudo. Então, um bom exemplo disso é uma caixa. E se eu voltar ao meu navegador, essa é a aparência da caixa. É uma página centrada que tem uma borda preta. É apenas uma caixa de 300 por 300 pixels. Agora, o que podemos dizer é selecionar essa caixa e, em seguida, antes que possamos fazer todo tipo de coisas para ela. Então a primeira coisa que você vai querer fazer é você vai querer um pouco, adicionar algum conteúdo. Isso facilita a propriedade content e tipicamente nós apenas adicionamos um, um espaço vazio lá. E isso só diz ao navegador, Ei , olha, é suposto haver um elemento aqui. E você sabe, como quando você escreve uma div vazia, ela não aparece na sua página. A mesma coisa, mas vamos adicionar um espaço e isso garante que ele apareça na página. Então podemos fazer uma exibição. Então podemos dizer bloco de exibição. E então podemos dar uma borda de dez pixels, vermelho sólido. E vamos ver como isso parece até agora, isso não vai ser perfeito, mas vai ser bem perto. E neste ponto, na verdade, assim que eu atualizar esta página, vamos ver sim. Então nós temos algo lá que é legal e nós podemos realmente entrar em nosso elemento inspetor aqui e selecioná-lo. Podemos fazer todo o tipo de coisas com ele. Agora podemos realmente editar este CSS diretamente em nossas ferramentas de desenvolvedor. Vamos em frente e dar a isso uma largura de 100%. Vamos ver o que isso faz. E neste ponto vamos apenas experimentar. Você pode ver que ele lhe dá uma largura de um 100% abaulamento para fora por causa das bordas, as bordas pretas. Ou seja, digamos que queremos dar-lhe uma altura e um 100%. Vamos ver se isso também é honrado. Ok, nada mal, nada mau. Digamos que queríamos mudar isto. Então vamos entrar em algum posicionamento. Vamos fazer posição relativa em toda a caixa em si. Mas, em seguida, no pseudo elemento antes, este elemento falso que realmente não existe na página. Não há HTML aqui. Podemos editar o HTML. Podemos dizer, vamos mover isso. Então vamos mover isso para o canto superior direito. E assim podemos dizer posição absoluta. E sabemos que isso vai funcionar porque é pai. Seletor está usando posição relativa. Seu elemento pai está usando posição relativa. Nós fazemos posição absoluta. Vamos fazer top menos dez pixels, e vamos fazer esquerda menos dez pixels. E nós vamos ver esse tipo de solavancos aqui em cima. Na verdade, isso é porque temos fronteiras lá dentro. Sim. E dez pixels, borda vermelha sólida. Então nós apenas sobrepusemos isso. Vamos em frente e fazer 30 em vez disso. Lá vamos nós. Agora você pode realmente ver que isso antes está no topo da borda preta. E um exemplo melhor disso é se eu fizer cor de fundo é igual a preto na caixa, não o pseudo elemento. Antes. Podemos ver que o vermelho está delineado em cima dele. Agora, se quiséssemos mudar como poderíamos, poderíamos fazer. E isso faz parte do posicionamento. Podíamos dizer índice Zed menos um. E isso coloca para trás. Agora, da mesma forma, podemos fazer a mesma coisa, mas com depois. Assim, cada elemento pode ter um antes e depois. Nós podemos fazer. Caixa de dois pontos, dois pontos depois. E vamos selecionar esta caixa, mas vamos criar um elemento depois em vez de um elemento Antes. Vamos em frente e copie. A maior parte destas coisas vai ser muito, muito parecida. E poderíamos agrupar esses seletores se quiséssemos. Vamos mudar isso de vermelho sólido para azul sólido. E em vez de cima, vamos fazer o fundo e a direita. E vamos ver como isso acaba para nós. E não vai ser exatamente o que você espera, mas vai mostrar algo e podemos nos ajustar a partir daí. Está bem, fixe, fixe. Então nós temos estes sobre estes elementos antes e depois e eles estão atrás. Vamos em frente e nos livrar desse índice. Ou podemos torná-lo um positivo está no índice. Eu gosto de um ou digamos dez. E isso são apenas camadas em cima. Então agora temos este pequeno erro agradável. O que acontece se nos livrarmos do fundo? E certo? Ok. Então logo após o elemento, ele vai estar bem dentro. Você pode realmente ver que há esta fronteira aqui, este quadro negro ou aquela borda de dez pixels. Está bem por dentro. E se dissemos que o topo e a esquerda são os mesmos que o anterior? Ele o move exatamente para onde esperamos que vá. Então agora, como mais um exemplo, vamos em frente e nos livrar desse canto superior esquerdo. Vamos nos livrar desse canto superior esquerdo. E estes vão ser exatamente os mesmos. Não podemos ver mais esses, mas podemos selecioná-los. Então temos um antes, e podemos dizer antes vai ser top menos 30 pixels e esquerda. E eu vou colocar isso no vídeo aqui. Menos 30 pixels. Está bem? E podemos selecionar o depois e podemos fazer a mesma coisa, mas inferior diferente. Menos 30 pixels, certo? Menos 30 pixels. E isso só nos dá esse pequeno efeito de camadas. Agora vamos olhar para um exemplo do mundo real. Isso é muito, muito legal, mas isso não é realmente um exemplo do mundo real. Então o que eu vou fazer é criar um RH aqui, apenas uma regra horizontal. E eu vou criar um novo link. Então, um elemento não vai a lugar algum e dar a isso uma fronteira. Vamos em frente e colocar um pouco de lorem aqui também. E jogue isso bem no centro. E isso desfez as minhas coisas lá em cima, tudo bem. E quando eu fizer zoom aqui, eu vou fazer zoom real, muito bom aqui. Deixe-me ampliar em 200%. Digamos que queremos nos dar uma fronteira. Vamos nos livrar desse estilo padrão e vamos dar a isso uma borda adequada. E quando você paira sobre ele, é, a fronteira fica maior. Então o que podemos fazer é selecionar R, um elemento, dizer decoração de texto. Nenhum. Não vamos fazer nada lá dentro. Vamos mudar a cor para preto. E vamos ver como isso se parece. Ok, legal. Ele se encaixa. Você vê que é um elo, se encaixa. Não dissemos para ligar até passarmos o mouse sobre ele. O que podemos fazer agora é dizer, “Elemento, antes”. Vamos fazer o conteúdo com um espaço. Largura é igual a um 100%. Altura é igual a, digamos, quatro pixels. Isso nos dá uma cor de fundo. E eu vou mover isso para o centro do vídeo. A cor de fundo vai ser azul. E vamos ver como isso se parece. Nada ainda. Por que é isso? Bem, temos de nos dar uma posição. Então vamos fazer em nosso elemento principal aqui, posição relativa. E depois no antes, vamos fazer a posição absoluta. Inferior 0, esquerda, 0 tem uma largura de 100%. Então isso deve aparecer agora para nós. Lá vamos nós. Então isso não parece muito bom em tudo. E esse não é realmente o ponto aqui. A questão é mostrar-lhe que podemos dar uma fronteira a isto. Agora isso não é diferente do fundo da borda. O que dissemos aqui? Quatro pixels, azul sólido. Mas agora em pairar, podemos começar a combinar, misturar e combinar estes. Podemos dizer um pairar antes. E vamos mudar essa altura para 14 pixels. Dê uma atualização a isso. E olha para isso. Agora cobre o texto. Não podemos mais ver o texto lá dentro. E, em vez disso, o que podemos fazer é dizer, estar sempre abaixo do texto, estar debaixo dele como se estivéssemos, como se estivéssemos colocando um pedaço de papel em cima de outro pedaço de papel. Então podemos dizer índice vai ser menos um. Por padrão, todos os índices zed ou índices Z estão em 0. Vamos dizer, jogue isso logo atrás desse texto. E agora bam, bem, nós ainda não podemos realmente ver isso, vamos mudar isso de azul para amarelo. Lá vamos nós. Isso parece um pouco melhor. Isso ainda é muito difícil de ver no vídeo. Vamos fazer vermelho. Isso é muito melhor. E então agora nós temos este pseudo-elemento usando um estado de foco, e nós estamos realmente modificando este elemento em si. Então, se entrarmos aqui e expandirmos nosso A, podemos ver que há um antes. E outra coisa legal que podemos fazer é clicar nesse ponto-ponto-ponto, essas reticências. E podemos fazer para pairar o estado. E isso paira este estado para nós como se puséssemos nosso mouse sobre ele permanentemente. E então podemos clicar nisso antes e ver o que está acontecendo aqui. Incluindo o seletor a usando uma pseudo-classe pairando usando um elemento pseudo antes. Agora, o que eu gostaria que você fizesse é dar uma chance a isso. Isso é muito, muito importante porque isso faz parte do CSS avançado. Estamos entrando nas partes carnudas do CSS. Então dê uma chance a isso. Tente criar um link, tente criar caixas com elementos antes e depois. 19. Como alterar a primeira letra e primeira linha usando pseudoelementos: Com o seletor de elementos pseudo, podemos segmentar a primeira letra de um elemento. Também podemos direcionar a primeira linha de um elemento. Então vamos em frente e criar um parágrafo aqui com um monte de Lorem. E vamos colocar um monte de calor aqui. E tudo vai ser em um único parágrafo. E eu vou colocar em várias linhas, apenas manter meu código limpo, mas vai parecer um parágrafo na página. Então vá aqui. Ok, muito pequeno. Vamos ampliar. E digamos que isso é como se estivéssemos escrevendo um site ou recodificando um site para um jornal ou algum tipo de revista. E queremos que a primeira carta seja enorme. Podemos mirar isso. Podemos dizer em nosso estilo aqui, segmentar o elemento P. E podemos fazer a primeira letra. E então podemos fazer o tamanho da fonte de, vamos fazer algo grande. Vamos fazer uns 50 pixels. E isso vai fazer com que eu seja apenas o primeiro eu, não os outros, apenas este primeiro. Realmente grande. Vamos em frente. Está bem, parece bem, é maior. Mas queremos que o texto envolva em torno dele. E sabemos que podemos fazer coisas envolventes com flutuador, flutuar à esquerda. E isso é muito, muito importante saber, mas também é algo que aprendemos e CSS 101. Então, se você não está familiarizado com float, você pode querer se familiarizar com float. É muito útil em certos casos como este. E assim L ainda é um pouco grande demais. Mas o que podemos fazer é selecionar este p, ir até o fundo. Não, não está lá porque não é um elemento. Sudo e lá vamos nós. Elemento da primeira letra. Vamos mudar o tamanho da fonte. Apenas uma justiça para eu não sei. Vamos continuar fazendo isso menor até parecer decente. Sim, algo assim. E então nós também podemos adicionar uma margem de lago 50 pixels. Se quiséssemos que ele realmente se destacasse, podemos adicionar uma margem de cinco pixels para torná-lo um pouco mais suave. E eu vou mover isso para cima. E este é o primeiro seletor de letras. Então vamos em frente e adicionar essa margem lá também. Margem cinco pixels. Agora também podemos selecionar a primeira linha, e não vai ser necessariamente, esta linha de código vai ser esta linha. E isso vai depender do seu navegador. Então estamos entrando em algo um pouco mais responsivo aqui. E então vamos em frente e dizer P. Primeira linha. E vamos fazer o peso da fonte de negrito. Economize, atualize e agora é boliche. Agora, a coisa boa sobre isso é que sempre vai ser a primeira linha. Você pode ver que são apenas as quatro primeiras letras aqui. Isso é muito difícil de ver. Peço desculpas por isso. Mas se eu fizer isso, é sempre a primeira linha. Não importa a quantidade de texto que haja, é sempre a primeira linha. Então essa é a sua primeira letra e seus seletores de pseudo-elemento de primeira linha ou pseudo seletor. E honestamente você não vai usar isso com muita frequência, mas é bom saber que é possível fazê-lo. Não vou te dar lição de casa por isso, mas coloque isso no bolso de trás e guarde para mais tarde. Saiba que isso é completamente possível no caso de você estar trabalhando com um cliente que tem um site estilo artigo como uma revista ou um jornal. 20. Destaque a seleção: Usando a seleção, podemos dizer ao nosso navegador que texto deve ser semelhante quando o usuário selecioná-lo. Então, como quando você passa o mouse sobre e, em seguida, você clica e arrasta LED, você pode ver que muda o meu no código VS um pouco. Podemos mudar isso no navegador também. Então vamos abrir isso em cromo. Abrindo no Chrome. Temos lorem ipsum, nada importante aqui. E quando selecionamos, é apenas o navegador padrão. Então, honestamente, não há nada de errado com isso. Mas se você quiser torná-lo um pouco mais interessante, especialmente se você tem um artigo, site como Medium, onde eu acredito que se você passar o mouse sobre ele, ele muda a cor de fundo para verde e a cor para branco. Então vamos realmente fazer esse exemplo exato. Então o que podemos fazer aqui é dizer, e isso nem precisa de um elemento específico. Podemos apenas dizer, sempre que você fizer qualquer tipo de seleção, mude essa cor de fundo para verde, e mude a cor para branco. E agora, quando eu salvar e vamos ver que isto é o que era antes. Refresque. Isto é o que é agora. E isso é seleção. Eu, pessoalmente, gosto disso. Eu gosto quando estou em uma página e eu quero copiar alguns textos que eu sei exatamente onde eu estou, eu estou selecionando isso. Ele me diz que o desenvolvedor de front-end que fez este site realmente colocou o pensamento no tempo e esforço para fazer isso. 21. Como adicionar transições tranquilas: Vamos dar uma olhada nas transições. Transições nos permitem fazer ajustes sem problemas. Então, como, você sabe, quando você passa o mouse sobre um elemento e você movê-lo para cima como dez pixels vai atualmente parece um pouco viciado. É muito abrupto. E, em vez disso, com uma transição, podemos fazer com que seja suave para se mover suavemente cima e podemos dizer-lhe para ouvir um certo tipo de mudança, como uma largura ou uma margem ou posição, qualquer tipo de coisa. Podemos realmente fazer uma transição de muitas coisas aqui. Mas neste exemplo, devemos fazer a transição para você vincular. Então vamos fazer um link em um botão. Então vamos fazer um botão. E não vai ser nada nele. E isso vai dizer, clique em mim. E então vamos direcionar esse link. E isso dá a ele uma cor de fundo de fff. Então vai ser branco. Já vai parecer branco, mas vamos dar-lhe um branco de qualquer maneira, podemos fazer a transição mais tarde. Podemos dizer exibição é bloco inline, e podemos dizer preenchimento na parte superior e inferior vai ser cinco pixels. E à direita e à esquerda serão 15 pixels. Também é dar a isso uma cor e uma cor explícita. E isso vai ajudar com nossas transições. Então as cores não realmente vai ser branco vai ser preto 000. E vamos ver como isso se parece. Sim. Ok. Agora, não é bem decoração de texto. Nenhum. E vamos dar-lhe uma fronteira. A borda é um pixel, preto sólido. E vamos em frente e fazer isso maior. Zoom, zoom, zoom, zoom in, in. Estou em 500%, então este é o botão. E quando você passa o mouse sobre ele e nada acontece, vamos adicionar um pairar. Podemos dizer um pairar. E então, quando passarmos o mouse sobre isso, vamos mudar a cor de fundo para ser preto. Ou podemos fazer uma cor hexadecimal 000. E vamos mudar a cor para ser branco ou fff. Vamos em frente e salvar isso. E tudo bem, então temos um estado flutuante. É uma pequena Jackie. Não é muito bom para epilépticos para ser honesto, mas podemos tornar isso muito mais suave dizendo transição. E o que queremos fazer a transição aqui? Poderíamos fazer a transição de tudo e poderíamos dizer “levar 0,2 segundos para fazer isso”. Então dizemos transição tudo como o primeiro parâmetro. É isso que queremos que faça a transição. O segundo parâmetro é quanto tempo deve demorar. E quando atualizamos a página, você pode ver que ela se desvanece e desaparece. Agora, isso é muito melhor. Agora nós poderíamos realmente tornar isso significativamente mais preciso. E honestamente, isso não é super desempenho porque seus navegadores agora procurando por cada mudança única, ele vai procurar preenchimento de exibição, texto colorido, declaração, borda e cor de fundo no estado de foco. Talvez não queiramos isso. Talvez só quiséssemos mudar a cor de fundo. Podemos dizer mudar essa cor de fundo. Em vez de tudo o que mudamos para cor de fundo, corresponde a este nome exato da propriedade aqui em cima. E vai levar 0,2 segundos. Agora isso vai mudar. Essa cor de fundo vai desaparecer e nós podemos realmente meio difícil de ver. Então vamos fazer como 2,2 segundos. E você pode ver essa cor de fundo quando eu atualizar a página aqui em cima, esta cor de fundo vai demorar um pouco para desaparecer, mas essa cor vai ser instantânea. C. Isso parece legal. Eu acho que se você gosta desse tipo de efeito. Diga também vírgula. E eu gosto de colocar isso em outra linha, cor. Vamos mudar esse comprimento de transição para algo muito longo. Digamos que uns cinco segundos. E quando eu subir aqui, aperte a atualização. Venha para baixo. Desvanecendo para dentro e para fora. Tão agradável e devagar. Normalmente, suas transições não são tão lentas. Normalmente suas transições são como 0,2 segundos e esta pode ser 0,5 segundos. Vamos em frente e refrescar algo assim. E isso só faz com que seja um pouco mais agradável. Agora também podemos mudar coisas como estofamento. Mas veja isso quando eu digo pairar, preenchimento com mudança no preenchimento de cinco pixels e 15 pixels. Vamos mudar isso para o dobro. Então, superior e inferior serão dez pixels. Esquerda e direita serão 30 pixels. Isso vai parecer um pouco Yankee C que nós realmente não queremos que nós queremos que ele seja agradável e suave. Então o que podemos dizer aqui é vírgula, vírgula comunidade vírgula e preenchimento. E poderíamos dizer 0,4 segundos ou porque é muito maior, podemos realmente fazer isso como um segundo assim. Agora isso é novamente, não é o melhor exemplo de sempre, mas é um bom exemplo. E isso é muito bom para o lago. Quando você tem um site como vamos para Rocket Man, não aprenda wag tail.com. E você pode ver que este pairar tem um pouco de efeito lá. Ou se você passasse o mouse sobre isso, isso é chamado de cartão. Você pode alterar a cor do plano de fundo. Você pode fazê-lo desaparecer, desaparecer. Você pode fazer essa jogada. Você pode fazer todo tipo de coisas com uma transição para que não pareça tão drogado. Então, isso é uma transição. O que eu gostaria que você fizesse para esta lição é criar um link, torná-lo um botão, exatamente como o que eu fiz, e então mudar a cor de fundo quando você passar o mouse, você não precisa fazer todos os outros, mas apenas alterar a cor do plano de fundo ao passar o mouse e certifique-se de adicionar essa transição aos seus elementos principais, não ao seu pseudo seletor, não à sua pseudo-classe. Seu elemento principal. 22. Como adicionar fundos de gradientes: Certo, vamos falar sobre gradientes. Existem dois tipos primários de gradientes. Há linear e radial. Um gradiente linear vai de um lado para o outro. Qualquer gradiente radial meio que emerge do centro. Agora, nós só vamos trabalhar com linear porque parece muito melhor. E honestamente, acho que nunca vi um caso em que um gradiente radial realmente pareça bom. Mas se quiserem, se quiserem aprender um pouco além do que lhes vou ensinar no âmbito deste curso, podem procurar gradientes radiais e provavelmente veremos um exemplo disso de qualquer maneira. Mas vamos trabalhar com gradientes lineares só porque na maior parte eles parecem melhores, pelo menos, durante esta década em web design, parece bom. Talvez estilos antigos voltem e vai ficar bom para ter tipo radial de gradientes mas linhas, enquanto que nestes dias, então vamos em frente e adicionar uma caixa, e é devido caixa. E nesta caixa vamos ter algum tipo de gradientes. Então não vamos chamá-lo de caixa, vamos chamá-lo de gradiente. E em nosso CSS podemos fazer gradientes, selecionar esse elemento e poderíamos dizer a imagem de fundo fundo fundo vai ser um gradiente linear. E isso vai tomar uma direção. Então uma direção, cor um, cor dois. E então isso realmente não vai fazer nada. Vou deixar isto aqui só por um segundo. Deixe isso na tela e vamos fazer uma altura de 500 pixels. E não precisamos definir uma largura porque é um elemento de bloco. Mas você sabe, para uma boa medida essa é a largura, 100%. E então há gradiente linear aqui. Qual será essa direção? Digamos que a direção será duas, certo? Então vai da esquerda para a direita. Vai começar com a cor do preto, e depois vai para o amarelo. E então vamos em frente e carregar esta página no Google Chrome. E agora temos este pequeno gradiente agradável. O que é legal sobre isso é isso vai da esquerda para a direita, mas não precisamos dizer da esquerda para a direita. Podemos dar e ângulo. Podemos dizer algo como 45 graus, quatro graus. E isso muda, ele, muda de preto neste canto para amarelo neste canto em vez de esquerda para direita, é de canto para canto. Agora vou ser honesto, a maioria das pessoas não memorizam isso. Isto é uma coisa mais aguçada. As pessoas não usam gradientes o suficiente para serem sempre memoráveis. E também é meio difícil descobrir exatamente que tipo de ângulo você quer. Então, geralmente usamos algum tipo de ferramenta CSS Gradient. E então o que eu vou fazer é apenas saltar sobre o Google e eu vou digitar gerador de gradiente CSS. E assim há CSS gradiente dot IO, Mozilla. Este é um popular. Este tem sido popular há vários anos. Mas quero dizer, é como aquele primeiro porque eu tenho em outros cursos dado a este uma atenção suficiente, vamos com CSS gradiente dot IO. E então a idéia aqui é que você tem um gradiente e nós podemos fazer, nós podemos fazer radial aqui. Então vamos em frente e pegar isso. E eu só arrastei isso para baixo e isso me livrou dele. E então vamos fazer radial. E é assim que o rádio se parece. Começa por dentro e vai para o exterior. Então, há um caso em que parece bem. Neste caso, parece bem. O que estávamos a fazer era ouvir que esta cor era preta e depois esta cor aqui. E nós apenas selecionamos que um é branco. E isso é radial, isto é linear. E podemos mudar o ângulo e outras coisas descendo aqui, mudando esse ângulo assim. não há ângulo quando se trata de radial. E agora a coisa boa sobre isso é tipicamente estes darão exatamente o CSS que você está procurando. E então isso é realmente muito bom. Isso está nos dizendo que é um gradiente radial. É um círculo. Linear vai ser 0 graus. Vamos em frente e mudar isso para uns 68 graus RGB 000, que é RGBA preto, que tem o alfa aqui, que é um, então é completamente visível. E 0% e, novamente, RGBA para 555255 para 55, isso é branco. Uma transparência de 100% ou talvez essa seja a redação errada. De qualquer forma, você pode ver completamente e vai chegar a 100%. Então ele começa em 0 e vai para 100. E podemos mudar isso. Isso é o que esses 0 100% significam. Vamos, você pode ver que esse número está mudando lá. E o que isso parece é que podemos fazer isso agradável e apertado se quisermos, algo assim. E então você pode ter texto à esquerda. Podias ter uma imagem à direita, se quisesses, se quisesses tornar esta transparente. Simplesmente assim. E você pode ter uma imagem, uma imagem de fundo exatamente como essa. Então, a maioria de nós realmente não se lembra de tudo isso só porque nós o usamos tão raramente. Eles são bons de ter. Mas geralmente usamos algum tipo de ferramenta que vai nos ajudar. Agora, o que é realmente bom é que podemos fazer isso. Entra aqui, clica bem no meio, e vamos deixar isto verde. E podemos fazer todo tipo de coisas com isso, e não temos que descobrir através de código. Há ferramentas que nos ajudam a fazer isso. Eu sugeriria usar uma ferramenta para algo assim. O que eu gostaria que você fizesse é ir em frente e Google CSS, gerador de gradiente usado esta ferramenta, usar outra ferramenta, realmente não importa. Todos fazem a mesma coisa. Apenas experimente e, em seguida, olhe para o código que ele lhe dá. Copie esse código e, em seguida, coloque-o em sua página. Você pode alterar todo o fundo do gradiente de seus elementos do corpo. Não se esqueça de dar-lhe uma altura de 100% se você selecionar o elemento corpo ou uma classe ou um elemento div como o que eu fiz. E eu selecionei o gradiente e então eu apenas apliquei lá. Então vá em frente e dê uma chance é muito, muito divertido. Ele adiciona um bom pouco de tempero aqui site também. 23. Como formar fundos e gradientes juntos: Marcando a partir dessa última lição, podemos criar uma imagem de fundo para que pareça mais escura sem realmente ter que fazer muito trabalho. E agora existem algumas maneiras diferentes de conseguir isso. Um deles está usando um filtro que ainda não aprendemos. Ou outro é usar um gradiente para camada no topo. E nesta lição vamos usar o gradiente no topo. Só porque às vezes você quer um gradiente em cima e você vai ver isso por todo o lado. Uma vez que você vê isso, você pode vê-lo como em todo o Facebook. Você pode ver tudo no Twitter. Há gradientes em todos os lugares e eles são agradáveis e elegantes também. Então, primeiro as coisas, vamos em frente e selecionar o elemento corpo. E eu vou dar a isso não, não só corpo. Quero dizer, é como o corpo e os elementos HTML. Eu vou dar a esta altura de um 100% e vamos nos livrar da margem e do preenchimento. E então eu quero selecionar apenas o elemento do corpo. E aqui o que posso fazer é dizer que a imagem de fundo vai ser um gradiente linear. Vamos nos dar uns 180 graus. E digamos que isso vai de preto para preto, mas diferente, opacidade diferente. Então RGBA é 000, e então o alfa vai ser 0. E isso vai começar em 0%. E então ele vai para RGBA 000, que é preto novamente, e que vai para enquanto podemos dizer 0. Então isso realmente não vai fazer nada, que não vai degradar em tudo. Mas podemos dizer 0,6 para começar com 60% de preto transparente e depois dois. E isso é tão difícil de ler. Vamos em frente e colocar isso em novas linhas, algo assim. Lá vamos nós. E isso é realmente meio que entrar em programação porque é isso que esses parênteses significam. Significa que isto é uma função. Falaremos sobre isso em JavaScript. Assim que terminarmos com CSS, aprenderemos mais sobre isso em JavaScript. Mas o que estamos dizendo aqui é que temos um gradiente linear, um 180 graus, começar com preto , é 60%, transparente, ir para 80% e vai acabar em um 100% abaixo da estrada. Então vamos ver como isso se parece no Google Chrome. Ok, então isso é um bom gradiente. Vamos em frente e realmente fazer isso um pouco mais. Sim, lá vamos nós. Então, o mais tarde no topo, mais escuro no fundo. Agora, se quiséssemos adicionar uma imagem a isso, nós poderíamos. Mas primeiro precisamos de uma imagem. Então vamos a um Splash.com e vamos dar uma olhada nesta imagem. Rock, pegue este. E vou clicar com o botão direito do mouse e copiar o endereço da imagem. E eu vou ligar diretamente para isso para aquela imagem. E o que podemos fazer aqui é vírgula. E vamos talvez colocar isso de volta em sua linha original lá. E eu gosto de fazer esses alinhamentos, então parece legal. E então poderíamos dizer URL, como uma imagem de fundo normal. Cole esse URL ali, ponto-e-vírgula. E vamos em frente e dar uma olhada nisso. Isso parece muito bom. Agora vamos em frente e excluir esse gradiente linear. Vamos cortar isso por um segundo. Esta é a aparência da imagem normalmente com um gradiente linear em cima dela. O que parece agora. Agora, a coisa boa sobre isso é que podemos adicionar algum texto. Mas antes de fazermos isso, vamos em frente e adicionar cores vai ser branco. O tamanho da fonte vai ser algo enorme, como 90 pixels. E o alinhamento de texto vai ser o Centro. E assim, em nosso corpo, podemos agora dizer, este é um foguete. Guarde isso como um foguete. E então este texto é um pouco mais visível contra este. Se eu apagar isso, sabe, não é ruim, ainda podemos ver. Vamos, vamos até fazer isso. Vamos fazer estofamento. Top 200 pixels. Nota, vamos mais longe, e isso vai 500 pixels. Então não podemos nem ver tudo isso agora. Essa é a natureza desta imagem. E não podemos necessariamente mudar a imagem o tempo todo. Mas o que podemos fazer é jogar esses gradientes lineares de volta aqui. E agora podemos lê-lo perfeitamente bem. Agora, um caso em questão é se você pegou o CSS um, oh, uma classe. Se você tem um foguete homem mais maçante e esperar till.com, isso é exatamente o que está acontecendo aqui. É até a mesma imagem. Agora eu gostaria que você desse uma chance. Não se esqueça que tem acesso a este arquivo. Além disso, você pode fazer perguntas no grupo de aprendizagem para código do Facebook se você tiver dúvidas ou estiver curioso sobre algo, ou se quiser apenas receber feedback. 24. Como usar fontes web personalizadas: Podemos carregar fontes web personalizadas em nosso site. Assim, o trabalho de fontes wave é que ele vai tentar acessar a fonte em seu computador. E nós já vimos esse tipo de antes no CSS 101, onde é como font-family e então tem como a primeira fonte e, em seguida, como algum tipo de retorno. E a maioria das pessoas tem como Arial. E então ele vai dizer algo como uma fonte serif e fonte Serif. E então ele vai tentar este. Se não existir, vai tentar este. E se ele não existir e vai deixar você escolher o computador. Mas digamos que este não existe. Como fazemos com que exista? Agora uma coisa legal que podemos fazer é basicamente importá-lo de outro lugar. Então, podemos ir para fontes dot google.com. E vamos em frente e pegar uma fonte legal que podemos encontrar algo que realmente se destaca que vai ser um pouco diferente. Nenhum destes é muito selvagem. Há aquele para este, O. específico e então eu apenas clique nisso, selecione este mostrador. E eu posso adicionar diferentes variações de fonte se eu quisesse. Eu não vou, eu só vou incorporar aqui em cima. E podemos importar através, diretamente através do nosso CSS, que é muito legal, ou através do nosso HTML. Vou fazer o jeito HTML. Então pegue toda essa cópia. Peço desculpas, é pequeno para ver, mas se você seguir adiante, será mais fácil no seu computador vê-lo. E, em seguida, acima do nosso estilo, basta colar isso aí. Agora ainda não sabemos que nome é este. Achamos que é o específico, mas pode ser minúscula. Maiúsculas podem ter um nome diferente. Nós, nunca sabemos. Então o que fazemos é voltar aqui e diz regras CSS para aplicar famílias de fontes, Pacifica font-family ou cursivo. Vamos mudar isso. E o que vou fazer é comentar isso e vamos ver Lorem Ipsum, Lorem Ipsum. E vamos mudar o tamanho da fonte novamente para algo maior, algo como 45 pixels. E isso é o que vemos. Esta é a nossa fonte padrão. Se eu descomentar Pacific, isso muda. Agora, o problema é que se eu não adicionar esta linha aqui, se eu cortar isso do meu código. Vai para cursivo. Isto é o que o meu computador usa quando é dito para usar cursivo. Então está dizendo: “Ei, o computador do Caleb usa Pacifica, mas se não tem Pacifica usar cursivo, bem, Pacific O não existe. E então o que dissemos, torná-lo existir neste elemento HTML vai dizer, hey, ir aqui, baixar este arquivo chamado Pacifica. Nesse arquivo, sabemos que se chama Pacific O. então agora podemos ter acesso a ele e usá-lo. Simplesmente assim. O que eu gostaria que você fizesse é dar uma chance, ir para fontes dot google.com, escolher uma fonte que seja gratuita. Eles têm aqui alguns que são pagos. Não pague por uma fonte Neste momento, por favor. Basta encontrar uma fonte livre como Robodog. Robodog é um dos bons. Você pode escolher todos os estilos diferentes, se quiser. Estes são pesos de fonte diferentes também. Então nós temos hoje como nós, como isso é como isso é assim. E podemos usar essas famílias de fontes diferentes aqui. Vá em frente e dê uma chance. Tente usar uma fonte personalizada. 25. o que são transformações?: Certo, vamos falar sobre transformações. Uma transformação é uma maneira que podemos girar, inclinar escala, ou mover em elemento longe de seu ponto natural. Agora, neste exemplo, eu só tenho uma caixa regular na minha página. E quando eu abrir isso para a caixa normal, na verdade, vamos, vamos adicionar uma margem a isso. Vamos fazer margem 50 pixels e auto. E isso vai centralizar uma linha que para mim. Agora, vamos em frente e passar por algumas dessas transformações. Agora as transformações não são difíceis. Podemos misturá-los e combiná-los se quisermos. Mas vamos um de cada vez. Então vamos primeiro começar com traduzir para este é interessante. Traduzir, eu acho que pessoalmente não é o nome apropriado. A propriedade é chamada transformar transformada. E a chave, ou a declaração completa vai ser transformada traduzir, e então leva parênteses. E podemos mover isso no eixo x e eixo y. Então podemos dizer mova-nos no eixo x, 100 pixels, no eixo y, 100 pixels. E quando voltamos à nossa página, atualizamos, podemos vê-la realmente movida. Então é isso que o Translate faz. Ele apenas o move, ele traduz onde ele naturalmente fica na página. Fizemos isso com posição, posição relativa, posição absoluta, posição fixa, pegajosa. Fizemos todo tipo de movimentos assim. Nós também podemos usar a margem no topo e na esquerda para tipo de empurrar o elemento ao redor, mas traduzir como outra maneira de fazer isso, o que é realmente, muito bom. Vamos dar uma olhada no próximo. Então eu vou comentar isso. E eu vou comentar isso usando CSS adequado. Nós também podemos fazer girar. Vamos ver o que o Rotate faz. Então queremos transformar, transformar, girar. Vamos fazer 45 graus DEF para graus. E isso apenas gira para nós. E podemos fazer qualquer tipo de diplomas que quiséssemos. Poderíamos fazer como girar 68 graus ou 91 graus, que é o mesmo que girar um ou dez graus. Podemos rodar isso o quanto quisermos. Se você girar perfeitamente 90, vai parecer que nada aconteceu só porque este é um quadrado. Então isso é 90 graus, que 0 graus, 90 graus. E então só porque novamente, a maneira como a geometria funciona. Então, se você quiser, oh, eu não sei se está realmente funcionando. Tente mudar de 90 ou 180 ou 270. Tente mudar para 200 e não, não 370. Vamos fazer uns 310 graus e isso vai em um círculo também. Então o número máximo de graus é 360 graus. Em seguida, temos a forma de tendências. E eu amo este se chama Escala. E assim podemos escalar isso. Basicamente amplie este elemento e podemos, podemos dizer escala em 200% ou escala para, e isso vai torná-lo maior. Ou se eu escalar em 1.1.3. Então, ainda maior, mas não tão grande quanto dois. E vamos comentar isso. Então não há escala. Este é o quão grande é naturalmente essa escala. E por último, vamos ter inclinação. Então podemos fazer transformar distorção e temos x e y. podemos dizer inclinação no x e y, ou podemos dizer apenas inclinar X se quisermos. Vamos fazer inclinação X e Y leva dois valores. Então vamos fazer 20 graus, e vamos também fazer mais 20 graus. Então isso vai escalar no x e y. e parece distorcido. E a coisa boa sobre isso é que vai distorcer seu texto para. Então, se eu fizer lorem aqui, desculpe minha mensagem. E se eu quisesse apenas como um exemplo, poderíamos comentar isso. E podemos dizer que as tendências se formam. Vamos ver você torto como um exemplo de inclinação X apenas 20 graus. E nós não vamos distorcer o Y em tudo. E isso é o que parece. Então ele inclina ao longo do eixo x esquerda e direita. Y vai incliná-lo ao longo do eixo para cima e para baixo assim. Então essa é a transformação. Você não vai usar isso muito até você entrar em realmente elegante é realmente desenhos loucos que eu gostaria que você entrasse em algum momento. Digite isso no bolso de trás e saiba que pode transformar coisas assim. Você deveria precisar? 26. Como fazer animações usando CSs: Certo, vamos dar uma olhada nas animações. Animações Vamos mover as coisas de uma forma suave e controlada. É muito parecido com uma transição, mas não precisamos necessariamente de algum tipo de evento para ativá-lo. Como, você sabe, quando você passa o mouse sobre um link e essa transição meio que muda. Bem, isso é porque você passa o mouse sobre ele. Mas e se quiséssemos algo para mover na página sem algum tipo de gatilho, podemos fazer isso com uma animação. E o bom disso é que podemos dizer à animação para começar imediatamente. Podemos dar-lhe algum tipo de atraso. Podemos fazer todo tipo de coisas com animações. Por exemplo, podemos fazer as coisas balançarem, podemos fazer as coisas girarem e podemos fazer as coisas saltarem ou saltarem se quisermos. Ou realmente qualquer coisa que podemos fazer com CSS que podemos animar. Então o que vou fazer aqui é que tenho uma caixa. E vamos em frente e apenas mostrar esta caixa e vamos fazer o raio da fronteira 50%. E isso vai ser uma caixa, mas também vai ser um círculo. Vai ser exibido como um círculo. Então, aqui vamos nós. Eu tenho este círculo. Nada extravagante. É completamente estática. Primeiro, quando criamos uma animação, precisamos dar a ela um nome de animação. Então vamos em frente e criar uma nova animação. Usamos o símbolo at, quadros-chave e, em seguida, um nome. Então eu vou chamar esse slide de mim. E vai tirar um de, e vai levar um 2. Agora, eu quero ter certeza de que isso é móvel. Então vamos dizer que esta posição deste elemento vai ser absoluta, absoluta. Vai estar no topo da minha página e no canto superior esquerdo da minha página. E quando eu atualizo a página, ela abraça o topo da parede de cima aqui e aquela parede esquerda ali. Então o que eu posso dizer agora é de cima é igual a 0. E digamos que a esquerda é igual a 0. E onde eu quero que ele vá é deixado é 100%. Então vamos movê-lo para a esquerda todo o caminho através da página. E quando eu atualizar esta página, nada vai acontecer porque criamos uma animação, mas não definimos a animação para ser aplicável ao nosso elemento. Então o que fazemos em nosso elemento é dizer que nome da animação é igual a deslizar-me e isso diferencia maiúsculas de minúsculas. Então eu tenho um “M “maiúsculo lá. Certifica-te de que tens M maiúsculo no teu se estiveres usar o M. maiúsculo, por isso tem de ser exactamente o mesmo. Quando salvarmos isso e atualizar. Na verdade, vimos que não funciona. Vamos em frente e dar a isto uma duração de animação. Não sabe quanto tempo, para deslizar quatro. Digamos que vai deslizar por quatro segundos. Agora vamos voltar. E assim que dermos a ele uma duração vai se mover todo o caminho através da página e, em seguida, fora dele, e então ele começa de novo. Agora, se quiséssemos fazer isso para sempre, uma animação, iteração, contagem, contagem de iteração, acertou. E diríamos infinito, infinito. E ele vai para o fim e começar de novo e começar de novo assim. Agora, se quisermos mover para a esquerda e depois voltar, podemos dar-lhe uma direção de animação e direção de animação. E podemos dizer que todos os oito anos. Segure em. Vou refrescar-nos e ele vai para a esquerda e depois vai deslizar. Ele foi todo o caminho para a esquerda e então ele vai deslizar para trás para a esquerda e vai para trás para a direita e depois deslizar para a esquerda. Isso é uma animação simples. Podemos complicar significativamente mais se quisermos. Poderíamos apenas comentar isso completamente e vamos criar uma nova animação. Então eu comentei isso e é como se nem existisse. Então podemos fazer quadros-chave, deslizar para mim. Então este vai ser exatamente o mesmo nome que este aqui. Acontece que este é comentado. E então podemos dizer algo como 0%, fazer algo, depois adicionar 50%, fazer outra coisa, e depois adicionar 100%. Não, aí não. Então, a 100%, faça outra coisa. Então, a 0%, o que queremos que isso faça? Queremos que isto esteja no topo, 0, esquerda, 0 a 50%. Vamos mudar a cor de fundo para azul, e vamos realmente definir a cor de fundo para preto. Por padrão. A cor de fundo é igual a preto. E, em seguida, em um 100%, vamos mudar a cor de fundo novamente, cor de fundo é igual a amarelo. E vamos em frente e ver como isso se parece. Na verdade, precisamos de 100% para ficar, 100%. E então o que isso vai fazer é dizer em 0%, Este é o lugar onde o CSS deve ser aplicado. Este tipo de CSR deve ser aplicado a 0%, 50% de qualquer que seja a animação, que a duração da animação é de quatro segundos. Então, em 50% ou dois segundos, mude a cor de fundo para azul e deve ser completamente azul nesse ponto. E vai tentar ser agradável e suave. E, em seguida, a 100%, em quatro segundos, essa cor de fundo vai ser totalmente amarela e a posição vai ser deixada 100%. Vamos dar uma chance e ver como isso se parece. Assim e depois vai de amarelo para azul para preto. Agora o que eu gostaria que você fizesse é que eu quero que você crie uma animação que faça algo assim. No entanto, eu quero que você faça uma caixa ou círculo ou algo assim. Você pode até mesmo animar uma imagem se você quiser apenas fazer uma pequena div com uma imagem nele, eu quero que você faça a sua ir do canto superior esquerdo para o canto superior direito, para o canto inferior direito, para o canto inferior esquerdo, e depois voltar para cima para o canto superior esquerdo. Então eu quero que o seu vá todo o caminho em torno do quadro de sua página. Não se esqueça, você vai precisar usar a posição absoluta para esta posição absoluta. Você vai querer definir o estado inicial em seu elemento antes de entrar nos quadros-chave. Então isso diz que top é 0, esquerda é 0, mesmo que eu estou re-declarando aqui, que é ALK e é agradável e explícito. E então você quer dar a ele um nome de animação que precisa coincidir com o nome dos quadros-chave aqui embaixo. Dê-lhe uma duração, caso contrário não vai funcionar. E então para sua tarefa, para isso, você estará usando para porcentagens. Então 02550%, 70 ou 75% melhor. E então talvez um 100% do meio deixe isso para você, ver como isso funciona para você. Vá em frente e dê uma chance se você ficar preso, não se esqueça, você pode fazer perguntas e aprender a codificar grupo Facebook que estamos aqui para ajudar. 27. Flexbox: o novo tipo de layout de página: Ok, vamos falar sobre layouts de tabela não são layouts de tabela por layouts de página. Então, até este ponto, você provavelmente tem usado display inline-block. Você provavelmente está usando tabelas ou flutuando para mover seus elementos em toda a página. Mas há uma maneira melhor. Há duas maneiras melhores de fazer isso na verdade na primeira é flexbox. Então vou te ensinar flexbox. É importante que você se familiarize com o flexbox. Vou ensinar-te a base da flexbox. E então eu quero que você vá e talvez explore flexbox um pouco mais longe. Agora, a coisa com flex e o que vamos estar aprendendo após a grade é estes são módulos CSS muito grandes e você não precisa saber tudo isso. Coma como se não precisasse memorizar tudo isso honestamente. Você precisa se lembrar como certas coisas funcionam. Mas então você só precisa ser capaz de Google suas respostas mais tarde. Porque honestamente, eu tenho escrito CSS por um longo tempo e eu ainda não me lembro todas as maneiras de aplicar flexbox fora do topo da minha cabeça. E essa é a natureza da besta. Há muito a aprender em CSS e não há nenhuma maneira possível de aprender tudo e lembrar de tudo. Você só precisa ser capaz de lembrar como obter suas respostas. E novamente, isso é cerca de 50% do desenvolvimento web hoje em dia é saber como encontrar suas respostas. Então vamos falar sobre flexbox. Flexbox é um módulo de layout que facilita o design de estruturas de layout flexíveis e responsivas sem usar flutuação ou posições ou tabelas e coisas assim. Então vamos em frente e criar uma div. E eu vou chamar isso de nominal, chamar isso de contêiner. E aqui digamos que tenho dois elementos e os quero lado a lado. Então eu tenho um div aqui e chamar isso à esquerda e eu tenho um div aqui. Lembre-se disso, certo? E quando eu inicializar isso na minha página, e isso é apenas da última lição lá. Diz “Esquerda e Direita”. Agora, e se quisermos que eles realmente sejam esquerda e direita? Enquanto podemos flutuá-los, podemos posicioná-los, podemos fazer todo tipo de coisas, mas há uma maneira melhor. E isso é flexbox. Então a coisa boa sobre isso é que é muito simples de começar e pode ficar muito, muito angustiado na linha porque há muito a aprender, mas começar é muito fácil. Então vamos em frente e selecionar nosso contêiner. E vamos dizer “display”. Este como um novo tipo de exibição é linho. Vamos salvar isso, atualizar nossa página, e agora é esquerda e direita. E vamos em frente e selecionar esses contêineres, elementos de contêiner ou itens de contêiner. E vamos dar a isto uma fronteira. Um pixel, vermelho sólido. Legal. Certo, então temos algo que se sente lado a lado. Vamos em frente e fazer. Cada um desses itens. Pode ser, digamos 50%. Então dizemos base flexível e queremos que isto seja 50%. Agora isso é flexível, então não usamos a palavra largura porque largura está implicando um valor codificado. Flex base vai dizer começar em 50%. Mas você sabe o que se a coluna direita ocupa mais espaço e coluna esquerda, coluna esquerda tem permissão para encolher, ou vice-versa. A coluna direita tem permissão para encolher ou coluna direita tem permissão para crescer. Então o que podemos fazer aqui é dizer que classe é igual, certo? E então podemos dizer, você sabe, se há, vamos ficar chiques com nossos seletores aqui, ponto de div container, certo? Podemos dizer que essa base flexível precisa ser setenta e cinco por cento. Vamos em frente e atualizar nossa página e vemos que agora ocupa 75%. E a esquerda foi encolhida um pouco. E nós podemos fazer um exemplo realmente drástico aqui de dizer como 95% e está encolhendo tanto quanto possível aqui. Agora podemos dizer que, hey, a propósito, estes não estão autorizados a encolher, Estes não estão autorizados a crescer também. Então, podemos dizer que o encolhimento flexível é igual a 0 e o crescimento flexível também é 0. E o que isso vai dizer é esta base flexível, esta coluna da esquerda sempre será pelo menos 50%. E agora o que você não vê é que eu posso rolar para aqui, é que direita é 90% da largura da janela de exibição. Acontece que está indo para a parte da página que não podemos ver por padrão. Agora vou livrar-me daquilo ali dentro. Só porque eu acho que eu ia tornar isso um pouco complicado demais, mas esse foi um pequeno exemplo divertido. E agora não podemos rolar para a esquerda e para a direita, e temos 50% aqui e 50% ali. Agora, o que acontece se quisermos adicionar outro contêiner que pudéssemos, ou outro item, poderíamos dizer que este deve estar no centro. Então nós temos esquerda para o centro e então caminho para aqui nós temos escrever. E novamente, isso está ocupando 50% da minha viewport, 50% da minha viewport, e então escreva apenas ocupando 50% da minha viewport para uma largura total de 150%. E isso pode ficar muito, muito frustrante. Há uma maneira de contornar isto. No nosso contentor. Podemos dizer flex wrap, embrulhe a página. Então o que isso vai fazer é dizer, isso é 50%, isso é 50%. Se alguma coisa ultrapassar 100%, basta bater em uma nova linha. E estes realmente vão para suas próprias linhas porque isso é 50% mais um pixel em cada lado. Vamos em frente e mudar tudo em nossa página para caixa de tamanho de borda caixa de modo que nossas caixas também incluem a largura da borda. E boom, estamos trabalhando com layouts agora. Agora podemos continuar adicionando elementos, podemos continuar adicionando-os e eles vão continuar empilhando da maneira que queremos que eles empilhem assim. Agora, podemos mudar essa base flexível. Vamos mudar essa base flexível para algo como 20%. E agora temos dez células, todas lado a lado e bem juntas. E eles são flexíveis. O que significa que não precisamos mais usar tabelas. Nós não precisamos mais usar flutuante ou posição absoluta com relativa e coisas assim. Podemos usar flexbox para colocar as coisas lado a lado. Agora, este não é o melhor exemplo. Um exemplo melhor vai ser se fizermos isso, vamos criar em nosso recipiente div, e isso vai ser chamado de navegação. Então vamos dar a isso uma classe de navegação. E vamos criar outro chamado conteúdo. Conteúdo aqui. E então o que posso dizer é, vamos manter o tamanho da caixa. Vamos manter nosso contêiner para ser display flex, flex rap, para que ele se envolva em uma nova linha se quisermos. Vamos nos livrar dessas coisas aqui, exceto a fronteira. E vamos reiniciar eficazmente. Ok. Portanto, não temos uma base flexível ou uma largura flexbox é uma maneira que você pode pensar nisso. Precisamos definir essa largura agora. Agora, nós não queremos necessariamente definir a base flexível em ambos estes. Isto é selecionar o recipiente e ambos os devs, queremos selecioná-lo na navegação e conteúdo. Então vamos em frente e digite Navegação. Vamos dar a isso uma base flexível. E 20%. E é permitido crescer flex, crescer? Não. Mas é permitido encolher? Psiquiatra flexível, sim. Vamos dizer que é permitido encolher se for preciso. Ok, então isso é 20% da largura da minha janela de exibição. Essa é toda essa seção branca que estamos olhando aqui. E para conteúdo, vamos fazer conteúdo de ponto. Base flexível é igual a 80%, o restante de 100% menos 20%. E vamos fazer a mesma coisa aqui onde dizemos flexionar, crescer e encolher. Mas o conteúdo é mais importante. Então, é permitido crescer? Sim, é permitido encolher. Vamos dizer que não. Agora temos algum conteúdo lá e podemos nos livrar de tudo isso lá dentro e podemos fazer todo tipo de coisas. Podemos dizer H1, parágrafo HelloWorld com um baixo-los. Poderíamos fazer outro H2 e outro título, Olá mundo novamente. E poderíamos fazer outro parágrafo com algum lorem lá dentro. E boom, temos navegação, temos conteúdo, temos um layout de página. Podemos, mesmo se quisermos colocar um cabeçalho aqui, podemos fazer cabeçalho ponto. E vamos em frente e estilo cabeçalho R-dot. Isso é dizer cabeçalho ponto. Base flexível é 100%. Pode crescer? Não, não queremos que seja mais do que 100%. Pode encolher, flexionar, encolher? Não, precisa ser 100% o tempo todo. Digamos que o cabeçalho agradável tem uma cor de fundo de fff. Não. Vamos fazer CCS, CCC. E digamos que a cor precisa ser cinco por cinco. Parte inferior da borda, dois pixels, preto sólido. Certo, quase funcionou. Nós só precisamos de algum conteúdo real lá dentro. Então cabeçalho. Pense nisso. Certo, isso parece terrível. Não posso viver com isso em boa consciência. Então vamos fazer cor de fundo é igual a cinco f cinco de cinco cores vai ser preenchimento preto. Vai ser 20 pixels. Lá vamos nós. E se formos em frente e nos livrarmos dessa fronteira, e porque é a única coisa lá dentro, podemos nos livrar de tudo, mas vamos apenas comentar isso para que você possa acessar esse código mais tarde, se quiser. Temos algum tipo de layout de tabela ou não uma tabela a o, mas em CSS 101, fizemos isso com uma tabela em CSS 201. Por favor, não use mais mesas. Não precisamos de tabelas para layouts. Agora podemos usar flack. E essa é a maneira como você deve criar layouts de página no futuro. Flex ou grid falará sobre grade na próxima lição. Agora, o que eu gostaria que você fizesse é gastar provavelmente 20 minutos, talvez até mais. Você vai querer definir o flex de exibição em um elemento pai. Então temos o nosso elemento pai. Todos os elementos filho serão itens flexíveis. Isso é o que eles são chamados de itens flexíveis. Então, obtivemos conteúdo de navegação e item de cabeçalho. E então eu quero que você defina a base flexível deles. Veja se consegue fazer o rap flexível funcionar. Flexível crescer e encolher, mexer com isso. Então você vê se você pode fazer isso funcionar para você ou não trabalhar para você e ter uma idéia de como deve funcionar. E eu quero que você, antes de passar para a grade, crie algo que se pareça um pouco com isso. Agora ele não precisa ficar bonito. Estamos focando no layout aqui, onde temos uma coluna da esquerda aqui. Temos uma coluna da direita aqui, e temos uma linha no topo chamado cabeçalho. Vá em frente e dê uma chance. Lembre-se se você ficar preso, fazer perguntas abaixo, fazer perguntas no grupo aprendendo a codificar Facebook. Há muitos de nós que sabem muito sobre flexbox, podemos ajudá-lo a ter um momento clades. 28. Grid: o país prometido dos layouts: A grade é uma maneira ainda melhor de criar um layout de página. Ele é mais avançado e flexbox e foi projetado especificamente para ser bom em criar layouts de página. Então, enquanto flexbox tem seu propósito como ser capaz de alinhar verticalmente as coisas, o que é bom, nós não cobrimos isso. Isso é algo que você pode querer ir e pesquisar no seu tempo livre, embora como um pouco de lição de casa extra. A grade não foi projetada para fazer isso. Grade tem literalmente para um layout de modelo. Então, quando se trata de grade, há algumas coisas que precisamos saber. Existem colunas, linhas e calhas. E essas calhas, nós as chamamos de lacunas. Em frameworks como Bootstrap, você vai vê-los chamados de calha. Nós não os chamamos de calhas tecnicamente, e CSS são chamados de lacunas. Então temos colunas, linhas e lacunas entre as colunas e linhas. E, como uma tabela HTML, podemos fazer cada célula gastar uma ou mais colunas ou linhas. Então vamos mergulhar nisso. Então vamos em frente e criar nossa primeira grade. Vamos criar um ID aqui e eu tenho que mudar de template Django de volta para HTML. Vamos em frente e criar um elemento de contêiner chamado grid. E tem uma identificação da grade. E vamos dar um item a isto, e vamos chamar este. E acabei de fazer nove itens aqui. Agora, se atualizarmos nossa página, vamos ver de um a nove em suas próprias linhas. Isso é completamente esperado porque atualmente isso não está usando uma grade, isso está usando o bloco de exibição padrão básico, e estes são todos divs. Então o que podemos fazer aqui é selecionar nossa grade e podemos dizer display grade e um novo tipo de exibição aqui podemos dizer grade. E isso só vai transformá-lo em uma grade. Então, se dermos uma olhada agora, nada acontece. Precisamos dizer que isso tem um modelo de grade, grade, colunas de modelo. E quantas colunas queremos? Bem, nós temos nove seções, então vamos fazer três por três. Então vamos fazer auto, auto, auto. Então estas são colunas, e esta vai ser a coluna 123. Vamos ver o que isso faz. Ok, nós estamos chegando em algum lugar lá todo lado a lado. Isso é muito bom. Vamos em frente e selecionar todos os itens aqui. Vamos fazer o item. E vamos dar a isso uma borda, um pixel vermelho sólido. E isso só nos permite ver com o que estamos trabalhando aqui. Agora vamos dizer que queremos criar algum tipo de lacunas entre estes. Podemos fazer isso com uma lacuna de coluna de grade ou lacuna de linha de grade. Uma lacuna da coluna da grade vai se parecer com isso. Então, a lacuna da coluna da grade , e isso vai ser, digamos, 20 pixels. E assim cria uma pequena lacuna entre as nossas colunas. Ou podemos fazer lacuna na linha da grade. E isso cria espaçamento entre linhas r. E nós podemos realmente ter ambos ao mesmo tempo. Portanto, espaço de coluna e lacuna de rolagem de 20 pixels. E agora temos uma grade bonita aqui. Mas isso não é tão bom para modelos de página. Para modelos de página geralmente têm algum tipo de cabeçalho, algum tipo de navegação, algum tipo de rodapé. Vamos em frente e criar isso. Vamos criar o item um. Vamos fazer isso passar por 123 e então vamos nos livrar de 23. E isso é muito parecido com trabalhar com a tabela, mas está usando CSS. Então o que eu vou fazer aqui é eu vou copiar tudo isso. Copiar. Cole e apenas dê esses nomes de item aqui. Então, todos eles vão compartilhar o estilo de 11 pixels borda vermelha sólida. Vamos selecionar o item um. Item um. E podemos dizer que a coluna da grade vai começar no item número um e vai para a coluna da grade final e no item número três. E então o que estamos dizendo aqui é começar na coluna um bem aqui, 23. E vai assumir tudo isso. E eu realmente faço isso errado. Deve ser começa em um aqui, dois ali, três ali, e então para lá, vamos mudar isso para quatro. E o item um agora vai ser um cabeçalho e ele foi deslocado, ele desalojou o número 23. Então, se quiséssemos, poderíamos nos livrar deles se quiséssemos. Nós não precisamos. Vamos em frente e realmente nos livrar do 23. Então, item 23. Lá vamos nós. Agora vamos fundir um 69 juntos. E podemos fazer isso com o início da linha da grade e o fim da linha da grade. E queremos trabalhar com o item seis aqui. Então vamos fazer o item seis, linha de grade começar. Onde é que isto vai começar? 1234. Digamos que isto comece às duas. E é devido grade, linha final e 1234, vamos fazer quatro. E, ocasionalmente, eu confesso essas coisas. Sim, lá vamos nós. Fiz isso, certo. E então agora nós desalojamos os que estavam logo atrás dele. Então vamos em frente e tentar retocar isso. Agora, às vezes quando você está aprendendo isso, é um pouco de adivinhação, mas agora temos a fileira seis. Tudo bem, então temos 1456. Vamos nos livrar do que eu não sei. Vamos nos livrar de nove. E vamos nos livrar de nove. Ok, isso é bom. Vamos em frente e fundir 45 juntos. Então queremos o Item 45 juntos. Então vamos fazer item para e estamos mesclando colunas o outro. Então nós queremos fazer colunas de grade começar. E este é um aqui para aqui, 34. Então fomos de dois a quatro. E nós podemos fazer isso. Ok, isso funciona. Agora vamos fazer o mesmo com 57 porque e vamos ver o que acontece quando fazemos 57. Podemos fazer a mesma coisa, item cinco, e isso é apenas aplicar o mesmo tipo de estilo. E agora podemos ver que tudo isso é desalojado. Está, está parecendo muito bom. Vamos em frente e fundir 78 juntos. E vamos nos livrar de oito. E então queremos que o sete pareça o item número um aqui em cima. E podemos começar a reutilizar as coisas. Porque o item um e o item sete terão exatamente o mesmo layout no sentido que eu quero que o item sete aqui ocupe toda a largura. E o item um vai ocupar toda a largura. Então, podemos muito bem reutilizar este estilo. Temos algo para trabalhar aqui. Temos um cabeçalho aqui em cima, temos um rodapé aqui em baixo, temos um espaçamento perfeito. Temos uma seção de navegação ou talvez uma seção de publicidade. Temos algum conteúdo para o conteúdo superior, talvez como uma seção de resumo e o conteúdo da página. E é assim que você cria um layout de página usando Grid. E assim a grade fica muito mais complexa do que isso também. Mas este é um começo muito, muito bom para aprender a usar o Grid. Agora, quando você estiver criando uma página no futuro, tente usar o Grid como seu módulo de layout de página. Você pode usar flexbox, você não pode tecnicamente usar tabelas e flutuadores, exibir bloco inline-. Você pode fazer todo tipo de coisas, mas tente usar o Grid a partir de agora. Ou, se você não quiser usar a grade, você sempre pode usar o flexbox. Ambos são completamente aceitáveis a partir de agora. Mas o que eu gostaria que você fizesse é que eu quero que você tente criar um layout como este. Agora o que quero que faça é fazer seu cérebro suar. Não faça referência ao meu código, embora tenha acesso a ele. Não faça referência ao meu código. Quero que tente se lembrar de como fazer isso. E se não te lembras, quero que vás praticar no Google como fazer isto. Lembre-se, apenas os termos são o que você precisa saber. Vá em frente e dê uma chance. Se você ficar realmente preso ou quiser se juntar a uma comunidade, você sempre pode se juntar ao grupo de aprendizagem para código do Facebook. Estamos aqui para ajudar. 29. Seu projeto final: Seu projeto final vai ser encontrar um design realmente bom site e replicá-lo tanto quanto possível. Você vai encontrar uma infinidade de obstáculos. Vai ser muito difícil, vai ser muito bom treino. Eu diria apenas faça o melhor que puder e apenas se divirta um pouco com ele. Se você não pode torná-lo perfeito, tudo bem. Então, o que eu gostaria que você fizesse, abra seu navegador favorito, vá para Pinterest.com e apenas digite web design ou web design inspiração, layout web design, qualquer coisa assim. Vamos fazer inspiração no web design. E criar um site bonito. Você conhece todas as peças e não se esqueça de dividir as coisas em componentes menores. Não tente olhar para uma página e eles vão, eu não sei como fazer tudo isso, dividi-la em pequenos componentes. Então, um bom seria como este. E este é um modelo de site do Squarespace aparentemente. Mas o que você pode fazer é agora você sabe como fazer esta navegação aqui em cima. Você sabe como fazer as coisas Centro, você sabe como selecionar o elemento central para o seu logotipo. Você sabe como fazer um herói. Você enchendo Nobel e margem. Então você já tem essa seção coberta. Aqui em baixo. Temos um cartão pequeno. Você já tem essa seção coberta. Então, apenas estilizado. Não precisa ser funcional. Ele não precisa ser um carrossel real e slide e tudo mais. Mas você quer ter certeza de que ele tem como uma cor de fundo que os layouts agradável. Você pode tentar adicionar e setas e coisas assim. Esta seção aqui também usa uma grade. Este é um candidato muito bom para grade, e então você só usa imagens de fundo. Então você pode ir em frente e começar com algo assim. Se você não quer fazer aquele site em particular, tudo bem. Você não precisa encontrar esse também. Você pode ir e, você sabe, se você está se sentindo muito picante, você pode tentar fazer algo assim com todos os ângulos. Você pode usar. Transformar para distorcer as coisas, para girar, coisas para usar como esta seção aqui seria realmente um quadrado e, em seguida, ele seria apenas girado um pouco e para que ele se encontra bem no meio. Sim. Dê uma chance a isso. Não se esqueça de quebrar coisas como esta pode ser flexbox. Isso seria flexbox, não necessariamente grade, mas flexbox. E este temos apenas uma margem superior de um extra como 50 pixels. Então, o que eu gostaria que você fizesse é ir em frente e dar uma chance a isso e apenas tentar quebrá-lo pedaço por pedaço. Não tente enfrentar tudo de uma vez. Talvez esta noite você tentou fazer como a navegação e amanhã você tentou fazer com a seção de heróis e no dia seguinte você tenta fazer a próxima seção. Leve o seu tempo com ele, divirta-se um pouco com ele, e realmente tente entrar no nitty-gridty do CSS. Tudo o que você aprendeu neste curso é aplicável a esses estilos de designs. Estes desenhos são bastante selvagens, na verdade. E para ser totalmente honesto, este é um design muito, muito avançado. Então, talvez, você sabe, se você não está se sentindo confortável, não comece com isso. Mas você pode começar com algo assim. Esta é muito boa. Tem a sua navegação, tem um cabeçalho , tem um botão lá dentro. Tem tamanhos de fonte diferentes, tipos de fonte diferentes. Você tem estilos diferentes aqui. Então isso pode ser flexbox também, ou flutuante ou posição relativa ou posição absoluta. Você pode tentar qualquer coisa assim. Eu diria que experimente um destes. Se você quiser começar com algo mais fácil, eu diria ir para o homem foguete, não aprender wag tilde.com e apenas tentar recriar este site. A página da justiça, nem todas, nem todas as páginas aqui, só esta página. Então você tem navegação aqui. É agradável e simples. Você tem imagem de fundo, gradiente em cima. Você tem um botão, e você tem textos diferentes, você tem fontes diferentes, então fontes web personalizadas. E aqui temos flexbox, temos duas cartas lado a lado. Aqui nós teríamos duas cartas lado a lado, mas esta está usando posição relativa e posição absoluta para tipo de colidir com ele em apenas um pouco. Então é colocado em camadas no topo usando um índice Zed. A mesma coisa com isso, exatamente o caminho oposto em vez de mover para a esquerda e o segundo está se movendo para a direita. E aqui podemos usar Grid ou Flexbox. Eu sugiro flexbox para este. E então você pode usar o Grid aqui embaixo. Vá em frente e dê uma chance. Eu sei que é muito para assimilar, mas honestamente e não posso enfatizar isso o suficiente. Comece pequeno, comece apenas com a navegação. Comece apenas com o cabeçalho. Leve o tempo que quiser. Google muito, fazer um monte de perguntas. Estou aqui por você. Aprendendo a codificar o Facebook, uma comunidade. Estão todos aqui por você. Vá em frente e dê uma chance e sinta-se livre para compartilhar seu progresso ao longo do caminho. Oh, e uma última coisa, porque você está em compartilhamento de habilidades, você tem sua seção de projeto de compartilhamento de habilidades. Então, se você entrar em seus projetos e clicar no botão verde que diz Criar novo projeto. Acho que é o que diz. Você pode compartilhar seu projeto para compartilhar capturas de tela e compartilhar seu código, como você pode fazer todo tipo de coisas lá. Então, certifique-se de compartilhá-lo lá. Mas acima de tudo, o mais importante, divirta-se com isso. 30. Resumo: Tudo bem, você terminou CSS 201. Este é CSS intermediário e, na verdade, este é intermediário para um pouco avançado CSS para ser completamente honesto. Mas, você sabe, ótimo trabalho completando todo esse curso. Este é um monte de conteúdo para absorver. Espero que tenha aprendido algo divertido. Espero que tenha alguma experiência. Espero que tenhas andado a programar comigo durante as aulas. Mas vamos falar sobre seus próximos passos. Seus próximos passos serão a criação de um site bonito usando CSS e HTML. Eu quero que você tente desafiar a si mesmo e fazer um site olhar tão bonito quanto você puder. Sinta-se livre para se inspirar em lugares como o Pinterest também. Porque, honestamente, essa é a razão pela qual o CSS existe. Css puramente para fazer o seu site olhar bonito. Agora, uma vez que você é feito com CSS, você pode ir e aprender JavaScript, mas por favor não aprender JavaScript até que você esteja bastante familiarizado e muito feliz com suas habilidades CSS. Javascript é um jogo muito diferente para jogar. Mas uma vez que você está pronto para JavaScript, eu tenho vários cursos sobre JavaScript também. Por isso, basta verificar o meu perfil nesta plataforma para todos os meus cursos diferentes. E por último, se você precisar ou se você gostaria de qualquer suporte extra, por favor, venha se juntar ao grupo de aprendizagem para código Facebook onde você pode fazer perguntas sobre qualquer coisa CSS relacionado. Por último, mas não menos importante, gostaria de agradecer por fazer o meu curso CSS. Sei que há outros cursos por aí e agradeço que tenha feito o meu curso. Mais uma vez, meu nome é Caleb Colleen, e eu tenho sido orgulhosamente seu instrutor CSS garganta em 201, e espero vê-lo em outro dos meus cursos. Divirta-se programando e te vejo por aí.