Inheritance

    Resumo/Informações
    • Herança é quando um elemento herda uma propriedade de uma classe superior.
    • Propriedade CSS
      a) Caso tenha um valor atribuído a ela, será utilizado.
      b) Caso não tenha, poderá ser herdado (inheritance).
      No caso de ser herdado, o valor filho recebe o computed value (ou seja, o valor final).
      Exemplo:
      No caso de termos, como na imagem acima, uma child que vai receber o valor line-height, vai ser 150% de 20px, não de 25px.

    Inherited Proprierties
    • Inherited: font-family, font-size, color, etc. (Define-se uma vez e são usadas várias vezes.
    • Not inherited: margins, paddings, etc.
    • Somente fuciona se aquela classe não tiver o valor que será herdado.

    Inharit and Initial keywords
    • The inherit keyword forces inheritance on a certain property.
    • The initial keyword resets a property to its initial value.

    • Um exemplo de inherit:
      * {
      margin: 0;
      box-sizing: inherit;
      }

      body {
      font-family: "Lato", sans-serif;
      box-sizing: border-box;
      }

      Com isso, foi declarado que todos os elementos herdam o box-sizing do elemento superior, nesse caso, o body.