Modelo de Caixas na prática (parte 1) - @Curso em Vídeo HTML5 e CSS3

O que é mais um vídeo do Capítulo 16 do seu material em PDF e agora depois da aula teórica a gente vai botar a mão na massa e eu vou te mostrar na prática como fazer tudo que a gente aprendeu no vídeo anterior e E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de html com CSS no vídeo anterior a gente viu a teoria sobre o modelo das Caixas espero sinceramente que você tenha entendido todas as propriedades né todas as características anatômicas de uma

caixa e agora eu vou te mostrar na prática como fazer isso esse vídeo a gente vai dividir em duas partes e a gente vai começar com as caixas do tipo Box level Então vamos direto para o computador e vamos começar mais um exercício mas antes de dar continuidade a sua aula eu vim aqui dar um recado especial da Record que é patrocinadora do nosso curso e como eu disse aqui anteriormente em outros vídeos esse curso a Record é uma organização com o objetivo de ensinar tecnologias e ela tá trazendo para você que é aluno do

curso em vídeo uma série de cursos que vão te preparar para entrar no mercado de trabalho e eles oferecem cursos desde o mais básico que é conhecendo o ambiente Windows e o pacote Office até alguns outros que com certeza vão te interessa um pouquinho mais como aí eu te internet das coisas realidade a realidade aumentada desenvolvimento de aplicativos móveis um curso de tecnologias pro futuro e muito mais e para fazer parte da plataforma da Record é muito simples a inscrição é grátis e você vai ter todas as instruções pelo código que tá aparecendo aqui na

sua tela é só você abrir o aplicativo da sua câmera apontar para o código que tá aparecendo e ver todas as oportunidades que a Record tá trazendo para você voltamos agora a sua aula então é só já estou aqui no computador eu vou criar uma pasta nova é importante que eu vá dizer para você cara mais uma vez eu já tô aqui na pasta se você não viu A aula anterior você não pode avançar nesse curso eu recomendo que você volte e veja a teoria Ok o que eu vou falar aqui a gente já viu

e Teoricamente no vídeo anterior eu só vou representar graficamente aqui na prática para você então vamo lá pô botão direito novo pasta exercício 021 vou clicar com o botão direito e vamos mandar abrir com o Cold aqui no Cold eu vou criar o arquivo caixa 01. e aqui vou criar o nosso código base modelo de caixas e aqui eu vou fazer o seguinte eu vou fazer com H um com H um ele é um bloco do tipo Box level time é uma caixa box level isso ela vai ocupar ali inteira a gente vai ver na

prática tinha como é que funciona eu vou botar aqui um exemplo de caixa box level vou criar um outro parágrafo vou botar parágrafos também são exemplos de box levam mas hoje aí eu vou criar um link aqui ó uma se você não tem nenhum link para fazer você bota só uma hashtag tá para deixar o link continuando ser válido Tá mas os links são exemplos de caixas inline levam fora do link vamos ver como tudo isso funciona ou não lá vou representar aqui nessa primeira parte vou abrir a pasta e vou abrir o arquivo caixa

01 E vou organizar que a minha tela para ficar com um metadinha metadinha época tá menos um pouco de metadinha sim lembra o box level se você não sabe você não viu o vídeo anterior no vídeo anterior eu dei vários exemplos de caixas do tipo Box level onde o div né é o elemento mais usado e eu falei de vários elementos em leva o Justin é o mais usado há mais a gente vai sempre ficar aqui com H um um link tá o parágrafo também é box level deixa eu te mostrar como isso aqui funciona

na prática a primeira coisa que você vai fazer é no Google Chrome tem que ser o Google Chrome Clica com o botão direito e clicar em inspecionar mais uma vez explicando você também pode pressionar contra o shift e ouvir aqui ó Nessa reticência pode vir aqui em mais ferramentas e ferramentas de desenvolvedor isso vai abrir o nosso débitos gente já viu isso nos exercícios anteriores ou débitos geralmente abre no console ou aqui nos elementos nós vamos parar de elementos e já de cara olha isso pode fechar que eu console para fechar o console aqui debaixo

você pode apertar a tecla esc tá se você apertar aqui de novo ele reaparece dá uma olhada aqui ó isso daqui já é o nosso modelo de caixa o e tu já mostra isso aqui para você e facilita muito a tua vida dá uma olhadinha aqui ó Primeira coisa eu vou fazer é disattached daqui então vou clicar nessa resistência e vou clicar aqui ó em nesse daqui ó andox para ele ficar grandão é aplicado desencaixado vou botar ele aqui mais ou menos no mesmo tamanho do visual Studio code tá então eu tô quase aqui diminui

minha beleza se você quiser olhar mais de perto da sua casa você não vai precisar aqui no vídeo vou te ajudar eu vou apertar control mais quando eu aperto control mais ó ele vai aumentando aqui para mim então basicamente como é que funciona isso quando você clica num elemento ó aqui é o h um certo quando eu clico nele eu já estou com ele selecionado aqui embaixo você vai ver todas as configurações de CSS que já existem para ele que você não fala pow Guanabara mas eu não fiz configuração nenhuma isso é sério isso daqui

ó é o user-agent Esse foi configurado automaticamente pelo Misery and sempre você olhasse nome Easy and Once você vai lembrar que é o seu navegador tá a nossa aí no seu caderno E aí gente é sempre o navegador que tá exibindo o seu conteúdo todo o navegador tem uma configuração básica que geralmente é seguida por todos eles então por exemplo o H1 ele é um bloco do tipo um display Block que que é display Block sem que eu boto display Block ele vai ser um elemento do tipo Box level perto leva que eu falei o

parágrafo também vai ser quer ver vou clicar no parágrafo só que em cima falar display Block já é o padrão você pode mudar esse display aqui para outros valores inclusive Flex que é uma tecnologia nova do CSS que a gente vai ver um pouquinho mais para frente mas ploc ele é o box level também dá para configurar um elemento a por exemplo vou colocar aqui o ar por clicar aqui no ar tá esse aqui não veio tá vendo ele não ele não colocou mas ele é um display inline Box tá então existe aqui ó o

display Block e existe o slime Block acho que eu falei errado em um boxe em Line blog tá depois de fazer isso na prática foco pouco padrão larga uma clique em Olha o Font size é duas vezes o tamanho original aquelas configurações que a gente e aqui se você passar o mouse aqui ó estando com o h um selecionado você passa o mouse aqui no meio esse aqui é o bloco de conteúdo dá uma olhada lá olha só apesar de você achar que eu contei hoje é só isso aqui na verdade ele tá dentro de

um H1 e o H1 por ser um box level lembra que a gente viu isso na aula anterior Teoricamente ele começa numa nova linha só não tem nada na linha junto com ele mesmo que você coloque e ele vai ocupar a largura inteira no navegador se eu passar o mouse aqui em cima do conteúdo Olha isso ele já marcou ele para mim o meu box leva o certo então o que que eu tô fazendo ali eu tô provando na prática aquilo que eu falei anteriormente Então quando você mexe o mouse aqui ó você está vendo

o conteúdo Se você prestar atenção logo em cima ao pedem o pezinho tá com esses tracinhos que que significa esses tracinhos não tem prédio também não tem borda e ele tem margem Fala pô mas eu não consigo a imagem por padrão ele tem uma margem 21 em cima e uma margem 21 embaixo 21.4 né não tem imagem da esquerda não tem e pode passar o mouse aqui na área da margem você olha ali no navegador eu não posso tirar o mouse daqui agora que você não ele desfaz mas olha navegador em cima embaixo de exemplo

de caixa box level ele tem um begezinho enfim a cor tá aparecendo aí tá em cima embaixo indicando As Margens você pode fazer alterações aqui você pode fazer configurações que eu vou fazer assim eu vou fazer algumas configurações aqui no meu HTML de estilo ó tá eu fazer algumas configurações que vão ser importantes para mim primeiro eu vou configurar o H1 criam seletor aqui para um eu vou fazer o seguinte eu vou mexer inicialmente na altura e na largura dele tá só pra gente poder entender a altura é Hi lembra que a gente viu no

vídeo anterior eu vou colocar uma altura de 300 pixels largura é um líder e eu vou botar ele também de 300 fixos antes de botar largura e altura Deixa eu tirar eu vou fazer o seguinte eu vou colocar um background-color só pra gente poder entender melhor meu background-color vou botar a light Green Card lightplay enfim que você pode escolher qual que você quiser voltar um cinza bem quando eu atualizar aqui ó tá vendo a minha caixa toda ocupa a largura inteira altura ela é automática de acordo com o tamanho da letra mas eu vou na

mão colocar essa aqui ó até a altura 300 e que a largura é 300 também quando eu faço isso atualizei ele já fez com que a caixa fique aqui ele não tá ocupando a tela inteira isso porque eu mandei Williams ficar com 300 perto se você vier aqui no navegador e acessar o seu débito de novo no H1 ó ele já mostra que a 300 por 300 e o mais legal isso é maneiro isso é muito legal você pode brincar com essas propriedades você pode mexer com essa propriedade no débito sem mexer no arquivo original

e de uma maneira muito simples dá uma olhada só a gente tá com água um selecionada tá clica aqui não é um para selecionar quando você vier aqui no raio ó Você clicou aqui na propriedade você pode alterar na mão botar se quiser ou girar a rodinha do mouse olha só ela isso falei isso não significa que eu tô mexendo no arquivo original tá esse aqui é só eu só tô mexendo na minha visualização Estou diminuindo a altura ó vou diminui altura vou aumentar a altura só tá rodando se você quiser você pode vir aqui

botar 400px ele já vai ficar tá mas eu acho legal isso daqui ó de você conseguir mexer diretamente no débitos volto a dizer você não está mexendo no original Original continua 300 por 300 vou vir aqui ó em largura a largura 300 eu clico no 300 roda rodinha do mouse diminuindo a largura aumentando a largura isso é muito maneiro se você quiser também você pode desligar uma determinada visualização por exemplo a minha largura tá com 336 vou criar aqui fora você pode clicar nesse vizinho aqui e desligar se eu desligar largura como é que funciona

ele volta para o tamanho normal se eu desligar a altura ele volta para o tamanho normal e mais e eu digo eu não mexi no original Eu não mexi no efeito original eu simplesmente estou fazendo um teste aqui outra coisa maneira vamos colocar borda Então vamos lá no visual Studio Agora vou mexer no original eu vi aqui a ver eu não mexeu continuar treinando 300 se você atualizar aqui ó ele volta para 300 por 300 vou criar aqui também uma borda então botar aqui ó bordo wieder 10 pixels ou um bar do Willians é a

largura da borda a espessura da borda o border-style eu vou colocar aqui pistola aí vou te mostrar algumas diferenças aqui vou procurar aqui só leite e vou botar um border color Dark Gray botar isso daqui darkslategray quando eu atualizar aqui ó ele já fez uma borda lembra que a gente viu na aula de teoria a borda ela está em volta do meu conteúdo vamos voltar lá no nosso débitos e vamos atualizando aqui ele já Atualize o débito cliquei no H1 para a gente poder mexer agora eu tenho 300 Porto e a dimensão do meu objeto

do meu conteúdo não tem no pede mas eu tenho uma borda quando eu passo o mouse em cima a borda é destacada só para eu ver esse 10 aqui eu posso mudar aqui ó borda wieder cliquei aqui ó eu consigo diminuir e aumentar eu estou aumentando a borda Cara isso daqui do Dev Tools ele vai ser ótimo para você conseguir praticar essas propriedades tá então tá aqui ó outra coisa que eu posso fazer também é botar uma borda aqui no ao no link clique no link E aí ó quando eu clico no link eu tenho

aqui ó olha isso olha a diferença do inline-box Probox normal ele é um box level era uma caixa box level ele tá aqui com o tamanho esse aqui é o tamanho do paragrafo tá Dá uma olhadinha ali no navegador que tal parágrafo tá marcado no time de azul Você pode até triste não vale tá aqui ó cliquei no Vale e aqui ó tá o tamanho do meu marido o baile não é o corpo inteiro dá uma olhada aí o Bari é o conteúdo é um box que tô vendo todo o parágrafo e o é uma

apenas certo que estão vou voltar aqui no aí você percebe que o tamanho alto alto porque alto alto porque ele não quebra de linha ó tô com mais parado aqui dá uma olhada no link do navegador aqui embaixo da minha cabeça O link tá marcado de azul ali ao meu conteúdo se você quiser vamos voltar aqui no original até para você fazer na mão tá para você testar aqui na mão mexendo aqui em cima mas já estou mexendo original que vou criar uma configuração para A Âncora a minha Âncora vai ter vamos dizer assim uma

borda também morna wieder de 10 pixels também ou border-style vai ser só a leite também e o meu border colie vai sempre ficar isso aqui tá meu amor eu colo vai ser Red atualizei Olha o meu link com uma borda vermelha posso voltar aqui e vou olhar aqui nós configurações eu já tenho a borda vermelha ela pode ser sólida e ela tem a largura de 10 pixels eu também posso diminuir o aumentar essa borda você ver e o resto do conteúdo vamos ver como tudo isso funciona ele vai se adaptando de acordo com o tamanho

e sobrou da minha linha outra coisa que eu posso fazer é mudar essa minha borda Deixa eu botar uma borda aqui de 11 ou atualizar aqui que ele ficar borda de 10 eu posso mudar aqui ó alguns valores como por exemplo teste ó tá vendo teste o que que é deste é pontilhado tá vendo É porque ficou feio que ele tá grossão né é o fio decoração aqui de 10 pixels de propósito pode dar uma diminuída na também existe a opção de Dota falar que é pão tiradinho e o as mais usadas são essas né

E O Sole também existe o Double é uma linha dupla tá vendo existe também deixa eu mostrar aqui ó ogro ogro ele é uma margem meio 3D tá vendo vou dar um zoom aqui para você conseguir perceber ele é uma margem Então é por fora de uma cura e já muda aqui ele é meio tridimensional perto fazer uns testes aí na sua casa tá mas na verdade na prática o seu atualizar ele volta para Borda de linha sólida e o meu original posso mudar aqui a cor e essa daqui é sempre a configuração padrão do

meu dizer MG antes então beleza já queria que já te mostrei o que que é uma caixa do tipo Box level e aqui uma caixa do tipo online levo você já na prática aqui consegue perceber Com certeza Existem várias maneiras de você apoiar o canal do curso em vídeo mais uma das mais importantes é entrando no site do curso em vídeo é esse aqui tá aparecendo aqui do lado e clicando na parte de cima do link seja um apoiador você ajuda muito projeto assim manter gratuito e como recompensa a gente oferece alguns vídeos exclusivos alguns

vídeos de backstage algumas coisas exclusivos como um curso básico de programação usando portugol Studio algumas aulas adiantadas do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então aperta tempo você pode ajudar a gente acesso a curso em video. Com e clica no link que está na o site Seja um apoiador para finalizar esse vídeo vamos ver só mais uma medida aqui ó aqui é a medida que eu voltar novo visual Studio code que eu vou colocar aqui ó no H1 uma medida

de pedem a medida de pedem ela geralmente é dividida em quatro partes eu boto um pedem em cima ou pedem top que eu vou botar 10 pixels eu vou ter um pezinho na direita que é o site que eu vou botar 10 fixas também vou mostrar tudo dois filhos um pezinho embaixo que é o pezinho boram e também era espíritos hoje que é não é o que tô colocando um pezinho a direita é uma esquerda que é o leste Éden Cadê o leste pezinho essa também vou botar 10 fixas vamos lá no navegador vamos atualizar

e agora só você percebe que agora existe um espacinho aqui e não existia antes ó vamos fazer o seguinte atualizei aqui o meu H1 Se você olhar aqui ó 300 é o conteúdo aborda tá com 10 só que entre o conteúdo e e eu tenho aqui um pezinho de 10 para todos eles a ordem de indicar Não é obrigação não depois você vai entender por que que eu vou te indicar a ordem agora é sempre assim ó começa a de cima e gira no sentido de um ponteiro de relógio imagina um relógio girando ó cima

direita baixo esquerda perto dá uma olhada aqui no pezinho pezinho de cima tá 10 né seu geral eu consigo aumentar e diminuir o pezinho ó essa parte verde escura ela não existe tá é simplesmente que eu tô mexendo no pede ele coloca verde escuro você consegue configurar aqui ó tudo certinho Você consegue um projeto fazendo eu preciso que mexer isso daqui você mexe bota na posição certinha e por exemplo lá olha eu quero o de cima assim ó exatamente nessa posição é só você olhar o pezinho Topper 21 Aí você vem aqui ó vai no

código original Ah não é essa posição que eu quero exatamente tu vem aqui no presente top volta 21 tá então a ferramenta de leve tudo ela vai te ajudar na hora de desenvolver e eu posso fazer a mesma coisa para qualquer um dos pés e ele cresce a borda vai mexendo para o lado porque eu tô crescendo aqui é o pedem entrando aqui ó agora o pé de ir embora eu vou mexer no pezinho de baixo tá lá pertinho de baixo ele só tirou a a parte verde ó embaixo eles são pedem pedem left ele

vai mexer aquilo que tá do lado esquerdo também então você configura da maneira que você quiser dentro do seu débito e você pode até por exemplo selecionar tudo isso aqui copiar essas novas medidas e jogar lá no original Sem problema nenhum e também serve se você quiser isso serve também para vou pegar essas quatro linhas aqui vou copiar e vou jogar aqui no link ó botei o pé deem O link quando atualizar aqui ó O link tá com ele era todo grudadinho e agora ele tá com o espaço dentro se você voltar aqui ó você

clicando no link abre o parágrafo clique no link você consegue também perceber que agora existe um pezinho de 10 e uma margem de 10 e de maneira semelhante a que o seletor do ar você pode também por exemplar Eu quero um pé de em E aí você vem aqui no pezinho top e diminui ou aumenta tá vendo ele aumenta para cá tá vendo ele não vai descer o texto Ele simplesmente aumenta ou perde e mais uma de cara já foi fala só um milhão de vezes você fez uma alteração aqui bagunço tudo basta atualizar e

tudo volta ao normal porque aqui você não mexe aqui é só para você brincar com as coisas certo então galera isso daqui essa ferramenta daqui o débito ele vai te ajudar a você entender melhor como funcionam as caixas dentro do seu site porque às vezes você não consegue fazer elas se encaixarem certinho tô Ai meu Deus elas não estão se encaixando eu não tô conseguindo ter o resultado cara vem aqui no débitos brinca com ele mexe entre as medidas a gente ainda não viu o mar gente falta a margem outline que a gente vai ver

na próxima aula mas você tá vendo aqui o comportamento de elementos Box level como H1 tá vendo ele é box level E você também tá vendo o comportamento de online levels tá elementos de caixa em levo beleza bom então estamos entendidos aqui já fizemos as primeiras configurações no próximo vídeo a gente vai continuar exatamente nesse ponto e vamos fazer outras configurações de Margem the outline eu vou te ensinar também algumas simplificações Então é isso meu querido é isso minha querida me despeço por aqui mas já deixa encontro marcado para o próximo vídeo a gente vai

continuar trabalhando com caixas entendendo melhor modelos de caixas em HTML um grande abraço e a gente se vê na próxima [Música] [Aplausos] [Música] E aí E aí [Aplausos] [Música]