1
resposta

Duvidas no CSS

Temos em nosso arquivo CSS duas instruções: blockquote { background-color: #D9E5E3; border: 10px solid #C2CCCA; width: 250px; box-sizing: border-box; }

e outra

blockquote, aside, footer { padding: 20px; }

Falando de blockquote como o navegador lê esses dados? Estou bem confuso

1 resposta

Fala Fabio!

Tudo tranquilo?

Os elementos blockquote irão receber as duas configurações:


blockquote {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
}

...

blockquote, aside, footer {
    padding: 20px;
}

Por que no segundo bloco ele está dizendo para o navegador: "Todos os elementos blockquote, aside e footer recebem padding: 20px", e no primeiro bloco está dizendo: "Apenas os blockquote irão receber as configurações".

Só precisa tomar cuidado quando você faz uma atribuição de propriedade em algum lugar do seu CSS e em outro você altera esse valor, por exemplo se fosse assim:


blockquote {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    color: green;
}

...

blockquote, aside, footer {
    padding: 20px;
    color: black;
}

Se você tiver um código HTML assim:

<blockquote>Olá!</blockquote>

Qual será a cor do texto? Verde ou Preta?

Neste caso será Preta, pois o CSS lê em formato cascata, ou seja, o que vem depois é considerado mais relevante, se o código CSS fosse invertido:


blockquote, aside, footer {
    padding: 20px;
    color: black;
}

...

blockquote {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    color: green;
}

A cor seria Verde!

Espero ter ajudado!

Abraços!