Tutorial de CSS para iniciantes: produza seus modelos de Wordpress | Eddie Irvin | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Tutorial de CSS para iniciantes: produza seus modelos de Wordpress

teacher avatar Eddie Irvin, Web Development + Coding

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

47 aulas (3 h 23 min)
    • 1. Tutorial para iniciantes - comece a começar hoje

      1:58
    • 2. O que é os profissionais de CSS + Por que nós é nosso importos?

      6:12
    • 3. O que você precisa para ser configurado para este curso

      2:36
    • 4. Qual é o ponto de usar o CSS?

      1:51
    • 5. Como o código funciona para nos deixar usar o CSS?

      1:25
    • 6. Atrás as cenas de uma forma!

      6:50
    • 7. Mais sobre os selecionadores de CSS de CSS em larga ou seja

      6:29
    • 8. Como saltamos nossas mudanças?

      9:42
    • 9. Por que usar uma personagem de criança?

      3:28
    • 10. Como configurar uma tema de criança no Wordpress

      3:09
    • 11. Visão rápido no Chrome DevTools: nosso novo

      5:19
    • 12. Como selecionar nosso código de diferentes formas: não há apenas uma resposta!

      11:43
    • 13. Divas

      3:33
    • 14. Divs: Floats, fundos + largura

      6:44
    • 15. Como usar vários seletor para o mesmo mergulho

      4:11
    • 16. Como fazer os elementos desse: use a propriedade de exibição

      4:39
    • 17. Divas cortantes: é hora de FLoAT

      2:11
    • 18. Como usar o texto de lugar em seu a

      7:23
    • 19. Assista o seu código: o MASta de lugar

      1:10
    • 20. Como usar as orders: faça isso para corrigir seu código

      2:22
    • 21. O que a transformação de texto

      3:07
    • 22. Preste atenção a detalhes: a altura de linha

      3:16
    • 23. Como estilizar seu texto de lugar

      1:53
    • 24. Exploração rápida: elementos de HTML que você usa a cada dia.

      5:48
    • 25. Trabalhando com imagens: largura, altura e de de a mais acessibilidade

      10:27
    • 26. Trabalhando com links: somando e marem + Como corrigir um problema comum

      8:26
    • 27. Como de estilo para mudar quando você HOVER em a

      5:35
    • 28. Faça um link "Pop" quando o clique

      5:36
    • 29. Visão rápida: design de resposta

      6:22
    • 30. Porcentagens, Pixels + a caixa de de fronteira "Hack"

      5:26
    • 31. Forçar um elemento para manter a

      3:39
    • 32. Centragem : texto Text-Align em Margem

      4:05
    • 33. Devemos escrever a Styling no arquivo em HTML ou CSS?

      2:35
    • 34. Especifica de CSS em

      3:08
    • 35. Como corrigir divs de coleta

      4:00
    • 36. Limite suas diversões Floating

      4:42
    • 37. Configuração de formulário: o que você precisa para fazer para esta seção

      2:09
    • 38. Próximo passo: dê as entradas

      4:36
    • 39. Largura + caixa de reserva

      1:54
    • 40. Fundos de entrada de formulário

      2:34
    • 41. Bordas de formas

      2:58
    • 42. Próximo passo: transformação de texto + alinhamento para texto

      1:34
    • 43. Faça suas fontes de a combinação (e use o Google Fonts!)

      2:38
    • 44. O botão de envio perfeito

      6:20
    • 45. Faça a mudança de botão no de de

      4:02
    • 46. Obtenha inspiração em outras sites: modele seu código

      2:02
    • 47. Aprenda uma coisa de uma vez em uma vez + me a alguma coisa!

      0:44
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

401

Estudantes

--

Sobre este curso

f4f28905

O guia de COMPLETOS para dar uma nova vida e um visual profissional para seu site!

DESCRIÇÃO

Você está alguém que está trabalhando com o Wordpress e quer levar seus sites para o próximo nível mudando seu visual e em seu estilo em seu look e seu estilo?

Ou talvez você esteja de frustrado como quer se fazer em as mudanças, mas não pode descobrir como fazer isso.

Talvez você a de sua site de parecer e você fez o melhor que você pode mas que continue ficando

Se você não tiver a aprender, me descula em dizer que essa frustração não não vai se vista! E tão frustrante como é agora, imagine o que você vai sentir um mês ou um ano a partir de agora quando a a de a mais de a mais de que a pessoa de a mais de a mais de uma

SEI como essa frustração se sente de frustração, estou lá, e sei como pode ser a medida de que pode ser para saber que as mudanças você quer fazer se fazer, mas não sabe como fazer as fazer. Mas aprendi o caminho de estilo de sites e é chamado CSS, e é de CSS, e é o que eu quer ensinar hoje.

Dê uma olhada de um exemplo de como uma simples de chata pode ser fácil e rápida em algo de amigável e responsivo! Vou dar orientações de você exatamente como fazer isso e outras coisas como neste curso.

Além disso, a sensação de parecer de ser capaz de ver as cenas de qualquer site do Wordpress que você a visitar e ver como eles estilizou como a sua empresa de

Imagine usando a código que faz seu site parecer muito melhor o that o INSTANTE que você adicione.

E o que você vai sentir quando estiver em mente para usar um tema chata e de sua própria personalidade, usando rápida e fácil CSS.

Este curso é o guia completo para iniciantes e é a ferramenta exata que você precisa para estilo do site do Wordpress

Este curso será super útil para você agora e no futuro quando tiver uma pergunta sobre CSS. É fácil fazer qualquer pergunta em qualquer momento e vou estar certo com você, respondendo

Faça este curso agora e vou ver VOCÊ no outro lado!

Quem é o público alvo?

  • Este curso é para pessoas que querem fazer as mudanças no LOOK e
  • Este curso é para iniciantes para
  • Este curso é para pessoas que querem fazer rapidamente e fácil para fazer seu site mais fácil e de ser de fácil usuário e divertido
  • Este curso NÃO é para alguém que não se importa com como seu site
  • Este curso NÃO é para alguém que que de alguém que is sobre como fazer seu site
  • Este curso NÃO é para alguém que de nós que odde aprender e descobrir novas coisas

Requisitos

  • Você deve estar familiarizado com o Wordpress
  • Você deve ter conhecimento muito básico do HTML
  • Todos o software de necessários é gratuito (e de download estão incluídos)
  • Você deve garantir que você queira gostar do meu estilo de ensino (por favor pré-visualize um vídeo)!

Conheça seu professor

Teacher Profile Image

Eddie Irvin

Web Development + Coding

Professor

Hello! I've been working on websites for a decade and a half, first by starting with my own projects and then building sites for others. I started just with basic html, and since then have moved on to use Wordpress almost 100%, and design using CSS. I know php, jquery/javascript and I'm starting to learn React Native as well to start creating iOS/Android apps!

I want to save you time, and my CSS course on Skillshare is meant to get you up to speed quickly and without the headaches!

Please don't hesitate to reach out with any questions. Coding can be super confusing sometimes, and my goal is to make it as simple as it possibly can be!

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Tutorial para iniciantes - comece a começar hoje: você é alguém que tem trabalhado com WordPress e quer levar sua visão para o próximo nível, mudando sua aparência e seu estilo. Ou talvez esteja frustrado porque quer fazer mudanças, mas não consegue descobrir como fazê-lo. Talvez você tenha tentado fazer seu site parecer melhor, e você fez o melhor que pode, mas você continua ficando preso. Bem, se você não aprender essas coisas, sinto muito em dizer que essa frustração não desaparece. E por mais frustrante que seja agora, imagine como você se sentirá daqui a um mês ou um ano, quando você ainda não sabe como fazer o seu site com rapidez e facilidade. Eu sei como essa frustração se sente porque eu estive lá, e eu sei o quão irritante pode ser saber que tipo de mudanças você quer fazer, mas então não saber como fazê-las. Mas eu aprendi o caminho certo para estilizar sites, e é chamado CSS, e é isso que eu quero ensiná-los hoje. Dê uma olhada neste exemplo de como uma forma simples e chata pode ser facilmente e rapidamente transformada em algo móvel, amigável e responsivo. Eu vou te ensinar exatamente como fazer isso e outras coisas assim neste curso. Imagine também o que será capaz de se sentir como dedo do pé. Veja os bastidores de qualquer site WORDPRESS que você visitar e veja como eles o elegeram e , em seguida, ser capaz de modelar esse estilo para o seu próprio site. Imagine o uso de código que faz com que seu site pareça muito melhor no instante em que você o adiciona. E qual será a sensação quando você tomar um tema chato e injetado com a vida em sua própria personalidade rápida e facilmente usando CSS? Este curso é o guia completo para CSS iniciante, e é a ferramenta exata que você precisa para estilizar seu site WordPress. Quando você se juntar a este curso hoje, você obtém acesso vitalício. E não só isso, este curso será super útil para você agora e no futuro. Sempre que você tem uma pergunta sobre CSS, é fácil fazer qualquer pergunta a qualquer momento, e eu estarei lá com você respondendo. Clique em fazer este curso agora e eu vou vê-lo do outro lado 2. O que é os profissionais de CSS + Por que nós é nosso importos?: Olá e bem-vindo a este vídeo. Isso é tudo sobre seletores CSS. Agora, para ser super simples, eu só quero que você pense em um seletor como um apelido para uma certa parte do nosso código. Agora, se você não pode, uh, você não pode colocar apelidos em certas partes do seu código. Se você tentar mudar a cor, mudar o tamanho da fonte de mudar todas essas coisas mais tarde, você vai ter um momento muito ruim porque você não está mirando a coisa certa. Você não está selecionando a coisa certa. Ok, então há dois tipos de seletores. Há eu DS e aulas, mas ambos são apelidos. Ok, então qual é a base de todo esse vídeo, eu quero que você pense OK, tudo que ele está falando é colocar apelidos para sujeira em diferentes partes do código. Ok, então isso é simples como é. Às vezes, o jargão fica um pouco confuso, mas só estamos colocando apelidos em certas partes do código. Então em I d é um seletor ou um apelido que você deve usar apenas cerca de uma vez versus uma classe é um apelido que você pode usar várias vezes. Eu gosto de usar aulas porque você pode usá-las uma e outra vez com uma identidade. identidade Você está meio preso com Onley usando uma vez, e eu não gosto disso. Ok, então eu uso aulas. Agora dê uma olhada nisso aqui. P classe de espaço é igual e, em seguida, entre aspas bananas, você pode Você pode dar apelidos. Pode dar os apelidos que quiser. Duas partes do seu código. Você pode nomeá-los coisas ridículas Você pode nomeá-los coisas que ajudam você tipo de organizar seu pensamento. Às vezes eu invento apelidos muito estranhos só porque eu acho que é divertido e torna isso um pouco mais excitante. Mas então essa parte do código dê uma olhada nisso. Você pode ver quando eu rolar por cima. Destaque na classe P é igual a bananas que fazem xixi aqui. Isso é apenas um elemento de texto. Certo, basta enviar uma área de texto. Basicamente. Então ele está dizendo ok com o P, está dizendo uma área de texto com apelido ou classe de bananas. Ok, então venha aqui e você pode ver que são bananas p dot. Agora há duas coisas acontecendo aqui. Primeiro de tudo, estamos no cromo e estamos no Dev Tools. Você chega aqui clicando com o botão direito do mouse em qualquer parte do seu código e clicando em Inspecionar e isso irá abrir este código para o lado. Se estiver na parte inferior da tela assim, você pode clicar nesses três pequenos pontos aqui e depois trazê-lo para o lado. Eu gosto de ir para o lado porque isso faz mais sentido para mim. Então esta seção é o HTML e esta seção é o CSS. Ok, então quando vamos desta seção dois nesta seção, nós estamos realmente olhando para dois tipos diferentes de arquivos. Agora, você pode bagunçar qualquer área deste código, e ele não vai realmente escrever para o código. Então é realmente entregue. Você só mexe com ele, brinca e assim que você atualizar a página, você está pronto para ir. Então dê uma olhada nisso de novo. Então classe p é igual a bananas. Esse é o HTML. É assim que escrevemos. Classe é igual e, em seguida, entre aspas, bananas. Mas então aqui, olhe para este p dot bananas. Agora olhe para o ponto. O ponto é que deve indicá-lo. Certo, esse é um apelido que é chamado de seletor CSS ou classe CSS ou o quê? Eu gosto de chamar-lhe um apelido com o ponto É um apelido. Ok, então este P é um olhar para isso é para diferentes seções. É um ele está procurando áreas P ou áreas de texto com apelido de bananas ponto. OK, então aqui está o HTM fora classe igual a bananas. E então aqui, é o lado CSS, que é dot banana. Então você não usa pontos nesta área. Você realmente diz classe é igual e, em seguida, cita você digitar o que é. Mas aqui, no lado CSS, a maneira que temos como alvo, seja, usando pontos para classes. Ok, então agora, porque eu tenho essa área com esse apelido específico, eu posso mudar o tamanho da fonte. Posso mudar de cor. Posso mudar a altura da linha. Posso mudar a largura. Eu posso fazer todos os tipos de coisas diferentes apenas para essa área porque eu dei um apelido no HTML. E então eu escrevi o código para esse apelido no CSS. Ok, então aqui eu quero ver bananas p dot que estavam todos juntos. Não há espaços lá. Isso é porque ele está olhando quatro elementos p com o apelido Bananas. Se eu colocar um espaço aqui, o que é esse ditado? Está dizendo, procurar por elementos P? E então, dentro desses elementos p, procure por outra coisa com um apelido de bananas. Ok, a razão pela qual este código funciona assim quando você colocá-lo juntos poderia se livrar desse espaço é porque ele está procurando por elementos P com apelido bananas. Não está à procura de elementos P com algo mais dentro dele com o apelido de Bananas . Ok, então essa é uma grande distinção. Só um pequeno espaço pode atrapalhar você. Se você digitar este código e você fizer todas as suas bananas P e, em seguida, ponto espacial, ele não está procurando a coisa certa. Você selecionou a coisa errada. Você apontou a coisa errada. Ok, então preste muita atenção que quando eles são esmagados juntos, ele está procurando por elementos fora que ele está procurando por eso como Pete bem aqui. Está à procura de elementos P com o apelido de bananas assim. Mas se você colocar um espaço lá, ele está procurando por elementos com em um elemento P que são apelidados de bananas. OK, então você sempre pode ter coisas dentro de outras coisas com HTML, há tantas caixas dentro de outras caixas. E depois há fontes, insider. Há áreas de texto dentro disso e, em seguida, dentro de áreas de texto há vãos, e há seções dentro disso. Portanto, há sempre seções dentro de seções dentro de seções. Então é por isso que é útil às vezes ser capaz de colocar um espaço. Mas eu só quero que você realmente, realmente entender que se colocarmos um espaço lá, ele está procurando por algo dentro desse elemento com esse apelido. Mas se você colocá-lo, se você combiná-los, colocá-los juntos do que ele está procurando aquele elemento específico que elemento P aquele elemento de texto com o apelido ou classe de bananas que eu vou ver no próximo vídeo. 3. O que você precisa para ser configurado para este curso: Tudo bem. Então eu vou te mostrar como se preparar. Tudo vai precisar para você começar neste curso. Agora você precisa ter uma instalação wordpress. Se você precisar de ajuda para obter wordpress instalar. Este não é o curso para você. Eu sinto muito. Há uma abundância de recursos é, e eu posso tentar vincular algumas coisas, mas você precisa começar com uma nova instalação WordPress ou apenas o seu site. Seja o que for, não precisa ser fresco. Mas você só precisa ter certeza de que você tem onde a imprensa já está instalada e pronta para ir . Então vá para plugins, verifique se você tem formulários de contato. Sete. Certo, porque vamos trabalhar nisso. Este é um ótimo plug in. Se você precisar de qualquer tipo de formulário de contato em seu site. Isso é incrível. Mas nós vamos estar estilizando esse formulário eso Apenas certifique-se de que você está tudo pronto com isso, e então vamos para páginas são realmente sabe. Eu sinto muito. Nós criamos um contato para ele primeiro e nós vamos apenas padrão. Chame o que quiser. Isso é bom. E, em seguida, clique. Poupe agora o que precisamos aqui. A informação que precisamos é deste tipo, este pedaço de código. Então eu vou copiar isso com os suportes. Isso é chamado de código curto. Precisamos disso. Ok, então copie esse cara logo ali Depois de criar seu formulário de contato e clicar em Salvar que deve aparecer se você não conseguir encontrá-lo. Por algum motivo, se você clicar em formulários de contato, você deve ver o um ou este é o um. Este padrão quando acabamos de fazer em há a informação ali mesmo. Então vá para páginas e clique, adicione novo e, em seguida, direito no texto de você poderia texto aqui. E então nós vamos colocar o código que eu vou chamar este formulário de iniciante. Não é importante o que se chama a isto, mas aqui vamos nós. Publique, e temos agora que temos tudo pronto. Agora temos um formulário de contato ao vivo em nosso site. Agora, eu não gosto deste link Perma para ver este ponto de interrogação com a página 87 que é um saco . Vamos mudar a permanência muito rápido para postar nome, clique em salvar alterações e, em seguida, vamos voltar para páginas todas as páginas e forma iniciante. Agora, quando clicamos no formulário de iniciante, você pode ver que é a forma de iniciante bem ali. Ok, então aqui vamos nós. Queremos ir para aquela forma de iniciante, e aqui está a nossa forma Parece bonita e bonita. Tem todo esse lixo do lado. Então eu realmente quero você. Teoh, certifique-se de chegar a este ponto antes de continuar. Se você não pode chegar aqui, então vai ser difícil seguir junto nos próximos vídeos se você precisa tipo de re assistir isso ou tipo de posit e fazer cada passo. Eu sei que fui um pouco rápido, mas veremos no próximo vídeo assim que você estiver pronto para ir. 4. Qual é o ponto de usar o CSS?: Olá. Certo, então por que estamos fazendo isso? Qual é o sentido de tudo isso? E como funciona? Então, no lado esquerdo. Aqui, dê uma olhada nisso. Este é o Este é o site real. Isto é o que é exibido para as pessoas que visitam. E então se você olhar para esta área, este é o HTML é todo o código HTML para o seu site, e então aqui está o CSS. Ok, então CSS é um arquivo separado de um arquivo HTML. HTML é uma espécie de layout de como as coisas acontecem. Mas o CSS é todo o estilo. O que? Como as coisas parecem e por isso usamos seletores para ser capaz de mudar diferentes partes do código. Há mais sobre isso em um vídeo diferente. Mas basicamente, eu quero que você pegue o conceito do que está acontecendo aqui que, a fim de chegar aqui a esta bela seção da cabra, nós temos que primeiro ter este HTML acontecendo, que com o WordPress, um Muito disso já está escrito para você. Tudo o que adicionamos foi a forma e então tudo o resto é cuidado. Mas com o CSS, esse é um arquivo separado que é carregado separadamente. E, hum, isso nos permite ser capaz de mudar certas partes do HTML. Ok, então abra, abra cromo. Se não estiver em Cromarty, abra o cromo. Certifique-se de que você pode chegar a esta área porque isso vai ser muito, muito útil para nós. Hum, se você está apenas vendo a página web normal como esta, você pode pressionar f 12 ou, uh, deixe-me pressionar f 12 novamente para sair de lá foram clicar com o botão direito e depois clicar. Inspecione. Está bem. E então isso vai puxar esse cara para cima. Se por algum motivo esse cara está baixo assim ou se ele é como uma área separada , basta clicar nesses três pontos aqui e colocar a doca do lado direito. Isso vai ser muito útil para você. É só mais limpo. É mais claro. Você também pode movê-los para dentro e para fora. E também há uma área inferior aqui. Por alguma razão, é assim. Puxe isso todo o caminho para baixo. Não precisamos disso por enquanto. Nós só queremos ver que html aqui e, em seguida, o CSS ver no próximo vídeo 5. Como o código funciona para nos deixar usar o CSS?: Então, uma coisa que é realmente, muito legal sobre o WordPress é que tudo está meio configurado para você. Se você tentar criar seu próprio site sem WordPress e você colocar você carregar seus arquivos HTML e carregar seus arquivos CSS, você tem que chamar esse arquivo CSS de com no arquivo HTML. Então é exatamente como os arquivos HTML. A principal coisa que é carregada quando você vai para uma página da Web e ele tem que ter ele é basicamente tem que tocar o arquivo CSS e trazê-lo para dentro Caso contrário, você não terá nada desse estilo. Mas com o WordPress, tudo isso está ligado para você. Ok, então eu encontrei no código, eu encontrei exatamente o que o arquivo CSS é. Ok? E onde é, na verdade, de onde ele está sendo chamado. Então está no cabeçalho que você vê entre essas tags cabeça cabeça, ele está no cabeçalho, e então é aqui embaixo, geralmente para WordPress. Será no seu conteúdo duplo WP em temas e, em seguida, no nome do tema e, em seguida, o estilo que arquivo CSS. Às vezes você estará chamando um arquivo CSS com em outro arquivo CSS. Você não precisa fazer isso. Esse é outro nível de coisas que você não precisa se preocupar agora. Mas eu só quero que você realmente entenda a razão pela qual quando fazemos alterações no CSS que vemos no site é porque WordPress já fez o trabalho para nós para conectar o arquivo CSS no arquivo HTML nós. Quando fazemos essas mudanças, elas aparecem. Tudo bem, veja na cama ao lado. 6. Atrás as cenas de uma forma!: Tudo bem. Agora que sabemos sobre seletores, vamos jogar um pouco com eles e vamos usar ferramentas do Chrome Dev para ser capaz realmente descobrir, você sabe, para onde devemos estar apontando e como devemos dar certos apelidos para certas seções do código. Então você pode ver onde essa forma de iniciante tem você, certo? Clique no seu nome e, em seguida, clique em Inspecionar. Em seguida, ele puxa para cima no código. Isso nos leva direto para onde precisamos estar. Você pode ver que há este elemento p que é um elemento de texto em, e, em seguida, ele tem o seu nome necessário ali mesmo. Se eu clicar com o botão direito e clicar em editar texto, eu posso dizer o que eu quiser que ele diga Boom. Olhe para isso agora. Isso não mudou o código real das teias que se eu recarregar a página que se foi e essa é a beleza das ferramentas da morte é que eu posso mexer com qualquer coisa. Eu posso mudar um site como eu quiser, e se eu atualizá-lo, eu não estraguei tudo. Mas se você quiser alterar, você tem que se certificar de que quaisquer alterações que você fizer aqui. Você foi capaz Teoh. Copie-os de volta para o seu código no back-end do WordPress. Certo, então quando fizermos mudanças no CSS, teremos que fazer a mudança para podermos ver o que está acontecendo com eles. Copiará isso para o arquivo CSS no back-end do WordPress. Se isso não faz sentido para você agora, não se preocupe com isso agora. Eu só quero que você se concentre em seletores e brincando com seletores. Então vamos dar uma olhada nesta entrada aqui. Vamos clicar com o botão direito nesta entrada e clicar. Inspecione, e você pode ver Olhe para isso por um segundo. Tem aquele verde ao redor. Tem uma área azul. Tem um cabelo de laranja. Eu não sei o quão grande você estava olhando para este vídeo, mas ele tem um cabelo de uma borda laranja em torno dele. Olha, Olha, sim, parece uma borda laranja. Na verdade, não é. Não é laranja cultivada estava apenas nos dizendo Oh, hey, há uma fronteira aqui. Então olhe para a fronteira. É colorir diferentes partes da floresta de código para que pudéssemos realmente ter uma boa idéia do que está acontecendo naquela área, em vez de apenas destacá-la. É destacá-lo, me dando diferentes destaques para coisas diferentes, para me dizer coisas diferentes sobre o casaco. Então, se viermos aqui e pudermos ver que esse cara de topo está nos mostrando, você sabe, ele tem um fundo, ele tem que voltar à imagem. Tem uma borda, uma cor de raio de borda dando tapinhas todas essas coisas. Vamos desmarcar algumas dessas coisas. Você pode ver o que está acontecendo. Então deixe-me desmarcar o fundo. Olha o que está morto. De repente, esses fundos para todas as entradas desapareceram. Agora, como é que ele muda o fundo de todas as entradas? Porque o seletor aqui em cima era um seletor muito geral. Não dizia entradas com o apelido de bananas. Escolheu entradas, todas as entradas. Então isso é o que é realmente útil sobre CSS é que se você fizer uma alteração, eu apenas desmarque uma caixa. Ele muda todas essas coisas diferentes de uma só vez sem ter que passar e mudar cada uma delas. Ok, então isso é muito, muito útil. Vamos passar por essas coisas só para que você possa ver o que está acontecendo. Então, imagem de fundo. Isso é, na verdade, um backup para este fundo aqui. Se o fundo não funcionar, então ele vai ter ah, imagem de fundo. Na verdade, há um pouco de ingrediente lá, eu acho. Não, não, é tudo a mesma coisa. Cor 2 55 a 55 a 55 a 55. Ok, hum e depois fronteira. Olhe para essa bagunça. Com a fronteira. Às vezes, as bordas padrão de de navegadores apenas se parecem com 1993. Então, provavelmente é por isso que isto está aqui. Porque o padrão se parece com isso, que é um raio de fronteira horrível. Isso é, uh isso é o Você sabe como a fronteira é circular. Deixe-me mudar isso para 20 para ver se conseguimos ver. Sim, olha para isso. Vês? Veja, eu era circular. É assim que você afeta essa mudança. A cor deste é a cor do texto do texto. Então, olá. Como você faz? Onde é que está? Tchau tchau. Tchau, tchau, vibe com Bob. Um osso. Oh, agora, olha o que aconteceu. Comecei a digitar aqui, e de repente o código em que eu estava trabalhando desapareceu. Onde é que ele foi. Foi aqui em baixo. Na verdade, há um conjunto inteiro de código que apareceu porque eu me concentrei nele porque eu cliquei nele e comecei a digitar. O código realmente mudou. Ok, então você pode ver aqui entrada e, em seguida, digitado carvão texto e foco. Há um conjunto completo de código para quando eu clicar nele. Ele realmente muda Teoh para mostrar um tipo diferente de CSS. Então isso é realmente útil porque faz o seu código ganhar vida. Você sabe, como as pessoas clicam nas coisas e quando elas passam o mouse sobre as coisas, você pode fazer com que seu código mude automaticamente. E isso é o que traz vida a ele. Você pode ver que a borda realmente vai mudar quando eu clicar sobre ele. Isso é útil porque meio que me mostra onde estou. Se eu desmarcar isso, então ele realmente não realça essa área do código. Então é muito, muito divertido ser capaz de usar CSS, hum, ser capaz de fazer o site ganhar vida Agora, neste caso, neste caso, ele está usando esse foco esse termo de foco para ser capaz de dizer, sempre que você se concentrar nele do que executar este código em vez disso e, em seguida, que o código substitui o código normal. Ok, então aqui em baixo, é apenas o código de entrada normal. Mas assim que eu me concentrar nisso, então essa outra coisa é puxada para a vista. Ok, então se eu não me concentrar mais, deixe-me ver. Como é que fazemos isso? Uh, meu Bob sobre Bob, sobre onde podemos colocar bem ali. Ok, então, uh, então agora eu cliquei fora. Eu cliquei em Ah, você sabe, apenas uma área branca que eu não cliquei na entrada real. Eu cliquei em uma área diferente, e então eu entrei no código e encontrei essa seção específica novamente para que eu possa visualizá-la sem ver o código focado. Eu só quero ver o código normal quando eu não colocar meu foco nessa área da página da Web . Então, de volta a aqui é que cor. Essa é a cor das coisas que você digita. Ok, então quando você faz cor, isso não é cor de fundo. Na verdade, essa é a cor do texto. E depois batendo. Olhe para isso. Quão divertido é isso? E tenha em mente, isso está mudando todos de uma vez. Você vê que ele está mudando esse nome, campo, o campo de e-mail e o campo de assunto de uma só vez. Esse é o poder do CSS é você fazer uma mudança e, em seguida, muda tudo de uma vez e , em seguida, com olhar para isso com 100% para que você possa ver que há todas essas coisas diferentes que jogam em, você sabe, fazendo seu site pode ganhar vida e parecer que ele está vivendo, respirando e reagindo a você. Se você não fizer nada disso, então vai parecer 1993 ou seu pessoal vai ficar confuso sobre onde eu estou ou o que está acontecendo. Mas se você fizer algumas mudanças, seu site terá uma sensação totalmente diferente e parecerá muito mais profissional. 7. Mais sobre os selecionadores de CSS de CSS em larga ou seja: Agora vamos dizer que você deseja afetar a mudança em uma determinada parte do seu código no Chrome, e você tem ferramentas Deb abertas. Tenha em mente que é F 12 ou seu futuro certo. Clique na tela e clique em. Inspecione. Então isso vai aparecer esta janela à direita aqui. Mas o que você faz, o que você quer fazer éclicar com obotão direito do mouse e depois clicar em Inspecionar na parte específica do código que você deseja alterar agora . Mas o que você faz, o que você quer fazer é botão direito do mouse e depois clicar em Inspecionar na parte específica do código que você deseja alterar agora Normalmente cromo é muito bom com isso, uh, ajudando você tipo de forma seu código. Se vieres aqui veres isto aqui, isso vai criar uma nova regra de estilo. Agora, isso é muito, muito útil. Porque se você apenas sabe, você direito, clique em uma determinada parte do código e você clica em nova regra de estilo. Ele vai aparecer com algo que será capaz de afetar a mudança para essa área específica. Mas o problema é que, às vezes, o cromo fica um pouco específico demais ou um pouco largo demais. Agora, o que quero dizer com isso é que não puxou um apelido para aquela pequena área específica na verdade, puxou apenas o elemento P. que significa que se eu mudar o código para este elemento p, vai mudar todos os elementos P em todo o site. Isso significa que qualquer coisa que é texto vai ser alterado sobre o novo tamanho 40 PX. Olha, o que aconteceu. Todas essas mudanças. E então se eu continuar, se eu passar por mensagens de bloco ou qualquer outra coisa, tudo isso teria 40 pixels de altura. Hum, isso não é bom. Às vezes, o cromo é bom se você, uh, se você clicar nesta nova regra de estilo, ele vai levá-lo tipo de direito para o seletor. Você precisa dele vai encontrar o apelido e vai colocar o apelido lá. Mas às vezes é tão amplo, e não ajuda, então podemos enfraquecer algumas maneiras diferentes aqui. Agora, primeiro de tudo, deixe-me me livrar disso. Primeiro de tudo, podemos colocar um apelido no HTML. Então, digamos que queremos mudar essa área. Clique com o botão direito do mouse e clique em como html. E, em seguida, dentro desta tag P, aqui vamos nós. Classe espacial é igual a bananas. E agora, como você clica fora de você para clicar fora para meio que fazer isso acontecer. Você não pode pressionar Enter, eu acho, porque isso vai fazer uma próxima linha. Mas agora esta área tem uma classe de bananas. Agora, se clicarmos, então tenha em mente que está selecionado agora. Se clicarmos em nova regra de estilo, Chrome vê isso e percebe que e, em seguida, me dá que ponto Bananas me dá a classe de bananas. Então, agora, se fizermos uma mudança para isso, o Lee vai mudar aquela pequena área. Ok, então eu quero que você use este botão o tempo todo. Você vai usar este botão aton, mas certifique-se quando você clicar no seu primeiro enquanto você está selecionando a área certa. Mas certifique-se de que quando você clicar no cromo, verificar duas vezes o que o cromo está fazendo. Você está se certificando de que não é muito amplo selecionar as áreas P para a totalidade do seu site e também que ele não é muito específico. Agora deixa-me dar-te uma ideia. Se eu clicar com o botão direito, clique neste e clique em Inspecionar e é por isso que eu estou clicando com o botão direito do mouse na primeira entrada para o nome abaixo do nome e clicando em. Inspecione. E então eu cliquei nisso aqui. Olhe para esta coisa toda importação ponto wc tem sete pontos de controle de forma para ser observador. Boson do Tech Start W valida o seu registo. São quase dois específicos. Agora, se você fizer alterações nisso, o que você verá é que no Lee mudou duas dessas três caixas. Agora essa área aqui embaixo, é uma caixa de texto. Isso é definitivamente ser diferente de qualquer maneira. Mas esses três campos que eram do mesmo tamanho olham para isso. Olhe para o mesmo tamanho que eu estou pensando, Oh, minuto. Eu estou indo para a direita Clique em uma pequena área, e isso vai mudar todos os três, mas porque é muito específico ele realmente nocauteou esse cara. Agora, eu não sei exatamente a razão, mas eu vou começar a tirar alguns desses apelidos, e eu estou realmente para começar por trás. Então eu vou levar, uh, uh, onde então eu estou selecionando isso. Vou tirar esse cara. Então lembre-se, tenha em mente que o ponto vem com o que quer que esteja atrás dele como o apelido. Ok, então este ponto WP f 7 valida é necessário que tudo vá junto, então eu vou começar com esse ponto e tirar a coisa toda. Excluir. Agora veja o que aconteceu. Boom. Boom, boom. Todos os três trocam de ar agora. Então algo aconteceu onde, uh, cromo. Ele me deu um seletor para poder mudar o que eu queria mudar. Mas foi tão específico que na verdade não mudou todas as coisas que eu queria dizer. Eu não queria apenas mudar este. Eu queria fazer mudanças em todos os três, ou mesmo em todos os quatro. Mas, na verdade, isso é diferente. Essa caixa de texto é uma coisa diferente. Então você quer usar o Chrome para poder adicionar essas novas regras de estilo porque ele ajuda você. Acelera você, mas não deixe que seja muito amplo. Como o seletor de peças que fizemos antes Isso iria selecionar todo o texto, todos os elementos P em todo o seu site. Tivemos que dar um apelido de bananas. Certo. Mas aqui estava para ... Estava muito focado para que não mudássemos algum código. Mas aqui estava para Agora, deixe-me tirar isso com esse cara e ver o que acontece. Vou tirar isso. Deixe este segundo apelido ou este segundo ao último apelido. Agora vamos ver o que acontece agora o código ainda permanece. Ele ainda fica. Então, é muito útil aqui que talvez tudo o que eu precisava era apenas uma entrada. Então esse é o elemento, certo? Com apelido de WP Debbie PCF sete Form Control Isso é tudo que eu precisava para ser capaz de afetar a mudança nesses três. Mas quando eu cliquei sobre este direito clicou sobre isso e clicou, inspecionar destacou que área e, em seguida, clique nesta nova regra de estilo. Chrome me deu um apelido tão específico para essa área que eu estava, uh, eu estava meio que atirando no meu pé porque eu estava ficando tão específico que não foi trazido o suficiente para ser capaz de afetar exatamente as coisas que eu queria fazer efeito. Então a regra aqui é prestar atenção em como o Chrome escolhe certas coisas, e então você tem que adicionar um apelido para torná-lo mais específico, ou talvez você precise tirar alguns apelidos. Para ser capaz Teoh, certifique-se de que você pode realmente afetar a mudança que você deseja efeito Teoh nessa área. Espero que isso ajude. Vou ver o próximo vídeo 8. Como saltamos nossas mudanças?: Tudo bem, agora o que vamos fazer é salvar as mudanças que fazemos em ferramentas profundas . Agora, o problema é com DEPT. Ferramentas é que tudo é temporário, bom e ruim. O fato de que você sabe, como você faz alterações aqui se você redefinir, se você atualizar a página, eles se foram. Eso É bom em alguns aspectos, mas em outros aspectos, como temos que ter certeza de salvar nossas mudanças. Então é isso que vamos fazer. Vamos garantir que enquanto as pessoas digitam, meu nome é Bobby Jones. Quero que esse texto seja lido em vez da cor atual e atual. Então, há duas coisas acontecendo. Primeiro de tudo, tem que selecionar essa área, certo? Mas também não é apenas selecionar essa área, mas selecionar quando eu me concentrar nela. Agora você pode ver quando eu clicar nesses diferentes, você pode ver que eles mudam. Você pode dizer as mudanças de fundo e então há uma linha azul em torno dele. Isso é porque quando eu me concentro nele, ele me traz um conjunto diferente de CSS. Ok, então para esta entrada. Quando eu clique com o botão direito e clique inspecionar ele me mostra ter um importante em tudo isso gobbledygook . Hum, mas eu não quero apenas mudá-lo. Quando? Quando é quando eu não selecionei assim. Você vê como ele tem o fundo cinza? Eu quero mudá-lo para torná-lo vermelho quando eu clicar sobre ele como eles preenchê-lo, eu queria ser lido. Certo, Certo, então clique com o botão direito e depois clique em Inspecionar ao clicar nisso. Só me leva até agora porque não está me dando a área de foco do Colin do código aqui. Então eu sinto muito. Isto é confuso. Basta ver o que estou fazendo e você vai conseguir como eu faço. Certo, então isso aqui que encontramos no último vídeo. Isso foi bom o suficiente. Concentre-se nessa área. Mas o que vamos fazer é usar esta ferramenta de alfinete aqui. Alternar o estado dos elementos, e vamos nos concentrar agora. O que isso faz é forçar o código a me mostrar o tipo focado desse código. Se eu me concentrar nessa parte do código, o que será? O que mais ele me mostra assim, tão desmarcada e verificação un. Isso é super útil porque olha, é quase um Ziff. Só estou a verificar aqui. É quase como se eu estivesse clicando nessa área e depois clicando fora dela assim. Você vê isso? Ok, mas eu estou fazendo isso no código agora, então ele está me mostrando exatamente para que você possa ver tudo isso. Colin, Foco, Colin, Foco. Colon, foco. Cullen, concentra-te. Isso é o que está mostrando. Isso é o que eu precisava de acesso porque eu queria mudar a cor do fundo quando eu estava focado nele. Ok, eso aqui vamos nós aqui, e esta é a cor bem aqui. Número. Faça isso ler. Você também pode digitar vermelho, se quiser. Isso é bom. E olha, lá vamos nós. E olha, Estamos todos prontos. Isso é ótimo. Então agora o que vamos fazer é pegar esse código, e eu vou selecionar de baixo para cima. Olhe para isso. Eu tenho aquele suporte bem ali. Não faça a mídia, mas comece do eixo inferior e vá até lá e eles iam copiá-lo. E então, enquanto entramos no meu painel de blog. Temos acesso ao editor de aparências. Você vê isso, então a primeira coisa que ele abre é estilo que CSS. Agora você vai ver isso em qualquer instalação wordpress. Vai ser estilizado em Dot CSS. Ok, Agora, este tema 2016 veio com este estilo específico. Ela você pode ver todos os modelos à direita. Aqui está. Aqui embaixo, você pode ver a folha de estilo. É isso que vamos mudar. É aí que colocamos o código para o que fazemos em ferramentas de profundidade. Então eu vou e vou rolar para baixo agora. Isto parece loucura. Há tanta informação aqui. Oh, meu Deus. O que estamos procurando é que estamos procurando o intervalo entre as coisas responsivas e as coisas normais. Não, vou explicar isso um pouco mais à medida que formos aqui. Ok, então você vê essa tela de mídia e homens com iguais blá, blá, blá, blá, blá. Você só vai procurar a tela de mídia? Porque isso vai nos ajudar? Onde está a primeira tela de mídia? Vamos, vamos, vamos, vamos, vamos, vamos lá. Aí está você. Acho que foi o começo. da área. Ok, então nós vamos dar um pouco para ver a mídia aqui mesmo. Eu quero começar antes disso porque media queries são todos sobre design responsivo e ele muda o código com base no tamanho da página estavam indo para tentar ter certeza de que colocar nosso código acima que porque todos os direitos de código CSS sobre outro código CSS. Então ele precisa ser um tipo de estratégia baseado em onde você colocá-lo. Se você está preocupado com isso, então não se preocupe com isso. Basta ir para o fim do código e colocá-lo colocar o código lá. Mas se você puder procurar por consultas de mídia e logo antes disso, eu vou colocar um espaço enorme porque eu posso tornar mais fácil para mim da próxima vez. E eu só vou colar o código ali e você pode ver nenhum diz cor vermelha. Ele tem todo esse lixo com ele e, em seguida, clique em atualizar arquivo. Agora, uh, a parte divertida aqui é que nós mudamos o código. Agora a mesma coisa que estava nas ferramentas Deva deve estar na nossa página. Certo, então se voltarmos duas páginas, todas páginas e depois veremos quando eu digitar Henry Bob. Olhe para isso. Está vermelho agora por causa desse código. Agora, nós não precisávamos de tudo isso. Voltamos ao painel e, em seguida, aparência e editor. E então quando nós rolamos para baixo para aquele espaço em branco que eu faço o espaço em branco grande o suficiente para eu encontrá-lo facilmente fez. Eu não tive tempo suficiente para torná-lo grande o suficiente. Normalmente, coloque um espaço enorme aqui. Só o que estou a percorrer. Eu posso encontrar a área exata que eu quero ir, mas lá está ela. Isso poderia realmente funcionar. Agora, se eu tirar algumas dessas coisas, quero dizer, tipo de entrada, senha. Nada disso é uma senha, então eu poderia tirar isso quando você começar. Não se preocupe com o quanto cortar. Na verdade, alguns desse código realmente duplicaram porque a cor de fundo na cor da borda no contorno. Nós nem mudamos isso. Então estamos limitando a colar o mesmo código. É como quando ele carrega, ele vai carregar este pedaço inteiro sobre o bloco inteiro anterior. E mesmo que todos estivessem mudando sua cor vermelha. Eu ainda trouxe essas outras coisas conosco, mas não é grande coisa se você quiser. Se você quer ser um codificador perfeito, você vai tentar ser tão preciso e estreito e ter o menor código possível. Quando você está começando, apenas faça funcionar, certo? Apenas faça funcionar. Então funcionou. Então estamos bem. Foi o que fizemos exatamente. Queríamos brincar com isso com outras coisas que podem conseguir. Vou te dar mais algumas coisas para brincar. Deixe-me ir aqui de novo. Então eu quero clicar com o botão direito do mouse e, em seguida, clicar em , Inspecionar e, em seguida, ter em mente novamente. Estamos usando essa ferramenta de pin para clicar em Foco para garantir que estamos alterando o código quatro quando ele está focado. Certo, James, , e é com isso que quero que brinque. Eu quero que você jogue com o tamanho da fonte, então isso é o tamanho do traço da fonte, e então você faz qualquer número e, em seguida, p x. Ok, então esse é o tamanho de 20 p x 20 pixels. Há 40, há 60, há 10. Há muito dois, 20 e 200. Então brinque com encontrar tamanho e então eu também quero que você brinque com onde vamos. Quero que brinque com cores. Bem, você pode arrastar esse cara por todo lado com ferramentas hábeis. Você também pode ver que você vê este pequeno seletor cara. Isso é realmente como um seletor de cores, então você pode escolher qualquer parte do site. Para olhar para isso, é como se fosse como uma lupa. Bom, esse colarinho azul, e isso é meio engraçado. O azul tem todos esses tons diferentes, mas você pode escolher qualquer um. Você pode escolher qualquer cor e vai combinar com essa cor. Basta clicar e ele vai fazer isso. Vamos ver se consigo escolher aquele azul. Lá vamos nós. Então ele combina com aquele azul agora, então é realmente, muito útil esta ferramenta de seleção de cores Jogar com isso. Basta clicar com o botão direito na área de cores ali e jogar com e depois jogar com o tamanho da fonte e, em seguida, tentar copiar a sala de código. Lembre-se, a partir dos suportes ali, escolha os colchetes até o muito, muito superior aqui. Não escolha todos os meios de comunicação. Você não precisa disso. Mas então todas essas coisas quando você copiar e colar isso em, uh, deixe-me ver. Então, copie e o painel e, em seguida, editor de aparência e abre a folha de estilo imediatamente. Você tem acesso a todas essas outras coisas também. Mas só estamos trabalhando na folha de estilo. Vá até onde diz onde começam as consultas de mídia que eu coloquei um espaço grande o suficiente. Eu fiz. Aquele espaço foi super útil para que eu encontrasse isso novamente. E vou acelerar isto até aqui. Agora, olha, o que acontece se você tem algum código que você coloca antes e então você está basicamente mirando exatamente as mesmas coisas, mas apenas mudando algumas coisas. Você não precisa deste código antigo. Ok, então você só precisa de uma seção de, você sabe que qualquer que seja o código que sua mudança, você não precisa manter você não quer ter, tipo , tipo , você sabe, então você só precisa de uma seção de, você sabe que qualquer que seja o código que sua mudança, você não precisa manter você não quer ter, tipo, você sabe, múltiplo da mesma coisa. Só vai levar as últimas coisas por causa do CSS sempre direitos sobre si mesmo, ele escreve A última coisa é o que ganha. Basicamente, nesta situação, a menos que você tenha a menos que você tenha esse cara o ponto de exclamação coisa importante acontecendo . Mas então certifique-se de manter apenas uma parte dessa seção se você vai fazer isso várias vezes e tentar coisas diferentes do que ter certeza de que você só tem uma seção diferente desse tipo de código. Espero que isso tenha ajudado e veremos no próximo vídeo. 9. Por que usar uma personagem de criança?: Tudo bem. Então o número que você fez que eu quero que você, Ah, backup apenas um segundo e perceber que há várias, diferentes maneiras de ser capaz de salvar coisas em seu site. Eu uso uma maneira diferente, na verdade, com o cliente FTP e software chamado No Plus no note pad Plus. Além disso, há também texto Wrangler também. E há um monte de software FTP diferente é que há um chamado pato cibernético que eu usei antes. Uh, mas basicamente, a melhor maneira de começar sem baixar nada é apenas manter 11 aba aberta com sua folha de estilo e, em seguida, manter a outra guia aberta com seu HTML. Então, quando você trabalha nisso, você está mudando coisas diferentes. Você está usando ferramentas de desenvolvimento e o que quer que seja. Então você pode simplesmente mudar de volta para a outra guia e, em seguida, você sabe, então, você sabe, fazer suas alterações, clicar em atualizar arquivo e, em seguida, atualizar sua página para que não tenhamos que continuar voltando e dentro da mesma aba exata. Também com o seu , software FTP, você vai embora. Então, quando você entrar, você vai ver que este vai ser o seu arquivo de instalação seu toda a sua instalação WordPress . Você verá conteúdo WP Admin inclui todas essas coisas Se você vai para WP contar quando você tem temas e, em seguida, você escolher o nome do seu tema do que dentro de que é o seu estilo, seu estilo que arquivo CSS. E então, ao clicar em você, edite. Se você tem configurado direito sem plano, sem pad plus, então esse estilo que o arquivo CSS abre aqui. E então é realmente muito melhor porque você pode ver todos estes diferentes. Todo esse código diferente é então, como se fosse mais colorido. Todo esse código diferente é então, Você pode ver isso muito mais facilmente. Não está dentro do navegador real, então é apenas mais fácil trabalhar com isso. Esta é exatamente a mesma área. Agora isso é um pouco mais fácil de ver, então, se estamos, se estamos aqui. Quero dizer, o preto e branco é bom, mas quando estamos aqui, só nos dá um pouco mais de informação. Então, é melhor. Teoh use hum, e então como você salvar isso, você vai. Você volta para o arquivo Zillah, e então você clica em sim para, uh , enviar de volta para o seu site agora no próximo vídeo. Então isso é o que eu acabei de explicar para vocês é meio que a maneira mais simples e básica de fazer isso. Mas você não quer realmente alterar os arquivos de tema principal. O que você quer fazer é ter um tema filho para a sua instalação WordPress. Então, isso significa basicamente o núcleo do seu tema para o seu WordPress. instalação permanecerá a mesma e, em seguida, você cria um tema filho sobre ele. E todos os arquivos que você colocar aqui sobre o ser criança irá automaticamente sobrescrever esse arquivo de tema principal . Mas a questão é que, ao atualizar o arquivo do tema principal, você não está destruindo seu conteúdo. Então, digamos que você crie uma folha de estilo diferente, um estilo que arquivo CSS se você criar. Se você mexer com ele na pasta tema principal e, em seguida, você atualizar esse tema principal, ele lança todo o seu treino e dá-lhe um novo estilo que arquivo CSS Isso não é bom. Isso não é bom, porque você gasta todo esse tempo mudando o estilo do arquivo CSS, certo? Então o que você está fazendo incidentes que você deixa isso exatamente como está e você cria um tema filho em cima dele. E então, dessa forma, isso não é apagado quando você atualiza seu arquivo de tema principal. Ok, então eu vou te mostrar como fazer isso no próximo vídeo. Isso é muito fácil, mas eu só vou te explicar isso, então eu vou te ver lá. 10. Como configurar uma tema de criança no Wordpress: Neste vídeo, vamos passar por como fazer a equipe infantil. Não é tão difícil, mas siga esses passos exatamente. Ok, então estamos em nossa pasta Temas que está dentro do conteúdo WP e, em seguida, em nossa pasta Temas em Eu estou em um software FTP chamado File Zilla. Agora você pode ver minha pasta 2016 aqui. Essa é a minha pasta temática. Mas eu preciso fazer outra pasta que seja um derivado disso que esteja perto disso. Mas diferente clique com o botão direito e, em seguida, clique em criar diretório e inseri-lo alguns dos 2016 traço filho. E então agora você pode ver que eu tenho todas essas pastas Agora eu tenho Se eu voltar para meus temas, você pode ver que eu tenho aquela pasta extra uh, eu vou voltar para o meu tema principal. Se você tem um tema diferente, tudo bem. Mas certifique-se de que você faça o que quer que seja, então apenas chame a mesma coisa, Dash criança. Isso vai mantê-lo agradável e arrumado, mas, em seguida, voltar para a pasta tema principal e abri-lo e encontrar esse estilo que arquivo CSS. Ok, isso vai ser muito útil para você. Clique e arraste que eu estou realmente arrastando isso para o meu computador agora, então eu estou salvando no meu computador. E então eu estou abrindo aquela pasta de tema filho que eu fiz, e eu estou arrastando e soltando esse estilo que o arquivo CSS dentro disso. Ok, então eu estou copiando da antiga pasta de temas. Não vou cortar isso. Então, deixa-o onde quer que o deixe onde está, mas copia-o e, em seguida, leva-o de alguma forma para a nova pasta de tema infantil. Em seguida, clique com o botão direito do mouse em uma nova exibição, e eu vou descartar o arquivo local nele. Uma nova. Podias ver todas estas coisas. Todas essas coisas comentadas no topo, o nome do tema blá, blá, blá. Mas eu vou tirar tudo isso, exceto o nome do tema. Ok, então você pode ver entre este, uh, barra e a estrela e, em seguida, o slat na estrela na barra tira tudo menos o nome do tema, e nós vamos chamá-lo de 2016 Criança. Ou se você é mesmo se você tem um tema diferente, chame-o seja lá o que for. E então coloque a criança no final. E a patroa. Modelo super importante Cólon. E então eu estou digitando 2016 aqui. Agora, este aqui deve ser o nome da pasta que você vê no FTP 2016. É isto aqui mesmo. Então, seja lá qual for o nome da criança. Seja qual for a coisa criança que você criar, você tem que referenciar que um tema principal inicial. Ok, então se você tem se você tem ah, tema chamado banana, então isso é o que precisa estar aqui sob modelo. Ok, então neste 2016 eu estou pegando isso direto da pasta. Nome do tema principal. Ok. Agora, uma vez que eu salve isso e ele é enviado de volta para o servidor quando eu vou para, uh, minhas áreas de temas gerenciados, eu clico temas, você pode ver que temos um novo tema aqui. Criança 2016. Tudo bem, o que você digitar como o nome do tema vai aparecer bem ali. Mas então eu posso clicar, Ativar, e deve ser exatamente a mesma coisa. Exceto por agora. Quando fazemos mudanças, eles devem. Eles não devem mexer com o nosso tema original. E então se atualizarmos nosso tema principal, então ele não será destruído. Então é assim que você cria um tema filho. E verei na cama ao lado. 11. Visão rápido no Chrome DevTools: nosso novo: Referenciei muito isso ao longo do curso, mas eu meio que quero focar em um vídeo apenas nas ferramentas do Chrome Dev. Agora, este é o navegador Chrome do Google. E enquanto você pressiona um F 12 ou se você clicar com o botão direito e clicar em inspecionar, então você começa a ver tudo isso. Todo esse código em todo esse gobbledygook. Os anos podem parecer diferentes dos meus. Você pode ter esta aba inferior puxado para cima ou você pode ter você sabe, certas coisas maiores do que outros ou qualquer outra coisa que você pode ter. Estes três pontos, a doca ali em baixo ou o médico para o lado. Mas o principal aqui é que nos dá tal em uma maneira fácil de afetar a mudança no site sem realmente mudar nada. E à medida que passamos pela página, você pode ver como estamos tipo de percorrer quando eu apenas, como, como, desfaço algumas dessas setas, você pode ver como eu rolar as coisas, ele está me mostrando todas essas diferentes seções. Você pode ver que ele se destaca nesta área enquanto eu rebro todas essas partes diferentes do código. É apenas mostrando todas essas seções diferentes e é super legal apenas, como, apenas, você sabe, desfazer todas essas setas e apenas olhar através da totalidade do site e ser capaz ver como As coisas estão divididas, sabe, olha para aquilo ali. Tem verde na lateral. Pode-se ver o verde do lado. Isso é Ah, isso é estofamento. Você poderia dizer. Você pode realmente ver isso aqui olhando bem ali se eu verificar ou desmarcar isso, ele estraga o enchimento. Então é legal, porque eu posso. Eu posso olhar através de todo o site e apenas tipo de ter uma idéia ou apenas de como as coisas são definidas para fora, por que certas coisas são maiores do que outras ou qual é a razão que você pode ver neste. Na verdade, aquela laranja que é uma margem em vez de um tapinha vai passar por isso um pouco mais tarde. Mas você pode apenas perdoar, você pode ver coisas. Você pode ver como o site é criado em todos esses blocos diferentes apenas por meio de olhar através do código. Você não precisa necessariamente estar olhando para todas as letras e palavras diferentes do código , mas apenas ter uma idéia. Enquanto você passa por este código, você está dizendo, oh meu Deus, como se fosse isso que a seção do código é. Quatro você pode ver que todos estes são blocos diferentes aqui. É divertido. Então é muito divertido. Então esta é a seção HTML bem aqui. Este é todo o código, uh, do arquivo HTML. E, em seguida, aqui é dividido por partes deste arquivos CSS. Você pode ver estilo que CSS agora que CSS para baixo, vamos CSS, etcetera, etcetera, etc. E isso é quebrado pelas diferentes linhas de código. Então isso aqui me deixa falar rápido, e eu também estou dizendo um monte de coisas que você não precisa necessariamente entender ainda. Mas eu meio que quero tirá-lo lá para que você congest tipo de obter que essas rodas girando em sua mente. Mas esta tela de mídia e mínimo com é 56,875 m. É uma certa ferramenta de medição. Em seguida, morrer ponto conteúdo do site. Isso é um apelido Isso é um seletor CSS classes CSS. Ah, é um apelido, realmente, de conteúdo do site vai ter essa informação, então esta primeira parte é apenas a segmentação. Ok, esta primeira parte está mirando bem aqui. Está mirando, dizendo, o que devo mudar? Ok, então isso é dizer quando a tela é com o mínimo com de 56.875 EMS alvo tudo com apelido ou classe de conteúdo do site para que a morte para esse alvo. O que eu quero que você faça agora é preencher isso aqui mesmo. Ok? Então é realmente e você pode ver o que é isso. Quando quebramos, ele está batendo no topo zero e, em seguida, girando para a direita é 4.5 acariciando baixo zero iminente esquerda é 4.5. Então, hum, olhar através dessas coisas e brincar com essas coisas você pode realmente tipo de obter a essência de, como, ok, este é o site principal. Este é o código HTML e perde o código CSS e passar por e apenas desmarcar coisas e apenas ver como o site quebra. Porque é muito, muito engraçado ser capaz de ver como você conhece sites, não magia. É que todas essas coisas diferentes meio que juntas, mas quando você começa a desmarcar as coisas, você vai. Oh, cara. O que é isso? Ou tamanho de caixa ou caixa de criança Web tamanho quebra de palavra. Como isso funciona ou divertido Família em cor e tamanho da fonte. E você começa a desmarcar essas coisas. Você começa a ver como o site é feito, e então como você rola sobre essas coisas, você pode tipo de ver como, como as coisas são tipo de dispostos com, você sabe, tapinhas e com margem e Todas essas coisas. Só abre os olhos para o que realmente está acontecendo. E então, como você quer afetar, mudar você pode. Você será mais rápido tipo de saber para onde ir, saber onde olhar e o que dialogar e ter em mente quando você atualizar a página. Eu só fiz. controle é, então é completamente, uh, tomar as mudanças que você fez obter, ser nocauteado e então você pode tentar de novo. Então, se você estragar tanto onde você está, eu nem sei o que está acontecendo, apenas atualize a página e então você estará de volta ao arquivo real. Tenha em mente que isso não altera o site. Só muda temporariamente o que você vê. E então, se você decidir copiar isso para o código real do site, então é isso. Bem, isso é o que vai ficar. Mas se você fizer alterações com ferramentas de cromo dab, isso não muda nada a longo prazo. É temporário, e assim que você atualiza a página, ela é dizimada. Certo, então jogue, jogue , jogue e mexa e desmarque todas essas caixas e comece a excluir código e role partes diferentes desse código e desfaça essas setas. Você pode ver que há caixas dentro de caixas dentro de caixas, e isso vai te dar uma idéia melhor do que está acontecendo. Tudo bem, obrigado parecia conveniente. 12. Como selecionar nosso código de diferentes formas: não há apenas uma resposta!: Certo, é hora de jogar. Vamos começar a brincar com dibs D I v o K então os dibs são, uh, as caixas deles. São todas as outras só caixas. Certo, então o que vamos fazer é entrar em páginas, adicionar novas, e vamos chamar isso de brincar com vidas. Chame o que quiser. Texto aqui. Vamos fazer menos do que símbolo div, e depois fechá-lo e então vamos colocar na verdade, vamos fazer a próxima linha. Mantenha-o limpo. Copie exatamente o que estou fazendo. Você pode ver que temos uma tag diff, e então temos no lado oposto dela uma tag div com uma pequena barra no interior da tag div. Temos uma etiqueta P e isso também é normal. E depois tem barra. Ok, tão regular que p regular é o que começa. E então a barra p é o que acaba com ela. Então isso é basicamente o começo de algo e aqui está o fim. E então dentro dessa div, isso é um elemento de texto? Esse p é um elemento de texto. Ok, então não, eu sou uma mensagem. Ok? Na verdade, vou subir aqui de novo. Eu vou dar uma aula a isso porque nós damos classes iguais e eu vou chamá-lo de, hum, jogar novamente. Pode chamá-lo do que quiser. Pode me copiar se quiser. Torne mais fácil copiar exatamente o que estou fazendo. Mas você pode ligar. Você pode fazer um apelido para um div. Qualquer coisa que você dê um apelido também. Pode chamar de “Obrigado”. Querer apenas faz você não repetir por algo que você já fez antes. Certo, então não chame isso de algo tão chato. Como se você chamasse de Div. Classe é igual a Div. Isso vai ficar muito, muito, muito confuso muito rápido, porque é uma coisa tão ampla que você pode acabar cometendo um erro e reutilizando-o Jogo ativo . Não vou usar isso de novo. Certo. Então def clássico foi feito jogar, e então olá. Eu sou um elemento de texto, e então isso faz você copiar isso exatamente. Certo, assim que for Donna, clique em publicar. E então eu costumo correr e vou manter o controle pressionado e abrir isso em outra página. E aqui vamos nós. Então você pode ver que há todas essas outras coisas também que Wordpress apenas meio que joga lá dentro . Coloca a manchete bem ali. E então ele tem isso também. Mas a parte divertida disso é como nós, como nós direito, clique e, em seguida, clique em Inspecionar, olhando para ele nas ferramentas do Chrome Dev. Podemos ver que esta classe div. Vê aquilo ali? Jogo da classe de definição. E então olá. Sou um elemento de texto. Isto é o que nosso conteúdo de entrada é. OK, isto é tudo o que colocamos no WordPress de volta. E é aqui que você digita o bloco e coloca a imagem e todas essas coisas. Você pode ver o código aqui para o que acabamos de digitar. Agora, se eu quiser afetar esse elemento de texto, eu poderia apenas clicar aqui e clicar neste botão de mais, e ele me dá “Ok”. Você quer mudar todos os elementos P? Você quer mudar todos os elementos de texto, certo? Não, eu realmente só quero mudar os elementos de texto dentro do div apelidado fez Jogar com Classe de jogo ativo. Então o que eu vou fazer, na verdade, é eu vou fazer um jogo ativo e então eu faria um espaço e eu estou procurando por elementos P em uma classe de desnivelamento dentro de coisas que são apelidadas Div Play Vou mirar os elementos P dentro disso. . Agora, se eu tivesse feito este p dot fez jogar que estaria procurando por elementos p com apelido de jogo Mas não foi assim que escrevemos nosso código Nós escrevemos nosso código com um div realmente em torno de quase como parênteses em torno do P elemento. Não apelidamos ao elemento P. Apelidamos a caixa ao redor do elemento P. Então isso realmente não funciona p dot deplane Isso não está correto. Este é o ponto correto fez jogar p ou se quisermos eu acho que poderíamos fazer este ponto div Fez jogar p e eu vou dizer tamanho da fonte é 40. Olhe para isso. Agora, uma vez que o tenhamos funcionando, podemos provar a você que ainda vai ser. Então, se eu tirar devoto de lá, deixe-me fazer isso. Ainda funciona, ainda é bom, certo? Mas se eu dio p dot tocou nada bom, ele não selecionou a coisa certa. O código está bom. tamanho da fonte é igual ao Colin de tamanho divertido. 40 p x tudo bem, mas o seletor estava errado. OK, então certifique-se que você está prestando muita atenção ao seletor. Se fizermos o bem da Pia, vamos tentar o P. Funciona, mas o problema é que vai funcionar em todo o seu site. E talvez você não queira que em todo o site todas as fontes sejam 40 pixels. Então é por isso que estamos tentando usar dibs para realmente destacar certas áreas. Agora, nós também podemos fazer isso. Digamos que esta classe P, Vamos editar que eu clique direito e, em seguida, adicionado como classe P HTML é igual a P jogar. Estou ficando criativo com esses nomes aqui. Ok, então nós realmente colocamos uma aula. Colocamos um apelido naquele elemento específico que não colocamos. Nós não colocamos na aula de DEF em torno dele. Colocamos a classe ou o apelido direito no elemento P. Certo, então classe P é igual ao jogo P. E então, quando eu clicar fora que você pode vê-lo gruda. Agora, se eu subir aqui, se eu fizer p dot p play, esse é o seletor adequado. Você pode ver que o código não mudou direito se eu estragar o apelido se eu apenas disser Oh , é um elemento P com apelido Apenas jogar não funciona porque é que Nick é o apelido errado. Usamos os apelidos errados de que a alcunha não é jogada. Você pode ver toda vez que há um ponto que nós prestamos atenção ao que está atrás dele para o que é o apelido. Certo. Então, uh, o apelido não é só jogar. O apelido é P play. Ok, então você pode ver o que está acontecendo aqui é, você sabe, apenas há todas essas coisas diferentes que você tem que descobrir primeiro no HTML, você tem que ter certeza de que você está, uh, que você está fazendo tudo isso corretamente, você sabe, qualquer classe de espaço div igual com dentro de aspas. Porque às vezes isso fica confuso, não é? É, uh é um sinal de igualdade ou é um Colin ou algo assim? Porque isso aqui, esse Ah, esse CSS tem uma sintaxe diferente ou uma maneira diferente de digitar dados. Em seguida, aqui no HTML. Ok, então depois de você, copiar essa bagunça com essas coisas, pare de tentar o dedo do pé. Talvez mudar a div. Aula aqui. Jogo competitivo um e, uh, mudar esta classe. Talvez pudéssemos fazer isso um i d p e i d é igual a Olá. Então agora há tantas maneiras diferentes de selecionar. Agora tenha em mente olhar. Ele se foi. O código que fizemos antes desapareceu. Agora ele ainda está no arquivo temporário CSS, mas não podemos acessá-lo porque não estamos usando o seletor certo. Então, como diabos podemos selecionar esse têxtil? Há um monte de maneiras. Primeiro caminho é apenas dizendo elementos P. Todos os elementos P serão divertidos tamanho 30 pixels. Essa é uma boa. Isso é para selecionados. Mas isso é para selecionar todos os elementos P em todo o site. Agora vamos tentar uma maneira diferente de selecionar Vamos fazer P com a tag hash. Isso é para identificação. Ok, então este é o apelido ID, e você pode ver que temos um apelido idéia de Olá, então P hashtag baixo e lembre-se. Está tudo junto porque estamos à procura de elementos P com o I D ou com Nick, nome de Olá, está tudo unido. Se tivéssemos feito isso, então isso seria olhar dentro de um elemento P para algo mais com o apelido de Olá com o apelido de I D de helo. Ok, então isso é errado. Temos que fazê-lo sem o espaço e funciona Agora nós também podemos fazer div classe Div jogar um e em seguida, apenas olhar para elementos P dentro do Dave com o apelido Div Play um. Deixa-me mostrar-te o que quero dizer. Se dermos ao Doc, dê uma jogada que o que eu fiz? Seus dibs citados com apelido com o apelido. E esta é uma aula porque tem um período com o apelido Div. Jogue um. Certo, então é melhor com Dave. Jogue um e então vamos nos concentrar em elementos P dentro dibs que têm o apelido Div jogar um. E olha, nosso código ainda funciona quando eu clico fora disso. Ok, se eu tivesse estragado tudo, para onde vamos aqui? Como posso estragar isto? O que eu estou tentando fazer, uh, a razão pela qual ele não quebrou é porque eles jogam um. Só que você não precisa colocar Div na frente disso. Você não precisa colocar isso aí. É por isso que eu ainda estava trabalhando quando coloquei um espaço lá porque ele está dizendo, olhe dentro de um Div. Procure algo com a classe para tocar uma dentro dela e depois procure por elementos P dentro dela. Certo, então não precisamos desse David na frente. Se eu tivesse feito uma hashtag ah aqui em vez, isso iria quebrá-lo porque ele não está procurando eu ds fez jogar um. Ele está procurando aulas com fez jogar um. Então isso também é uma maneira de selecioná-lo e, em seguida, também enfraquecer Do Ah, muito aqui. Podíamos fazer aulas P, sabes? Eu sinto muito. É um i d agora p i ds quando Hello fez jogar um e, em seguida, espaço Então olhe para este código. Então isso é isso dizendo que isso está dizendo para mirar tudo com o apelido fez jogar um. E dentro desse olhar para elementos de texto p Apenas apenas áreas de texto com o I d ou com apelido. Olá. Está bem, é um “I d.” , porque tem a hashtag. Ok, então há todas essas maneiras diferentes de selecionar exatamente a mesma teoria. É um simples é apenas ter p seu bem lá, mas isso significa que ele vai afetar todas as áreas P em toda a sua página, que é um pouco amplo demais. Ok, por causa do fato de que há tantas áreas de P diferentes no blog e em qualquer outra coisa. Normalmente, você não vai querer alterar isso, a menos que você queira fazer uma alteração em todo o site. Ok, então é por isso que estamos ficando um pouco mais específicos e fazendo algo como P com a idéia de olá ou se queremos mudar. Se quisermos mudar isso para uma classe, é só que há uma Classe P é igual a olá, então, então, como eu crio uma nova regra de estilo aqui, eu apenas faço Pook. Ele realmente fez o trabalho para mim. Isso foi muito bom, ponto de sabão Olá, e então eu só faço sinais divertidos igual a 40. Então jogar com essas coisas para tão simples quanto com uma div em torno de um elemento p e colocar diferentes classes e eu ds em coisas diferentes e apenas tentar ter certeza de que você é realmente bom em ok, se você mudar a classe para algo, como você seleciona o elemento P dentro dele? Ou se o elemento P tem um certo apelido para ele. Como você seleciona isso? Então, apenas comece. Começa a brincar com isso, e vais cometer alguns erros, certo? Mas o objetivo aqui é tentar jogar, e, uh, uh, e você começa a descobrir as coisas ficando um pouco mais rápido. Ok? Você tem que repetir uma e outra vez. Então, jogue aqui, faça uma segunda parada, pare o vídeo e jogue. E, uh, você vai ficar melhor e melhor nisso, ver na cama ao lado. 13. Divas: Ótimo. Agora vamos mexer com o Gives um pouco mais diversificado. Eles são muito importantes lá. Lá o principal bloco de construção de páginas da Web. Dibs são caixas basicamente. Certo, então veja o que está lá dentro. Uma div está dentro de outras dibs dentro de outros detetives, mas eles são apenas os principais blocos de construção. Consegues ver o nosso frio, certo? Até agora, é classe Div é igual e, em seguida, cita um div play, OK, e, em seguida, dentro disso, temos um elemento P abertura e, em seguida, fechando. Olhe para isso. Cada elemento tem a sua abertura e fecho. Não, esqueça isso. E então temos o, você sabe, qualquer que seja o texto para isso. E depois temos a etiqueta de encerramento para o Dev. Temos que abrir Dave com o apelido. Um minuto, se perto. Está bem. Então certifique-se que você tem isso exatamente como é. E então, hum, eu me sinto muito rápido, e então nós estamos realmente indo para o arquivo. Então, aqui vamos nós. Olá. Sou um elemento de texto. Isso é o que criamos. Ok, então se eu clicar com o botão direito do mouse e inspecionar, você pode ver no cromo definível aqui que é igual a classe div fez jogar. Foi o que escrevemos. E então olá, meu elemento de texto. E depois fechamo-lo. Se sim, agora vamos fazer é mexer com aquele div. Ok, vamos colocar coisas nisso, Dave, e nós vamos apenas mexer com o estilo disso, Def. Então eu clico que e, em seguida, eu venho aqui para este mais novo estilo regra jogo ativo. Olhe para esse fundo. Colin Azul. Isso foi fácil. Agora podemos ver o Dev. Esse azul está me machucando os olhos. Ok, então, hum então nós fazemos que nós podemos fazer o fundo qualquer cor que nós quisermos, e agora nós podemos ver que div para o que é agora e se eu quiser adicionar um pouco de estofamento? Você pode ver que acabou de ficar maior. Eu só adicionei tapinhas e explodi tudo, certo? E então nós chegamos aqui e quando nós rolamos sobre ele, nós podemos ver Ah, aquele verde em torno dele. Isso é estofamento. Agora, se você vir aqui no lado CSS de indivíduos, você rola todo o caminho para baixo. Você pode ver, uh, primeiro é a área principal do que o estofamento. E depois há a fronteira. E na margem. Ok, então é assim que nós É como você empilha as coisas por aí. Um estofamento de diferenças está no interior de uma div. Mas a margem está do lado de fora. Deixa-me mostrar-te o que quero dizer. Se adicionarmos margem de 20 pixels, você pode ver que a área que é Cinza não ficou maior. Na verdade, meio que ficou menor. Olhe para isso. Você vê isso? Tem a laranja ao redor, que é a margem. Na verdade, não tem um fundo. E é por isso que é por causa da margem inferior bem aqui. Ok, aqui vamos nós. Então este Dave agora tem 20 pixels de preenchimento e 20 pixels de margem, mas o fundo em Lee afeta o preenchimento. Você pode ver que a margem está do lado de fora daquela área cinza. OK, então quando você está fazendo estofamento, ele vai explodir a div para cima por dentro, e a margem vai explodir o lado de fora dele. Ok, então se você está tentando ter o fundo, seja maior. Não use margem de uso dando tapinhas em seus padrões no interior do morto de dentro da caixa. Mas a margem está do lado de fora da caixa. Peguei-o. Então brinque com essas coisas. Tenha em mente que não precisávamos fazer Div Dot Dave Play. É só “dot div”. Os jogadores encontrar completamente, mas apenas mexer com a bagunça de fundo com preenchimento e margem e apenas jogar com ele e você vai encontrar isso. Ficou muito melhor? Apenas compreendendo, meio que. Você sabe como a margem funciona e como o preenchimento funciona. Comece por aí e apenas jogar, brincar e ficar mais rápido essas coisas e eu vou ver no próximo vídeo. 14. Divs: Floats, fundos + largura: Tudo bem, então agora vamos começar a usar carros alegóricos com dibs. E o que isso significa é que nós vamos fazer a caixa meio que se mover e tipo de reorganizar a si mesma primeiro. Está ocupando toda a largura? Vai ser menor, e vai permitir que outros Dave se encaixem em torno dele. Ok, então siga-me e verá o que estou dizendo. Então temos a classe def igual a div. Jogar ação e mudar que para ser div jogar esquerda. Ok, então o apelido agora para isso, Dave, é Div Play deixado no minuto, na verdade, copie tudo isso e eu vou colá-lo aqui embaixo. E vou mudar isto para a peça do Dave, certo? E depois vou dizer olá. Tenho metade da largura do lado direito. Você pode apenas Este texto pode ser tão fácil quanto o lado esquerdo e o lado direito. Cara, o que diabos você quer? Mas apenas certifique-se de que as classes dos dibs ar diferente. Certo, então tocou à esquerda e tocou, certo? Certo, alguma atualização. E aí vamos nós. Agora, olhe para isso. Isso não é do lado esquerdo. Isso não está do lado direito um do outro. Certo? Então o que vamos fazer é clicar com o botão direito e, obviamente, jogar à esquerda aqui, e eu vou clicar neste Plus aqui para uma nova regra de estilo e então Dot fez jogar à esquerda. Isso é ótimo. E então o que eu vou fazer é eu vou fazer com Colin 50%. Agora o que aconteceu? Vamos rolar e dar uma olhada. Ah, OK, então agora deixe-me desmarcar que você pode ver para que primeiro de tudo, ele ocupa todo o espaço. Certo? Mas agora eu faço 50% e agora tem essa margem à direita. Agora, como é que? E isso é do lado esquerdo. Tecnicamente certo, é do lado esquerdo. Mas por que o lado direito está do lado direito? Vamos fazer Vamos jogar agora Cook e não jogar direito. Clique em Plus e então vamos dot fez jogar, certo? Isso foi legal. E aqui vamos nós com 50. Espere um segundo. Aquele cara e aquele cara, ambos são 50%. Por que não estão? Por que eles não estão subindo? E então, , e fazendo com que as do lado esquerdo das do lado direito, a razão é porque elas não estão flutuando. Ok, se você os fizer flutuar, então tudo fica divertido. Flutuador é à esquerda e aqui em baixo. Mas jogue lá vamos nós. Sim, certifica-te de que estás a editar o certo. Porque, às vezes, essa coisa muda profundamente, certo? Com é 50 flutuador esquerda. Agora olhe para isso. Será que jogar direita é bem ali e fez jogar esquerda é bem ali. Agora você não vai estar fazendo flutuar para a esquerda e flutuar para a direita? Normalmente você quer empilhar tudo para um lado e então esse tipo de tudo se reorganizou . Sinta-se livre para fazer flutuar direito se quiser. Mas não é essa a palavra. Não é isso que estamos tentando fazer agora. Então olha para isto. Então, jogou à esquerda, não é, Dave? O dramaturgo está bem ali. Era exatamente o que queríamos. OK, mas para fazer isso, tivemos que ter dibs separados. E então tivemos que ter certeza de que a largura era de 50% e não era maior do que isso. E depois flutuando à esquerda, saímos com 51%. Então estamos em apuros porque ele vai para a próxima linha. É quando você está flutuando. Se alguma coisa é um pouco maior, não se encaixa. É apenas uma espécie de pontapé para as próximas linhas. Você realmente precisa ter certeza de que está dentro de 100%. Ok, hum, deixe-me mudar de volta para 50%. Ótimo. Então agora você também pode ver que há pouco, tipo, qualquer espaço no meio. Estes que não são divertidos. Então deixe-me colocar um pano de fundo sobre isso. Você pode meio que ver, Então jogar à esquerda. Vou dar a isso um fundo de verde, fazer um olhar um pouco melhor. Melhor Bob apareceu em Fez jogar, certo. Onde é que está? Brincar bem ali. O fundo é azul. E esse azul queima meus olhos, então eu vou mudá-lo. Ok. Então podemos ver que temos agora. Estes fizeram outro toque. Isso não é bom. Eu não gosto disso. Não quero que se toquem. Então, o que vou fazer? Na verdade, vou ter uma margem para cada um destes. Ok, então vai ser margem, e então eu vou fazer? Uh, digamos, uh, 2%. O que diabos acabou de acontecer? O que aconteceu? Passou para a próxima linha porque era muito grande. É com 50% mais margem. 2% que é o quê? Na verdade, é 54%. Porque há 2% no lado esquerdo e 2% no lado direito. Nem sequer estou a pensar em cima e em baixo. Só estou pensando na esquerda e na direita. Ok, então tem 2% à esquerda que você pode ver a laranja bem ali. Olhe para a laranja. Essa laranja é a margem. Quem tem 2% no lado esquerdo e 2% do lado direito, mais 50% com. Então isso significa que estou mais de 50% certo? Então o que eu vou fazer, eu estou mudando com aqui para ser 46%. E agora estou bem porque 46% mais 2% mais 2% equivale a 50%. E eu vou fazer a mesma coisa dois div jogar esquerda, uh, margem, margem, 2% e, em seguida, com vai ser vir em 46%. Então agora eles estão separados e você pode ver o que aconteceu é que nós tínhamos maneira hum, originalmente temos 50% direito. Mas uma vez que adicionamos essa margem para tentar separá-los, estávamos em apuros porque era mais de 50%. Então derrubamos para 46%. Então 46% mais 2% mais 2%. O lado esquerdo e direito dessa div igualavam um total de 50%. Ok, você pode ver por dentro que não há espaço. Olá? Eu tenho que fazer dentro da direita. Não há, basicamente, tocando o site. Não gosto disso agora. Aprendemos que a margem estava do lado de fora da div. O preenchimento está no interior de uma definição. Então vamos adicionar um pouco de preenchimento aqui. Ele vai didio nós fazemos 1% lá e então para fez jogar, certo? Onde mais você vai fazer? 1%. Você pode ver o que faz. Isso nos dá um pouco de espaço onde as coisas não estão apenas abraçando o lado onde as coisas não são como tocar direito para o lado. Você pode fazer isso, você sabe, misturar ao seu coração. conteúdo do coração. Faça o que quiser aqui, mas é muito, muito útil então ser capaz de olhar, usar ferramentas Deb e olhar para o que você fez. Vê aquele contorno verde? Esse é o estofamento. Vê o contorno laranja? Essa é a margem. Ok, então foi muito, muito útil ser capaz de apenas olhar através do seu código e ser capaz de fazer isso. Agora, no próximo vídeo, vamos passar por tornar nosso código um pouco mais simples usando CSS. Mas brinque com isso de novo e faça seu próprio, e eu vou ver no próximo vídeo. 15. Como usar vários seletor para o mesmo mergulho: Certo. Então nos divertimos brincando com dibs e mudando os fundos, o estofamento, a margem, etc. Agora vamos jogar um pouco mais com o código só para dar a vocês um pouco para desbloquear algo para U.S. Então vamos voltar, página Teoh Edit. E o que vamos fazer é dar outra alcunha. Mas o que vamos fazer é dar, uh, sim, sim, vamos dar outro apelido para ambos os dibs, mas eles vão ser exatamente o mesmo apelido. Certo, então o mesmo nome de Nick dizendo apelido. Espero que não seja confuso ou dois. Metáfora. Você está bem? Então o apelido para ambos será o mesmo apelido. Guarde isso. E então, uh e você vê, há apenas um espaço no meio. Isso é tudo que você precisa no lado HTML. Ok, então agora chegamos ao código clique direito. E agora, quando clicamos Então nós clicamos, Deplete esquerda e, em seguida, o mesmo apelido. Se clicarmos que ele está me dando essas coisas, ele está me dando It's It dizendo para se concentrar em É o mesmo para selecionar Ded Play Left e também mesmo apelido que eu não quero isso. Na verdade, só quero focar no mesmo apelido, mas aqui está a parte divertida. Quando eu colocar o código aqui, vai afetar ambos os dibs porque ambos têm o mesmo apelido. Ok, hum, então eu vou fazer sagacidade é 50 ou outro. Na verdade sabia 46% porque eu quero alguma margem. margem de 46% é de 2%. Então isso nos dá 50% porque a margem de membro é tanto a esquerda quanto a direita. Na verdade, são todos os lados, mas acho que os lados esquerdo e direito serão 2%. Então isso é dois mais dois é quatro mais 46. Então é assim que chegamos aos 50. E então nós vamos fazer fundo ou não, não indo para fundo, na verdade, porque eu quero que essas cores sejam diferentes e eles vão flutuar é deixado. Agora você pode ver que o que aconteceu lá é que eu era capaz de com apenas classificação 11 seção de código porque ambos têm o mesmo apelido. Eu era capaz de Teoh apenas realmente rapidamente ser capaz de afetar várias coisas ao mesmo tempo. Agora o que eu quero fazer Ah, fundo. Isso não vai funcionar para isso porque eu quero que eles tenham origens diferentes, e você pode ver aqui que eles têm o mesmo passado, certo? Então eu não quero fazer isso. Não quero fazer coisas que são essas. Quero ser diferente nesta classe com o mesmo apelido. Mas é muito, muito bom quando há vários elementos, especialmente, digamos, talvez você tenha 50 desses. Você não quer ter que digitar essa mesma coisa para cada indivíduo. Ok, então agora eu vou apenas adicionar um fundo para Diu jogar esquerda. Lembre-se de estou selecionando que estou clicando em uma nova regra de estilo em um cromo. Acha que quero esse foco de uma coisa. E eu não quero isso focado em tudo. Só quero jogar à esquerda. Isto vai voltar. Odeio essa cor azul com vingança. Ok, Hum bom. E então fez direitos de jogo. Tire o mesmo apelido de lá e que eu apertei Tab. Só se você quiser ir um pouco mais rápido, você pode ir guia e passar por coisas. Fundo. É verde. Algo assim. Eu não sei. Ok. Então você pode ver isso. O que está acontecendo aqui é que há um código que você quer colocar em prática ambas as coisas. E há um código que você quer, onde você só quer afetar uma coisa. Então é por isso que é super útil de duas dibs diferentes. Compartilhe o mesmo apelido e eu sinto muito que eu uso isso agora porque isso está ficando super Met with Nickname é o mesmo apelido. Mas é realmente, muito, muito útil, porque agora vamos dizer, Oh, Oh, eu vejo que ambos precisam de preenchimento porque eu estou usando a classe do mesmo apelido. Eu só faço estofamento, uh, 2%. E então muda ambos e super freakin acessível. Ok, eso mexe com essas coisas, e se você quiser, você pode adicionar ainda mais apelidos para eles. Mais aulas. Certifique-se no site HTML está dentro da classe é igual a aspas, e, em seguida, o que quer que sejam, apenas separá-los por espaços. Ok, hum, e então eu vou ver no próximo vídeo 16. Como fazer os elementos desse: use a propriedade de exibição: para as próximas coisas. Vamos começar a salvar nosso código em nosso arquivo CSS porque eu não quero continuar digitando essas coisas uma e outra vez. Tão rápido, vou passar por isso de novo, certo? Clique, e então vamos fazer as mesmas paradas de apelido, e eu vou fazer isso. É mais fácil de fazer com 46% margem é 2%. Não preciso de antecedentes. Preciso de enchimento de 2%. E então oh, eu 19 meus carros flutuam de volta bem. E, em seguida, jogar deixou apenas usando setas e eu apenas excluindo as coisas. Certo, pressione Tab. E então ele ficava azul de fundo. Odeio esse azul. E então tudo bem. E então isso aqui fez direitos de jogo. Coroa má, Kareen. E isso é bom. Ok, então eu só coloquei código nas minhas então eu só coloquei código nas minhasferramentas cromadas surdas, mas não está guardada. ferramentas cromadas surdas, Como posso salvá-lo? Então é isso que vou fazer. Vou pegar seção por seção. Então aqui vamos nós. mesmo apelido dos colchetes. E então, na verdade, porque há dois seguidos que você diz essa linha divisória, mas na verdade escreveu ambas as linhas de código, então eu vou realmente selecionar. Eu poderia fazer de cima para baixo, na verdade. Então daquele ponto até lá embaixo e eu vou copiar isso e então eu vou ter outra aba aberta, eu vou fazer o editor de aparências e então todo o caminho até onde meu onde está o meu peso ? Onde está o meu Vamos lá, Kim? Lá, vamos logo ali. Eu só colei lá dentro. Vou fazer ainda mais espaço distante porque me enlouquece quando não consigo encontrar onde preciso colá-lo. Tenha em mente, eu estou andando acima das consultas de mídia, se você puder. Isso é muito, muito inteligente para fazer então eu tenho exibição fez jogar esquerda e mesmo apelido que eu preciso fez jogar volta para aqui nós vamos fazer jogar, certo? E então eu quero apenas gostar desta área de código. Certifique-se de pegar os suportes, ok? E então, uh, jogar fundo direito. Então, ok, então eu não toquei à esquerda para o fundo. Jogou direito com o fundo. E então o mesmo apelido com todo o espaçamento que vai acontecer com ambos. E eu clico em Atualizar arquivo Agora, quando atualizo esta página, quando atualizo esta página, ela a salva. Então eu não tenho que digitar nunca mais. Ok, agora estamos entrando em exibição Block display em linha e, em seguida, exibir nenhum. Ok, então bloco de exibição. Pense nisso como uma exibição em pedaços na fila. Pense nisso como um texto. Como fluir como impostos. Não como pedaços individuais, mas como linhas de texto em exibição, nenhum está realmente fazendo desaparecer. Então isso é muito divertido. Vamos subir aqui. Então o mesmo apelido sob o mesmo apelido, que é na verdade em ambos os dibs. Tenha em mente que o que eu coloquei aqui vai acontecer com os dois. Eu não exijo nenhum, e eles se foram assim. Quão legal é isso? Não, se eu colocar o mesmo código na jogada esquerda, o que vai acontecer? Só aquele. E veja o que aconteceu com Div. Jogar direito? Jogou certo? Na verdade, mudou-se. Você vê isso? Porque os dois estão à esquerda. Ok, então porque eu peguei, eu me livrei de um. Não só faz desaparecer, mas deixa espaço para isso. Na verdade, tira todo o espaço quando você não exibe nenhum. Então isso é super útil para que você saiba que geralmente, um, um, texto estão em elementos de linha e dá são geralmente elementos de bloco. Então só para você não precisa. Você não precisa torná-los elementos de bloco fazendo bloco de exibição. Mas digamos que não há exibição. Se eu jogar preto, ele está de volta. Por quê? Porque o último código que você sabe, se há código que vem mais baixo nesta determinada seção, ele está indo para a direita. O outro código. Certo, agora tenha em mente. Está ordenando isso com base em coisas diferentes. É uma espécie de dividir este estilo que arquivo CSS, e ele está exibindo os thes certos pedaços apenas separadamente. Mas dentro dessa mesma coisa, se você não exibir nenhum, então exibir preto. Vai derrubar aquele e só ouvir aquele. Ok, um, mas então brinque com isso para apenas fazer display non e display block, e eu sinto que você vai se divertir muito com isso. É realmente que entra. Muito disso vem a calhar mais tarde. Eso certifique-se de que você entende a propriedade de exibição lá. Verei na cama ao lado. 17. Divas cortantes: é hora de FLoAT: Muito bem, vamos falar um pouco mais sobre carros alegóricos agora, porque temos este código todo definido. Nós o salvamos no nosso CSS. Sempre que atualizo a página, ela ainda está lá. O que é muito, muito bom. Então, se eu vir aqui e desmarcar o flutuador, você pode ver que eles não estão mais ao lado um do outro. Você pode ver isso. Eles vão ser um após o próximo depois do próximo. O que acontece se você flutuar? Certo? Viu o que aconteceu? Você diz que pelo menos trocou o lado esquerdo direito. O que vier primeiro terá precedentes. Ok, então é basicamente ah está se reorganizando porque este desde que ele veio primeiro vai ter o primeiro lado direito spot, e então o próximo vai ter o próximo lugar lado direito porque ambos estão flutuando, Certo? Ok. Se eu não flutuar nenhum, isso é a mesma coisa, é apenas não ter um flutuado tudo que é tipo de padrão. Ok, então tipicamente você vai flutuar para a esquerda porque tipo de coisas eles simplesmente, como, como, deixou a linha normalmente, mas desde o seu quinto já que eles são 50% 46 mais 2% mais 2% mais 2% já que eles são ambos 50% blocos , eles vão parecer que eles estão perfeitamente centrados. E tudo está bom mesmo que estejamos apenas deslocados para a esquerda. Se eu mudar com 20% você pode ver que estamos todos deslocados para a esquerda. Mas se eu mudei o carro alegórico também, , você pode ver o que acontece aqui onde tudo agora é deslocado para o lado direito. E porque este lado esquerdo ver esta div lado esquerdo foi mais alto no código que tem precedência para o que é empurrado para a direita primeiro. E então tudo se acumula para a direita. Ok, então é como um ímã. Pense nisso como um ímã e você está apenas puxando tudo para ele no código superior é puxado seu primeiro, e então todo o resto meio que preenche. Tudo bem. Também jogar com floats jogo de vôo com ligá-los, desligá-los. Lembre-se, se você tem se você tem como este onde você tem carros alegóricos e então você tem o mesmo código. Mas há outra coisa abaixo que se lembre, que vai substituí-la. CSS vai se sobrepor, então não fique preso com isso. Algumas das várias linhas de código prestam atenção ao que você está fazendo. Você pode ver que ele realmente cruza. E se eu desmarcar isso, então ele permite que este outro outro código venha através. Ok, então brinque com isso e eu vou ver no próximo vídeo. 18. Como usar o texto de lugar em seu a: Então agora estamos de volta à forma iniciante se você Ah, se você está confuso sobre como chegamos lá, fizemos isso em um vídeo anterior, mas é o formulário de contato sete. Então precisamos desse código curto. Se você ainda não fez isso, vá para o contato. Goto, você precisa de contato. Forma sete, conecte. Vá para conduzir formulários, criar um novo e, em seguida, você acabará com com o seu novo aqui. E então precisamos desse código curto, seja lá o que for. Você tem uma cópia para uma nova página. Onde é que está? Comece a se formar bem aqui. E então você pode ver que nós apenas soltamos isso direito na versão de texto ou na seção de texto. Não o visual, o texto. Eu não acho que isso realmente importa, mas colocar no texto e, em seguida, faz você clicar em atualizar e, em seguida, estamos no formulário. Então aqui está o nosso formulário. Agora vamos estilizá-lo. Vamos brincar com eles. Vamos estilizá-lo. Então, já temos o estilo de antes para mostrar texto vermelho quando você digita. Mas nós vamos brincar com todas essas coisas diferentes agora, então vamos apenas brincar e eu vou te mostrar tipo de eu só vou fazer algumas coisas e você pode apenas tipo de prestar atenção para jogar junto. Então direito, clique, inspecionar, e eu vejo imediatamente a entrada. Agora olhe para o estofamento sobre isso. Você vê o estofamento agora mesmo? Vejo o verde ao redor. Hum, eu posso mudar isso. Eu realmente vou mudar o tamanho da fonte para 20 pixels porque eu queria ser bom e grande Bob Jones Gmail baixo. E então minha mensagem eu só quero digitar isso lá para que eu possa brincar com ele. Por isso, sou sempre tantas vezes. Estou apenas clicando com o botão direito e clicando, Inspecionar e chegando aqui para os dados. Ok, então eu vou Teoh, vamos nos livrar dessa cor. Odeio essa cor. Isso é muito irritante para mim. E quando você paira sobre algo, é uma linha azul. Quero que o Teoh mude isso. Então eu vou vir aparecer este elemento alternar estado clique foco. E agora você pode ver o que parece quando está focado. Na verdade, eu sou “ah border”. E depois vou fazer. Vou guardar isso. Mas eu vou dificar cinco pixels e eu vou fazer lá vamos nós. Na verdade, deveria ser assim. Baba. Papá. Papá! Papá. Eu sou salada. Cinco pixels e, em seguida, a cor com a hashtag na frente dele. Isso é chamado de cor hexadecimal. Você também pode apenas pegar azul ou qualquer coisa de ouvir Chrome. Olhe para isso. Como isso. Isso é legal. Está bem. E então delinear. Eu não sei o que é isso. Está bem? E eu também vou didio texto transformar em maiúsculas e minha família de fundos vai ser areia. Você pode ver que gosta, olhe para tudo isso. Aquela mudança que fizemos imediatamente. Isso é enorme. É uma loucura o quanto você pode mudar agora. Hum, e você pode ver que estes não estão colando, mas este é porque nós clicamos na caixa de seleção. Então o que eu faço agora é eu. Primeiro de tudo, eu não gosto disso, então, por favor, não preste atenção a isso ser feito. Mas só quero que entenda como trabalhamos aqui. Então nós temos essa área em que trabalhamos, eu vou copiar esse código, e então eu vou voltar ao meu estilo que CSS e então eu encontrá-lo. Descubro onde isto se encontrava antes do senhor deputado. Colocamos isso em um vídeo anterior com a cor vermelha para a entrada de foco de entrada, foco de e-mail. Mas Earl, concentra-te, etc. Hum e eu vou apenas acelerar o meu código lá em vez disso, e então clicar em atualizar arquivo. Depois, quando voltar à minha forma, não preciso do Teoh. Não preciso mais começar da estaca zero. Eu meio que já fiz esse trabalho. OK, então, hum, a próxima coisa que nós vamos para um lugar titular então entrada bem aqui se nós se nós clicar com o botão direito e então nós fazemos isso é html dentro deste direito no final, eles estão indo para espaço reservado é igual a nome. Veja que não é divertido. Agora, isso é o deles em vez de lá. Então, basicamente, eu preciso colocar isso no HTML real. Agora, o HTML está em um ponto diferente do CSS. Ok, o CSS em que trabalhamos e você vai e volta com a folha de estilo, esse tipo de coisa. Mas para ser capaz de fazer um espaço reservado como esse para um formulário de contato, nós realmente vamos voltar Teoh para o formulário de contato real que nós criamos. E então onde está o padrão? Bem aqui. E depois vai estar aqui quando criarmos coisas novas. Então vamos dizer que você quer fazer você criar formulário. Mencius diz que usa o Texas como detentor do campo. Você vê, como o espaço reservado para baixo seu valor padrão é texto. Você vê que ele tem um texto de espaço reservado. Vamos copiar as citações de espaço reservado, tecnologia. Bem, vamos mudá-lo para o nome, mas vai estar dentro destes colchetes, e vai ser apenas com um espaço antes do espaço depois e depois o que quisermos entre aspas . OK, então para o nome, vamos ver tão textura que você vê esses colchetes engraçados. É o que procuramos. Seu nome, espaço reservado. E então, entre aspas, vamos fazer o seu nome aqui em baixo. Vamos fazer espaço reservado ou correio aqui mesmo. Vai ser assunto. Oh, eu preciso colocar espaço reservado. Caso contrário, estarei em apuros, e aqui mesmo. Você é uma mensagem. Ok, agora o que eu vou fazer, na verdade, eu vou cuidar disso. Eu ia tirar isso daqui. Eu vou pegar todas as coisas que normalmente vão acima do formulário, e eu vou apenas apagar esse br. É só que essa é a próxima linha. Ok, então nós estamos apenas nos livrando da próxima coisa da linha. Não preciso mais disso. Hum, então seu “nay “todo o caminho desde seu nome até o final da etiqueta br, e eu apago. E então você foi e-mail todo o caminho para o assunto da etiqueta BR através da tag BR. Sua mensagem através da tag BR. Deixe-me salvá-lo. E agora, quando voltarmos àquele formulário, está em uma página. formulário, Eu coloquei na página. Vá ver agora, não temos nada disso. Eu tive um tempo, mas na verdade está aqui. E é divertido quando você digita então. Não, eu não gosto disso. Como muda os fundos. Como, quando você clica nele. Eu não acho que eu não goste disso em tudo. Hum, mas é muito, muito divertido, porque assim, você não precisa de campos extras acima ou abaixo. Esses caras, você só pode realmente colocar esse texto de espaço reservado no próprio formulário. Ok, então, Jones, hum, no Gmail e olá anos uma mensagem. Ok, então é muito, muito, muito divertido de brincar com isso. Exibe essa coisa de espaço reservado com o formulário Contato. Sete. Conecte-se e você vai descobrir que sua forma ganha vida um pouco diferente de, uh, uh, então apenas ter a mesma coisa velha chata no topo jogar por aí com que eu vou ver na próxima parte. 19. Assista o seu código: o MASta de lugar: Não faça. No último vídeo, mudamos o formulário um pouco para ter texto de espaço reservado dentro daqui. Então, quando você começa a digitar Bob Jones, que fez texto desaparece. Mas então eu vim aqui e disse: “ Oi, Oi, meu nome. Agora, por que isso não deixou isso? Deixe uma mensagem que ainda está lá. Qual é o problema? Por que não é espaço reservado texto sábio, ele realmente dentro da caixa de texto. Não é essa coisa falsa que me diz o que devo fazer lá. Mas, na verdade, está lá como texto real. A razão é porque eu estraguei tudo quando eu estava criando o formulário de conduta em si. E eu não coloquei espaço reservado antes de colocar as aspas. OK, então isso é enorme. Se você quiser que o texto desapareça, você tem que no formulário de contato sete. Tenha em mente, você tem que fazer espaço reservado e depois me deixar uma mensagem. Ok, então quando você clicar, salvar agora quando eu voltar para a mesma página que tem o formulário de contato iniciante Aqui vamos ver . Agora, quando eu clico nele, agora ele desaparece. Ok, então faz você não ser tropeçado por isso. Eu só quero ter certeza que você, uh, se você cometeu o mesmo erro que eu cometi você estava tipo, oh, é assim que eu conserto. É muito fácil de consertar. Hum, então lá vai você. Veja no próximo vídeo. 20. Como usar as orders: faça isso para corrigir seu código: E agora uma coisa quando você está fazendo uma forma que me irrita é que quando você tem fronteiras diferentes, você pode ver que o texto meio que muda. Você pode ver que ele meio que fica um pouco maior? Parece estranho para mim. Então eu quero que você se certifique de que quando você está fazendo seu estilo, que você mantenha a borda é o mesmo no tapting do mesmo modo que quando você clica de um campo para o outro campo, ele não fica louco olhando. Ok, então vamos Ah, eu só cliquei nesta entrada e então eu estou um clique neste pequeno alfinete aqui e certifique-se que ele está focado. E agora ele puxa essa coisa, esse tipo de código escondido que me mostra o que está acontecendo. Tem uma borda de salada, cinco pixels com essa cor. Eu vou pegar isso e vou copiar isso para o normal. Aqui embaixo, você pode ver que não há frio e foco. Você pode ver foco, e então você pode ver que este não tem isso. Lá vamos nós fronteira Agora o problema aqui é que eu queria mudar quando você clicar nele. Eu queria ficar incrível quando você clica nele, mas eu queria que Teoh não mudasse de tamanho. Então, em vez disso, veja esta borda uma salada PX, o que quer que seja. Qual é a diferença? Sua salada. Cinco p. X. Ok, então são cinco pixels, o que eu adicionei. Mas Thea, o original era apenas um. Então, na verdade, vou me deixar pegar o Brit dessa linha, na verdade, basta pressionar um espaço e então se eu clicar fora e ele simplesmente exclui todo o código da fronteira. Então eu estou realmente muda os cinco pixels. E então quando eu clico através, ele não empurra nada para cima e para baixo porque eu mantive a placa do mesmo. Sim, parece que parece que está me deixando desligar essa coisa de foco. Você pode ver o que eu estou vendo. Ainda parece bom quando você clica nele. Posso dizer onde estou porque isso destaca. Livra-se do grande fundo, mas não empurra nada para cima e para baixo. Você não quer que seu formulário para ser seus campos de formulário para ser maior ou menor quando você clicar sobre eles, porque ele vai apenas vai se sentir um pouco solto contra isso. Mauritz é melhor o que eu não gosto de como o texto muda para maiúsculas, então eu tenho que corrigir isso também. Mas eu só queria chamar a sua atenção para que se você não manter suas fronteiras iguais, então vai parecer um pouco solto e ter certeza que seus padrões são os mesmos e suas fronteiras são as mesmas. Se você está usando esse frio em foco que esse elemento de força estado. Se você está usando essa coisa de foco acontecendo, você realmente precisa ter certeza que você está fazendo a mesma coisa. Tudo bem, veja na cama ao lado. 21. O que a transformação de texto: Tudo bem. Então eu atualizo a página depois. Acabei de fazer o último vídeo, e percebi que não guardei o que mudei a borda sendo cinco pixels. Acabei de fazer o último vídeo, Vou voltar aqui, trocar e checar o meu trabalho se as coisas não estão se movendo. E, uh, então eu vou pegar todo o código. Agora, lembre-se, eu não preciso pegar todo o código porque a única coisa que eu realmente mudei foi Border. Mas quando você está começando, que hackear? Pegue a coisa toda. Não se preocupe em separá-lo. E então, uh, eu vou apenas colá-lo bem ali. Clique em Atualizar arquivo. E quando volto ao meu formulário e o atualizo, isso salva meu trabalho. Que bom. Ok, próxima coisa que eu quero me livrar é isso. Ah, texto de espaço reservado não é maiúscula. Mas quando eu clico nele, é que realmente, realmente me incomoda. Odeio esse desleixo. Então o que vamos fazer é vir aqui dois. Agora, isto já está aberto. Se precisar achar certo. Clique, clique em, Inspecionar. E então você tem a entrada e então aqui vamos nós. Não é a versão focada. Tenha em mente. Se você tivesse esse pino em foco, então seria. Isso me mostraria o povo. Não quero ver a versão focada. Eu quero ver a versão desfocada, e eu quero ter certeza de que isso é taxado transformar. Se você clicar no lugar errado, ele realmente não abre um novo. Deixa-me aí mesmo. Texto, traço, transforme a caixa superior do cólon e uma coisa que é legal sobre ferramentas surdas cromadas é que ele meio que preenche para você. É realmente útil. Se você está tentando descobrir o que diabos foi aquilo? O que devo colocar a sua ou quais são as minhas opções? Quero dizer, mesmo assim, eu transformo texto Colon e isso me dá toda essa lista. Quero dizer, mesmo assim, Isso é muito, muito, muito útil. Então, utilize isso. Ok, então agora que eu fiz a transformação de texto maiúsculas, você pode ver quando ele não está focado. É maiúscula, assim como a versão focada. Então, quando eu cliquei, é realmente bonito, e eu ainda posso vê-los se movendo um pouco. Isso me preocupa, mas o texto não parece mudar, o que é muito, muito, muito bom. Eu realmente gosto que não esteja fazendo isso. Está mudando o azul, que está me fazendo perceber o que está acontecendo que você vai saber em qual eu estou. Mas eu gosto que eu quero dizer, isso é apenas desleixado das mudanças de texto assim. Só parece estranho. Então eu vou pegar isso agora, pegar todo esse código. E desde que eu estava apenas trabalhando neste tipo de área para selecionar o imposto de entrada do que colocar o tipo e-mail e colocar tipo todas essas coisas eu vou direito sobre esse código, OK? Certifique-se de que, se você estiver selecionando o mesmo material e o código mudar, basta tirar todo o Não iniciar. Não comeces a pô-lo por baixo assim. Está bem. Certifique-se de que você não seja muito desleixado com isso, porque caso contrário nós vamos ter um momento muito difícil em seu código. Quando você tem problemas. Suba, clique em atualizar arquivo. Então estamos de volta para começar a reforma. E aqui estamos nós. Tudo bem. Então certifique-se de que você faz você jogar com ele e apenas prestar atenção em como sua forma é. Ah, o que? As coisas estão desleixadas. O que as coisas estão parecendo estranhas e, em seguida, tente descobrir onde selecionar e como selecioná-lo, e depois vá para o lado CSS e comece a mexer com ele, veja no próximo vídeo. 22. Preste atenção a detalhes: a altura de linha: Tudo bem. Descobri o que estava me deixando louco. Isso não é grande coisa, mas eu só quero que você perceba quanto detalhe em prestar atenção aqui para que você possa fazer o mesmo tipo de coisa se você se importa com isso. Veja como estes se movem um pouco. Quando eu clico nele, você vê como assistir o texto lá, Sam se move para cima e para baixo apenas um pouquinho que me deixa louco. Não é grande coisa. Quero dizer, talvez você realmente goste que ele se mexa um pouco. Meio que faz com que ganhe vida um pouco mais, mas eu não gosto disso. A questão é, na verdade, mentir. Altura. Você pode ver a altura da linha de entrada normal. Isso é o que está mexendo comigo. Se eu desligar isso, você pode ver que este ar é sólido. Hum, então deixe-me acreditar que porque eu não quero eu realmente não quero direito sobre isso, porque isso é influência. Há uma coisa tão grande do site. Eu realmente não quero escrever código em cima disso, porque eu realmente não sou. Eu realmente estou me perguntando com o que mais isso vai mexer. Então o que eu vou fazer em vez disso é apenas adicionar ao meu em todos esses entrada de texto tipo, tipo URL, e-mail, todas essas coisas. E eu estou apenas indo para eminente porque eu apenas vou dar-lhe uma altura de linha de 20 pixels. E agora é salada de rock porque eu lhe dei essa linha. Eu OK, então algumas das coisas que onde ele só parece um pouco confuso. Eles são pequenos. São coisas pequenas e estranhas que aconteceram. Há uma solução para isso. Há algum lugar no seu resfriado. Passa-se alguma coisa. É por isso que é tão útil marcar e desmarcar algumas dessas caixas aqui sem ter que escrever código. E acho que você pode usar essas ferramentas de cromo surdo para realmente entrar lá e apenas dizer, o que diabos está mexendo com isso? Ou como você está tentando descobrir o que você está tentando quebrar o código e dizer, bem, bem, por que ele está quebrado? É tão fácil ativá-lo dessas caixas de seleção para ser capaz de olhar para o código e vê-lo como ele realmente é. Então agora eu vou pegar toda esta linha de código com a nova linha Altura, Colon 20 PX e ir para o membro do arquivo CSS. Eu tinha isso de antes. Tenho trabalhado nessa seção dessas entradas, certo? E então eu colo e lá vamos nós. Tenha em mente, também, que dentro do CSS esta sintaxe é muito importante. Tenha em mente, também, também, É o que quer que você queira mudar. E então Colin e, em seguida, os dados para aquela coisa específica que você quer mudar, em seguida, um ponto-e-vírgula. Ok, se você não tem um semi-cólon, então ele não sabe ir para a próxima coisa que você quer mudar, então você vai ter um momento difícil lá. Então certifique-se de que você está usando esse Syntex corretamente. Isso é CSS em impostos. Se você está em, se você está em HTML do que mesmo aqueles usando esses seletores como esta classe aqui, que o ponto não traduz OK é o ponto não está em html, é apenas classe igual a classe há igual a classe com aspas. Certo, então tente pegar isso. Certifique-se de obter a sintaxe correta quando você começar a codificar, é realmente confuso. Há todas essas coisas diferentes acabariam por pegar. Ok, isso é o que deveria ser aqui, e isso é o que deveria ser aqui. Apenas continue experimentando. E como as coisas quebram e como as coisas bagunçam, apenas tipo de tentar passar por esse pensamento em sua mente novamente de como, OK, qual CSS e HTML. Como é que se parece? Ok, então aqui vamos nós acertar o arquivo de atualização, e então sua dupla verificação de que tudo veio através, certo? Eu controlo o nosso e este ar ainda é sólido. Bom. Incrível. Finalmente estamos chegando a algum lugar vendo o próximo vídeo. 23. Como estilizar seu texto de lugar: este vídeo pode ser um pouco profundo demais para o que você está tentando fazer agora, mas pelo menos queria chamá-lo à sua atenção. E eu vou fazê-lo rapidamente em movimento. Veja, dê uma olhada no seu nome. Você vê isso? O texto ali. Vê a diversão? Veja-me escrever o teu nome em cima disso. Consegue ver que é diferente. É divertido diferente. Eu não gosto nada disso. Não combina. Mas quando eu clicar com o botão direito do mouse quando eu clicar em Inspecionar. Eu fui trazido para este, uh, esta entrada e eu não consigo encontrar onde o estilo é para o texto de espaço reservado. É só falar sobre todo esse estilo isso para a entrada. Isso é tudo para, uh, texto que estou digitando agora. Então, há um pequeno truque com as ferramentas de desenvolvimento. Vá para estes três pontos e, em seguida, vá para as configurações. E, em seguida, se você clicar em mostrar nós agente de usuário sombra negócio em. Então, quando eu voltar, você pode ver que esta entrada tem pouca seta drop down. Se eu clicar nisso, então eu sou capaz de acessar o estilo espaço reservado e você pode ver a família divertida Monserrat, Helvetica, todas essas coisas. Isso é o que está acontecendo com o texto de espaço reservado real. Então o que eu faria então é copiar isso, e eu traria isso para o meu texto de entrada real. Então, quando eu pegar seu nome ainda não funciona porque não está no foco. Um, deixe-me ver. Concentre-se bem aqui. O seu nome. Lá vamos nós. Você vê isso? Agora, isso combina. Ah, muito melhor. Então eu só queria dizer que a resposta está lá, mas você pode ter que cavar um pouco mais, mas, hum, hum, mas continue procurando e continue tentando torná-lo mais e mais perfeito se você puder, don não ficar atolado por ele. Mas eu só quero que você saiba que esse tipo de coisa é o que você deveria ficar de olho . Espero que isso te tenha ajudado a ver na cama ao lado 24. Exploração rápida: elementos de HTML que você usa a cada dia.: tudo bem para este próximo vídeo, nós estamos indo Teoh passar por um monte de elementos diferentes elementos HTML que você deve saber que eles são apenas elementos básicos co Duas páginas e, em seguida, adicionar novo. E então nós estamos realmente para começar no editor visual aqui. Ok, então vamos deixar-me ver. Deixe-me fazer isso um pouco maior, na verdade, deixe-me enrolar Fechado Dev Tools. Hum, também como se você clicar nesta barra de ferramentas alternar. Você terá acesso a esses diferentes estilos aqui. Estas diferentes rubricas. Eu quero que você faça isso. Então, primeiro, vamos começar com Hum e dizer cada um e então apertamos “Return”. Muda um pouco para parágrafo. Este é um parágrafo e, em seguida, pressione Return novamente. Agora essa é a lista com marcadores aqui. Lembre-se de dizer que isso é uma lista. Esta é a segunda lista de coisas. Esta é a terceira coisa. E então, hum, eu quero que você vá para texto, clique neste texto aqui, e você pode ver que o que acontece é o mesmo que nós colocamos agora é agora co. Você pode realmente ver o código agora esta área com esta área que é na verdade um elemento P apenas o texto. Ele não tem tags P por perto, e isso é bom para WordPress. Você não precisa de etiquetas P. Ele só supõe tags P se você não tem mais nada. Mas eu só queria ver aqui. Então ch um e então que fecha o H um tag. Isso é só um título, certo? E então temos elementos P aqui. Isso é um elemento de texto. E, em seguida, ver este ul e depois Ally. Esta é uma nova lista ordenada. E então, uh, aqui está isso. Aqui está como cada bala individual com o aliado e depois o aliado. Então eu só quero que você tipo de nota essas coisas. Se guardarmos isto, vamos publicar isto. Se guardarmos isso e olharmos para ele, você pode ver que há o título. Há o elemento P, e então aqui está a lista, então eu só quero que você tenha essa idéia. O que está acontecendo aqui é que podemos adicionar e editar coisas diferentes no editor visual usando esses diferentes cabeçalhos, etc e, em seguida, usando essas coisas diferentes. Mas não é. Não é magia. Quero dizer, você faz essas coisas aqui, e é basicamente escrever o código para você. Mas se você quiser dar uma olhada no código, você clica sobre o texto e então você pode realmente adicionar classes diferentes para coisas. Vamos à aula de terapia. Vamos apenas dizer parágrafo divertido em roupas que etiqueta e depois vir aqui e certifique-se de fazer o corte p. Ok, você sempre tem que terminar o que quer que seja. Seja lá o que você começar, você tem que terminar com a mesma coisa com a barra. Então, vamos clicar em atualizar e então eu vou para cá. E quando eu clicar com o botão direito e inspecioná-lo salvou essa informação para mim. Classe P é igual ao fundo do parágrafo. Agora, às vezes, ah wordpress realmente tira código, e nesse caso, você quer instalar um plug que irá garantir que wordpress não faça isso. Mas agora está funcionando muito bem. Só queria chamar a sua atenção para isso. E então como nós deixamos eu fazer isso maior porque é fácil de trabalhar com, e então como eu clicar nesta nova regra de estilo aqui vamos p dot fundos de parágrafo. Este é um elemento P com a classe ou com apelido de fundo parágrafo. E então eu posso dizer que a cor vai ser judeus azuis com quem você estava trabalhando. Todos esses diferentes aspectos do WordPress foram a primeira edição no real, uh, no editor visual de divisão. E então podemos passar para o texto, e então você pode ver que podemos adicionar aulas ali mesmo, o que é muito, muito, muito útil. E então como nós salvamos e vamos para realmente ver a página, então nós podemos usar ferramentas Chrome Deva para realmente bagunçar para isso. Certo, classe P é igual a diversão de parágrafo. Eu clico nisso mais, e então agora eu posso escolher a cor para esse elemento. E então o que eu faço é salvá-lo selecionando esse código uma cópia. Aquela coisa toda com os suportes. Ok, então ele tem o seletor acima elemento p superior com o apelido classe parágrafo diversão. E então você pode ver esses colchetes. Esse é o código entre os colchetes. Então eu vou copiar isso, e então eu vou voltar. O Teoh. Bem, eu deveria ter outra conta aberta, mas eu vou voltar para onde está? Aparência e depois editor. Mas eu tenho a minha folha de estilo bem ali. Deixe-me procurar o espaço em branco que eu fiz. Há um bom espaço em branco colado no arquivo de atualização, e quando eu voltar para essa página exata, ele vai salvar essa informação. E lá vamos nós. OK, então isso é uma espécie de um passeio através desses elementos super básicos, mas usou o editor do WordPress mais assim o visual e o editor de texto para tipo de ver o que está acontecendo, e você pode adicionar suas aulas em Lá. Você pode adicionar seus apelidos diretamente ali, se você deseja adicionar uma classe para o elemento P, ou se você deseja adicionar uma classe para a lista de palavras da ONU na lista ordenada, passar ou, se você quiser adicionar para a classe H um elemento é igual. Este é o título Ok, então você pode fazer tudo isso no back-end WordPress. E então, quando vamos para o Chrome, veja as ferramentas do Chrome Dev. Uma vez que nós realmente salvamos a página, tudo. Todas essas aulas são salvas, ok, e então eu quando eu terminar quando eu estou trabalhando com isso, está afetando essa seção específica, e é muito mais fácil apontar as coisas porque você criou essas classes. Aqueles apelidos no WordPress de volta. E toda vez que você clica em nova regra de estilo, cromo deve ser inteligente o suficiente para fornecer esses seletores específicos. Então eu espero que isso ajude e eu vou vê-lo no próximo vídeo. 25. Trabalhando com imagens: largura, altura e de de a mais acessibilidade: Próximo. Estamos falando de imagens e imagens de estilo. Agora é fácil adicionar uma imagem e WordPress e clicar em adicionar mídia. E então você clica em Clique em um desses caras e clique em inserir na página e você pode ver que tem essa tag de imagem. Ok, então a fonte de espaço de imagem SRC é igual e, em seguida, todo o todo ligado a essa imagem. Agora, tenha cuidado. Ao escolher imagens no back-end, você pode escolher tamanhos realmente diferentes. Portanto, não basta levar necessariamente o tamanho que o WordPress escolhe. E, na verdade, é melhor se você escolher um tamanho maior, porque então podemos até fazê-lo carregar na metade do tamanho para monitores de retina ou iPhones. Se você tiver uma imagem pequena que fica bem na tela regularmente ao carregar no iPhone , ela não ficará tão boa. Então eu normalmente carrego imagens enormes. Agora isso é realmente um pouco grande demais. Eu poderia otimizar isso um pouco melhor, escolhendo um ah melhor compressão, mas por isso queremos imagens maiores, porque então podemos forçá-los a carregar 50% largura e, em seguida, dessa forma todos os dados extras são salvos e Nós não temos que ter várias imagens. Se isso passou por cima da sua cabeça, não se preocupe com isso. Vamos subir em certa DuPage. E então eu escolhi eu me certifiquei de que eu estava realmente escolhendo uma versão em tamanho real dessa imagem , e eu vou clicar em atualizar e agora realmente chamado isso. Eu decidi chamar isso de brincar, e então eu também mudei o link para ele. Se você quiser fazer isso, você é bem-vindo para fazer isso. E agora podemos ver que a imagem preenche toda essa inteligência lá. Agora, eu posso provar isso para você se nós inspecionarmos, e se eu apenas enrolar e eu ver onde está? Main ali. Olhe para isso. Vê aquela laranja na lateral? Essa é a margem para, ah, certo estilo para este tema. Escolheu que ele vai me dar muito espaço em branco ao lado. À medida que aumentarmos a página, vai mudar o espaço em branco e certificar-se de que consegues ver isso a estourar. Certo, então , o que vamos fazer é mexer com isso agora. Então, quando você clicar com o botão direito, inspecionar. E então, uh, não, se eu clicar nisso. Além disso, bem aqui. Veja o que ele escolhe. Imagem alinhada. Imagem WP de tamanho nenhum. 20. Às vezes eu vou querer colocar o estilo realmente certo nessa imagem muito específica. E às vezes eu vou querer colocar um DIV em torno dele para que eu possa tipo de ter esse site largo. Isso aconteceu? Local largo. Se eu fizer isso acontecer em outras páginas, deixe-me dizer que de uma maneira diferente. Esta imagem. Agora eu posso selecioná-lo de várias maneiras diferentes. Eu posso selecionar apenas sendo uma imagem, apenas o fato de que é uma imagem. Posso selecioná-lo. Mas eu provavelmente quero fazer isso porque isso irá selecionar todas as imagens em todo o site. Eu posso olhar para isso, esta imagem de dados especiais WP traço, Dash 20 que é mais específico. Isso é bom, mas isso é apenas específico para essa imagem. Mas se eu for editar a página e eu diria que coloquei uma div em torno dela, então há uma div e depois desça aqui e feche a etiqueta do Dave. Eu coloquei essa caixa em torno da imagem, e eu estou realmente dar-lhe uma classe de imagem divertida e, em seguida, s Você pode ver como eu fiz essa classe de espaço igual a citação imagem divertida completamente. Esse é o apelido que estou dando a essa caixa específica, certo? E tem essa imagem dentro dela. Atualize e, em seguida, voltamos à página. Aqui vamos nós. Então agora tudo parece o mesmo porque eu não tenho nenhum estilo para que div ainda. Mas quando eu clicar com o botão direito sobre isso e eu clicar em inspecionar, eu preciso de um pouco mais de quartos. Consigo ver melhor este código. Isto é isto para mim. Quando olho para isto, é só blá, blá, blá. Kai, não olhe para isso e seja como Oh meu Deus, tenho que entender todas essas coisas agora. Não se preocupe com isso. Eu só vejo isso como um pedaço de como Ok, isso é uma imagem. Eu não preciso me preocupar com todo o gobbledygook lá dentro. Você pode ver a imagem de Div aqui. Uma classe div é igual a imagem divertida que div está em torno desta imagem específica até agora. Se eu clicar mais você pode ver que é como ponto divertido imagem. Agora isso é apenas selecionar a caixa de div real. Mas se eu quisesse selecionar todas as imagens dentro de dibs com imagem divertida apelido. Eu só vou como este espaço e então eu sou g. E agora eu selecionei todas as imagens dentro de uma div chamada imagem divertida. Então se eu criar outro post e outra página e eu faço a mesma coisa onde eu colocar uma imagem Mas então eu colocar uma div em torno dele com apelido de imagem divertida, que styling vai o estilo que eu faço agora, nós também selecione isso também. Ok, uh, então aqui vamos nós, e eu vou dizer com 50 pixels que é minúsculo. Havia 100 203 104 105 100 barco. Desculpe, estraguei tudo. 200. 304 105 106 107 108. Agora, como é que quando estou pressionando 607 108 100? Por que não fica maior e maior? Há 4 506 107 100 Agora que parece o mesmo tamanho sábio e ficando maior porque esta imagem não vai ficar maior. Não vai encher. Não vai um passar do limite porque tem umestilo diferente. Veja, essa largura máxima é de 100%. Se eu tirar isso? Vês o que acontece? Ele empurra além desse limite, mas o WordPress vem estoque com esses estilos específicos para tornar sua vida um pouco mais fácil. Mas você não pode simplesmente mudar. Você não pode apenas escrever código para, você sabe, eu quero que o com seja, você sabe, 1500 pixels. Isso não vai funcionar. Você tem que pensar bem. Por que está sendo bloqueado ou o que está acontecendo com ele? Ok, então não só está lá com, mas também com Max e se você não desfizer algum outro código, isso é realmente uma coisa de todo o site. Olhe para isso. Eu sou G é apenas imagens. Apenas todas as imagens. Todas as imagens em todo o site terão esse código porque esse seletor não é específico . É só escolher todas as imagens. Ok, então neste caso é realmente bom porque nós estamos dizendo, OK, Max, Max, com 100% de imagens nunca será maior do que as caixas que eles estão dentro. Então é útil. Eso vai voltar para ouvir o quê? Eu realmente não quero mexer com isso agora. Poderíamos até dizer: “ Vamos ver se Max mexe com ele”. Ok, então aqui. Então, se eu fizer Max com bem aqui, isso funcionaria para essa imagem específica porque está dentro de uma tag de imagem divertida. Ok, Hum, também podemos fazer. Vamos tentar cortar um pouco. Então, com é 200 pixels. A altura é de 500 pixels. Olhe para isso. Yuck. Se isso acontecer com algumas de suas imagens, você quer começar a usar auto. Ok, então é isso que você pode ver. Isso aqui em baixo nesta altura da etiqueta é automático. Mas se você quiser escolher, você sabe, um certo com e por algum motivo ele fica confuso e a altura é que você está tentando colocar a altura junto com ele. Você não precisa do dedo do pé. Pense na altura exata perfeita. Você não precisa rebocar toda essa matemática para fora se você apenas faz auto. Ou neste caso, wordpress realmente vem estoque com altura, frio e auto. Porque você pode ver que todas as imagens em todo o site vão ter esse código. Hum, mas desculpe. Resumindo a história. Você nem sempre precisa ter uma largura e uma altura para sua imagem, porque ela está colocando esse código completamente. Ok, então ele está escolhendo a largura desta parte específica do código CSS, e então ele também está escolhendo que a largura máxima é 100% e também a altura é automática. Ok, então há um código que já está dentro do site WordPress que você precisa prestar atenção. Quando você sabe se seu código não está funcionando corretamente, você precisa descobrir como diabos isso está acontecendo? Que outro código tem aí que me impeça de chegar onde estou indo? Normalmente, Normalmente, o que vou fazer é para imagens que quero mostrar. Grandes telas de ilegalidade é que eu vou me certificar de que o maior eles são os maiores que eles mostrados, são mostrados,o que significa que se os limites do do site são talvez Max 800 pixels, eu vou dobrar isso para quão grande a imagem realmente tem que ser . Então, digamos que a largura de uma imagem será de 800 pixels. Vai mostrar essa largura. Dê uma olhada nisso quando você pode ver aqui embaixo, é difícil apontar para ele ao mesmo tempo. Olhe para baixo nesta área quando eu passar por cima você vê 400 pixels por 67. Está mostrando que com 400 pixels de largura em 267 pixels de altura, mesmo massa, a imagem é realmente maior do que isso. Agora deixe-me desligar meu código que eu fiz aqui e vamos ver o que ele mostra como o maior possível que ele vai mostrar. Tente puxar isso todo o caminho para o lado aqui que parece o maior. E então deixe-me clicar com o botão direito e clicar em Inspecionar. E então você pode ver Lá vamos nós 840 Então são 800. Consegue ver esse pouco? Olhe aqui quando eu rolar, OK, continue olhando bem ali. 8 40 por 5 59 Então 8 40 é a largura. Então eu vou dobrar isso. Ok, então 8 40 16 80 Então eu vou ter uma imagem com 1680 pixels de largura, e então quando eu mostrá-la em uma caixa de 840 pixels, ele vai cortar uma tonelada dela. Mas se eu estiver em uma tela de retina, vai ficar incrível contra se eu colocar uma imagem aqui com 840 pixels de largura. Ficará ótimo em uma tela de computador normal. Mas se houver uma tela de retina ou um iPad, vai parecer ruim. Ok, então você sempre quer. Bem, a minha técnica é duplicar isso. Eles têm plugins que permitem Teoh ter diferentes versões de arquivos de imagem que me deixa louco. Só quero fazer upload de uma imagem e fazê-la funcionar. Então eu decidi fazer o upload de uma imagem melhor e depois mostrá-la na metade do tamanho. Faz sentido? Se isso não acontecer, por favor deixe um comentário e eu falarei com você mais sobre isso. Certo, Certo, então isso é praticamente tudo o que estamos falando com imagens agora. Vejo você no próximo vídeo e obrigado por ficar comigo. Vamos continuar. 26. Trabalhando com links: somando e marem + Como corrigir um problema comum: Próximo. Estamos a falar de estilo de ligação. Agora, primeiro precisamos fazer uma ligação na parte de trás do peito da palavra. Um rascunho é igual a qualquer que seja o seu link do google dot com. E então você digita o que quiser bem aqui. Isso é o que eles fazem. texto para o seu link vai ser, e então você fecha a tag a. Agora, se isso é irritante para você, você sempre pode, hum, ir ao editor visual e, em seguida, digitar Aqui está um link. E então se você selecioná-lo e clicar neste cara aqui, você pode digitar o que quiser e então ele vai fazer o link para você pode ver aqueles olhar exatamente o mesmo. Se eu for ao texto, você pode vê-lo. Fiz o da balsa H para mim. Ok, então uma coisa também que eu fiz foi eu estar no topo. Eu me livrei do código em torno da imagem que estava dando uma div com uma classe específica, e eu coloquei uma classe em torno da totalidade da dor do conteúdo da lesão. Eso div classe é igual a página divertida e, em seguida, certifique-se de que o meu div eu apenas adicionei um link. Então foi por isso que estraguei tudo. Vou me certificar de que o fim da div porque no fundo. Então, no topo, eu tenho o Dave começando e o fundo eu tenho o final div. Então basicamente colocar uma caixa grande em torno de todo o conteúdo dentro, para que eu pudesse ter certeza de selecionar Onley, uh, coisas dentro disso. Certo, se eu colocasse um estilo em todos os links do site, isso é um pouco amplo demais. Eu não quero necessariamente fazer isso porque então isso significa todos os links, mesmo no rodapé e o mais quente e em todos os outros lugares. Eu não quero necessariamente querer fazer isso. Mas se eu colocar uma classe div em torno deste código aqui, então isso significa que eu posso selecioná-lo de maneiras diferentes. Deixe-me mostrar-lhe o que quero dizer Update e depois vamos para aqui. Então, quando eu chegar a este código, se eu clicar em inspecionar uh, quando eu clicar nisso mais aqui o que eu posso fazer porque eu tenho esta classe Div de página divertida que eu adicionei Tenha em mente, eu coloquei a classe igual página divertida no topo. E então eu fechei a div na parte inferior usando aquela etiqueta de fechamento ah slash div. Mas agora, em vez de apenas selecionar todas as tags A na totalidade do site, o que seria ruim porque então todos os links têm esse estilo, que eu não quero. O que eu vou fazer é dizer tudo dentro da caixa de div página divertida. Isso é um elo. Você vê o “A” bem ali. Esse é o seletor de link que, em seguida, apenas essas coisas vão obter o código. Então, quando eu clicar fora, veja o que acontece. Então agora estes apenas obter que o código e este link não. Ok, então é por isso que colocamos a classe DIV em torno desse conteúdo de entrada porque agora eu posso apenas selecionar todos os links com no conteúdo de entrada. Ok, então às vezes você quer ser super amplo e você quer escolher o estilo para todo o site . Mas às vezes você só quer, hum, você só quer que o código do dedo se concentre em uma parte muito, muito específica. Às vezes você só quer se concentrar em um link, caso em que você pode colocar uma classe para esse link específico. Mas desta vez tornamos isso um pouco mais fácil, e colocamos uma caixa DIV em torno de todo o nosso conteúdo de entrada. E depois demos um apelido de diversão. Página. Então este seletor aqui está procurando por tudo dentro de uma div com a classe de página divertida , e ele está procurando por tudo dentro que também é um link, e está fazendo o tamanho da fonte 40 pixels. Certo, vamos dar uma olhada nisso. Vamos dio Fundo é azul e eu odeio essa cor azul porque é horrível. Bump de volta, colisão sobre conexão de bolha com fundos. Eu sou menor, eu só vou realmente tirar isso, ok? E então, uh, preenchimento é 40 pixels. A margem é de 40 pixels. Dê uma olhada nisso. Olha o que aconteceu neste link. Eu dei-lhe tanto estofamento que ele está realmente empurrando sobre a coisa que está acima. Está empurrando a imagem acima dela. Você pode ver que aquele azul está meio que batendo nele. Deixe-me fazer um pouco maior para tornar isso um pouco mais fácil de ver. Lá vamos nós. Você pode ver isso do jeito que está se comportando. Na verdade, ele está empurrando para cima para o conteúdo acima dele. A razão é por causa da propriedade display. É um elemento em linha. Ok, então isso basicamente vai manter o texto exatamente onde está. E então ele só vai empurrar para cima e em torno dele, não importa o que aconteça. Mas se nós torná-lo um bloqueador em linha, elemento em linha traço bloco, então ele começa a se comportar um pouco melhor, e você pode ver quando olhamos para o link. Agora ele tem o estofamento na margem, e ele está realmente se comportando contra manter seus olhos no verde e no laranja bem ali. Se eu desligar o display no bloco de linha, você pode ver que ainda tem o verde e o laranja. Mas está tudo confuso. Não é. Não está perfeito agora. Se eu fizer o bloco de exibição, é até mesmo uma maneira diferente de exibi-lo. Onde, em vez de ser uma espécie de crocante para o próprio texto real, ele simplesmente se expande todo o caminho para fora. Certo, então há maneiras diferentes. Deixe-me passar por eles de novo. Então, a primeira exibição na linha é a maneira que ele vem originalmente. Ok, se eu ligar isso e desligar isso, nada vai mudar sua exibição original Colin na linha. Mas se eu fizer em bloco de linha e ele começa a se comportar um pouco melhor são na verdade que isso realmente pode ser a minha escolha final. Essa pode ser a melhor. E então eu também posso fazer bloco de exibição, e isso é ignorar o tamanho do texto real. Ele não está se encaixando no texto como no Bloco de Linha faz. Você pode ver aqui que ainda está ajustado a esse texto. É esmagar em meio que vir todo o caminho em torno dele facilmente. Onde está o Block? Não faz com que o bloco deixe todo esse espaço vazio aqui. Está bem? E então eu também posso fazer exibir nenhum. Olhe para isso. Está bem. Tão exibido. Se as coisas começam a agir estranho ou tipo de agir funky bagunça com o seu display um pouco, se você quiser. Se é texto, você provavelmente quer ir para o bloco de linha porque você não necessariamente quer que sua diversão para ser um elemento de nível de bloco ah. Mas mexa com essas coisas e isso vai fazer as coisas se comportarem um pouco melhor do que ter que escrever todo esse outro código. Certo, Certo, então o que fizemos aqui? Então fizemos preenchimento de fundo. Deixe-me fazer uma fronteira agora. Não estou tentando fazer isso parecer ótimo. Só estou brincando. Então, por favor, não copie meu estilo aqui. Só quero que jogue e veja o que acontece. E então você pode trabalhar no seu líder de estilo de alguém. Então olhe para isso. Nós mexemos com isso. Olhe para isso. Quando eu clicar em e desligar em linha bloco o que ele faz, ele ignora completamente o, hum, certas partes da cabra porque é um elemento em linha. Quando você faz bloqueio on-line, ele finalmente começa a prestar atenção. Se eu desligar a margem, você pode ver o que está acontecendo. Se eu desligar o estofamento, você pode ver o que está acontecendo e, em seguida, até rolar através disso Olhe para isso. Há um espaço entre isso, uh, isso é apenas uma etiqueta P sem nada nele. Apenas o e nbsp. Isso é um espaço. Então, se eu quiser me livrar disso, eu realmente fazer isso no HTML. Mas você pode ver que podemos apenas jogar com esses links e apenas fazendo, você sabe, tamanho divertido, fundo, preenchimento, margem de exibição e borda. Você pode fazê-los parecer completamente diferentes do que magro quando você começa. Ok, e então fica divertido quando você está pairando porque quando você paira sobre ele e as coisas mudam, deixe-me desligar. Deixe-me desligar tudo isso. Vou deixá-lo lá, mas vou desligar o pairar original. Isso é quando você é quando você vai até aqui e você clica no pin e você pode cobrir que ele mostra um código diferente. Ok, então este link específico tem uma sombra de caixa que está acontecendo e desligado. E então também, hum, está mudando de cor. Você pode ver que a cor muda. Eu clico nele lá fora. Falaremos mais sobre pairar no próximo vídeo, então nos vemos em um segundo. 27. Como de estilo para mudar quando você HOVER em a: agora, vamos falar sobre o estado de foco de um link e você pode ver que isso é realmente tem um estado de foco já apenas padrão. Se eu rolar sobre ele, a linha abaixo desaparece e então o texto fica cinza e a maneira como chegamos lá, você direito, clique, clique, inspeciona. E então vamos aparecer para o estado do elemento de alternância. E depois vamos cobrir. E quando eu faço isso, todo esse código aparece. Isso me mostra o muito, muito top. O que está acontecendo? É todo esse conteúdo de entrada um resfriado e pairar um frio e foco, etcetera e que o código é simples. Apenas sombra de caixa, nenhum. Então esta área específica está apenas ligando e desligando a sombra da caixa ligada. E então também podemos ver as mudanças de cor. Então, por que não mexemos um pouco mais com isso? Isto aqui está a pairar o cólon. Este é todo o site. Isto é todos os links em todos os lugares em todo o site terá a sua mudança de cor quando você rolar . Vamos mexer com eles ainda mais. Vamos fazer a França. Normalmente não diria que mude o tamanho da fonte. Eu só quero me divertir um pouco agora. Você não quer que as coisas fiquem maiores e menores quando você rolar sobre ele, porque então seu site se sente meio estranho quando as pessoas estão tentando rolar sobre algo e tudo é empurrado ao redor. Só estamos brincando agora. Fronteira. E então vamos fazer 15. Vamos grande ou vamos para casa. Tudo bem, há uma fronteira e nós somos realmente mudanças em uma entrada. Bem, agora eu quero deixá-lo. Vou deixá-lo como o elemento em que está. Então, o que mais podemos fazer? Só estou sendo ridícula. Você nunca iria querer fazer o fundo, não é , meu Deus, com vingança. Certo, bem ali. E então nós vamos fazer, Hum o que você faz, cor branca? Por que não? E o estofamento que eu estou jogando agora eu realmente, realmente, realmente quero que você jogue e, em seguida, também vou fazer uma tag com que eu vou fazer uma etiqueta com essa coisa de página divertida. Onde você estava? Dentro da página do fundo, Div. Eu vou fazer etiquetas para estar em bloco de linha porque eu estou fazendo coisas com links que você normalmente não faz. Você normalmente quer manter seus links na linha, mas eu estou realmente mexendo com eles, ok, então você pode ver o que está acontecendo aqui. Eu coloquei todo esse código para um resfriado e pairar para o estado de pairar, e tem todas essas coisas ridículas acontecendo enquanto eu desmarque esta caixa aqui, você pode ver que o código original é o mesmo. Mas quando eu roto por cima, olha para todas as coisas que acontecem. Isso é loucura. Agora lembre-se, você não quer que você procurou o tamanho do texto para mudar. Você pode ver que minhas minhas minhas páginas realmente ficando mais longo. Quando faço isso, não é um bom código. Por favor, não faça isso. Se você quer algo, você sabe, super grande como este do que criar o link para ser esse tamanho primeiro e então, você sabe, ter uma alternância para outra coisa. Digamos que queríamos fazer isso. O que vamos fazer é inspecionar eso. E então onde está o meu código? Ali. Aí está meu código que eu coloquei dentro do tamanho da fonte 30 com uma borda de 15 pixels e a ação apenas vai copiar isso. Veja isto. Copie isto. E então eu vou criar uma nova regra de estilo para links de página divertidos. Você viu o que eu fiz bem ali. Então a página do fundo do ponto é o apelido. É uma classe CSS. E então ele fez espaço A Ok, então que está procurando por tudo com o apelido de Fun Page. E então ele está procurando links dentro da página do fundo. E então ele vai fazer isso com aquilo. Vou fazer essas coisas porque você pode ver que realmente aconteceu lá embaixo agora. O problema é que eu quero que esse código aconteça em uma rolagem. Então eu vou tirar, hum, eu vou tirar o vai deixar o tamanho da fonte. Vou tirar a cor, tirar o fundo e deixar o estofamento. Deixe-me ver. Preciso do dedo do pé. Na verdade, preciso manter a fronteira. Caso contrário, estou em apuros. Então eu vou para branco sólido, e então a cor vai ficar OK, então tudo o que eu estou mudando quando eu rolar então vai ser a cor ea borda vai mudar bem como o fundo. Então deixe-me desfazer-me debaixo deste pairar bem aqui. Agora você pode esperar. Não espere um segundo. Onde está a fronteira para pairar precisa ser. Onde fica a fronteira para sempre? Ali. Oh, ok. Vou tornar isso importante. Você vê isso? Eu fiz. Ponto de exclamação. Importante. Normalmente, eu já disse isso antes. Você não deveria fazer isso. Mas eu faço isso o tempo todo porque eu quero, e eu posso, porque é a América. Ok, então aqui vamos nós. Aqui está o pairar e como? Olha o que eu fiz. Ok, então agora não é. Não está tornando a página maior ou menor. Mas o estilo está mudando à medida que eu caio, então deixa os botões mais divertidos. Mas o estilo está mudando à medida que eu caio, Isso torna tudo mais divertido quando você pode adicionar estilo a ele. Faz com que tudo apareça. E apenas com algumas coisas com borda com preenchimento de fundo, tamanho encontrado todas essas coisas que eu fiz um link simples olhar divertido e diferente apenas usando CSS . Certo, então brinque com essas coisas e seja criativo. Certifique-se de que você usa esta ferramenta de cores e apenas tipo de apenas puxá-lo ao redor e deslizar ao redor e apenas encontrar coisas diferentes e apenas jogar com esse estado de pairar e mexer com esse estado de pairar e realmente apenas ter um bom tempo ligando estes e fora e tentando descobrir como diabos eu faço? Como faço para que seja divertido e interessante clicar em um link versus apenas um velho e chato link azul? Isso é parte do ponto de CSS é que você faz sua página muito mais divertido para jogar com. Tudo bem, então eu vou ver no próximo vídeo. 28. Faça um link "Pop" quando o clique: Tudo bem, agora nós aprendemos como estilizar um link e, em seguida, também mudá-lo ao pairar. Mas como podemos fazê-lo mudar no Click? Agora que ali está ativo. O estado do elemento está ativo. Se você quiser acessar esta tela, basta clicar naquele pequeno elemento que alterna cara do estado e, em seguida, clique em ativo. E, uh, o que vamos ver é que o código que tínhamos mudado antes de ser um ato de dois pontos que era completamente. Então, o pairar é o mesmo que ativo. Agora, eu não quero isso. Então o que eu vou fazer é eu estou realmente vir acima com o meu próprio código ativo e porque eu estou ficando específico agora versus tentar fazer mudanças em todo o site. Eu ainda estou usando esse seletor def página divertido e, em seguida, procurando links dentro do seletor de página de fundo . Certo, então, por favor, certifique-se de fazer isso. Você provavelmente não quer fazer alterações em todo o site apenas escolhendo apenas um por causa de você escolher apenas um e que vai ser links em todo o seu site. Ok, então eu esqueci algo para um Colin e então ativo, ok? E depois vou dizer que sim . Fundo. Era preto. E isso pode ser suficiente. Ok, então olha, o quê? Olha o que está acontecendo? Então nós temos, hum e então eu estou realmente forçando vários estados de elementos aqui. Então 1ª I Esta é apenas a maneira que um links regulares olhar. E então, quando você rolar sobre ele, ele vai para um estado flutuante. Ok. Você vê, o estado do pairar está mudando, e então se ele está ativo e ele muda uma vez contra ativo é quando você clica nele Agora, eu não vou clicar nele agora, porque se eu fizer, ele vai me levar para Google dot com o link que eu configurou e então ele vai homens, ele vai destruir todo o meu código temporário. Ok, então eu realmente não quero clicar nele agora sem salvar meu código, porque então eu estou em apuros. Então deixe-me fazer isso, na verdade. Então, antes de continuarmos, quero escolher isto aqui. Pegue isso e lembre-se, vá para a folha de estilo. Onde é o espaço D? Onde é esse espaço vazio? Aqui vamos nós. Ok. Então, todos os meus links com o foco com ativo agora, isso é manter em mente. Isso não está certo, porque é assim que é Esta é uma mudança em todo o site. Então, muito rápido, eu só vou fazer divertido página links de página divertido com hover. E então essa vírgula está dizendo, procure outras coisas, também. Eu também estou procurando por uma página divertida, um foco, e então eu realmente vou levar este ativo para fora porque eu não gosto do ativo Tudo que você pode ver, eu tenho na verdade dois seletores que estão recebendo este código. É divertido links de página com sobre o estado hover e, em seguida, financiar links de página com o foco ST Ok , e então eu também vou voltar, e eu vou obter Onde estava o meu código ativo? Lá vamos nós. Há Active lembra quando você clica nele. Então isso está procurando coisas dentro do apelido dentro da classe de páginas divertidas procurando links para o estado ativo. coisas dentro do apelido dentro da classe de páginas divertidas procurando links para o estado ativo Ok. E então ele vai dar o código de fundo preto. E então, uh, o que mais era o que mais estava lá? Oh, e depois primeira página A, é claro. Só a ligação normal. Porque porque eu quero se eu não tiver, se eu não tivesse isso e o tamanho da fonte fosse menor do que parece. Pareceria estúpido porque quando passasse por cima, o tamanho mudaria. Se você quiser ter certeza se você alterar o tamanho dos links que você também alterar o tamanho dos links originais. Então eu vou levar isso também. Oh, e eu vou roubar isso, lembre-se, lembre-se, exibição em bloco de linha. Caso contrário, meu código fica todo funky porque é um elemento em linha e começa a empurrar para a, uh para a coisa acima dele. Ok, então eu peguei isso. E aí vamos nós. Ok. Você pode ver agora se você tiver desmarcado as coisas em sua profundidade, salgado conceber desmarcada. O Chrome ainda o copia, mas coloca comentários em torno dele. Você vê esta barra e, em seguida, a estrela que está comentando. Então o código na verdade não é. Não está permitindo que o código passe. Ok, então é por isso que isso parece estranho aqui, e então este aqui em baixo também. Você poderia simplesmente excluir esses, mas às vezes você vai querer vir em coisas para ser capaz de vir para testá-lo com ou sem, na verdade, sem realmente excluí-lo. Vamos deixar isso porque quem se importa? E depois atualizar arquivado, e depois vamos atualizar a página. E vamos ver se estragamos tudo. Funcionou. Agora vamos clicar em e ver o que acontece. Uh, dourado. Então está ganhando vida. O local está ganhando vida. E é muito divertido. Toe tem links que são estilizados porque, então, dessa forma, não é apenas a mesma coisa velha chata que você começa com. Então brinque com todas essas coisas. Jogar com preenchimento com margem com borda em e certifique-se de copiar a sintaxe para o que eu quero dizer com impostos pecado. Do jeito exato que estou digitando as coisas, tipo “Border”. Você vê como primeiro é, então é a quantidade de pixels 15 PX, em seguida, um espaço, em seguida, sólido, em seguida, um espaço. Então a cor faz você copiar isso. Sintex. Ok, porque senão vai ser, você sabe, você pode estragar tudo, e então você pode ficar curioso. Por que diabos isso está bagunçando? Tudo bem, então isso são links. Vejo você no próximo vídeo. Obrigado por ficar comigo. E, uh, aqui vamos nós. 29. Visão rápida: design de resposta: Certo, agora vamos falar um pouco sobre design responsivo. Agora, no nível básico, design responsivo é apenas o seu site mudando seu tamanho e mudando, você sabe, você sabe, empurrando certos elementos ao redor com base no tamanho em que as pessoas visualizam o site. Ok, então se eles estão em um dispositivo muito, muito pequeno, vai parecer diferente do que se eles estão em uma tela gigantesca. É realmente útil, especialmente quando tantas pessoas estão vindo em seu em seu para o nosso site em seus dispositivos móveis que somos capazes de mudar o site para basicamente fazer a melhor versão. Coloque o nosso melhor pé para a frente para cada tamanho individual. Certo, Certo, então o site está mudando à medida que você rola para dentro e para fora. O site está mudando e organizando. Apenas assista a imagem. Você pode ver as imagens estourando dois tamanhos diferentes, e tudo está meio que mudando um pouco. Ok, então basicamente há diferentes pontos de ruptura onde essas coisas diferentes acontecerão. Então é o que o design responsivo está fazendo é que está servindo código diferente com base em quão ampla são nossa visão. A porta é baseada em quão ampla enfraquecer ver, então, à medida que a separamos, você pode ver que está nos dando código diferente. Agora olhe para cá. Ver tela de mídia e homens com 56.875 Isso significa que este código vai disparar quando o mínimo com é 56.875 Vamos ver quando isso vai embora. Mas, uh boom, vê isso? Boom boom. Ok, então esses estão mudando. Você assiste. Estou olhando para cá. Veja isto. Diga isso. Códigos mudando. Está respondendo ao tamanho da página. Ok, então ele xcar subindo código diferente baseado no tamanho da página. Então o que eu quero fazer é que eu quero que o Teoh te mostre como fazer isso rapidinho. O que vamos fazer é dizer assim que passar. Veja isto aqui em cima com sete ou três pixels. 710 bem ali. É aí que muda. E então, na verdade, vamos ver o frio aqui. Mínimo com é 44.375 Então vamos conseguir. Vamos fazer com que seja menor quando chegar a este tamanho. Ok, então vamos dizer, vamos fazer esta metade da largura quando atingir esse tamanho. Então imagem e membro, eu estou dentro das tags de página de fundo porque eu coloquei uma tag div em torno de todo o meu conteúdo de entrada. Então eu estou procurando dentro da tag da página do fundo. E então eu vou procurar por elementos de imagem dentro dessa tag de página de fundo, e eu vou dizer com é 50% agora, eu não terminei ainda. O que eu fiz foi criar código para qualquer tamanho. Não importa o tamanho, vai ser com 50. Eu não quero isso. Eu só queria ter 50% de largura quando é maior que isso. Onde estava? Sete toneladas. Sim, maior que este tamanho. Então eu quero que esse código seja acionado. Certo, quero entrar quando chegar a este tamanho. Então, vou copiar isto. Certifique-se de trazer tudo com você e depois dar uma olhada nisso. Dê uma olhada no conteúdo de entrada e você pode ver que ele está se encaixando. Você vê isso? Veja como ele muda. Agora olhe para cá. Onde estamos bem aqui. Tela de mídia e homens com 44.375 m. Este código está a chegar a este tamanho. É por isso que eu quero. É onde eu quero inserir meu código que acabei de escrever. Ok, então nós vamos procurar por um 44.375 Então nós vamos para o nosso editor, e então nós apenas procuramos por 44.375 m e aqui vamos nós. Veja isso na tela de mídia e parênteses. Homens traçam com Colin 44.375 m e depois tem este suporte aqui. Tudo o que eu colocar dentro desta área de colchetes vai ser servido quando o mínimo com 44.375 M, que está em algum lugar nessa situação específica, estava em algum lugar em torno de 710 pixels. Então eu coloquei esse código aqui. Não é. O código não está flutuando no espaço apenas no estilo regular que o arquivo CSS. Está dentro deste colchet para esta tela de mídia em Lee quando o mínimo com é 44.375 Então caso contrário, o código vai apenas ignorá-lo. O site só vai ignorá-lo até que o mínimo se torne 44.375 Ok, então, uh, pagamento divertido. Então ele está procurando todos os cada caixa que tem você sabe, diversão, classe página divertida. E então ele vai procurar imagens dentro que ele vai fazer o com 50% se a largura mínima de toda a página é 44.375 Então vamos atualizar o arquivo e depois voltar para o site. Vou recarregá-lo, e agora vemos que são 50% exceto quando eu chegar aqui. Boom! Ele vai para trás. Ok, então você pode ver. E se eu torná-lo tão grande, você pode ver onde está o nosso clique direito e, em seguida, clique em Inspecionar. Veja aqui a tela de mídia em Homens com é 44.375 m. Ele está procurando por todos os seletores de página divertidos fundos classes de página com que tem imagens dentro deles, e ele vai dar a ele seu vai servir este código aqui, porque nós colocá-lo no lugar certo em nosso CSS. Agora, às vezes você verá CSS em vez de 44.375 vezes, você verá pixels e, em seguida, às vezes, você também vê Max wit. Em vez de ter homens com, você terá Max com ok, então apenas preste atenção em exatamente como seu tema específico faz. É um design responsivo, seja homens com sua máscara, Max com e, hum, hum, e mudar onde você coloca isso dependendo. Mas basicamente ele está dizendo para o mínimo, com de 44.375 ele vai servir este código para que eu possa torná-lo maior e maior e maior , e ele apenas fica assim. Mas assim que eu faço pequeno, ele entra em ação e se livra desse código que eu coloquei tudo bem, então isso é um pouco sobre design responsivo. Há mais. Há obviamente mais em que você pode mergulhar. Mas eu só queria te dar uma espécie de apenas uma compreensão áspera de como isso acontece e eu vou ver no próximo vídeo. 30. Porcentagens, Pixels + a caixa de de fronteira "Hack": Certo, vamos falar de porcentagens versus pixels. Agora, antigamente, tudo era sobre pixels. Mas agora, no mundo do design responsivo, quando você pode fazer sua tela, você sabe, maior ou menor e as imagens permanecerem em 100% do tamanho da caixa em que estão, você não quer. Você provavelmente não quer viver no mundo dos pixels. Você provavelmente quer ir para o lado das porcentagens em vez de tentar fazer pixels. Vamos dar uma olhada nisso. Então vamos inspecionar esse cara. Já tenho o meu casaco todo arrumado aqui. Imagens de página tão divertidas. E eu vou dizer, com seus 10% Sim, você pode dizer que a largura é de 200 pixels ou 250. Mas isso não é você não vai se divertir muito com isso, porque compercentagens, eles vão ficar contra se você fizer pixels. Mas isso não é você não vai se divertir muito com isso, porque com percentagens, É uma diferença. Tipo diferente de coisa. Normalmente você provavelmente vai querer fazer a porcentagem de algumas vezes você vai querer fazer pixels, mas qualquer que você escolher, certifique-se de que você ficar com o mesmo tipo de coisa para, uh, para a totalidade do treinador. O que eu quero dizer com isso é como, se você quiser dio margem 5% você pode ver que estamos fazendo 5% mais bem, e tenha em mente, margem está no lado esquerdo, o lado direito, superior e inferior, mas apenas lado esquerdo e direito, 5% mais 5% equivale a 10%. Então temos uma largura de 90 para que toda a coisa seja igual a 100%. Se eu tiver uma margem em um pouco grande demais, vamos dar uma olhada. O que acontece? Margem. Isso é 20%. Ele realmente empurra a caixa da página muito grande, e assim ele acaba, adicionando isso acaba adicionando esses dados extras no lado da tela, que definitivamente não queremos. Então, uh, primeira regra é que se você ficar com porcentagens ou se você quiser oh, brincar com percentagens, ficar com percentagens. A menos que por algum motivo você o tenha, você tem uma razão séria para fazer pixels em vez disso. A menos que por algum motivo você o tenha, Mas então, uma vez que você uma vez que você ficar com isso, certifique-se de que você não é que você não está fazendo muitos muito grande de uma porcentagem quando tudo se soma juntos porque você tinha 90% as imagens serão apenas 90% y.Mas então você adicionar 5% 5% e já estamos 100% bem, se fizermos, preenchimento é 5%. Agora. Isso funciona muito bem que ele realmente empurrou para dentro. Se fosse, se o tamanho da caixa fosse estranho. O tamanho da caixa é muitoútil para quando se tem estofamento. muito Quando você adiciona porcentagens ao seu preenchimento em vez de empurrar para o lado, empurrando os limites como vimos antes de ter o tamanho da caixa ser, hum, caixa de borda. Então nós que é realmente o que era inicialmente, o que é bom. Às vezes não vem inicialmente, mas o preenchimento olha para isso. Então 90% mais 5% mais 5% apenas com a largura da margem já eram 100%. Então, como podemos adicionar mais 5% de preenchimento? E não explode fora de proporção como era com a margem de 20%. Vê como acrescenta tudo isso por causa do tamanho da caixa? Ok, fazendo, uh, fazendo caixa de fronteira. Isso é exatamente o que você quer. Às vezes, se sua caixa de conteúdo painel de conteúdo. Em seguida, o preenchimento realmente é adicionado a ele em vez de em vez de ele, certificando-se de que ele só se encaixa dentro de que 100%. Ok, então os olhos estofados o carro selvagem que estamos adicionando aqui. E se o tamanho da caixa não estiver correto, se não for a caixa da borda, então você vai se divertir. Tivemos sorte com este exemplo específico de que já estava na caixa de fronteira. Mas se você tem um problema em que você está tentando dizer não, eu só quero que o estofamento seja 5%. Você não precisa refazer toda a sua matemática e, em seguida, alterar o tamanho da caixa para caixa de borda. Ok, se está no conteúdo, pugilista, se você não pode mudá-lo ou se você não quer mudar e você prefere fazer as contas do que ter certeza que você está adicionando tudo. Agora, se isso tem 5% de margem e 5% de preenchimento, isso é do lado esquerdo. É apenas 5% mais 5% e no lado direito é 5% mais 5% então é 10% de cada lado. Então, dessa forma, se você quiser fazer caixa de conteúdo que a largura teria que ser 80% e, em seguida, que iria seguir essa regra lá. Mas se você estragar essa matemática em tudo, você vê aqui você tem você estragar essa matemática em tudo. E a margem é Ah, digamos que as margens 10%. E isso é multiplicado por dois. Porque, Membro, é o lado esquerdo e direito e os padrões 5%. Isso é uma adição de 30%, mas a largura é 80, então isso acaba sendo 110%. Certo, então consertos fáceis só para mudar. A parte de trás está dimensionando para a caixa de borda. Mas a maneira matemática é apenas fazer a matemática e garantir que ela não vá maior que 100%. Espero que tenha sido útil. E vejo-te no próximo vídeo. 31. Forçar um elemento para manter a: Quero apresentar-vos uma coisa chamada Posição. Agora há maneiras diferentes de colocar certas coisas em uma página. Normalmente, a forma como esse código vem na parte inferior para baixo, você escreve. É uma espécie de lugar que está na página. Você sabe, quanto mais baixo você bem mais baixo. Estará na página, mas você pode ter algo chamado posição corrigida. Onde? Deixe-me selecionar essa imagem. Vou fazer aula de página divertida, página de fundos e imagem espacial. Então eu estou procurando todos os dibs dentro ou dentro de classes de página divertida e que eu estou procurando imagens dentro disso. Então essa é a imagem exata ali. E então eu faço posição, corrigir o olhar o que acontece quando eu rolar para cima e para baixo. Continua escrevendo a imagem. Então isso é isso é útil para barras de cabeçalho de oferta e outras coisas assim, onde você só queria ficar na página, independentemente de você rolar para cima ou para baixo, ele meio que leva completamente fora do fluxo da página e, em seguida, apenas colá-lo direito Lá. Nós também podemos fazer, uh, vamos lá, uh, uh, 20 pixels, dois pixels para que possamos movê-lo por todo o lado baseado em usar o canto superior esquerdo, direito inferior, todas essas coisas. Mas usar posição fixa é incrível porque podemos fazer com que fique por dentro de tudo , não importa o que aconteça. O próximo é a posição. Absoluto. Então é meio que ficar na mesma área. Mas todo o resto é meio empurrado para cima. Você pode ver que este link Deixe-me me deixar un deixe-me desmarcar isso. Você pode ver que ele realmente muda de tamanho também, o que é meio divertido. Oh, sim, porque o tamanho completo ele retira-o completamente daquele fluxo. Então, posição absoluta. Deixe-me me livrar dessa coisa de cima esquerda. Então, posição absoluta. Ele não está consertando na página porque ele ainda pode rolar para cima e para baixo. Mas ele meio que o tira daquele fluxo do, você sabe, você sabe, de empurrar tudo o resto para baixo, e em vez disso, todas as outras coisas por baixo dele é meio que empurrado para o lugar onde aquela coisa original waas Também há posição relativa e isso é Ah, isso é você realmente não vai notar que um tanto. Mas você pode mover as coisas ao redor se eu apenas fazer topo e esquerda para este elementos específicos não vai a lugar nenhum. Mas se eu fizer posição relativa, então eu posso mudar onde ele é baseado em onde ele deve ser. Ok, então baseado em onde deveria estar, eu vou movê-lo. 50 pixels da esquerda, certo? Ou onde deveria estar. Vou empurrá-lo para baixo 20 pixels do topo. Certo, então há consertado onde fica na página, onde quer que você coloque. Não importa se você rolar para cima ou para baixo, há absoluto onde , ah, ele meio que é retirado do fluxo, verão na verdade, ele finge que não está lá. E então toda a outra coisa é meio empurrada para cima, mesmo que ela permaneça na mesma posição. E, em seguida, como você rolar para cima e para baixo, ele ainda pode se mover com a página em. Então há também uma posição relativa onde você pode tipo de mudar as coisas com base em onde deveria estar. OK, então ele ainda ocupa a mesma área que ele originalmente faz. Mas então você pode mudar por aí, você sabe, empurrando para o escritor, empurrando para a esquerda ou o que quer que seja. Uma vez, você meio que colocou em posição. Além disso, brinque com eles e divirta-se com eles. Tenha cuidado com esses dois porque uma vez que você começa a tirar as coisas do fluxo do seu site, as coisas são contadas loucas e eles agem meio estranho. Mas às vezes é muito útil. Se você quer algo para ficar na página e não se mover, olhar para fora como exatamente como uma barra de cabeçalho. Seja lá o que for, divirta-se com eles e te vejo no próximo vídeo. 32. Centragem : texto Text-Align em Margem: Em seguida, vamos falar tudo sobre elementos de centralização que você pode pensar que isso é simples porque você vai deixar apenas clicar no botão central e centralizar as coisas. É difícil. E aqui está o porquê. Bem, não é muito difícil, mas fique comigo. Há elementos de linha e elementos de bloco. Ok, então na linha é apenas pensar em caracteres de texto reais. Apenas um monte de uma cadeia de caracteres de texto versus ah, Block é como uma caixa. Está bem, é como se estivesse a afectar a caixa propriamente dita versus o conteúdo dentro da caixa versus as letras dentro da caixa. Ok, então nós estamos fazendo duas coisas ou estavam centrando. Ah, caixa que tem elementos dentro dela que nem sequer podem ser centrados ou não centrados. Ou vamos deixar a caixa como está. E estamos apenas centrando os elementos dentro dele. Deixa-me mostrar-te o que quero dizer. Dê uma olhada no “Olá”. Isto é um parágrafo, certo? Clique nisso e inspecione. E depois viemos para cá. Então este é um P. Este é um elemento P com a classe de divertimento parágrafo. Se eu chegar aqui e eu fizer texto, traço, alinhar, alinhar, centro de dois pontos que centraliza o texto dentro desse elemento fácil o suficiente, certo? Mas se a largura disso se a largura desse preto tiver apenas 50 pixels de largura, então sim, eu centralizei o texto nessa caixa, mas essa caixa não está centralizada. Ok, então você vê o que está acontecendo aqui? Que às vezes, quando você simplesmente clica na linha, isso é tudo que você precisa fazer quando você está pronto, mas às vezes vai ficar frustrado porque você está dizendo não, eu quero que ele centralize a coisa toda. Eu não queria o dedo do pé. Eu não queria isso centrado. Mas depois para o lado. Eu quero que ele no centro. Ok? Você nesse caso, você usa margem zero auto, Então margem, dois pontos zero outono. O que isso significa é a parte de cima da garrafa. Então esta margem aqui, você pode ver se eu clicar nela. Margem estreita. Margem zero superior. Certo? É auto margem inferior zero emergente deixou seu auto. Ok, então isso leva até o topo na parte inferior, e então este auto aqui ocupa a esquerda e a direita, então eu estou essencialmente centrando algo auto deixou um auto. Certo. Ok, então não só quatro p com a classe de fundo parágrafo. Não no Lee. Eu centralizei o texto na caixa? Na verdade, centralizei a caixa em si que fiz para centralizar está bem. Então é quando você pensa em centralizar, você precisa pensar. Desejo centralizar os elementos dentro da caixa ou quero centralizar a caixa agora? Se eu desligar, mande mensagem para o centro da linha, veja o que acontece. Você vê que a caixa ainda está centrada, mas o texto dentro da caixa não está centralizado. E agora deixe-me manter a linha de texto e deixe-me me livrar das margens. Seu carro, veja o que aconteceu lá. Agora a caixa não está centrada, mas o texto dentro dela está centralizado. Ok, então você realmente tem que quebrar essas coisas. Uma parte da minha centralização de uma caixa onde centrar as coisas dentro de uma caixa de suas coisas centralizadas dentro de uma caixa. Use traço de texto, alinhar, centro de dois pontos. Se você está centrando a caixa em si, use margem, Colin zero auto. E você precisa de uma largura para ser capaz de fazer isso. Certo, agora, neste caso, estamos bem, porque só usar o centro de alinhamento de texto é tudo o que precisamos fazer porque esse elemento P ocupa todo o 100%, mas no caso de a testemunha menor como , verdade, Na verdade,não queríamos enviar a mensagem dentro dela. Queríamos ter aquela caixa toda centrada. E então, sim, nós consentimos o texto dentro dele, se quisermos. Mas, de qualquer forma, está no centro da página, e fizemos o que queríamos fazer. Espero que isso ajude. Pense em linha ou bloco é um elemento em linha, ou é um elemento de bloco que eu quero um centro se é um elemento em linha? Alinhamento de traço de texto usado, centro de dois-pontos. Se o elemento preto usar margem dois-pontos zero auto ver no próximo vídeo. 33. Devemos escrever a Styling no arquivo em HTML ou CSS?: Uma coisa que quero chamar a sua atenção. Isso é tudo o que você faz no arquivo CSS, você pode realmente fazer? Escreva em HTML. Você não precisa ter um arquivo CSS separado para fazer essa codificação. Mas se você não usar um arquivo CSS separado, então você realmente tem que ter certeza de que em cada ocasião que você quer um certo estilo de uma certa maneira que você colocá-lo no HTML. Deixa-me mostrar-te o que quero dizer. Bem aqui. Esta classe p tem algum código com ele. Tem cor azul. Você vê isso? Isso está no CSS. Ok, Agora eu posso pegar o mesmo código, e eu posso colocá-lo direito no HTML Veja como fazer isso. É que uma classe P é divertido parágrafo. Na verdade, vou apagar isso, e vou fazer o estilo de paz igual. E, em seguida, dentro dessas aspas, eu coloquei esse código CSS. OK, então agora o que acontece é que o mesmo código vem através, mas está no HTML. Então isso não significa que eu possa usar, hum classes porque eu não posso mais usar classes porque eu fiz minha edição na linha. Eu coloquei direito no código versus ter que usar esse arquivo CSS externo. Então ainda é exatamente a mesma coisa. O problema é que se você fizer isso na codificação correta no HTML real, você vai ter um momento difícil. Porque se você quiser fazer o mesmo código de novo, você vai ter que copiar todo esse pedaço de código. Então é por isso que é tão bom apenas dar-lhe uma classe em vez de tentar estilizá-lo direito em vez de usar estilo, dando-lhe uma classe, dando-lhe um apelido, porque então nós podemos apenas mudar esse código externamente no pouco mudá-lo para todas as classes versus ter que passar. E se você mudar, se você quiser mudar o estilo de algo, você tem que copiar essa mesma coisa para cada elemento separado diferente que você quer ser diferente. Ok, então às vezes isso fica muito, muito complicado quando você tenta mudar o estilo em um lugar e percebe que esqueceu de mudá-lo em outro lugar, e fica tudo Confuso. Então é por isso que você precisa usar classes em vez disso. Muito raramente. Às vezes faço estilo só porque sei que estou fazendo uma mudança que nunca mais preciso fazer . É por uma coisa, e não quero ter que vasculhar o código CSS para descobrir. Só quero ter a certeza de que mudei o estilo daquela coisa agora e acabo com isso. Então eu faço esse tipo de coisa em que o estilo de espaço P é igual e, em seguida, entre aspas, você coloca seu código CSS. 34. Especifica de CSS em: Quero ter certeza que você sabe sobre a especificidade do CSS. Agora, essa é uma palavra grande, mas basicamente apenas significa que código ventos. Às vezes, você terá várias partes de código diferente se juntando, e então o computador tem que escolher. Bem, qual deles eu escolho? Eu escolho este, ou eu escolho este quando você quer estilizar a especificidade da página significa que certos tipos de código vai ganhar sobre outros certos tipos de código. Então o que eu fiz antes é que eu mostrei a você, se você fizer ah, ponto de exclamação. Importante. Próximo. Qualquer código que seja o vencedor número um. Ele sempre ganha as mãos para baixo, não importa o que aconteça. É isso. Hum, então isso é muito, muito útil se você está tendo problemas com seu código e você só está dizendo que eu só quero fazer uma mudança agora e eu não tenho que descobrir o que diabos está acontecendo. É um pouco preguiçoso porque, você sabe, você realmente não deveria descobrir uma maneira diferente de fazer isso, mas, hum, mas hum, se você alguma vez usar esse ponto de exclamação importante, isso significa que Esse código vai ganhar. Agora, se você tem, você vê este xixi bem aqui este cara não tem tanta especificidade. Não é tão específico. É apenas uma espécie de site largo. Basta escolher todos os elementos P. Então, se eu digitar aqui se eu digitar margem, uh, 40 este ganha porque é mais específico. Tem uma aula, mas é P. Mas também tem uma classe de fundo de parágrafo, então é mais específico do que apenas esses minutos. Então ele ganha ou derruba esse outro código. E então, se você quiser, se você quiser ter certeza. Então, esse é o problema. Se determinado código que você está escrevendo não está funcionando e você vê que ele aparece, mais baixo para baixo e é riscado em ferramentas de profundidade como esta. Sim, isto é mais baixo. Também está riscado. Você precisa fazer o seu código mawr específico adicionando uma classe ou usando um I D. Ou se você usar este ponto de exclamação importante, eu também vou incluir um arquivo. Você pode dar uma olhada. Pdf, você pode dar uma olhada nesse tipo de detalhe exatamente. Você sabe o que ganha sobre qualquer outra coisa, mas a principal coisa que você precisa sem aprender todas essas coisas. A principal coisa que você precisa perceber é o ponto de exclamação obras importantes cada vez que ele sempre vai ganhar. É isso. E então também, se for mais específico, se você der algo uma classe específica como p dot parágrafo financiador p com a classe de fundo parágrafo que vai ganhar apenas o elemento P que vai com o código vai sobrescreva o código dos elementos P porque esse cara aqui não é tão específico. É apenas uma espécie de este site largo. Cada elemento P recebe esse código, mas você está dizendo não por isso. Para o fundo de parágrafo. Pagar para este elemento p com a classe específica de divertimento parágrafo, fazer este código para que seja ele vai dizer que é mais específico, por isso ganha esperança que faz sentido. Sei que é meio confuso, mas vou incluir em um pdf mais informações sobre especificidades. Você pode realmente mergulhar, e se você está interessado nisso, não é muito grande de um negócio na maioria das vezes. Mas se você achar que o seu código não está funcionando e eles estão confusos por que a especificidade pode ser o problema 35. Como corrigir divs de coleta: Vamos jogar um pouco mais com carros alegóricos agora, então vá para uma nova página e copie este código. Div. Classe de espaço é igual a e entre parênteses. Aaron cita Dave Same. E então não precisamos de nada nas vidas ainda. E então em torno dessa coisa toda, Dude, se classe igual fez Holder e então certifique-se de que você vem até aqui e fecha isso. Então, temos um div em torno de um monte de outras mortes. Isso faz sentido? É que nós temos esses quatro nós temos, você sabe, quatro das mesmas coisas. Há quatro dibs naquela caixa chamado Dave Holder. Copie isso. Exatamente. E então, como você é bom, publique-o ou clique em Atualizar e, em seguida, vá para sua página e não há nada aqui. Certo? Mas se inspecionarmos e abrirmos alguns desses caras, puxe isso sobre um pouco de conteúdo de entrada . Dave Holder desligando. Lá vamos nós. Dave Holder. E se for o mesmo. Então, há lá. Não há nada lá, mas realmente há. Ok, então eu vou clicar em Dave Holder, e então eu vou fazer uma nova regra de estilo, e eu vou dizer com 400 pixels e, hum, borda é cinco pixels sólido em preto. E depois o que vamos fazer por div. O mesmo. São todos iguais, certo? Vamos fazer uma fronteira ou fundo. É verde. E então vamos dizer com 200 pixels e altura, 200 pixels. Dê uma olhada. O que está acontecendo aqui? Way tem todas essas coisas dentro de outra morte e nós vamos agora. Se flutuarmos à esquerda, algo aconteceu. O que acabou de acontecer? fronteira para o DIV que cercava os outros Dave desmoronou. Deixe-me soltar este carro alegórico à esquerda, você pode ver o que está acontecendo. Basta clicar e clicar no fluxo esquerdo me dá um erro. É um problema. É uma falha. OK, então se você quiser usar carros alegóricos dentro de um dibs, você tem que fazer algo chamado overflow escondido. Então eu volto para Dave Holder E onde é isso? Meu casaco já começou a transbordar. Escondido. Essa é a maneira de recuperar sua estrutura para uma div que desmorona. Ok, então se alguma vez tiveres uma coisa que desmorona, quero que te lembres que fazes transbordamento escondido e assim, e deixa-me realmente tornar este pouco maior, hum, dessa forma, não. importa o que, que isso fora da fronteira ou se ele tem um fundo sobre ele, fundo azul. Há aquele azul horrível que odeio tanto que ela escolheu uma cor diferente. Hum, para que isso funcione. Mas se você tem transbordamento escondido, então você vai se divertir porque você diz, bem, espere um segundo. Eu tenho um suporte de div que está segurando todos esses outros Dave. Por que não está se expandindo para o tamanho adequado? É porque é uma falha. OK, então o excesso de cólon escondido irá ajudá-lo aqui. então Eentãovocê pode apenas estilo para o conteúdo do seu coração. Margem 20 pixels. Olhe para isso. Olha como isso é lindo. E, em seguida, se a altura é loucura do que fora Div expande dedo segurar todos os outros contra Se você não fizer isso, em seguida, desligar, transbordar escondido. Então você perde as coisas dentro dele ainda mantém seu estilo. Mas isso lá fora Div simplesmente desmorona. OK, então é tudo sobre transbordamento escondido. Se isso acontecer com você 36. Limite suas diversões Floating: Agora vamos falar sobre limpeza. Agora, se você está flutuando dibs, se você está tendo dibs flutuar, todos eles vão tipo de empurrar para a esquerda se você tem flutuar para a direita se você flutuar à tona. Certo. Mas às vezes o que você vai querer é que certas coisas vão para a próxima linha, não importa o que aconteça. Mas às vezes o que você vai querer é que certas coisas vão para a próxima linha, Mesmo que você tipo de manter tudo flutuando para a esquerda. Às vezes você quer dizer OK, eu entendo. Estou a ter tudo a flutuar para a esquerda. Mas essa coisa eu preciso que isso tenha sua própria linha. Eu precisava meio que quebrar aquele flutuador e me dar uma nova linha e não continuar flutuando. Deixa-me mostrar-te o que quero dizer. Então comece por aqui. Este é o mesmo que o último vídeo que estamos fazendo, Dave Holder em torno de todas essas mesmas diferenças. Então Div Class é igual a Div. O mesmo em seguida, o que vamos fazer é fazer um difícil colocar um espaço que você acabou de consumir durante a aula é igual a claro. E então o que eu vou fazer é selecionar todos os div sames e eu vou apenas colá-los algumas vezes só para que você possa tipo de ver o que está acontecendo. Então eu fiz. Eu colei uma vez e depois colei duas vezes. Nós temos um monte de div sames completamente, e então eu tenho def clear e, em seguida, fazer o mesmo diff limpo do mesmo diff clear. E isso está tudo dentro do suporte de div. Certo, tenha em mente essa aula de div para ter suporte aqui em cima que, uh, isso se resolve aqui em baixo. Então def holder é, na verdade, é um tipo de parênteses em torno da coisa toda. Tudo bem, então guarde isso até oito, e então abrimos a página. Agora, há um monte de coisas aqui, mas não há nada neles. Ok, então eu preciso de um clique direito. Meio que olhei meu ouro um pouco. conteúdo de entrada é o que estou procurando. E então aqui vamos nós, Dave Holder, e então ver como este Div mesmo dar claro, etcetera, Etcetera. Ok, então o que eu vou fazer é clicar mais bem aqui, Div Same E eu vou primeiro dizer com 50 pixels, altura, 50 pixels e então eu vou fazer, um fundo verde margem 10. Só para que eu possa vê-las todas separadamente. Olhe para isso, certo. E então eu realmente vou ter que ser o mesmo olhar exato para também o Dave Clear Boxes. Oh, eu sinto muito. Eu preciso fazer uma vírgula e, em seguida, fez claro que irá atribuir que este código para ambos os Dev sames e também Dave Clears. Ok, então colocar esse comum lá, está dizendo “ok”. E o que mais você quer que eu escolha? Tudo bem, S Oh, aqui vamos nós. E agora o que vou fazer é dizer flutuar à esquerda. Agora estão todos flutuando. Estão todos empurrando. Se eu meio que rolou o código aqui, você pode ver que eles estão todo tipo de empurrando para a esquerda. Mas agora, se eu vir para cima com outra nova regra de estilo apenas para div claro e eu faço claro ambos. Agora o que acontece é que toda vez que há um div claro, ele empurra para a próxima linha. Você vê isso? Deixe-me. Na verdade, vou tornar isto um pouco mais fácil para nós. Div Limpar! Vou fazer o plano de fundo para o Div. Limpar, Ler e estudar. Ok. Então você pode ver o que está acontecendo aqui Primeiro todas essas caixas são iguais. O mesmo e se claro, são ambos a mesma Web, mesmo HIF, mesmo fundo. Exceto que eu mudei o fundo apenas para diferem claro porque eu queria ser capaz de vê-lo claramente. Margem é 10, então temos algum espaço entre eles, e então eles estão todos flutuando para a esquerda. Mas porque eu dei claro. Mas porque não limpou Colin, ambos isso significa que todos os dias de claro, eu vou avançar para uma nova linha. Mesmo que tudo continue a flutuar para a esquerda, estamos limpando nossos carros alegóricos, que significa que estamos dizendo, OK, vamos continuar fazendo o que estamos fazendo. Mas vamos começar de novo com uma nova linha, está bem? Então é um simples como apenas dizer claro ambos. E agora, toda vez que há um div claro que aparece, essa coisa toda dispara para a próxima linha. Muito bem, mesmo que tenhamos espaço suficiente para ter caixas que vão ser ainda mais largas, usando DIV claro ou usando um Colin claro, ambos que irão então certificar-se de que cada vez que houver um apelido div claro, é Vou dizer limpo. Ele vai dar claramente ambos para esse código, e vai empurrar tudo para a próxima linha. Embora estejamos sempre a manter as coisas a flutuar para a esquerda também 37. Configuração de formulário: o que você precisa para fazer para esta seção: neste vídeo. Estamos tomando uma forma de chata a excitante, estilizando desde o começo do zero . Agora eu puxei para fora do WordPress porque eu quero ter certeza de que nós não estamos usando qualquer dos CSS que está partido com. No WordPress, WordPress vem estoque com algum estilo bastante decente, embora possamos sempre torná-lo melhor e mudá-lo para tipo de ajuste a nossa marca ou qualquer outra coisa que eu quero ser capaz de estilizar uma forma do nada. Então foi por isso que incluí esses dois arquivos. É teste formado HTML e estilo de formulário de teste que CSS. Agora certifique-se de que quando você fizer upload deles em seu site, eles estão ambos na mesma pasta e, em seguida, para acessá-los, você vai para o que quer que seja ponto com ou qualquer que seja o seu site. Corte. Seja qual for a pasta é que você colocá-lo em forma de teste barra dot html. Então abra isso em seu navegador, e é isso que você verá aqui. Isto faz com que fique bem aqui. Isso é o que você vai ver. Ok, eu já configurei o HTML para puxar o estilo de formulários de teste que CSS desde que ele esteja na mesma pasta. E também, eu já dei um pouco de estilo, certo? Revestido diretamente no HTML. Dê uma olhada nisso. Então estilo Div bem ali. Eu revesti-o com força. Codifiquei diretamente. E se por algum motivo você não detesta o outro arquivo CSS corretamente, você ainda verá esse estilo porque isso é realmente codificado diretamente no arquivo HTML e você pode ver o que estamos fazendo aqui. Então, Margin, dê uma olhada aqui. Olhos de margem, 200 pixels, superior e inferior. E depois automático para a esquerda e para a direita. Ok, então isso vai centralizar essa caixa. Agora. Além disso, a largura dele vai ser 100%, mas o máximo com é 500 pixels ok sobre ele. Além disso, mande mensagem para o centro de linha que vai fazer tudo dentro disso. Sim, a caixa está centrada, mas tudo dentro dessa caixa também será centralizado. Ok em. E então eu fiz um pouco de estilo. Acabei de fazer o tamanho da fonte para a idade 1 ser 50 pixels. Ok, então é por onde estamos começando. Hum, vamos para o próximo vídeo e vamos começar a desenhar o formulário 38. Próximo passo: dê as entradas: Tudo bem, primeiro as coisas, o que vamos fazer é pegar tudo isso no primeiro nome sobrenome. Então vamos colocá-los como espaços reservados dentro das próprias entradas. Ok, então isso vai ser um HTML. Certifique-se de que você está abrindo em f FTP ou se você tem uma maneira diferente, tudo bem, também. Mas, quero dizer, siga zilla e eu estou no meu servidor, e eu faço o formulário de teste que visualização HTML nele, descartar arquivado local e baixar e editar arquivo um novo e, em seguida, isso deve me abrir em, uh, em nenhum pad plus plus. Ok. Então você pode ver aqui temos o primeiro nome do fórum. Sobrenome é ter todas essas coisas no nome do tipo de entrada todas essas coisas, vamos adicionar algo aqui espaço espaço reservado igual a. E então vamos colocar o que quer que o espaço reservado seja o primeiro nome, e então eu vou deletar esse texto bem ali, e então br Isso é apenas a próxima linha. Certo, então vamos nos livrar da próxima linha também. Na verdade, deixe-me me livrar de todos esses sobrenome, assunto e mensagem. Ok, então agora vamos ter esses espaços reservados para cada um deles. Se você quer uma cópia colar, você pode fazer isso ainda mais rápido do que eu assunto. E então, uh, aqui em baixo, espaço reservado. Isso é um “Que tal essa licença”. Tudo bem, vamos dizer isso. E depois carregamos de volta para o nosso servidor e depois recarregamos a página. Boom! Tudo isso agora é espaços reservados. Agora você vai notar que ele está centrado. Dê uma olhada no arquivo CSS, ok? Eu já coloquei algum estilo e para os espaços reservados o olhar para esses seletores, eles são muito estranhos. Você pode ver o que está acontecendo aqui. São todos o mesmo código. Mas estes são todos para espaços reservados. O problema é que ainda não está padronizado, então, , às vezes você precisa duplicar código para navegadores diferentes. Eu fiz esse trabalho para você. Se você quiser alterar o estilo desse texto de espaço reservado até mesmo Mawr, você está convidado a fazê-lo. Mas certifique-se de copiar. Certifique-se de copiar para baixo e há quatro lugares diferentes para colocar código, então certifique-se de copiar o mesmo código em cada um. Ok, então dê uma olhada aqui agora. Vamos começar a jogar primeiro. Vamos trabalhar em tapinhas, OK? Tão certo. Clique. E sabe o que eu percebi? Nós estamos indo para o pé. Quer ser capaz de estilizar todas as entradas para esse formulário inteiro. Ok, então vamos dar uma olhada, uh vamos dar uma olhada no código do formulário em HTML. A classe do formulário é muito bonita. Agora olhe para isso. Ok, então é um formulário, mas tem uma aula. Tem um apelido para ele. Bonita. Então, vamos atingir essa forma específica. Ok, então se eu fizer isso e eu faço ah, forma ponto Lembre-se, o ponto é para as aulas formar bonito e que eu vou fazer espaço e eu vou entrar. Então eu quero focar em um seleto todas as entradas dentro do formulário com formulário apelido Pretty. Ok, eu vou para o preenchimento, e eu vou fazer 20 pixels. Agora você pode ver que eu fiz. Eu só mudei as entradas. Este fundo aqui é este de baixo. Aqui está uma caixa de texto. Ok, então eu quero selecionar esse também. Então o que eu vou fazer é eu vou voltar aqui, e eu vou fazer vírgula formada em forma bonita. Então isso é formas com apelido ou classe de ex-bonita e eu vou dizer fazer espaço e depois caixa de texto. E isso deve me dar tapinhas. Oh, e não é irritante. Uh uh Oh. Área de texto. Eu sinto muito. Não é caixa de texto. É área de texto. Ok, então deixe-me voltar aqui. Onde estamos bem, então onde está o código? Onde estamos bem, Para onde foi o meu código? Oh, eu mudei. Lá vamos nós. Ok, então eu sinto muito. Vamos voltar uma forma de ponto bonito e, em seguida, no porto. Ok. E, em seguida, também formou forma área de texto bonita. Desculpe-me. Então agora estamos bem. Agora temos algum preenchimento saindo e a última coisa sobre uma área de texto é que isso vai para sempre. Ok, então nós temos algum estofamento acontecendo. Vejo você no próximo vídeo para ir ainda mais longe 39. Largura + caixa de reserva: Tudo bem. Da próxima vez vamos fazer a largura 100%. Certo, então clique com o botão direito em um desses caras inspecionar. Eu sei que isso realmente me levou para a área errada. Eu quero essas entradas, então clique em uma entrada. E então o que vamos fazer é fazer com 100%. Agora você vê isso? Você vê como a área de texto é realmente um pouco menor do que a entrada? Isso é um problema. O que está acontecendo aqui? E, em seguida, também o botão enviar parece estar fora para o lado. O que está acontecendo? Vamos dar uma olhada em toda a definição. Quando olhamos para todo o Dev, o maior dia disso está segurando todo o resto. Quando olhamos para todo o Dev, Você pode ver que aqueles Ah, olhe. Bem aqui. Olhe bem aqui. Quando eu passar por cima dessa área, você pode ver que eles estão indo ao mar. Eles estão indo longe demais agora. Por que é isso? A razão é porque estamos em uma largura de 100%. Mas então estamos adicionando estofamento. Ok, agora isso faz com que seja mais largo do que deveria ser. Mas para nos ajudar aqui, só fazemos tamanho de caixa, caixa de borda. Tudo deve se encaixar. Você pode ver que isso faz com que se encaixe. Agora, se eu fizer isso, se eu desligar isso, então isso significa que vai ser uma largura de 100%. E isso também vai adicionar preenchimento versus uma largura de 100%. E então o estofamento vai ser meio empurrado para dentro versus empurrar para fora. Ok, então isso é caixa de tamanho de borda muito útil se você só quer dizer ok com 100%. Mas então eu quero um pouco de tapinhas. Você quer fazer as contas, você pode misturar esses pixels e o 100% é, hum e então mesmo que você tenha, você sabe, 3% ainda vai funcionar. Mas isso realmente não importa. Você pode realmente misturar pixels e porcentagens aqui porque a caixa de borda meio que faz a matemática para você e corrige para você. Certo, Certo, então preste muita atenção que isso é uma pequena mudança, mas realmente faz uma grande diferença para tornar tudo limpo e preciso. 40. Fundos de entrada de formulário: do último vídeo. Certifique-se de salvar seu código. Agora vamos usar essa coisa toda, voltar para o CSS, e então eu vou copiar isso por causa dos mesmos seletores com um pouco mais de código . Agora, guarde isso. E então estamos de volta. Quando eu atualizar a página, tudo deve ficar como estava. Ok, então agora o que eu vou fazer é adicionar alguma margem, e eu vou fazer isso até o fundo porque eu realmente estou tentando espalhar esses caras para fora, ok? Não preciso de margem ao lado. Só quero dar-lhes um pouco mais de espaço, cima a baixo. Então eu vou fazer Ah, 10 pixels. Sobre isso, talvez 20 e 15 para o vento. Ok. E então eu vou pegar isso e eu vou salvá-lo. Copiar, colar, salvá-lo, trazê-lo de volta e então eu atualizar a página, e aqui estamos nós. Salvou o meu trabalho. Muito, muito bom. Agora o que vamos fazer é adicionar um fundo de cinza para quatro campos que eu ainda não preenchi. Então o que vamos fazer é ir para Teoh bem aqui. plano de fundo. É ótimo. Agora você pode ver aquela sombra feia ali? Eu odeio isso. É horrível. Ah, era fronteira. Certo, então não estava de volta. Borda das sombras. Hum, eu odeio isso. Seja lá o que for, parece 19 anos noventa. Certo, isso é Border. Então eu faço fronteira? Nenhum, porque o estilo padrão é apenas bruto. Ok, então eu vou ter cor de fundo D 40 44 com uma hashtag na frente com um inferno faria, porque é uma cor hacks, você também pode apenas digitar cinza se quiser. Isso é completamente bom. Você pode ver que o que estou fazendo é pouco a pouco. Só estou adicionando um pouco mais ao meu código. E, em seguida, de vez em quando, eu seleciono a cópia de cima para baixo. E então eu venho aqui e eu apenas colar sobre isso e, em seguida, guardá-lo, enviá-lo, e nós estamos de volta agora. Quero que esse cinza apareça quando não estiver selecionado, mas quando for selecionado, eu queria estourar o dedo do pé branco e ter uma borda sobre ele. Então vamos falar sobre isso no próximo vídeo 41. Bordas de formas: Então agora o que queremos fazer é fazer com que ele ganhe vida. Quando eu clicar nele, eu quero que o plano de fundo mude. Então parece que eu estou realmente selecionando essa área apenas para torná-la pop um pouco melhor. Então o que eu vou fazer é selecionar esses mesmos seletores que eu usei antes, e eu vou copiá-los. Vou fazer uma nova regra de estilo, mas vou inserir Colin Focus e texto Área Colin Focus. Então, são os mesmos seletores exatos. Exceto que agora o que eu estou focando é quando eu realmente clicar em um deles, então ele vai servir este código em vez disso. Caso com fundo. São homens brancos. Border é cinco picaretas em azul sólido. Quero dizer, ela era uma cor azul melhor porque eu odeio aquele outro azul. Ok, então não, eles meio que ganham vida um pouco. Olhe para isso. Agora, o problema aqui é que se você pode ver, nós olhamos para onde o assunto do texto está, você pode vê-lo se move para cima e para baixo porque o que eu estou adicionando essa borda está fazendo Ah, está tornando tudo maior porque eu estou empurrando Aquela fronteira. Para oexterior, e está atornar a caixa toda maior. Para o , exterior, e está a Posso tentar o tamanho das caixas, mas não funciona. Posso tentar o tamanho das caixas, Ok, então o que eu preciso fazer é eu realmente preciso adicionar uma borda ao meu original, apenas entradas regulares. Mas eu preciso fazer essa borda exatamente da mesma cor que o fundo, então eu realmente não vejo isso. Ok, então cinco pixels sólidos, e então eu vou escolher esta cor D 40 44. Agora, olhe para isso. Não consigo ver, mas tem uma fronteira lá. Ok, então isso é meio hackeado para ser capaz de adicionar uma borda, mas, hum, hum, ter uma borda quando você se concentrar em coisas, mas não mostrar uma borda antes disso. Ok, então agora quando eu testá-lo, tudo fica exatamente onde está. Mas essa fronteira aparece, e dá um pouco mais de zing ou seja lá o que você quiser chamar, então eu vou guardar esse código. Então, uh, fronteira, por que eu não tinha fronteira nenhuma. Hum oh, porque ele tinha que era de antes porque a fronteira era realmente estúpido olhar. Ok, então eu tirei isso. E aí vamos nós. Copie este código que vai bem ali. E então eu volto e copio este código O código focado quando clicamos nele com o fundo branco na borda, salada de cinco pixels e, em seguida, salve-o, carregue-o, atualize a página. Maio e tudo está salvo. Está tudo pronto. Está bem, vejo-te no próximo vídeo. 42. Próximo passo: transformação de texto + alinhamento para texto: agora vamos trabalhar no tamanho da fonte e na transformação de texto. Ok, então nós vamos para aqui com forma formada, muito entrada e forma forma forma bonita área de texto. Então é como todos eles e vamos mudar o tamanho da fonte aqui para 30 pixels e, em seguida, texto se transforma em maiúsculas. E agora temos esses caras muito, muito grandes, amigáveis. Você não precisa fazer isso. Você não precisa copiar meu estilo exatamente. Estou a mostrar-te o que eu faria. Sinta-se livre para ter seu próprio eu em sua própria criatividade e fazer as coisas do jeito que você quer fazer . Às vezes eu gosto de coisas maiores como esta porque em dispositivos móveis, em plataformas móveis, parece melhor quando as coisas eram apenas um olhar quando o Texas apenas um pouco maior. Embora em um computador de mesa pareça grande, mas é mais fácil de usar. Só que é mais divertido para mim do que apenas pequenas coisas para clicar. É bom clicar em coisas grandes. Mas aqui está o problema. aqui está o problema Quando eu clico aqui, eu começo a digitar meu primeiro nome Jimbo. Tudo isso é alinhado à esquerda Agora o texto do espaço reservado está centralizado, mas o texto aqui é deixado a linha. Agora, por quê? Por que isso está acontecendo? Porque se você der uma olhada nos C s até agora, eu já adicionei este código. Este texto, o código de centro de linha para todos os espaços reservados. Mas não adicionamos texto no centro da linha para as entradas. Então nós vamos adicionar isso também nisso tudo do mesmo modo. O mesmo texto traço alinhar, centro Coleman. E agora deve funcionar. Lá vamos nós. Muito, muito bom. Então agora isso está tudo centrado também. Vejo você no próximo vídeo. 43. Faça suas fontes de a combinação (e use o Google Fonts!): certifique-se de que você salvou seu trabalho da última vez. Se você atualizar a página e não fizer isso, ela será lavada. Verifique se você está selecionando o caminho certo para copiar. Sobre. Ok, este é o foco. Este é o foco em seletores aqui em baixo, mas estas são apenas as entradas regulares. Diga isso e traga de volta. Atualize a página e tudo mais. Whoa. Aqui vamos nós. Alguns. Por algum motivo, ele não carregou o CSS quando fez isso por um segundo. Ok, então agora eu vou testá-lo. Bob Jones. A Como você sabe? Dê uma olhada nisso. Por que esse fundo é diferente? Isso não é bom. Eu não gosto nada disso. Então esta é uma área de texto, e por alguma razão, essa teoria do texto tem um fundo diferente. Então nós só vamos tipo de nós vamos começar aqui porque esta é a entrada e a área de texto, e nós vamos dizer que a família de fundos encontrou a família Dash. Colin Sands, Sand Saref. Você pode ver que conserta isso. Que era tudo o que tínhamos que fazer lá. Você poderia trazer amigos diferentes dos fundos do Google. Se você quiser ou você tem que primeiro carregar o fundo em seu arquivo de cabeçalho, e então você pode. Então você pode fazer referência aqui. Você pode digitar qualquer diversão que quiser. Você tem que carregá-lo em seu site, e então você pode referenciá-lo. Mas também há WordPress plug em busca de fontes do Google. WordPress plug in e ele vai tornar muito mais fácil para você trazer outros fundos para o seu site. Certo, mas aqui estou indo para San Serif. Isso é fácil o suficiente. E, de fato, esse código ali é o mesmo código exato que esses espaços reservados aqui olhando para o CSS . Nada de procurar os espaços reservados para, uh, para o código que nós já dissemos, encontrar a família Sand Saref bem ali. Então não, não é surpresa que apenas adicionando a família divertida sem serif aqui colocasse esse cara no lugar . Você pode dizer quando nós tiramos isso. Isso é exatamente o mesmo. O fundo reservado é o mesmo, uh, uma mensagem. Se eu pegar isso e cortá-lo, você pode ver que é exatamente a mesma diversão agora, então isso funciona muito, muito bem. E agora vamos nos certificar de que guardamos por cópia. Colando. Traga-o aqui. Faz uso como o certo. E esse cara está ficando cada vez mais longo e mais longo. Salve-o e, em seguida, atualize. E estamos bem. Incrível. No próximo vídeo, vamos falar sobre fazer com que o botão de envio pareça legal. Então verei em um segundo. 44. O botão de envio perfeito: Então agora estamos trabalhando no botão enviar, e basicamente o que eu quero para um bom botão enviar é como eu rolar sobre ele. Eu queria mudar para tipo de aparecer em mim e me mostrar que eu posso clicar nele e então, uh e então quando eu clicar nele, eu queria mudar também. Então realmente registra meu clique para que ele não muda apenas se nada quando eu clico nele, às vezes eu estou me perguntando, eu realmente clique no botão ou não? Mas quando ele aparece quando você clica, uh, uh, então ele meio que me dá um bom feedback, e eu gosto disso. Então essas são as duas coisas que eu estou mirando agora. Neste momento, medida que clicamos nessas entradas, você pode ver que elas estão mudando. Mas veja o que acontece quando clicamos no botão enviar. É a mesma coisa. É quase como se fosse uma entrada, mas não é uma entrada. Ok, então eu não gosto que eu não gosto que ele grude assim. A razão pela qual isso acontece é porque temos este código, este formulário forma bastante entrada. Mas se ele está focado, então ele muda o fundo e dá-lhe uma borda. Está bem, mas não quero que se concentre. Não quero usar esse código de foco. Eu quero usar o código do mouse. Certo, então o que vamos fazer é criar a mesma coisa só para isso. Para aquele botão específico ali. Vamos mudar o código. Então deixe-me atualizar a página. E ainda assim, lá vamos nós. OK, então agora o que eu vou fazer é criar uma nova então agora o que eu vou fazer é criar uma novaregra de estilo lá. Agora, este é o tipo de entrada igual botão. Quando você realmente cria um formulário realmente, o tipo de importação é realmente para ser tipo enviar. Mas agora eu mudo para Button. Só porque eu queria que isso fosse útil por agora, para ser capaz de clicar nele e tê-lo realmente não fazer nada. OK, então nós vamos fazer é formado para ele bonito novamente. Estou selecionando. Eu estou sendo eu estou zoneando dentro Estou selecionando uma entrada muito específica, mas não estou apenas selecionando qualquer botão de entrada. Estou selecionando botões de entrada que estão dentro do formulário com o formulário de classe bonito que têm o tipo de botão. Não são as outras entradas. É este botão específico para enviar aqui. Eu poderia mesmo, mas uma aula sobre o botão de enviar se eu quisesse, mas agora, isso é bom o suficiente. Então o que eu vou fazer é eu realmente vou estilizar isso. Deixe-me ver aqui. Simplesmente ótimo. Vou torná-lo um pouco diferente. Só para que ele se destaca um pouco, uh, me placa cinco pixels sólido. E tenha em mente que a razão pela qual estamos colocando uma borda com a mesma cor exata do fundo é porque se queremos rolar sobre ele e dar-lhe uma borda, queremos ter certeza de que esse espaço já está estabelecido. OK, então isso é bom por enquanto. E depois vou copiar isto para outra regra de estilo. Então eu apenas copiei e colei, mas eu vou fazer Colin hovers. Estamos agora eu selecionei o mesmo botão. Mas agora vou me concentrar em criar código para quando passar o mouse sobre ele. Alguma coisa vai acontecer agora. Então o que eu quero com um fundo de mudança para, uh vamos ver o que Alice Blue é. Não parece que estraguei tudo sobre isso. Ah, isso é meio legal. Na verdade, vou me livrar desse passado. Então eu não gosto do fundo ou eu não gosto da fronteira em tudo. Então eu vou fazer a fronteira do mesmo. Não, na verdade, para tornar isto um pouco mais fácil, não vou ter uma fronteira com nenhum deles. Então, na verdade, estou fazendo fronteira nenhuma. E então, assim, quando eu rolar para lá, nós vamos. OK, então eu fiz uma borda apenas nenhuma para aquele botão específico. Ainda está achando que a fronteira ainda está nessas outras entradas. Mas para este botão enviar, ele não terá uma borda dessa maneira. Eu não tenho que fazer a borda da mesma cor que o fundo e fazer todas essas bobagens. Então eu só fiz a fronteira nenhuma. E então, à medida que mudo o plano de fundo, a totalidade do botão muda. Mas eu também posso eu também posso dio cor de texto. Isso é só cor. Ok, então há cor de fundo. Mas também há cor de texto em você. Altere a cor do texto usando apenas a cor aqui. Então isso parece. Deixe-me ver aqui. Eu queria ser a parte divertida do cromo é que você pode ver exatamente como é . Então lá vamos nós. Gosto de como isso fica no DNA. Agora o que eu vou fazer, eu vou fazer isso algum tempo para fazer a cor do texto mudar quando eu passar por cima dele. Só queria parecer que está saindo de mim. Eu queria apenas ser desbotado no início, e então uma vez que eu rolar sobre ele, eu queria realmente tipo de vir à vida. Se você quer que isso seja selado, branco funciona. E sabe o que vou fazer? Na verdade, eu vou forçar que esta entrada seja fixada pairada, então eu posso apenas olhar para este estilo enquanto eu estou trabalhando para ele sem ter que ir e para trás e continuar rolando. Certo, vamos ver o que mais? É difícil de ver. Pasta ali. Isso é melhor. Eu não amo isso. Deixe-me ver se posso usar um pouco de cor azul. Aqui vamos nós. Meio divertido. Você também pode, com suas cores específicas da marca, você pode tipo de fazer tudo combinar. Então, é o que é realmente bom sobre o estilo CSS é que você pode tipo de personalizar tudo em torno de suas marcas, cores próprias, Vamos parar aqui para este vídeo. No próximo vídeo, vamos trabalhar no ativo, que significa que quando clicarmos no botão, como ele muda. Mas onde isso é bom por enquanto, brinque com cores diferentes, fundos diferentes e tire essa borda. Ok? E certifica-te de que também salvas o teu trabalho. Tudo bem, então o que vamos fazer? Na verdade, cliquei. Eu cliquei. Pire bem ali. E agora eu começo a ver todo o meu todo o código que eu acabei de colocar em forma ponto botão tipo de entrada bonita e, em seguida, informado forma botão tipo de entrada bonita com o hover código extra. Então, ministro, assim, entrar neste CSS e salvá-lo carregado e verificar para ver. Fiz o meu trabalho direito, e fiz tudo bem. Vejo você no próximo vídeo. 45. Faça a mudança de botão no de de: Tudo bem. Então aqui estamos com a mesma forma que você pode ver que temos todo esse estilo ainda é o mesmo . E então, quando eu passar o botão de enviar, ele muda, o que é bom. Mas olha o que acontece quando eu clico. Nada realmente muda. Não me está a dizer isso. É, uh é que está vendo meu clique, que é irritante quando quando você clica em um formulário quando você clica em enviar em um formulário que você quer tipo de reagir a você da maneira que fazemos isso é com ativo. Ok, então isso é Ah, isso é um estado elemento. Se nós apenas copiar este formulário formado entrada espaço bonita e, em seguida, com esses colchetes estranhos , tipo igual botão citação. Poderia um novo estilo ah regra e então fazemos Colin ativo e s Oh, sim. Então isso é um estado, um estado elemento que podemos realmente ativar e desativar mais fácil aqui para ver o que está acontecendo . Então o que eu vou fazer é clicar ativo e depois ter certeza que é aquele pontinho ali . Isso está forçando o botão do tipo de entrada a estar ativo agora. OK, então isso é o que parece quando está ativo. Vamos fundo dio branco e vamos fazer cor branca, então quase desaparece. Vamos ver como é isso. Eles podem ver que aparece. Você vê isso? Porque está tudo bem agora, geralmente todo branco. Isso não faz nenhum sentido, certo? Todo branco não é bom porque você não pode ver nada além do ativo Onley está acontecendo por uma fração de segundo? Então, tudo bem se são algumas coisas em contraste com, ah, ah, qualquer que seja o estilo pairado é bom, porque é um contraste gritante. Consigo ver quando clico nesse botão. Realmente faz muito sentido para mim que você também possa fazer, um, ativo aqui. Você também pode fazer, ah, cor que está perto do, hum, para o fundo que já está lá, mas apenas um pouco fora. Então veja o que quero dizer aqui. Então, o fundo é que onde meu ir eu vou para fundo ativo. E então a cor da diversão é assim. Oh, espere, não, eu queria pairar. Onde está a informação sobre o pairar? Ok, alguns copiando o bebê, o estilo do código do cursor para o código ativo. Então é exatamente o mesmo. Agora eles pairam e o ativo. Mas vou puxá-los um pouco. Então, cuidado com este fundo. Vou puxá-lo um pouco mais leve, um pouco mais alto e depois também um pouco para a esquerda. E então a cor é Bem, eu vou puxá-la para cima na diagonal para a esquerda. Então é o mesmo tipo de cores de tom, mas eles são apenas puxado para cima sua deslocado para a esquerda. Ok, então isso significa menos saturação e brilho mawr mais perto do dedo do pé branco e menos saturação. Fiz isso pelos dois. Agora vamos dar uma olhada no que acontece quando clicamos no botão para que você possa vê-los. Não é um contraste tão forte como ir todo branco, mas definitivamente nos dá uma idéia de. Ele definitivamente nos dá uma boa olhada para clicar no botão enviar que nos dá que esse feedback que nos faz perceber OK, nós definitivamente clique para baixo que você também pode ir na direção oposta, se você quiser. Hum, em vez de aqui nós podemos ir diagonalmente para baixo e então isso nós também podemos ir diagonalmente para baixo. E não, se dermos uma olhada agora. Fica mais escuro quando clicamos nele. Agora, para o seu coração, você pode estilizá-lo da maneira que quiser. Eu normalmente gosto de ficar mais leve, então eu vou puxá-los de volta para onde? Esse tipo de lugar onde eles estavam aqui em cima. Este tipo estava algures por lá. Gosto de ficar mais leve. É o meu estilo e assim. Mas sinta-se livre para fazer o que quiser com seu botão de enviar e torná-lo compatível. Você também é a cor da sua marca. Ok, então isso é, um que é como estilo é enviar botão e eu vou ver no próximo vídeo. 46. Obtenha inspiração em outras sites: modele seu código: Então, se há algo que você aprendeu neste tutorial, você sabe que há tantas opções diferentes lá, tantas coisas diferentes que você pode fazer quando quiser estilizar um formulário. Ou quando você quiser estilizar uma caixa de div ou o texto dentro de uma caixa DIV ou o que quer que seja, há tantas coisas diferentes que você pode fazer. O que eu quero encorajá-lo é a próxima vez que você ver um site onde você realmente, realmente gosta do estilo deles. Digamos que você veja um formulário de contato onde você vê ah, certo texto dentro, você sabe, talvez como uma revista onde eles têm algum texto que tipo de aparece e está em sua própria, sua própria área, qualquer que seja é, certo. Clique nele e clique em Inspecionar novamente. Estamos no cromo. Estamos à procura de ferramentas de desenvolvimento e, uh, tente tentar fazer engenharia reversa como eles fizeram isso. Certo, então passe pela direita. Você quer clicar com o botão direito em parte da tela e então eu vou clicar em Inspecionar e você pode então apenas tipo de rasgar através de como eles, uh, como eles criaram esse formulário. É só que todos esses pequenos pedaços de código para ir do início ao fim. É tão divertido ver essa progressão daqui até onde acabamos. É noite e noite e dia. Então, uh, então fique curioso, estado curioso. E toda vez que você vê algo, não basta rolar e dizer, Oh, eles só têm um estilo bonito. É incrível. Vá lá e roube o código deles. Dê uma olhada no que está acontecendo, mas não roube o cone deles. Senhor, lamento ter dito que copie levemente o cartão deles. Ver o que eles vêem, o que eles fizeram e fazer o seu próprio. Ok. Fazendo sua própria coisa. Coloque seu próprio spin sobre ele, seu próprio talento e fazê-lo ganhar vida de uma forma que você realmente gosta e que faz você se sentir bem quando você usá-lo. Deve fazer você sentir que você deve fazer você se sentir como se você é sites divertido e interessante e não apenas chato. Isso é muito, muito chato. Esta forma de iniciante aqui é tão chata em 1993. Ok, afaste-se disso e comece a adicionar seu próprio estilo Teoh para fazê-lo ganhar vida. 47. Aprenda uma coisa de uma vez em uma vez + me a alguma coisa!: Muito obrigado por fazer este curso. Obrigado por se juntar a mim. Obrigado por estar aqui. Estou tão orgulhosa de você por chegar ao fim. Se você tiver alguma dúvida, por favor pergunte nos comentários. Nunca hesite em perguntar. Adoraria te ajudar. Espero que você esteja... Espero que o mundo inteiro do CSS esteja, você sabe, explodindo em sua mente agora. Espero que esteja se abrindo. Apenas mundos de possibilidades. Se você está sobrecarregado, apenas pegue uma coisa de cada vez. Basta aprender uma coisa nova todos os dias no dia No final de algumas semanas, você vai se surpreender com o quanto você realmente aprendeu. Você não precisa fazer tudo de uma vez, aprender uma coisa, aprender bem e seguir em frente. Obrigado mais uma vez. Tanta coisa para se juntar a mim. Espero ver quando mais um dos meus cursos e te vejo em breve.