1
resposta

Referente a aula Criando o menu Hamburguer

Poderia explicar melhor para que sever as Tags: input, type, label, for, span........ Gostaría de entendwer melhor também no css: @import url("./styles/header.css")

Grato,

1 resposta

Fala, Marcelo! Tudo bom com você?

Então, essa questão das tags, cara, eu não vou saber te explicar muito detalhadamente, mas lá vai o que eu sei até então: A tag "input" é uma tag que vai gerar um tipo de campo em que o usuário vai conseguir colocar alguma informação, sendo que quem define o tipo da informação é a tag "type", que pode ser um tipo numérico, de texto, uma checkbox e por aí vai. As tags "label" e "for" trabalham juntas, fazendo relação com a tag "input". A tag "label" é como uma "etiqueta" para o input que ela é atribuída, e você faz essa atribuição através da tag "for", passando o id do input.

No exemplo a seguir (bem simples, mas acho que vai ajudar a entender melhor), eu criei um input do tipo texto, que tem o id "Nome", e que tem uma "etiqueta" que está passando uma informação sobre aquele input.

<label for="Nome">Digite seu nome:</label>
<input type="text" id="Nome">

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeNo final, você tem esse resultado daí, de forma bem simples.

Quanto a tag "span", pelo que eu já pesquisei sobre ela, é bem semelhante à tag "div", servindo pra fazer uma separação e marcação de uma parte do documento, com a diferença de que é uma tag inline. E por fim, essa questão do "@import", é uma forma de você fazer a importação de um outro arquivo para dentro do seu arquivo CSS. Vamos supor que você queira fazer a divisão do seu código CSS em vários arquivos diferentes, pra não ficar com um único arquivo gigantesco, e daí você cria 3 arquivos .css, que vamos chamar de "header.css", "main.css" e "footer.css". Depois que você criar esses arquivos e você for vincular eles ao seu HTML, ao invés de fazer esse vínculo 3 vezes repetidas usando a tag "link", lá no head do seu HTML, você pode ter um único arquivo .css, que vamos chamar de "style.css", e nesse arquivo, você usa o "@import" para importar os demais.

Espero que tenha ajudado e um grande abraço!