Aprenda CSS para design de web responsivo moderno criar sites a partir do zero HTML5 CSS3

1. Introdução 0 CSS: Ei lá, bem-vindo ao guia QuickStart para aplicar CSS. Estilizando suas páginas da Web para iniciantes. Meu nome é Lawrence. Serei seu instrutor para este curso. Eu venho com muitos anos de experiência em desenvolvimento web. Gostei muito de trabalhar com CSS porque ele realmente lhe dá a oportunidade de projetar e dar vida às suas páginas da Web. Vamos cobrir toda a sintaxe comum do CSS. Como adicionar CSS e criar uma folha de estilos em sua página HTML, selecionando elementos de página e, em seguida, aplicando diferentes propriedades de estilo a esses elementos de página. Definir planos de fundo de cores, imagens de fundo, qual é o modelo de caixa, configurar as diferentes margens, preenchimento, bordas para os elementos da página que você selecionou, como você pode atualizar o texto e estilos lutados, incluindo diferentes famílias fontes usando o Google Fonts e importando fontes de sites externos usando a propriedade de exibição e como você pode exibir os elementos da página, elementos página posicionados, flutuando os elementos da página, trabalhos de pseudo-classes e pseudoelementos, e como você pode aplicá-los dentro do seu design. Também abordaremos como você pode criar modelos básicos de sites usando flutuadores CSS, CSS Flexbox e grade CSS. Então, todas as técnicas modernas que você precisa saber para criar sites do zero. Tudo isso está chegando nas próximas lições. Há também um guia de recursos para download que incluirá o código-fonte, bem como Links úteis, dicas e recursos para ajudá-lo enquanto você passa pelas lições do curso. Uma das melhores maneiras de aprender é experimentar o código por si mesmo. Não tenha medo de dar uma chance. Experimente em seu próprio editor e veja o que acontece. Sei que está animado para começar. Vamos começar a usar o CSS na próxima lição. 2. Adicionando CSS à página: Ele aborda como adicionar estilo CSS à sua página HTML. Além disso, como você pode selecionar elementos e aplicar alguns valores de propriedades simples a esses elementos para que eles sejam renderizados dentro da página da Web. Css não é uma linguagem de programação como JavaScript e não é uma linguagem de marcação como HTML. Css é uma linguagem de folha de estilo e o objetivo do CSS é pegar uma página estruturada HTML simples, selecionar os elementos da página e aplicar estilo aos elementos. Tenho uma página HTML básica e vamos adicionar algum estilo aos elementos da página. Existem várias maneiras diferentes de adicionar estilo à página, para que você possa adicionar estilo à página, adicioná-lo diretamente nas tags de estilo. Selecione o elemento com uma tag de cabeçalho. Eu especificaria o elemento primeiro. Portanto, esta é a seleção do elemento ao qual queríamos aplicar o estilo. Em seguida, aplique as propriedades de estilo que queríamos definir a cor do texto dentro do elemento de cabeçalho, especificaríamos cor para vermelho. Então nós satisfazemos um valor, que será um valor de vermelho. Então, o que isso fez é que texto transformado dentro do cabeçalho o tornou vermelho. estilo também pode ser aplicado diretamente dentro do elemento, dentro do atributo style, especificando o atributo style. E aqui vamos definir um plano de fundo. Cor. As propriedades de estilo serão as mesmas e, em seguida, apenas atribuímos um valor a ela. Então, vou atribuir um valor de preto às propriedades de estilo. Portanto, estamos definindo para esse elemento a propriedade de estilo da cor de fundo preto. O que isso faz é que transforma a cor de fundo em preto. Quais são as principais desvantagens de colocá-lo em seu HTML é que é difícil de encontrar, difícil de atualizar e você precisa passar pelos elementos. E o que acontece é quando você o define como um atributo de estilo, então isso realmente vai substituir as outras propriedades de estilo porque isso chegará à parte mais próxima do o elemento como ele está diretamente dentro do atributo. Então, se atualizássemos isso para preto, o que acontece é que ele realmente vai substituir o cabeçalho de estilo sempre que mudarmos isso para, não importa porque estamos adicionando outra propriedade de estilo ao isso. Para adicioná-lo diretamente nos elementos da página, você deve evitar adicioná-lo como um atributo de estilo diretamente dentro do elemento de página e fazer uma seleção com ele, usando dentro das tags de estilo ou dentro da folha de estilos, que são as melhores práticas como quando você a está adicionando com a folha de estilos. Há muitas vantagens facilitar a atualização, compartilhar o mesmo estilo em várias páginas HTML e qual folha de estilos, um arquivo separado que irá conter o estilo para a página HTML. E este é um arquivo que é vinculado a partir do texto HTML. Configuramos uma tag de link e, em seguida, usamos a HRF, vinculando-a ao local onde a folha de estilos está localizada. E, em seguida, usar o atributo REL para ajudar será uma folha de estilos. Vamos em frente e vamos criar um novo arquivo. Vou mantê-lo dentro do mesmo diretório. E é aí que vamos aplicar as folhas de estilo e as propriedades de estilo aos elementos da página do arquivo HTML. Eu o salvei como estilo CSS. E, em seguida, vamos vincular a esse CSS o mesmo cabeçalho. E então vamos aplicar uma cor a esse cabeçalho. Então, vamos atualizar isso e definir a cor para o texto a ser lido. Então, agora que selecionamos o elemento aplicado usando a folha de estilos, atualizando o elemento de página com uma tag de cabeçalho. E isso está mudando para vermelho porque vamos trabalhar fora da folha de estilos. E este será o arquivo separado que conterá todo o CSS. Se criássemos um segundo arquivo HTML, poderemos vincular à mesma folha de estilos. Se criarmos um segundo chamado índice dois, e passarmos para a segunda página. Vou fazer uma atualização para que um diga dois e o original ainda diga um. Agora, se quisermos selecionar e atualizar o cabeçalho em ambas as páginas, tudo o que precisamos fazer é atualizar a folha de estilo à qual ambas serão vinculadas. E agora isso vai aplicar a cor azul a ambos os cabeçalhos em ambas as páginas porque ambos estão vinculando à mesma folha de estilos. Esse é o benefício de usar uma folha de estilos separada para fazer atualizações no estilo que você pode facilmente vincular a ela e fazer atualizações nela, o que vai passar por todos os arquivos que todos os arquivos HTML que estão vinculando a esse arquivo CSS específico. O CSS começa configurando um seletor. Portanto, esse será o elemento e o elemento ao qual você deseja aplicar essa regra específica definida. Isso também pode se aplicar a vários elementos para que o mesmo. Portanto, se estivermos selecionando todos os elementos que são itens de lista, isso o aplicará a todos os itens da lista. Quando selecionamos o item da lista, vemos que os marcadores agora estão todos azuis em todos os itens da lista. Você também pode aplicá-lo a todas as tags âncora. E agora isso está atualizando o texto em ambos os arquivos para ficar azul para as tags âncora. E esse é o seletor. A seleção processa o que é conhecido como seletor. E depois de fazer a seleção, a próxima é selecionar a propriedade que deseja usar. Nesse caso, estamos usando a propriedade de cor e estamos definindo o valor da propriedade como azul. Portanto, alterar o valor da propriedade aplicará um valor diferente a essa propriedade de cor. E ambos juntos serão o que é conhecido como Declaração. Estamos declarando a propriedade color a ser definida como vermelha dentro das marcas âncora selecionadas no arquivo HTML da página da Web, você pode adicionar vários valores de propriedade ao conjunto de regras dentro da seleção, dentro dos suportes encaracolados. Apenas adicionando uma segunda linha, vou definir a cor de fundo e atualizarei a cor de fundo delas para ser preta. Ele será aplicado a todos os elementos correspondentes que estão combinando com essa seleção, onde estamos usando os ponto-e-vírgula para fazer uma separação dessas diferentes declarações. Mesmo se não tivéssemos linhas separadas, isso ainda funcionará desde tenhamos o ponto e vírgula que está separando esses valores de propriedade para separá-los. Portanto, é mais legível dentro do arquivo CSS, onde estamos configurando para uma nova linha, a propriedade CSS, nome e valor separados pelos dois pontos. Então vá em frente e crie um arquivo HTML. Você pode adicionar vários elementos HTML. Aplique estilo, crie um novo arquivo CSS, selecione alguns elementos na página e aplique algum estilo a esses elementos e você se prepara para passar para a próxima lição. 3. CSS 2 de elementos: Seria explorar como podemos fazer a seleção. Portanto, a seleção é fundamental para escolher o elemento de página ao qual você deseja aplicar o estilo. Você pode usar as tags, as classes do ID. Você também pode fazer uma combinação em que você tem as extremidades dos elementos especificando o seletor de classe. Há também um curinga, então isso é aplicado a todos os elementos da página. Você também pode agrupar o processo de seleção selecionando vários elementos de página, vários seletores e vírgulas separando os seletores. Para aplicar o estilo, você precisa fazer uma seleção dos elementos. Temos vários elementos de página diferentes na página e faremos seleções desses elementos. Então, primeiro, você pode selecioná-lo usando a tag. Portanto, seja a div, o cabeçalho, o nav, a lista não ordenada ou o item da lista. Podemos selecioná-lo usando a tag, e isso selecionará todos os elementos da página que correspondem a essa seleção. Então, por exemplo, se quisermos selecionar o nav, vamos prosseguir e trabalhar para fazer uma seleção e , em seguida, aplicar as propriedades a isso. Vou atualizar a propriedade de cor de fundo do, dos elementos de página que têm um nav. E vamos definir o plano de fundo como amarelo. Dentro da área visual da página da web, página HTML, podemos ver que o plano de fundo fica amarelo para o nav. Vamos selecionar os itens da lista e também aplicaremos uma cor de fundo aos itens da lista. Vou selecioná-lo e configurá-lo para um fundo azul. O que podemos ver aconteceu aqui é que o botão que é o pai da lista não ordenada e, assim como os itens da lista, obtém um plano de fundo amarelo. Mas porque aplicamos o plano de fundo especificamente aos itens da lista que estão aninhados no pai. Vemos que temos um fundo azul sendo aplicado a esses elementos. Você também pode selecionar elementos usando suas IDs. Então, vamos em frente e vamos adicionar um ID. Temos várias divs na página. E essa é outra maneira que podemos distinguir o bloco de código que queremos aplicar estilo para querer um ID de um. Assim, podemos selecionar esse elemento usando o hash e especificar o nome do ID. E vou aplicar uma cor de fundo a esta também. E vamos definir este para ser vermelho. Vemos que essa div em particular agora tem a propriedade de cor de fundo ser lida, sendo aplicada a ela. Se selecionássemos todos os divs e aplicássemos uma cor de fundo do Bij a todos os divs. O que tem a seleção do elemento com o ID de um ainda é vermelho. Se movermos essa propriedade abaixo, veremos que ela ainda está vermelha porque somos mais específicos no IED e aplicando a cor de fundo do vermelho. E se nós removêssemos esta div também está obtendo uma cor de fundo de bege sendo aplicada a ela. Outra maneira de fazer uma seleção é usar a classe. Temos uma div com uma classe de invólucro. Se quisermos selecionar esse elemento com uma classe de invólucro e definir uma cor de fundo para esse elemento. E este será o pai de todos os elementos. Selecione isso e defina-o para ser roxo. Então, agora todos os elementos vão ter uma cor de fundo de roxo. Aqueles que estão aninhados dentro do invólucro terão uma cor de fundo de estilo diferente está sendo aplicada a eles. E isso resultará nesse tipo de efeito em que temos o pai obtendo a cor original, os filhos dentro, também definindo cores diferentes para eles. E isso está afetando a forma como ela está sendo produzida. Você só deve ter um elemento com um ID específico. Portanto, essa é uma maneira única de fazer uma seleção do elemento da página. Quando você estiver selecionando com classes ou tags, existe a possibilidade de que haja mais de um elemento que será representado. Se você quiser ser realmente específico com o elemento de página, você pode selecioná-lo usando suas propriedades. E temos uma lista não ordenada com os itens da lista, e todos eles têm tags âncora dentro. Então, se quisermos focar e listar o item, darei a ele uma classe de destaque, e também darei ao segundo uma classe de destaque. Queremos selecionar todos os itens da lista adicionando a classe de destaque nos permite fazer a seleção dos elementos que podemos fazer quando estamos selecionando os itens da lista, juntando-os com uma classe de destaque. Defina a cor de fundo para eles, defina a cor de fundo como verde. Agora selecionamos esses elementos de página e aplicamos a uma cor de fundo verde para eles. Portanto, esses são os itens da lista com a classe de destaque nos estilizam para 0 em esses elementos e aplicam o estilo a ele. Também podemos selecionar usando o curinga. E isso vai ser algo que pode aplicado a todos os elementos da página. Se quisermos definir uma cor de rosa para o texto, o curinga seleciona todos os elementos da página. Além disso, podemos agrupar seleções juntas separando vírgulas. Então, vamos em frente e vamos voltar e adicionar vários IDs diferentes, e adicionaremos mais um elemento com um ID de três. E se quisermos selecionar todos esses elementos correspondentes na página, podemos separar vírgulas. Então, selecionando o elemento com um ID de um, ID de dois, ID de três. E também vamos selecionar o elemento com uma classe de destaque. Todos os elementos correspondentes obterão essa propriedade aplicada a ela. É assim que você pode agrupar a seleção, elementos selecionados com um ID de 123 e também os elementos com uma classe de destaque e aplicar uma cor de vermelho a esses elementos. alma dos correspondentes agora tem uma cor de vermelho. O resto deles é rosa. E eu realmente atualizarei isso para ser branco porque temos cores de fundo para todas elas. E é assim que você pode agrupar o processo de seleção, selecionar vários elementos de página e aplicar as propriedades a todos eles. Então vá em frente e tente criar seu HTML e faça uma seleção usando as tags, os IDs e as classes. E você pode estar pronto para passar para a próxima lição. 4. 3 Configurando cores e fundos de fundo com CSS com CSS: Esta lição é sobre cores e as diferentes unidades de cores que podemos adicionar ao plano de fundo. E esse é o plano de fundo do elemento de página que selecionamos, bem como a cor que afetará a cor do texto do elemento de página selecionado. E então, como você pode adicionar imagens ao plano de fundo, a abreviação para as imagens e, em seguida, os diferentes tipos de valores de cor que podemos usar, como o RGB, o valor hexadecimal, o RGBA, ou apenas os valores nomeados para as cores. Tudo isso está chegando nesta lição. Vamos seguir em frente e fazer uma seleção de alguns dos elementos da página. Então, selecionaremos o elemento com a tag do artigo dentro da seleção e, em seguida, aplicaremos algumas propriedades a esse elemento. Então, selecionando aquele elemento que vamos aplicar uma cor de fundo para definir uma cor de fundo, usamos a cor de fundo da propriedade. Então, a partir daí, podemos selecionar as várias cores. As cores podem ser adicionadas usando os nomes de cores e a maioria dos nomes de cores típicos. Então, apenas sendo listado dentro do editor. E esses são os nomes de cores comumente usados e você pode especificar o plano de fundo usando o nome da cor. Vamos selecionar outra página, elementos e selecionaremos o elemento com o ID de três. E há muitas opções diferentes para definir os valores de cor. Você pode usar os valores RGB, então esses são os valores vermelho, verde e azul. Isso é feito indicando o RGB. Em seguida, os parênteses, definindo um valor de 0 a 2550 sendo o lado 0 representaria a quantidade da cor que queremos aplicar. Portanto, 0 é o mais baixo. Se quiser aplicar o máximo possível ao RGB vermelho, nós o definiríamos para 255, que é o máximo. Vamos definir 0 verde e 0 azul para o elemento com o plano de fundo, com o ID de três. Isso resulta em uma cor vermelha como o elemento com um ID de um. E faça uma cor de fundo, use um valor de cor hexadecimal. Portanto, os valores hexadecimais são valores de seis caracteres dentro de um formato hexadecimal, indicados com o hash para indicar o valor hexadecimal que vamos usar. Semelhante ao que vimos com o RGB. Os dois primeiros caracteres representarão a quantidade de vermelho. Então, começar com um valor de 0 é 0, o que seria o mais baixo. E terminando em um valor de ff, que seria o valor mais alto para o hexadecimal. Faremos o mesmo que responderemos 0 verde e 0 azul à cor de fundo, o que também resultará na cor de fundo vermelha. Há também uma opção para um RGBA. Rgba nos permite definir uma cor transparente. Criei outro elemento com o ID de quatro. E selecionaremos isso, aplicaremos a cor de fundo ao elemento com o ID de quatro. E desta vez, em vez do RGB, usará o RGBA. E isso será indicado com o RGBA. E o último valor dentro dos parênteses do RGBA indicará a quantidade de transparência que vamos aplicar a ele. Então 0 estaria aplicando 0 dessa cor, o elemento. Vemos que esse é o elemento com o ID de quatro. Portanto, não há cor que visivelmente vemos que esteja sendo aplicada a ela. Podemos percorrer todo o caminho de 0 a um. Se fizermos um 0.5, isso é 50% do conteúdo que está sendo aplicado ao alfa do bloco de cores. E é aí que obtemos esse tom mais claro de vermelho. E isso, na verdade, vai ser transparente em 50%. Então, se tivéssemos um elemento ou conteúdo por baixo, teríamos esse valor sendo mostrado. Se definirmos uma cor de fundo para o corpo, e eu definirei a cor de fundo como azul. Os resultados do RGBA resultarão em uma cor roxa porque está sombreando 50% da cor usando o fundo, que é azul, e usando 50% da cor RGB, que é vermelho. E isso vai resultar em um tom roxo. Se você atualizar o RGB a21, isso não será transparência, e esse será o valor total da cor. E é aí que estamos recebendo um valor de vermelho sendo aplicado a ele. Então, quando você estiver usando o RGBA, o que está por baixo e as cores embaixo serão, importará sobre quais são importará sobre as cores que estão sendo usadas. Há também onde podemos definir a cor da fonte. Então, vamos selecionar a cor da fonte usando a propriedade color. Para isso, também podemos aplicar um valor de cor a ele. Isso pode ser os valores de cor nomeados, RGB, RGBA, uma adição aos valores hexadecimais para as cores. Há também uma propriedade que você pode usar para adicionar opacidade ao elemento de página. Muito parecido com o que vimos com o RGBA, onde tudo isso está dentro da declaração única e define um valor para isso. E se definirmos o valor de opacidade para o elemento, o que aconteceu é que obtivemos a opacidade, mas isso foi aplicado tanto à fonte quanto à cor de fundo. Então é aí que a fonte vai estar. Um pouco azul porque a fonte também está obtendo essa opacidade 0,5 aplicada a ela, pois o plano de fundo tem o OPC 0,5 aplicado a ela. Isso agora vai combinar com o que temos com o RGBA. Assim, você pode usar a opacidade para aplicar opacidade ao plano de fundo. Para planos de fundo, você também pode adicionar e usar imagens. E então precisamos especificar que o URL da imagem dentro dos parênteses tem uma imagem localizada diretamente na mesma pasta. E essa imagem será chamada de JPEG local de um ponto. E quando aplicamos a imagem de fundo, vemos que o que aconteceu é que agora o fundo do corpo tem a imagem contida dentro dela. Isso porque a imagem vai ser menor, então o que temos para cobrir todo o plano de fundo. É aí que obtemos esse efeito, onde temos a repetição na vertical e na horizontal. Se você definir uma imagem que será transparente. Portanto, esta é uma versão transparente da imagem. Vemos que agora temos o plano de fundo está mostrando porque a imagem está sendo colocada em cima e ainda temos a cor de fundo do azul mostrando abaixo dela. Então, se fizéssemos atualizações na cor de fundo, configurá-la para uma cor acinzentada que resultará no plano de fundo ainda está sendo exibido. Mas como estamos usando um arquivo PNG, isso vai ser transparente e podemos ver através da imagem para o plano de fundo. Você também pode controlar o plano de fundo para a repetição da imagem de fundo se você não quiser uma repetição ou uma sensação de que deseja repetir na horizontal ou na vertical. Vamos reduzir nossa visão para 100. E dessa forma podemos ver a repetição dentro da área de exibição. Usando a repetição em segundo plano, temos a oportunidade de definir como queremos que ela se repita. Assim, podemos configurá-lo para repetir x. E o que isso fará é repetir no eixo x. Se o definirmos para repetir o porquê? Isso vai repetir isso apenas no eixo y. Então, só você tem a única imagem e isso está sendo repetido todo o caminho dentro do elemento da página. Há várias outras opções para a repetição, de modo que, como repetição e isso será o padrão, onde estamos configurando e ela está se repetindo como cruzar a página inteira. Não, repita. Portanto, isso não vai repetir tanto na vertical quanto no eixo x, na horizontal ou no x. Então, ele só mostrará a imagem. Então, digamos que você possa controlar como a imagem está sendo repetida em segundo plano. Se você estiver usando apenas um, você também pode definir uma posição de fundo. E a posição de fundo é uma propriedade usada para especificar a posição de onde a imagem de fundo será definida. Assim, podemos posicionar isso da esquerda. Também podemos fazer para a esquerda, para baixo. Há também a direita e a parte superior. Isso vai ser posicionado na parte inferior esquerda. Isso vai movê-lo para a parte inferior direita e depois há a parte superior direita. E porque não temos muito conteúdo lá dentro e o topo será o mesmo se aumentarmos. E se movermos isso para baixo, que seremos capazes de ver o posicionamento real da parte inferior. Então, agora ele está posicionado na parte inferior da página. Então, ele define a posição inicial de onde estamos configurando essa imagem. Há também um valor de anexo. Então, se o configurarmos na parte superior da página, o anexo de fundo e o que isso fará é definir a propriedade que especificará se a imagem deve rolar ou ser fixo. Então esse é o anexo e há uma posição fixa ou de rolagem. Então, no fixo, vai fazer é consertá-lo no lugar. Então, mesmo se estivermos rolando, ela manterá a imagem de fundo no mesmo local. Portanto, não vai rolar onde estamos rolando com o conteúdo da página. Se definirmos como Scroll, que é a outra opção. Agora, à medida que rolamos, a imagem se moverá à medida que tivermos menos espaço na página. E se eu fosse torná-lo ainda menor, veria que, à medida que estamos rolando para baixo, essa imagem se move com a barra de rolagem. Há também um formato abreviado para tudo isso, quando podemos definir tudo isso individualmente, mas também podemos definir isso como um grupo. E o que vou fazer é comentar as propriedades aqui, removendo-as. E você pode fazer comentários em folhas de estilo usando os golpes do SO com barra direta. E então, quando você tiver concluído o comentário, basta fazer os asteriscos e a barra para frente e isso entrará e sairá dos comentários. Então, vamos voltar aos planos de fundo. E vamos definir tudo isso dentro do formato abreviado, configurando a cor, a imagem, a repetição, o anexo e a posição. Tudo isso é feito dentro da propriedade one background. Você também pode usar apenas o plano de fundo e definir uma cor de fundo. Isso também funcionará. Você não precisa adicionar todos os outros valores de propriedade. Se você quiser apenas uma cor de fundo, você pode usar a abreviação em vez de escrever a cor de fundo. A partir daqui, você pode adicionar valores adicionais nessa propriedade. Você pode definir o URL da mesma forma que fizemos com a imagem de fundo. Há a imagem sendo definida. A próxima opção é a repetição. Então, se não quisermos que ele se repita, podemos especificar nenhuma repetição sobre ele. O mesmo que essas três linhas de código. Também podemos definir a posição superior direita, definir a rolagem e, por padrão, ela será Scroll. Então, vamos definir isso para ser corrigido. Então, estamos corrigindo-o na parte superior direita, onde rolando para baixo, essa imagem agora está fixada na posição superior direita da página, não se movendo com a rolagem, que é a ação padrão. E este é apenas um método abreviado que você pode usar para definir todas essas propriedades e valores dentro de uma linha. Então vá em frente e experimente. Atualize as cores da fonte, bem como as cores de fundo dos elementos da página. Experimente o RGB, o hexadecimal, bem como o RGBA e, em seguida, defina uma imagem para o plano de fundo e você estará pronto para passar para a próxima lição. 5. 4 caixas modelo de borda: Então, vamos apenas cobrir os modelos da caixa como partes diferentes, sendo a borda, o preenchimento, a margem, a largura e a altura dos elementos. Assim, as dimensões do elemento para o conteúdo, e como podemos ver no lado direito dentro do navegador, elas têm uma representação computada do modelo de caixa, bem como o visual dentro da página da Web na parte superior, faremos ajustes no preenchimento, na borda, na margem e nas dimensões do conteúdo. Então, digamos que vamos nos concentrar no modelo de caixa. Portanto, o modelo de caixa é um termo usado quando estamos falando sobre o design e o layout dos elementos da página. Então, cada elemento na página, ele terá uma representação do conteúdo. Então, a altura e a largura do conteúdo, o preenchimento desse conteúdo, Há uma borda que vai envolver em torno dele. E então a margem estará do lado de fora. E isso representará todos esses elementos, partes diferentes que continuarão dentro do modelo de caixa. Se você estiver usando um navegador Chrome, poderá selecionar um elemento, fazer uma inspeção. E, em seguida, dentro do Inspecionar, se você rolar para baixo até onde temos os estilos e os estilos computados, ele lhe dará uma representação do modelo de caixa desse elemento específico. Portanto, temos a margem, a borda do preenchimento e a largura padrão e a altura. Portanto, há margens adicionais que são adicionadas por causa do conteúdo do bloco. Vamos dar uma olhada e faremos alguns ajustes. Primeiro, selecionamos o elemento de página que queremos aplicar o estilo também. E esse será o elemento com um ID de dois. E definiremos uma borda para que possamos ver os limites com o conteúdo interno. A borda pode ser definida usando a largura da borda. Há também uma cor de borda que precisamos classificar. E, em seguida, a propriedade de estilo de borda. Isso também pode ser feito como uma abreviação para isso depois que nos permite aplicar a borda ao redor do elemento da página. Agora, dentro do modelo de caixa, temos uma borda de um. Vou fazer isso um pouco menor, então nós o ampliamos bastante grande. Então, vou torná-lo menor para que fique mais fácil vê-lo dentro da tela. E então, dessa forma, também podemos ver o modelo de caixa associado a ele. Existe uma maneira de escrever isso como abreviação. Vou pagar o slash e comentar isso e você pode simplesmente fazê-lo como uma fronteira. Então, mais comumente, você verá isso escrito como fronteira porque sem tudo isso, você não verá nada para o passageiro. Defina a largura da borda e defina o estilo da borda e a cor da borda. Isso nos permitirá aplicar isso. Podemos atualizar esses valores. Então, se fizermos cinco escolhas para a borda, isso também será atualizado dentro do modelo de caixa. E percebemos que dentro do próprio elemento, dentro da borda, o preenchimento está contido lá. Então, vamos adicionar algum preenchimento a esse elemento de página. Você pode definir o preenchimento como vimos antes, onde podemos fazer um topo de preenchimento e definir várias unidades que queremos fazer a trama. Você também pode fazer preenchimento inferior, e isso está aplicando os diferentes paddings a ele. Há também o preenchimento para a esquerda e para a direita. Defina o preenchimento para a esquerda para 15 escolhas e defina o preenchimento. Ótimo. Então, isso é fornecido o preenchimento. O preenchimento está no interior da borda e fora da área de conteúdo para o próprio conteúdo. Vamos definir uma largura de 200 PECS, e definiremos uma altura de 200 picks que alterarão as dimensões do contêiner principal. E, na verdade, vou definir isso como 100 para que ainda possamos vê-lo visivelmente na página. Agora isso foi atualizado. Enquanto quando era apenas o estilo padrão para o elemento que estava tomando as propriedades da div. Então, à medida que redimensionamos, ele estava tomando toda a largura da cruz disponível. Agora temos uma altura e largura definidas. Assim como vimos com a fronteira. Podemos definir as propriedades de preenchimento de borda dentro do formato abreviado. Isso vai ser tudo feito dentro de uma linha. Quando estamos configurando o preenchimento, o primeiro conjunto de preenchimento. Se definirmos um preenchimento de cinco pix, isso aplicará cinco escolhas ao redor. Vemos que ele é aplicado na parte superior, na parte inferior, à direita e à esquerda. Se pudermos definir outro valor lá, isso vai definir a parte superior e a parte inferior permanecerá em cinco. E a esquerda e a direita vão receber dez fotos. Portanto, se você tiver dois valores dentro da abreviação para o preenchimento, ele o aplicará na parte superior e inferior primeiro e depois à direita e à esquerda em seguida. Se você adicionar três valores dentro do preenchimento, ele usará um formato de tipo no sentido horário que o primeiro valor é aplicado ao topo. O segundo valor será aplicado à direita. O terceiro valor é aplicado na parte inferior. E porque ainda não há quarto valor, então ele estará aplicando a posição esquerda e direita. Então isso vai aplicar o preenchimento esquerdo e direito da mesma forma. Então, serão dez estofos para ambos. Então, por último, podemos adicionar um quarto valor lá. E isso nos permitirá aplicar o preenchimento no topo, à direita, à esquerda, na parte inferior e, em seguida, no lado esquerdo. E você pode ver isso sendo representado aqui e renderizado dentro do modelo de caixa. Vamos também ver o que podemos fazer com a margem. Assim como vimos com a margem, margem, valor inferior superior, ela seria adicionada ao modelo da caixa. O ocorre dentro da página. E também temos o método abreviado que podemos usar neles. Vamos definir uma cor de fundo para os elementos. Então, definindo uma cor de fundo, vou defini-la como lida. Dessa forma, podemos ver onde estão os limites do elemento da página. Observe que a cor vermelha também estará contida dentro do preenchimento e tudo até a borda. Mas, em seguida, fora da borda para usar a margem, isso não será adicionado ao elemento. Essa cor vermelha não será adicionada a esse elemento. Configurando a margem. E assim como vimos com o preenchimento, e começaremos com as 20 escolhas. Isso adicionará uma margem para a parte superior, inferior e toda a volta. Se fizermos dez escolhas como o próximo valor que será para os valores esquerdo e direito. Então, assim como vimos com o preenchimento, as margens vão funcionar da mesma maneira. Em seguida, adicionarei as outras duas opções. E agora temos preenchimento separado e margens separadas para todos os lados do elemento de página. Normalmente, usamos os métodos abreviados para o preenchimento, para a borda e para a margem. Para aplicar o estilo a esses elementos de página, vá em frente e tente fazer uma seleção de um elemento de página e aplique a atualização dos valores de propriedade do modelo de caixa a esse elemento. E você pode estar pronto para passar para a próxima lição. 6. 5 texto e fontes CSS: Vamos cobrir as várias maneiras pelas quais você pode atualizar a fonte. Isso inclui atualizar a capitalização usando a transformação, atualizar a decoração, sublinhando atualizar a decoração, e removendo o subjacente, adicionando um recuo de sombra, espaçamento entre linhas, altura da linha, atualizando o tamanho da fonte usando o método abreviado para o tamanho da fonte e a família de fontes. Além disso, como você pode selecionar o Google Fonts e trazer essas famílias de fontes sua página da Web usando a altura da linha para centralizar o conteúdo verticalmente, bem como usar o alinhamento e alinhamento de texto a esquerda, para a direita ou para o centro. E todas as propriedades de fonte comumente usadas que você encontraria com CSS estão aparecendo nesta lição. Vamos entrar em nosso HTML. Selecionaremos o elemento com um ID de dois e, em seguida, adicionaremos uma borda ao redor dele e aplicaremos algumas atualizações às propriedades e ao estilo disso. Defina a borda. E vou definir uma escolha, uma borda de seleção e fazer uma borda vermelha ao redor dela para que possamos ver a página, o conteúdo na página, aumentar o zoom para que fique um pouco maior. Vamos fazer algumas atualizações no texto. Sabendo com o texto, podemos definir uma cor. A cor é definida usando o valor da cor, e isso pode atualizar a cor do texto. Há também outras propriedades para textos, como o alinhamento do texto. E isso nos permite centralizar, justificar esquerda, direita. Portanto, há várias opções diferentes. Se definirmos para a direita, o que acontece com o texto é que ele se alinha à direita. E, por padrão, está alinhado à esquerda. Você também pode centralizar o texto e isso centralizará o conteúdo do texto dentro dele. Também vou adicionar algumas margens. Portanto, não está exatamente diretamente na fronteira. E vou torná-lo um pouco maior. Então, faça um preenchimento do elemento de página. Também podemos adicionar algumas margens, se necessário, que podem destacar um pouco melhor onde estamos vendo onde está alinhando. Observe que o alinhamento está ocorrendo até o final de onde o preenchimento está. Se fôssemos configurá-lo como à esquerda, ainda temos o preenchimento no lado esquerdo. Traga de volta ao centro e salve isso. Há também uma justificativa. O que eles justificam que ele vai fazer é espalhar isso de forma mais igual. Então, parecerá que o conteúdo do texto está espalhado igualmente da esquerda para a direita. Nesse caso, como a segunda parte da frase termina, ela não é capaz de ajustar o texto para a largura igual para a esquerda e para a direita e as margens. Mas se formos adicionar texto adicional a ele, vou apenas duplicar o conteúdo do texto que justifica agora está tentando espalhar igualmente o conteúdo entre a decoração do texto do lado esquerdo e direito. E há várias opções para isso. Portanto, há um subjacente, há uma sobreposição, um sólido nenhum é o padrão diz que não há decoração no texto. Embora, se você estiver usando uma etiqueta âncora por padrão, há decorações nelas. Vamos fazer o sublinhado para o conteúdo do texto. Em seguida, selecionaremos o texto âncora e faremos a decoração do texto. Se você quiser remover a decoração de texto padrão da âncora. E você poderia defini-los para nenhum. E isso removerá essas decorações de texto padrão através da qual você pode fazer isso. Faremos a linha através do texto selecionado. Há uma opção sobreposta que colocará o, se o subjacente ele o sobrecarregar. Portanto, coloque a linha sobre o texto, pode transformar o texto usando a opção de transformação de texto. Se você quiser capitalizar os textos que provavelmente já estão em maiúsculas, você pode converter tudo em letras minúsculas. Você também pode converter tudo em maiúsculas. Selecione as tags âncora e atualize todas elas para que sejam texto maiúsculas que serão em maiúsculas. Vou selecionar o conteúdo do cabeçalho. E vamos capitalizar o elemento de cabeçalho, selecionando a transformação de texto e, em seguida, capitalizaremos e atualizaremos isso para ser minúsculo. E então a tela vai mostrá-la como textos em maiúsculas. Como você pode fazer uma sombra de texto e isso fornece um efeito de sombra. Precisa especificar onde você está posicionando a sombra. Então, configurá-lo como quatro fotos para Pix e depois quatro picos abaixo. Então isso nos dá o efeito de sombra. E então o verde é a cor da sombra e o recuo do texto. E, em seguida, especificando o quanto você deseja recuar o texto, que recuará o texto. Começando o que é o primeiro personagem. Dentro da seleção, o espaçamento entre letras pode ser usado para identificar o espaço entre as letras. Então essa é a propriedade de espaçamento entre letras. E isso está esperando um valor unitário. Configurar o espaçamento entre letras de dez escolhas espaciará as letras usando os valores lá para os dez picos entre as letras. E também selecione a altura da linha. E a altura da linha define a altura dessa linha de conteúdo específica. Bata. Por padrão, ele é definido como qualquer que seja o tamanho da fonte. Assim, você pode configurá-lo para uma altura de linha diferente que espaçará ainda mais o espaçamento. Você pode definir um tamanho de fonte e o tamanho da fonte pode ser um incremento ou pode ser definido como um valor, seja as escolhas, pontos, EMs. Então, qualquer uma das unidades que você pode usar, vou usar as fotos e defini-las como 20 escolhas, que tornará o tamanho da fonte maior. E se você não tiver a altura da linha, a altura da linha padrão será definida para as 20 escolhas. Use também a altura da linha para centralizar verticalmente. Então, se você tiver apenas uma frase dentro do invólucro, temos o cabeçalho, a div. Então, vamos fazer uma seleção de elementos. Então, cabeçalho div, configure uma altura para esse elemento e isso será definido para 100 escolhas centralizar o texto na horizontal muito em uma borda. E se definirmos a altura da linha para 100 escolhas, agora isso agora centralizará verticalmente o texto dentro do elemento. Você também pode definir a fonte a ser usada. Assim, isso pode ser definido usando a família de fontes e isso atualizará a fonte. Essas são as fontes padrão que estão aparecendo no editor. Assim, você pode selecionar entre eles, e essas são fontes padrão. Você também pode obter fontes de fontes externas. Normalmente usarei fontes do Google para selecionar uma fonte. E este é um site que você pode acessar fontes selecionadas e trazê-las para o seu projeto. Descendo e há mais de 1400 fontes agora no momento em que você pode selecionar. Então você passaria por aqui e selecionaria a fonte que você queria usar. E vou selecionar este, fazer uma seleção da fonte. Vai te dar um exemplo da forma como ele vai parecer. Selecione a exibição de fontes selecionadas. E agora você pode chupar, obter o código para trazê-lo para a fonte. Há o CSS para a fonte. Podemos aplicar isso à nossa configuração de conteúdo da Web, a família de fontes. Eles também precisam trazer a fonte. E isso mostra como você pode fazer isso, onde você pode vincular à folha de estilos. A melhor maneira de fazer isso se você quiser fazê-lo diretamente no seu arquivo CSS, é que você pode fazer a importação. importação permitirá que você o traga para o arquivo CSS. Qualquer um de seu HTML que esteja vinculando ao arquivo CSS terá acesso para usar a fonte dot. Agora, quando olhamos para o nome da empresa, ele é definido dentro dessa fonte que selecionamos das fontes do Google. Vamos atualizar o tamanho da fonte. Vou torná-lo muito grande, 23 EM. Você também terá a opção de definir os diferentes estilos, estilos de fonte diferentes. Vou seguir em frente e selecionar os estilos de fonte dentro do texto âncora. E há opções por padrão, você estará usando o normal. Você pode configurá-lo para itálico, que irá incliná-lo ligeiramente para o lado direito. Você também pode definir um peso da fonte e há vários incrementos lá. Você pode configurá-lo para a Terra em negrito e negrito, e isso apenas lançará o conteúdo da fonte que foi selecionado. Você também pode fazer isso como uma abreviação de fonte. Vou seguir em frente e selecionar outro elemento de página onde temos o ID de um. Então selecione esse elemento de página e, em seguida, aplicaremos algumas propriedades diferentes a elas. Configure isso e adicionarei uma borda para que possamos ver onde está a localização desse elemento de página. Então esse é o que selecionamos lá em baixo. Vamos adicionar um pouco de preenchimento a ele. Atualize também o tamanho da fonte. É uma fonte muito grande lá. A abreviação da fonte. Podemos aplicar algumas propriedades de dimensionamento diferentes a ele. Então, em vez de usar o tamanho da fonte, pode trazê-lo logo abaixo da fonte. Porque você precisa ter duas propriedades, que é o tamanho da fonte e a família de fontes. Então, se quiséssemos atualizar isso e incluir a família de fontes que trouxemos do Google. Poderia fazer isso dentro desse tipo de formato. E agora isso vai ser aplicado e nós fizemos isso dentro de um formato abreviado. Você precisa ter o tamanho e também a família de fontes. E você pode adicionar outros, como o itálico. Então isso entrará em itálico a fonte. Os adotantes fornecem uma maneira mais simples escrever esse conteúdo da fonte. Essas são algumas das propriedades de fonte comumente usadas no estilo. Então vá em frente e tente fazer alguma seleção dos elementos da página e aplique as várias propriedades de estilo aos elementos. E você pode estar pronto para passar para a próxima lição. 7. 6 elemento CSS: Esta lição abordará o que exibir a propriedade faz e os diferentes valores tão comumente usados ou bloqueiam inline e in-line block, além de exibir nenhum. Então, como eles vão afetar os elementos da página e, em seguida, a diferença entre a visibilidade oculta e a exibição nenhuma, e como eles vão aparecer na página da Web. A propriedade display é uma das propriedades CSS mais importantes que você pode usar para controlar o layout. Portanto, por padrão, alguns dos elementos da página, como divs, já têm uma propriedade para ele. E essa é a propriedade de exibição, seja um bloco ou em linha, quando você estiver criando em elementos de página. E eu vou criar um casal aqui onde temos uma div. E então, dentro da div, vou adicionar alguns vãos. Spans, o que eles fazem é que eles estão em linha e isso significa que o não vai pegar uma nova linha de código. Então, por padrão, os vãos ficarão em linha e os divs são os que vão ocupar todo o bloco de código. Se eu fosse atualizar e envolver essa primeira palavra, minha com a nova linha com a div, ela vai movê-la e defini-la para uma nova linha, enquanto os vãos ficarão em linha. Vamos fazer uma seleção desses elementos e faremos algumas atualizações desses elementos da página. Selecionando o cabeçalho que tem a div que está imediatamente abaixo dela que você pode usar usando o sinal maior que. Vou selecionar uma borda. Então ADA, escolha uma borda preta sólida para essa seleção da div e, em seguida, o conteúdo que está contido dentro dessa div. Vou atualizar as extensões, selecionando os vãos que estão contidos na div. E isso se aplicará a todas as extensões contidas nesse elemento pai e definirá a propriedade display para ser bloqueada. O que aconteceu é que os spans agora têm a mesma propriedade de exibição que a div, onde eles vão pegar uma nova linha, adicionar uma borda. Agora eles vão entrar em uma nova linha, definindo a propriedade display como embutida. E como não temos outro elemento embutido, é por isso que ele não está definindo um ao lado do outro. Então, vamos em frente e vamos atualizar o HTML. E teremos os dois valores lá. E estes dois vão ser divs. E agora essas são divs que vão ficar em linha. Também vou adicionar uma borda ao redor deles para que possamos distingui-los na área visual da página. Então, configure-os como azuis. Então, agora que as divs estão em linha, as extensões são bloqueadas. Podemos ver a diferença entre os dois elementos de nível de bloco começar com uma nova linha e eles tirarão toda a largura disponível do contêiner. Se fôssemos atualizar a largura disponível dentro do cabeçalho, que é o contêiner pai. E definimos uma largura disso. E vou definir isso para 200 escolhas. Os contêineres bloqueados, que bloqueiam os elementos de exibição , terão toda a largura disso. Há também uma tela, nenhuma. Então, vou selecionar o elemento nav e atualizar essa propriedade de exibição. Então, esses serão os hiperlinks que temos na página. E definirei isso para não exibir nenhum. Então o que aconteceu é que isso realmente desapareceu da página e ainda está dentro do código-fonte, mas a exibição, nenhuma simplesmente a esconde da exibição. Na verdade, isso vai ser diferente da visibilidade nenhuma. Então deixe-me trazer esse de volta e vou selecionar o elemento com aquele para esconder esse. E, em seguida, selecionaremos o elemento com um ID de dois e usaremos a visibilidade e definiremos a visibilidade como oculta. E a diferença entre o display none e a visibilidade oculta é que o oculto ainda ocupará o espaço na página, enquanto a tela nenhuma removeu completamente que elemento de página da área de exibição, a cor de fundo dela. Portanto, é mais visível. Em seguida, vamos ocultá-lo mais uma vez usando o display none. Então, quando eu atualizo isso para dizer que não exibir nenhum, ele desaparecerá aquele bloco amarelo da área visível da página. Vamos em frente e vamos selecionar os itens da lista na página atualizarão algumas das propriedades dos itens da lista na página. Então, lista não ordenada, liste itens. E o que queremos aplicar aos itens da lista atualizará a exibição e vou definir a exibição para ser bloco embutido. Quando fazemos isso, o que aconteceu é que ele ainda mantém as propriedades da lista não ordenada. Existem algumas propriedades padrão. É por isso que é recuado. Mas com o display none, exibir bloco em linha, aqueles nos permitiram alinhar horizontalmente. E é assim que normalmente os menus de navegação são criados, onde temos uma lista não ordenada e limpamos os itens da lista não ordenada, as propriedades padrão, como a margem e o preenchimento. Então, remover isso trará isso diretamente na linha. Também definirei a borda para que possamos ver toda a lista não ordenada e definir a borda de um pixel verde sólido. Isso está ocupando todo o espaço em bloco. Mas removemos a margem e o preenchimento que permitiu que os itens da lista se alinhassem ao bloco embutido esquerdo será um pouco diferente do que temos com cor em linha para eles, de modo que podemos ver onde estão os limites desses elementos. Então esse será o bloco em linha. E se eu mudar para inline, veja que há um pouco de preenchimento extra que estará por perto com os blocos. Então, um pouco de espaçamento extra entre o bloco em linha, em linha. Portanto, há uma pequena diferença entre os dois, e haverá uma diferença maior se pegarmos o preenchimento e se adicionarmos preenchimento aos elementos. Depois de adicionarmos o preenchimento a isso, o que é apenas inline. Elementos em linha não tomarão o dimensionamento pai. Então você vê isso quando estamos usando apenas o inline, embora possamos aplicar o mesmo preenchimento olhando para o pai da lista não ordenada. Agora isso vai ser menor do que o que temos para o dimensionamento. Portanto, precisamos obter essas propriedades de bloco usando o bloco em linha. Portanto, é uma combinação entre o inline e o bloco. E isso nos permite pegar a altura total do valor da propriedade pai-filho, da tela, nenhum bloco em linha , no bloco em linha. Você pode estar pronto para passar para a próxima lição. 8. 7 posições do elemento CSS: As posições especificam o tipo de posicionamento para o elemento. Então, vamos olhar para os mais usados, como o parente, o fixo, o adesivo absoluto e como você pode usá-los para posicionar o conteúdo da página. E então, à medida que o conteúdo da página rola, veja uma diferença no comportamento entre os vários elementos que têm as diferentes propriedades de posicionamento aplicadas a eles. Com essa propriedade position foi capaz de selecionar um elemento e definir sua posição na página. Então, vamos em frente e vamos fazer uma seleção de alguns dos elementos da página. Ele selecionará a barra de navegação. Para a barra de navegação permitia uma cor de fundo para que possamos distinguir onde ela começa e onde ela termina. Então, será a barra de navegação deles. E dentro do nav, também temos algumas listas não ordenadas e um monte de itens de lista, e, em seguida, algumas tags âncora que estão contidas lá. Vamos em frente e vamos atualizar a posição desse elemento. Defina a posição e definirei a posição como estática. Qual estática está posicionada estática? Não é que ele esteja posicionado de forma especial. É ****** pessoas que acordo com o fluxo normal da página. Então, definindo-o para uma posição estática. E farei o texto um pouco maior para que possamos consolar. Também atualizarei parte do conteúdo. Então, o elemento do artigo e eu atualizaremos a altura não que possamos ter alguma rolagem para o conteúdo da página com a posição estática, essa será a posição padrão. Portanto, não há posicionamento especial para esse elemento. Podemos usar a posição relativa. E o relativo da posição nos permite atualizar a posição de sua posição normal. Quando você defini-lo como apenas posição relativa, ele ainda estará alinhado com o fluxo normal da página. Mas usar a posição relativa nos permite atualizar a posição esquerda e superior. Então, se eu quisesse mover todo o elemento para a direita por 36, isso pode ser feito usando a posição relativa com a posição estática. Ele vai ignorar essa segunda propriedade. Portanto, não permite que você faça a esquerda ou a parte superior. Portanto, você precisa definir a posição relativa, que permite definir as outras propriedades e posicionar esse elemento fazendo ajustes em onde ele está na página. Há também uma posição inferior para isso. Se você defini-lo para as 40 fotos inferiores. Então, está saindo de uma parte inferior de 40, e isso está saindo da parte inferior do elemento pai de onde quer que a posição original estivesse desse elemento que contém. Vou adicionar à classe wrapper. E eu vou definir uma altura disso para ser 400 escolhas. E então também faremos uma fronteira em torno dele. Então, uma escolha, bloco sólido. Há nosso invólucro para que possamos ver a parte superior e a parte inferior do invólucro. Se selecionarmos um elemento e se usarmos a posição fixa, isso consertará o elemento no mesmo local, mesmo que a página esteja rolada. Vamos seguir em frente e selecionaremos o elemento de cabeçalho e definiremos sua posição como fixa. E também adicionarei uma cor de fundo para o assentamento. Basta configurá-lo como um bloco. Então essa será a posição fixa do elemento. E, geralmente, quando você estiver usando os vários posicionamentos, também atualize a cor para ser branca. Com a posição fixa, normalmente você definiria uma largura, então dê uma largura e faça uma largura de 50%. Uma vez que salvamos isso, vemos que temos uma largura de 50%. Há também uma esquerda que você pode definir. Assim como vimos com o parente. O fixo nos permite posicioná-lo em uma parte específica da página. Isso será relativo ao local onde a tela está localizada. Se tivermos uma tela de maior tamanho, então isso ainda estará dentro dos vinte e cinco por cento. Vinte e cinco por cento de desconto na parte superior do tamanho da página. Então, à medida que o movemos para cima, esse elemento também se moverá para cima. Preciso atualizar isso para ser RGBA para que possamos realmente ver o conteúdo que está abaixo configurando como uma versão Alpha. E darei 50% de transparência. Assim, podemos ver o conteúdo que está embaixo do elemento de posição fixa. Também voltando para onde colocamos o fundo. Se definirmos como 0, isso pode realmente ser o mesmo. Então, a parte inferior zerada e a 0 superior estarão onde quer que a posição padrão esteja. Então, como era estático, ainda estaria sentado dentro dessa posição padrão. Embora não o estejamos movendo para a esquerda por 30, mas a posição superior ainda teria sido a mesma. Se mudarmos de volta para relativo e atualizarmos, isso vai ser atualizado onde ele deveria estar posicionado originalmente, e isso vai atualizar esse valor de posição. Há também uma posição absoluta. Esta é a posição absoluta e sua relação à posição do ancestral. Portanto, não é relativo ao ponto de vista. Então, como corrigido em relação ao ponto de vista. O absoluto será relativo ao pai. Vamos em frente e vamos selecionar os elementos da página e selecionaremos aquele com o ID de dois. Na verdade, selecione aquele com o ID de um e atualize-o. Temos um bloco inteiro de texto lá. Vou definir uma cor de fundo para que possamos vê-la na página. Para amarelo. Então, ele definirá esse bloco de texto como amarelo e definirá sua posição. Defina a posição como absoluta. E usarei os mesmos valores de posicionamento que tínhamos lá. Agora está sendo definido como absoluto. Mas a diferença é que, à medida que estou rolando, essas posições fixas ainda permanecem as mesmas, mas o absoluto só começa a ficar no mesmo lugar. Atualizarei a tela para não ser nenhum do NEF. E assim, quando formos padrão e começamos que isso será posicionado em relação ao local onde o pai está. Se fôssemos atualizar o invólucro e se estivéssemos para a margem, para o topo do invólucro de 40 escolhas, isso também o moverá para baixo e atualizará onde estamos posicionando o posicionamento fixo. À medida que o rolamos, ele ainda estará em relação a onde quer que o conteúdo da página principal esteja. Também atualize isso para ser ensinado e vamos defini-lo em 100 escolhas. E também para o topo do cabeçalho, seriam 100 picks. E eu uso um RGBA para este também. E assim podemos ver como esse está se movendo de forma diferente do que temos para a posição fixa. Porque mais uma vez ele está posicionado. E se o elemento posicionado não tiver ancestrais posicionados que usem todo o corpo do documento. Então, vamos adicionar algum posicionamento a isso. Então, se definirmos uma posição relativa ao invólucro, a partir daqui fazemos dez escolhas. Isso agora está afetando onde a posição absoluta está sendo definida. Porque o Absoluto é definido em relação. Se um dos ancestrais tiver uma posição fixa, ele o configurará para onde ele está localizado dentro do ancestral. Há também uma posição pegajosa. Então selecione o elemento com um ID de dois e defina isso como posição adesiva. Defina também uma cor de fundo para esse elemento. E ele definirá essa cor de fundo como verde. Defina as 0 melhores escolhas. E esse elemento vai ficar pegajoso. E o pegajoso alternaremos entre o relativo e o fixo, dependendo de onde a posição de rolagem estiver. Vamos reduzir o tamanho do artigo e aumentarei o tamanho. Então, enquanto eu estou rolando, vemos que o pegajoso vai mudar. Portanto, dependendo de onde a rolagem está, a posição está definida, Ela será atualizada na área de exibição. Então, enquanto eu estou rolando para baixo, ele permanece pegajoso lá. E então, à medida que continuo a rolar, ele vai até usar o deslocamento de posição relativa entre o adesivo, usando ambos fixos e relativos. Claro que você tem conteúdo suficiente para poder rolar. Assim, você pode ver as diferenças entre o posicionamento e as propriedades de posicionamento. Valores. 9. 8 CSS CSS: O float permite que você posicione o conteúdo na página para que você possa criar colunas diferentes em sua página. O que você pode fazer com isso, onde você pode posicioná-lo à direita ou à esquerda, limpar o flutuador para os seguintes elementos de página usando o claro como o overflow funciona com o flutuador e os elementos flutuantes, alinhe-os no restante do conteúdo da página. E como o flutuador afeta os seguintes elementos que são irmãos dos elementos que têm o flutuador aplicado a eles. Então, tudo isso está chegando nesta lição. Float é usado para posicionar e formatar conteúdo, especialmente para imagens, bem como usado anteriormente mais para criar o layout e a estrutura da página. Agora temos a grade CSS, bem como o Flex, que vamos cobrir um pouco mais tarde. Agora queremos selecionar a imagem, dentro do elemento com o ID de um. Então vá até e faça uma seleção e selecione o elemento com a tag de imagem. Vamos em frente e vamos aplicar algumas propriedades a isso. Vou definir uma largura de 100 escolhas e, na verdade, vou usar a largura máxima. Portanto, se o tamanho da página ficar menor, e a forma como a largura máxima funcionará é que a largura máxima que veremos para esta imagem será de 400 escolhas, mesmo que o tamanho da página seja alocado e como permitido para mais, e vamos ficar com a largura máxima. Vou reduzir isso para 100 escolhas para que possamos ver melhor a maneira como os carros alegóricos vão funcionar se alguém flutuar isso na linha. Então, neste momento, vemos que a imagem estará embutida diretamente com o conteúdo. Mas estamos posicionando o conteúdo. Não estamos posicionando o conteúdo diretamente ao redor da imagem. Você pode usar flutuadores para corrigir isso. Então, configurar um flutuador se quisermos flutuar a imagem para a direita, isso vai envolver o texto em torno da imagem. Vamos adicionar uma borda para a imagem. Então, escolha sólido e permitido em uma borda vermelha para que possamos ver facilmente onde está a borda da imagem. Isso nos permite adicionar e metade do texto em torno da imagem. Também podemos flutuá-lo para o lado esquerdo. Isso fará o mesmo efeito, mas posicione-o no lado esquerdo. Você também pode selecionar os itens da lista dentro do botão. E vamos aplicar um flutuador a eles. Configuração, um flutuador da esquerda para os itens da lista. E o que aconteceu agora é que temos os itens da lista, eles estão flutuando um ao lado do outro. E com os carros alegóricos, você precisa aplicar um clear, caso contrário, a propriedade float ainda será aplicada ao próximo elemento. E é aí que temos esse tipo de efeito, onde não estamos limpando os itens da lista e onde devemos estar limpando e tendo um claro para evitar que ele passe para o próximo elemento, podemos configurar um vão. E dentro do período, vamos dar uma aula. Vou chamá-lo de “clear float”. E dessa forma, podemos selecionar o float claro para a lista não ordenada. Vou adicionar uma borda ao redor da lista não ordenada para que possamos identificar facilmente onde a lista não ordenada termina em paradas e onde está flutuando. Percebemos que dentro da lista não ordenada, não estamos recebendo a altura da lista não ordenada. O plano de fundo. Se aplicássemos uma cor de fundo à lista não ordenada, e eu apenas aplicarei uma cor de fundo preto a ela. Ele só aparece como uma linha por causa do flutuador que o flutuava para a esquerda. Se eu fosse remover o flutuador, ponto cobriria todos os elementos. Mas assim que flutuarmos para a esquerda, isso vai pegar esses valores de propriedade e aplicar o flutuador. Quero adicionar o flutuador claro. O que isso vai fazer é nos permitir limpar os carros alegóricos. Podemos limpar o flutuador à esquerda, podemos limpar o flutuador certo? E então podemos limpar o flutuador e ambos. Normalmente, normalmente você usará o Clear para flutuar os dois flutuadores declarados. Também vou selecionar o artigo e aplicar uma borda ao redor do artigo. E também vamos aplicar a classe de correção clara ao site. Como você pode ver que o que está acontecendo aqui é quando estamos flutuando para a esquerda, esse elemento ainda está recuperando esse estilo para flutuá-lo para a esquerda. Então, é se fizermos o flutuador claro que moverá a próxima linha dentro de um site de volta para sua posição padrão para o lado esquerdo. Se atualizarmos o estouro da lista não ordenada. Então, se definirmos o estouro para ser automático, isso irá então definir a altura e as dimensões do pai à medida que estamos flutuando. Então é aí que obtivemos a cobertura completa para a parte preta que temos permissão para selecionar esse elemento. E agora está tomando as propriedades do flutuador e evita que o elemento transborde , está fora do recipiente. Assim, podemos também definir isso para o elemento com o ID de um e fazer o mesmo onde podemos definir o estouro. Dessa forma, ele fornecerá espaçamento suficiente para o elemento pois estamos flutuando o conteúdo e ainda nos permite passar para a próxima parte da página. Os elementos podem usar os flutuadores em para criar colunas dentro do conteúdo da sua página da Web. Então, vamos em frente e vamos criar uma área de coluna principal e configurar algumas divs diferentes. Vou dar a eles uma classe de col para coluna e , em seguida, dar-lhes valores diferentes contidos no conteúdo para que possamos distingui-los. Então, essas serão três colunas que vamos configurar. Todos eles terão a classe de CO L. E vamos usar carros alegóricos para criar um bom design de coluna livre. Indo para a folha de estilos, selecione o elemento com a classe CLL e adicione uma borda. Assim, podemos distinguir entre eles. Em seguida, aplique um flutuador. Vamos virá-los para o lado esquerdo. E observe que não temos a correção clara. É por isso que esse conteúdo ainda está sendo, O conteúdo a seguir ainda está sendo flutuado. Precisamos aplicar o claro do seguinte elemento. Então isso vai ser para aquele que vai realinhar isso à medida que estamos limpando os carros alegóricos para os elementos. Vamos definir a largura para estes, e vou defini-la em 33,3%. A razão pela qual não conseguimos fazer o 100% total é porque a fronteira, se nós removêssemos a borda do que eles estocariam bem ao lado do outro. Há também outra maneira de corrigir isso onde podemos aplicar o tamanho da caixa. E qual propriedade de tamanho de caixa nos permite fazer é incluir o preenchimento e a borda na largura total das caixas. Então, vamos aplicar a propriedade de tamanho de caixa a todos os elementos da página e definir o tamanho da caixa como contagem de caixas de borda para o preenchimento completo também, a borda para os elementos. E isso está nos dando a capacidade de alinhá-los. Tenho que adicionar algum preenchimento para esses elementos e também definiremos uma altura para os elementos. Isso nos dá um pouco mais espaçamento em torno dos elementos. E é assim que você pode criar uma coluna de três colunas usando o flutuador. E desde que você esteja limpando o flutuador do próximo elemento irmão. E também se você tiver conteúdo que está transbordando os elementos flutuantes. Se tivermos as imagens contidas em cada uma delas, haverá um estouro. Assim, você pode definir o estouro como oculto. Isso ocultará qualquer estouro do conteúdo. Ou se você defini-lo como automático, isso reajustará automaticamente a altura e nos permitirá rolar para ver o conteúdo completo do elemento flutuado. Portanto, há duas opções que você pode fazer com o estouro para ajustar o conteúdo da página corretamente. Então vá em frente e experimente na sua página e fique mais familiarizado com o que você pode fazer com a propriedade float e os diferentes valores associados a ela. 10. 9 cursos de CSS Pseudo: Vai ser uma lição divertida em que vamos nos concentrar nas pseudo-classes. E o que as pseudo-classes fazem é que elas nos permitem fazer seleções, bem como definir o estado de um elemento. Então, normalmente usado em tags âncora onde eles têm o link, o visitado, o mouse e ativo. Você pode atualizar essas propriedades de estilo. Não se limita apenas a esses elementos, as tags âncora, você pode colocá-lo em qualquer elemento onde tenhamos o mouse. Então, no caso de pairar sobre, estamos obtendo uma borda vermelha para as imagens. Os outros elementos que estavam pairando sobre estão ficando azuis claros. Há também um pode fazer uma seleção. Então, primeiro e filho perdido, você pode fazer o enésimo filho, o que permite que você faça par ou estranho. Você pode fazer um estilo alternado para os irmãos. Também especificando a caixa de seleção, verificando se ela está marcada e aplicando estilo quando está marcada. E há também a pseudo-classe de foco, que atualiza as propriedades de estilo quando o foco é aplicado aos elementos. Pseudo-classes, você pode definir o estado do elemento. Portanto, se o elemento, e isso normalmente é feito quando estamos usando hiperlinks. Vamos fazer uma seleção das tags âncora e vamos atualizar algumas das propriedades de pseudo-classe para isso. Então, normalmente, temos um valor para o link em si. E isso mudará dependendo se já tiver sido clicado. Portanto, essa é uma propriedade padrão dos hiperlinks. E se você quiser alterá-los, então todos esses links que temos atualmente, se os configurarmos como um novo link. Isso significa que o Link não foi visitado. Podemos definir a propriedade para o link e vamos atualizar a cor. Isso significará que, se tivermos um hiperlink que não foi visitado, isso ficará vermelho. E atualizarei isso para ter um valor diferente. Então agora vemos que aqueles que não foram visitados são lidos. Também temos links que foram visitados. Então, vamos definir um novo valor padrão para o estado visitado do link e atualizá-lo e aqueles que foram visitados. Vamos definir isso para ser verde. Isso vale para todos os outros links que temos. Você também pode definir um efeito de passar o mouse sempre que passar o mouse sobre o link. Então, agora, por padrão, não há efeito de focalização para ele. Então, às vezes eles vão fazer isso. Você tem a decoração de texto e definiu isso como nenhum. Então, à medida que passamos o mouse sobre ele, o subjacente desaparece. Você também pode atualizar a cor de fundo dos elementos. Então, enquanto passamos o mouse sobre eles, vamos configurá-los para ler. E definiremos a cor do texto como branca. Isso dá a você esse tipo de efeito que você geralmente vê nos menus de navegação. Há também um estado ativo. Então, vamos selecionar os elementos e atualizar seu estado ativo. E ativo. Vamos definir isso como esse tipo de cor para o ativo. O que ativo significa que sempre que for clicado enquanto eu estou pairando sobre ele, se eu pressioná-lo, então isso vai ficar verde. Então isso nos dará o ativo. Vamos também atualizar o tamanho da fonte para que fique um pouco mais visível à medida que estou pressionando. Quando é clicado, fica grande. E então, quando eu o libero, ele volta ao tamanho padrão. Então esse é o estado ativo. E essas são pseudo-classes típicas que você pode ter, que você tem para as tags âncora. Portanto, não precisa estar apenas em etiquetas de âncora. Você pode configurá-lo em outros elementos da página. Então, por exemplo, eu tenho que selecionar as imagens, vou definir a largura das imagens como 100 escolhas. E ele definirá a altura das imagens para 100 escolhas. Isso os tornará muito menores. Vamos aplicar uma pseudo-classe a eles. Sempre que passarmos o mouse sobre as imagens, vou selecionar a borda. E vamos montar uma borda de três bichas. E ele vai ser lido quando passarmos o mouse sobre ele. Por padrão, vamos adicionar uma borda para que as imagens sejam bloqueadas. Caso contrário, as imagens mudarão em sua posição. Sempre que eu pairo sobre eles. Agora eles estão recebendo o fundo vermelho. Também é estranho para a div e um sudo para a div. Então, sempre que ele passar o mouse, vamos atualizar a cor de fundo e defini-la como a cor de fundo. Na verdade, não vamos definir isso para a div principal, mas vamos defini-lo para os elementos que estão contidos no principal. Selecionando o elemento com a classe de invólucro. Então, ele vai ser o elemento principal e aplicá-lo a todos os elementos que estão lá dentro. Então, todos os elementos filhos dentro invólucro que imediatamente dentro do invólucro. Agora vamos ter esse efeito de focalização sendo aplicado a eles. Então, essas são todas as seções principais que tínhamos na página da Web. Você também pode usar o pseudo para especificar uma das crianças. Então, se você quiser obter o primeiro filho do invólucro, você pode especificar o primeiro elemento filho. Então, essa é outra maneira de você ajustar o processo de seleção. Vamos atualizar a cor de fundo para o primeiro filho e defini-la para vermelho. Será o primeiro filho do invólucro. Na verdade, vou até onde tenho as divs. E darei a isso uma classe de linha, selecionarei o primeiro filho que está dentro da linha. Vai ser um pouco melhor usar. Dentro da linha, queremos selecionar a primeira coluna. Assim, podemos fazer isso selecionando a classe e, em seguida, selecionando o primeiro filho do elemento. Então, ele retornará o primeiro filho correspondente dentro da lista que todos estarão no mesmo nível. Então, todas as colunas estão no mesmo nível. É aí que podemos selecionar o primeiro filho. Você também pode fazer o último filho também. Portanto, selecionar dentro da linha atualizará e definirá a última propriedade filho. Podemos definir isso para azul. Também pode ser específico, portanto, usar o enésimo filho. Então esse será o número de crianças. Então, se você quiser configurá-lo para cada segundo elemento, e então especificamos o número que queremos ignorar também. Então, isso vai aplicá-lo a todos os outros elementos para cada segundo elemento. E atualizarei a cor da fonte a ser lida. No momento, ele só vai dentro do elemento. E vamos copiá-los e nós os duplicaremos. Dessa forma, podemos definir vários elementos que são os elementos filhos quando estamos especificando usando seu valor de índice. Então isso vai se relacionar com o segundo. Vamos atualizar e definir uma cor de fundo e definir a cor de fundo para verde. Então, novamente, será o segundo. Podemos atualizar isso para selecionar todos os correspondentes que são ímpares. Também podemos atualizar isso para selecionar todos os correspondentes iguais, que vamos aplicá-lo a todos os elementos alternados. Vamos seguir em frente e adicionar uma caixa de seleção em nossa página. Serve nossa caixa de seleção com um cheque me. Dê a ele uma classe de Checker, e faremos alguns deles. Então, temos o cheque me um, Check Me também, verifique-me três e me verifique. Isso nos dá algumas caixas de seleção na página. E agora vamos selecionar os elementos que são a entrada. Com o tipo de caixa de seleção. Podemos ser mais específicos com os tipos de entrada usando os colchetes e especificando o tipo. Então esse será um dos atributos do elemento. Queremos aplicar a opção marcada a ela. Então, verifique se está verificado e aplique algum estilo a ele. O que queremos fazer, vamos definir uma altura de 50 pixels e uma largura de 50 pix para este elemento verificado. Quando forem verificados, eles vão ficar muito grandes. Há também um pseudo-seletor de foco para que possa ser aplicado se estivermos focados em uma entrada. E vamos atualizar a cor de fundo dela. Então defina isso para amarelo. E, na verdade, vou atualizar e adicionar algumas entradas adicionais apenas regulares. Agora, essas entradas, sempre que forem selecionadas e o foco está nelas, elas recebem o seletor de amarelo e as caixas de seleção. Eles ainda estarão atualizando conforme estão marcados, assim como fizemos com a caixa de seleção, selecionando a entrada e, em seguida também selecionando o tipo como texto. Isso aplicará essa propriedade. E algumas das propriedades que elas não estarão disponíveis para todos os elementos da página são que estão sendo definidas como as cores de fundo padrão para eles. Experimente e veja o que você pode fazer com as pseudo-classes. Experimente as diferentes pseudo-classes em vários elementos de página. Ele pode estar pronto para passar para a próxima lição. 11. 10 elementos de pseudo CSS: Nesta lição, vamos atualizar a parte da seleção, elemento selecionado. Então, atualizando a primeira linha, primeira letra, adicionando conteúdo após e antes da seleção dos elementos. E tudo isso será feito com pseudo elementos, onde estamos usando os dois dois pontos para indicar o pseudo elemento e aplicar estilos a parte do elemento selecionado. Pseudoelementos nos permitem criar e selecionar partes específicas de um elemento. Vamos seguir em frente e faremos uma seleção do conteúdo da página. Temos vários elementos de página que já temos. Vou selecionar aquele com um ID de um. E então vamos aplicar um pseudo elemento a isso, selecionando o elemento com o ID de um. E atualizarei o tamanho da fonte do elemento, tornarei o tamanho da fonte relativamente grande. Também podemos atualizar o tamanho da imagem como imagens bastante grandes. Então, vamos atualizar a largura da imagem, 200 PECS. Então, é muito menor. Então, agora vamos aplicar um pseudo elemento. Então, se quisermos aplicá-lo à primeira linha, podemos especificar isso dentro de uma. E isso é usar os dois Colin que nos permite indicar o pseudo, selecionando a primeira linha. E vamos atualizar a primeira linha e adicionar uma cor vermelha à primeira linha. Isso será para a primeira linha do conteúdo. À medida que a linha diminui, ela ainda está sendo aplicada apenas na primeira linha. Essa é uma maneira interessante de aplicar efeitos diferentes a partes do elemento. Vamos atualizar a cor de fundo e definiremos a cor de fundo como preta. A cor da fonte definirá que tudo seja branco. E vou definir isso como praia. Vamos atualizar. E ele fará uma seleção da primeira letra. Dentro desse elemento. Selecionando a primeira letra. E atualizarei o tamanho da fonte da primeira letra, farei isso para EM. É a maneira que ele pode atualizar a primeira letra, torná-la realmente grande. Você também pode definir o conteúdo após a seleção do elemento. Assim, você pode selecionar o elemento e usar After permite adicionar conteúdo após o elemento selecionado. Podemos especificar o conteúdo. Adicionando o conteúdo do HelloWorld. Há o conteúdo sendo adicionado. Sei que é um pouco difícil de ver. Então, vamos atualizar a cor para ser azul para o plano de fundo. Portanto, há o conteúdo que é definido depois dentro de um. E se você for inspecionar o conteúdo da página do elemento, há o seguinte. E não vemos o hello world sendo escrito como isso está sendo feito com o estilo. Então, o que quer que esteja nessa polícia será o que o conteúdo foi adicionado. Você também pode fazer um antes também. Isso colocará o conteúdo antes. Isso realmente o adicionou na primeira linha e atualizou o conteúdo. Portanto, aplicar até a primeira letra à primeira parte do conteúdo da página como pseudoelementos permite selecionar parte do elemento e fazer atualizações nele. Há limitações às diferentes propriedades que podem ser aplicadas. Então vá em frente e tente se familiarizar mais com o que você pode fazer como pseudoelementos. 12. 11 CSS de layout Float: Vamos criar um site básico com carros alegóricos. Então, temos a navegação típica do cabeçalho, o menu e o rodapé. E vamos usar os carros alegóricos. Portanto, ele flutua tanto para o design de três colunas quanto para os links da Barra de Navegação aplicando as diferentes pseudo-classes e os pseudo elementos para limpar os carros alegóricos. E, em seguida, aplicando várias propriedades de estilo para que pareça um site. Vamos atualizar esta típica página da Web LEO para tocar em um design de três colunas. Portanto, temos uma navegação de cabeçalho, a área de conteúdo principal e uma área de rodapé. Está fazendo uma seleção desses. E então vamos adicioná-los usando um flutuador. Então, primeiro, vamos em frente e vamos abrir o estilo e limpar um estilo que tínhamos lá anteriormente e aplicar a caixa de borda porque vamos usar os carros alegóricos. Então isso será feito para todos os elementos da página. Selecionando todos os elementos da página e defina o dimensionamento da caixa para que esses elementos de página sejam border-box. Assim, quando configurarmos as colunas, que é a próxima que vamos selecionar. Podemos definir uma largura para que eles sejam 33%. E dessa forma, podemos fazê-los se encaixarem corretamente na página. Vou defini-los para 33%. Adicione também uma borda para eles para que possamos ver claramente todas as diferentes colunas. Então isso pode ser um pixel, borda preta sólida. Há nossas colunas. Vamos definir uma altura padrão para eles. E a altura pode ser de 200 picks. Em seguida, usando o flutuador, podemos flutuá-los para a esquerda. Então, configure-os como flutuadores. E vou flutuá-los para a esquerda. Isso configura o básico para as três colunas. Também farei um texto alinhado para centralizar o texto que temos. Defina isso como alinhado ao centro para o texto. Temos as três colunas lá. Queremos definir o rodapé. Eu adicionei em classes para o rodapé e para o cabeçalho. Então, selecionando o rodapé e o cabeçalho. Então eu vou configurá-los apenas separando as duas seleções por vírgula. Vou definir o texto alinhar, centralizar o texto. Vamos definir o plano de fundo de ambos. Ambos poderiam estar combinando. E então havia um fundo preto. A cor da fonte pode ser branca. Então, há nossos rodapés lá. Na verdade, está sendo aplicado às colunas porque não limpamos depois. Então, queremos limpar após a seleção do conteúdo principal. Darei a este uma classe de média para que possamos selecioná-lo dentro do estilo. Queremos aplicar a correção clara para esse elemento principal, selecionando-o e, em seguida, usando o pseudo, defina-o. Depois, vamos definir algum conteúdo lá. E isso nos permitirá fazer a correção clara em ambos. E o conteúdo pode ser apenas algum conteúdo em branco. Defina a exibição como uma exibição de tabela e, em seguida, use um clear para limpar os dois. Então, livro limpando todos os carros alegóricos e faça uma clara de ambos. Isso mais uma vez nos permitirá separar o cabeçalho e o rodapé. E porque essas colunas, por causa do flutuador, elas estavam flutuando em cima do cabeçalho e do rodapé. Vamos definir uma altura para isso. Isso pode ser 120, escolhe a altura da linha para que possamos alinhar centralmente, alinhar verticalmente o texto. E, claro, se você estiver adicionando mais texto, precisará atualizar qual é a altura da linha. No momento, não vou adicionar nenhum texto adicional, então estou apenas configurando como altura da linha também para a barra de navegação. Então, vai ser o navbar. Vou dar a ele uma classe de nav caso queirmos reutilizar as tags, diferentes partes da página. Vou selecioná-lo como uma classe de nav. Para a barra de negação suficiente. Podemos alinhar o texto ao centro alinhado. Vamos fazer uma cor de fundo para o conteúdo e configurá-lo como vermelho. Vamos também ir em frente e vamos adicionar algumas divs lá. Em seguida, usaremos esses divs e vamos alinhá-los usando os carros alegóricos também. Selecionando dentro do nav, os divs. Também podemos fazer as divs que estão imediatamente dentro do NADPH. Configure isso para flutuar. Para a esquerda. Adicione um pouco de preenchimento para os desenvolvedores, dez fotos. Também queremos fazer a correção clara para depois, vírgula separada. E também é aí que temos os carros alegóricos. E isso também deve ser definido para depois. Eu vou definir este também também, depois. Estamos definindo essa div para limpar depois. Para os desenvolvedores, defina uma largura de 25 pix. Defina uma largura de 25 pix. Além disso, alinhe o texto no centro porque temos os quatro itens lá dentro da lista. Ele definirá uma cor de fundo para cada um deles. Defina a cor de fundo como vermelha e a cor da fonte pode ser branca. Para esses, existem nossos links. Sempre que passamos o mouse sobre eles. Eles ainda não são links, mas teríamos que adicionar links. Vamos atualizar a cor de fundo sempre que elas passarem o mouse. E vou definir a cor de fundo para ser preta. A cor pode ficar vermelha. É assim que você pode configurar um site básico com flutuadores. 13. 12 CSS de layout Flex: Vamos criar um modelo CSS usando o Flexbox e configurando nosso modelo HTML típico. Temos o cabeçalho, o nav, o principal e o rodapé, mas o site de três colunas, o Flexbox nos fornece uma maneira de criar um layout da web. Isso também será responsivo, então à medida que o redimensionamos e aumentamos, essas colunas continuarão criando elementos responsivos dentro de um contêiner que são realmente fáceis de variar usando flex, esta lição que vamos fazer e usar flex box para criar um design de site de três colunas. Então, vamos selecionar os elementos da página e atualizá-los. Então, vamos em frente e vamos selecionar todos os elementos que são colunas. É aqui que temos o design de três colunas. Também vou aplicar a todos os elementos e adicionar o dimensionamento da caixa. Assim, podemos definir o dimensionamento padrão de cada uma das células. E isso também incluirá o preenchimento e qualquer uma das bordas. O dimensionamento da caixa nos permitirá incluir as bordas e o preenchimento para a largura das células do elemento. Então, estamos selecionando todas as colunas. Vou adicionar uma borda às colunas. Então, uma escolha sólida, e eu farei uma borda azul para as colunas. Há nossas três colunas que queremos aplicar. Também vou adicionar algum preenchimento às colunas. Então, configure o preenchimento e farei apenas dez pixels de preenchimento. E definirei uma altura padrão para que ela seja 200 picks. Então, há nossas três colunas. Faça um texto alinhado para que possamos alinhar o texto ao centro para eles. E agora queremos estocá-los usando o flex. Vamos definir a largura flexível e que podemos definir usando a propriedade flex de um. Então, será a largura de cada um desses contêineres. Precisamos selecionar o pai e aplicar a propriedade flex ao pai. Então, essas são as colunas contidas no elemento médio, dentro do elemento principal. Atualize e defina a propriedade de exibição como flexível. Isso permitirá que as crianças do contêiner principal obtenham essa propriedade de exibição. E é aí que obtemos o design de três colunas. Também podemos atualizar isso e definir a navegação. Temos um elemento com uma classe de nav, basta separá-los por vírgula e queremos aplicar a propriedade flex a ambos imediatamente que irá estocá-los. Portanto, queremos aplicar propriedades diferentes aos elementos de navegação. Esses são os que são os divs dentro da classe nav. Então, selecionando a classe nav e, em seguida, as divs que estão contidas dentro delas. Vamos seguir em frente e configurar uma fronteira para eles. Vou montar uma borda verde para eles. Dessa forma, obtemos algumas fronteiras ao redor deles, adicionando algum preenchimento para elas. E vamos classificar alguns cinco pixels de preenchimento para eles. Em seguida, usando flex, vamos definir o valor flex para um e também fazer um alinhamento de texto para alinhar o texto ao centralizar o texto nos dá os elementos do link. Configurando um plano de fundo. Configurarei uma cor de fundo para os elementos da página e os configurarei como bloco. E então a cor pode ser azul, na verdade vai definir a cor como branca. E adicionando o efeito de focalização a esses elementos sempre que os elementos são pairados. Para dar a eles o campo que eles vão ser links. Podemos aplicar a vinculação posteriormente, seja com JavaScript ou podemos fazê-lo dentro do HTML como tags âncora. Sempre que passamos o mouse em uma atualização, a cor de fundo. Vamos definir isso para ser azul. À medida que passamos o mouse. Ele nos dá uma nova cor de fundo para esses elementos. Agora vamos selecionar o cabeçalho e o rodapé. Elementos com uma classe de cabeçalho e o elemento com uma classe de rodapé, aplicam algumas propriedades a isso. Mais uma vez, cor de fundo para aqueles, cor de fundo para eles. Vou definir o estouro para ser automático. Então, isso ocupará todo o espaço disponível. O texto alinhe, centralize, alinhe o texto. E vamos configurar uma altura mínima para que ela seja 100 PECS. Isso nos dá o cabeçalho e o rodapé e também faz a altura da linha para eles. Na verdade, para o rodapé, selecionaremos o elemento separadamente. Temos a div dentro desse elemento. Selecionando a div onde temos o conteúdo do rodapé para este fim de semana, defina uma margem e, em seguida, também algum preenchimento em torno dele. Desta forma, podemos adicionar linhas adicionais de conteúdo. É assim que você pode usar o flex para configurar um modelo de site padrão com três colunas. 14. 13 CSS layout da grade do CSS: Vamos aplicar a grade de exibição. Portanto, a grade CSS, para criar um modelo básico de três colunas com uma barra de navegação, isso pode ser totalmente responsivo. O uso da grade CSS permite criar elementos de página responsivos. Vou mostrar como você pode criar um modelo inicial básico que você pode usar para seus sites para desenvolvê-los ainda mais à medida que você adiciona conteúdo adicional sobre elementos neles. Começando com um layout básico e muito básico, teremos um cabeçalho, uma área principal de navegação e um rodapé para o conteúdo. Nesta lição, vamos configurar o design do site e o layout usando a grade. Vai ser um site de três colunas. Então, primeiro, vamos selecionar o contêiner principal, e esse será o contêiner significa que eu já adicionei no tamanho da caixa. Então este será o pai que será exibido os filhos, os filhos imediatos com ele como um formato de grade, usando a tela e configurá-lo como grade de exibição. Então, para a grade, vamos configurá-los como um FR, FR e um FR. Isso imediatamente definiu essas colunas nesse tipo de estrutura. Vamos atualizar as colunas, selecionar os elementos com as colunas, configurar o, agarrando a borda. Configure a largura deles. E eles vão ser definidos dentro da grade. Então, queremos torná-lo dinâmico para que não tenhamos que definir a largura, mas definiremos a altura para essas células. E também definirei o alinhamento de texto para centralizar o conteúdo do texto dentro deles. Então, há essas quatro colunas. Você também pode encurtar isso usando a repetição. Então, se todos eles vão ter o mesmo tamanho que podemos usar a repetição. E configurando uma repetição de quatro com um FR para cada um deles. E, na verdade, isso deve ser três porque temos as três colunas lá. Também faremos isso para a navegação. Temos elementos com uma classe de nav. Então esse será o pai da grade. E, em seguida, os itens de navegação estarão contidos lá como itens de grade configurando a grade. E este terá quatro itens para crianças lá dentro. E selecionaremos o nav e as divs que estão imediatamente dentro do suficiente com uma aula. E depois os diffs. Esses serão links. Podemos alinhar texto. Também configure uma cor de fundo e configurarei uma cor de fundo verde. Para esses. Atualizarei o tamanho da fonte para 1.2 EM. Vamos definir uma cor de branco para os links. E adicionaremos a opção sempre que passarmos o mouse sobre eles, que atualizará a cor. Então, o pseudo. E podemos definir isso. Então, definindo isso. Que tal definirmos isso para ser bloco? Sempre que estiverem pairando, há nossos links e a grade será responsiva por padrão. Isso nos dá a estrutura básica que precisávamos. Agora podemos aplicar algum estilo adicional ao cabeçalho, bem como ao rodapé. E configure uma cor de fundo para eles. Vou configurar apenas um fundo preto padrão. E a cor da fonte pode ser branca. Vamos selecionar o tamanho da fonte. Faça isso realmente grande. E , em seguida, o texto alinha, centralize o texto para eles. Isso nos dá nossa estrutura básica de página da Web onde temos o cabeçalho, o rodapé e também definimos o estouro para eles. Então, dessa forma, eles vão até o espaçamento padrão da barra de navegação. Vamos precisar dentro da estrutura da página. Então, à medida que você o redimensiona e o encolhe para baixo. Esses também serão elementos de página totalmente responsivos. Digamos que você possa usar a grade para configurar um modelo de site padrão que você pode usar como ponto de partida para desenvolver sua página da Web.