Boa noite, em aula a instrutora descreveu as classes no arquivo da seguinte forma
.cabecalho {
grid-area: header;
}
.menu-lateral {
grid-area: aside;
}
.principal {
grid-area: main;
}porém o nome das classes cabecalho e principal no index.html continham a palavra container. Não deveria estar escrito exatamente igual?
Bom dia! Juliano se você notar as classes estão com um espaço isso faz com que daca nome seja uma classe separada por exemplo:
nesse caso vc pode fazer isso
<header class="cabecalho container">
.cabecalho {
grid-area: header;
}
.container{
escrever outras descrições aqui
}ou seja fazendo assim vc tem duas classes no mesmo "comando"
agora se estiver assim:
<header class="cabecalho-container">ou
<header class="cabecalho_container">ou ate
<header class="cabecalhoContainer">ai vc não pode fazer isso
.cabecalho {
grid-area: header;
}
.container{
escrever outras descrições aqui
}Espero ter ajudado de alguma forma, Bons estudos.
Seria uma forma de reduzir codigo, declarando mais de uma classe separado por espaços. Correto?
então esta mais para especificar um ou mais itens no seu código.
exemplo: vc tem vários botões na sua pagina html com a classe botão
<button class="botão">botão 1 </button>
<button class="botão">botão 2 </button>
<button class="botão">botão 3 </button>
<button class="botão">botão 4 </button>porém no botão 3 vc quer que ele tenha alguma variação talvez de cor ou de eventos ai vc pode colocar:
<button class="botão">botão 1 </button>
<button class="botão">botão 2 </button>
<button class="botão botão_evento">botão 3 </button>
<button class="botão">botão 4 </button>ou seja apenas no botão 3 você vai ter um evento diferente pois somente ele vai ter a classe botão_evento.
espero ter ajudado, bons estudos e qual quer coisa pode chamar.