2
respostas

Quando usar "inherit" ou quando não usar?

Eu vi que quando o professor criou a classe "botão" ele usou "inherit" para herdar a font-family do body e quando ele criou a classe "titulo" ele não usou o "inherit".

Usando o "inherit" na classe "botao":

.botao {
    background-color: var(--amarelo);

    text-align: center;
    font-family: inherit; /*o INHERIT faz com que o  botão herde a fonte do próprio BODY*/
    font-weight: var(--peso-botao);
    font-size: 1rem;
    color: var(--branco);

    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;

    box-shadow: 10px 10px 30px var(--amarelo-transparente);

    border: none;
}

Não usou o "inherit" na classe "título":

.titulo {
    font-size: var(--tamanho-titulo);
}

.titulo--destaque {
    font-family: var(--familia-titulo-destaque);
    font-size: var(--tamanho-titulo-destaque);
    font-weight: var(--peso-titulo-destaque);    
    color: var(--preto);

    display: block;
}

Por que ele teve que usar "inherit" na classe "botao" e não precisou na classe "titulo"?

2 respostas

Olá, Diógenes. Tudo certinho?

A tag "button" possui uma particularidade: por padrão, ela tem um "font-family" predefinido que não é herdado, automaticamente, dos elementos superiores. Por esta razão, o professor precisou forçar a herança para, assim, sobrepor a escrita padrão da tag.

Espero ter ajudado.

Bons estudos!

Entendi.

É .... vamos pegando os detalhes com as práticas e com as perguntas para a galera com mais conhecimento. rs

Obrigado pelo retorno e atenção.

Sucesso na sua jornada!!