CSS - sammy-vasconcelos/Fundamentos-Dev-Web GitHub Wiki

Aviso:

Não é recomendado uso de CSS inline! (Poluição de código, difícil manutenção e alta especificidade)

` #

    .selector {
        background-color: rgb(87, 87, 87);
        font-size: 30px;
        text-align: center;
        border-radius: 10px;
        
        /* valores múltiplos: */
        border: solid 3px rgb(0, 0, 0);
        font-family: Arial, Helvetica, sans-serif;

        /* funções */
        width: calc(100% - 40px);
    }`
  • Pseudo-classe: .selector:hover{ background-color: orangered; }

  • Pseudo-elemento: .selector::first-letter{ font-size: 60px; }

  • Combinar seletores:

    Serve para selecionar um grupo de seletores específicos para fazer modificações com CSS

    • Irmão adjacente: div + p
    • Irmão geral: div ~ p
    • Filho direto: div > p
    • Descendente: div p

Altura e largura:

Mesmo com o width 100% outras propriedades podem alterar o tamanho da box, por exemplo, o padding.

  • Com o box-sizing: border-box nenhuma propriedade vai conseguir extrapolar o tamanho do width

A div pode ser menor que o conteúdo que está dentro dela, com overflow conseguimos trabalhar isso.

  • O overflow: hidden esconde a parte que sai de dentro da área da Div
  • O overflow: scroll colocará scroll nos dois eixos (x e y)
  • Para controlar o eixo do scroll, por exemplo: overflow-x: scroll

As margens podem se sobrepor e formar um margin collapse (quando as duas margens se sobrepõem e ocupam o mesmo espaço na tela)

Ajudam a evitar margin collapse:

  • float
  • postion absolute
  • display inline-block

Display:

display:block Cada elemento na sua linha

display: inline A largura e altura definidos são ignorados, o que conta é o padding

display: inline-block A largura e altura não são ignorados

display: flex O elemento se torna um flex container, a partir daí podemos manipular todos os elementos filhos desse flex container com propriedades novas.

display: grid Define o elemento como um container de grid. grid-template-columns define o número e a largura das colunas. grid-template-rows define o número e a altura das linhas. grid-template-areas define as áreas do grid.


Especificidade

É um tipo de “poder de escolha”, que ajuda os navegadores a decidir qual valor da propriedade CSS terá precedência e será aplicado aos elementos.

Regras:

  1. !important (seu uso é desencorajado por se tornar um ciclo vicioso e acaba se tornando uma gambiarra, declara prioridade)
  2. Seletores mais específicos
  3. Última regra processada (empate)

Exemplo:

  • Uma classe é mais específica do que a tag p, não importa se a classe estiver acima ou abaixo da tag p acima, como ela é mais especifica, é essa a configuração que permanece
  • Essa expressão é mais específica ainda, então ela prevalece sobre as outras: p.nome_da_classe{ border: solid 3px rgb(245, 10, 186); }

Ordem das especificidades (menor para maior):

Elemento/Pseudo-Elemento < Classe/Pseudo-Classe < ID < Inline Styles


Herança

Algumas propriedades não são herdadas por padrão, como por exemplo, border e padding.

Para herdar essas propriedades, basta usar o inherit. Exemplo: padding: inherit