Solucionado
Olá Pessoal,
Não entendi muito bem a utilização de duas classes na mesma tag e posteriormente atribuindo operações diferentes no CSS:
.principal{
background-image: url("assets/Background.png");
background-repeat: no-repeat;
background-size: contain;
background-color: blue;
}
.container{
height: 100vh;
background-color: red;
}
Utilizei cores diferentes mas a vermelha se sobrepôs, qual a regra disso?
Olá Daniel, tudo bem?
A utilização de duas classes na mesma tag é uma prática comum em CSS. Isso acontece porque cada classe pode conter um conjunto diferente de propriedades, permitindo que você crie estilos mais complexos e específicos para seus elementos HTML.
No seu exemplo, a classe "principal" define a imagem de fundo e outras propriedades de estilo relacionadas ao fundo, enquanto a classe "container" define a altura da seção e outras propriedades de estilo relacionadas ao layout.
Quando duas classes são aplicadas a um mesmo elemento, o navegador aplica as propriedades de estilo de ambas as classes, mas a ordem em que as classes são definidas pode afetar o resultado final. No seu caso, a classe "container" é definida depois da classe "principal", o que significa que as propriedades da classe "container" sobrescrevem as propriedades da classe "principal" para a cor de fundo.
Para evitar que isso aconteça, você pode definir a cor de fundo diretamente na classe "principal" ou usar o seletor de classe mais específico para a cor de fundo, como .container.principal.
Espero ter ajudado e bons estudos!
Beleza, mas se o resultado é o mesmo porquê utilizar as duas classes?, se aplicar o height: 100vh; na classe principal, terá o mesmo resultado. Eu não entendi a usabilidade das duas classes, é algo mais pra semântica?
Olá, Daniel! É uma questão de organização do código. Até essa parte inicial do projeto pode ter parecido desnecessário criar duas classes realmente, porém conferindo o repositório do projeto final deu para entender melhor o contexto.
A classe container esta definindo a largura de alguns componentes, aplicando uma padronização entre eles, quando trabalhamos com classes nomeadas de container, já associamos automaticamente à definição de largura e altura de algum componente(igual um container ou uma caixa na vida real), e nas outras classes são aplicados estilos de cores, fontes e espaçamentos internos. Isso deixa o código mais legível e organizado, facilitando a manutenção. Essa é apenas uma abordagem de organização de código html e css, e legal que você teve essa sacada, nada impede que o código seja construído de outra forma, chegando no mesmo efeito visual.
Se você desejar, pode tentar construir o mesmo layout com outras abordagens e compartilhar aqui no fórum para outros estudantes!
Espero ter ajudado. Bons estudos!
Ah sim, agora saquei... Realmente facilita a organização na hora de estilizar, tendo uma classe como "padrão" a container e outra(s) para aplicar o restante do estilo.
Muito obrigado Luan!!
De nada, Daniel! :)
Surgindo mais dúvidas, pode contar com a gente!
Bons estudos!