Métodos para Aplicar Estilos CSS a Elementos DOM

Existem três abordagens principais para definir estilos CSS em elementos DOM:

• Folha de Estilos Externa: Vinculação a um arquivo CSS externo
• Folha de Estilos Interna: Inserção de código CSS dentro da seção <head>
• Estilo Inline: Definição direta nos atributos style dos elementos HTML

Propriedades CSS para Ocultar Elementos Visualmente

Para remover elementos do campo visual do navegador:

• Métodos básicos: display: none ou visibility: hidden
• Técnicas alternativas: altura zero, opacidade zero, z-index negativo

Solução para Estados Hover em Links Visitados

Links já visitados podem perder os efeitos hover. A solução está na ordem correta das pseudo-classes: Link, Visited, Hover, Active.

Técnicas de CSS Hack para Diferentes Navegadores

CSS Hack refere-se à escrita de código específico para cada navegador. Exemplo prático:

.elemento-exemplo {
    largura: 300px;
    altura: 300px;
    cor-fundo: azul;
    cor-fundo: vermelho\9;    /* Todos IE */
    cor-fundo: amarelo\0;     /* IE8 */
    +cor-fundo: rosa;         /* IE7 */
    _cor-fundo: laranja;      /* IE6 */
}

:root .elemento-exemplo {
    fundo: roxo\9;            /* IE9 */
}

@media all and (min-width: 0px) {
    .elemento-exemplo {
        cor-fundo: preto\0;   /* Opera */
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .elemento-exemplo {
        cor-fundo: cinza;     /* Chrome e Safari */
    }
}

Diferenças entre Elementos Inline e Block

Elementos Block: Ocupam linha completa, permitem controle de todas as dimensões e margens.

Elementos Inline: Apenas margins/paddings horizontais são aplicáveis. Elementos inline-block nativos incluem input, img, buton, textarae e label.

Comparação entre RGBA e Opacity

Opacity afeta todo o elemento e seu conteúdo, enquanto rgba() aplica transparência apenas na cor ou fundo, sem afetar elementos filhos.

Sobreposição de Texto em Diferentes Eixos

Vertical: line-height com valor menor que a altura da fonte

Horizontal: letter-spacing com valores negativos

Técnicas de Centralização Vertical para Elementos Flutuantes

<style>
    /* Método 1: Dimensões conhecidas */
    .caixa-centralizada-1 {
        posicao: absoluta;
        topo: 50%;
        esquerda: 50%;
        margem-topo: -100px;  /* Metade da altura */
        margem-esquerda: -100px; /* Metade da largura */
    }

    /* Método 2: Dimensões desconhecidas */
    .caixa-centralizada-2 {
        posicao: absoluta;
        topo: 0;
        direita: 0;
        base: 0;
        esquerda: 0;
        margem: auto;
    }

    /* Método 3: Usando table-cell */
    .container-centralizado {
        display: table-cell;
        alinhamento-texto: center;
        alinhamento-vertical: middle;
    }
</style>

Unidades de Medida: PX versus EM

PX possui valores fixos, enquanto EM é relativo ao tamanho da fonte do elemento pai. Convenção padrão: 1em = 16px.

Normalização e Reset de Estilos CSS

Reset CSS remove todos os estilos padrão dos navegadores. Normalize.css oferece uma abordagem mais sutil, mantendo estilos consistentes entre navegadores sem eliminar completamente as defaults.

Pré-processadores CSS: Sass e Less

São linguagens que estendem o CSS com features como variáveis, mixins e funções. Sass usa $ para variáveis, Less utiliza @. Benefícios incluem melhor organização, reutilização de código e compatibilidade cross-browser.

Display: None versus Visibility: Hidden

display: none remove o elemento completamente do fluxo do documento. visibility: hidden mantém o espaço ocupado pelo elemento, apenas o tornando invisível.

Aplicações do Atributo Content em Pseudo-elementos

O atributo content é exclusivo para pseudo-eelmentos ::before e ::after. Aplicação comum em técnicas de clearfix:

.clearfix::after {
    conteudo: "";
    display: block;
    altura: 0;
    visibilidade: hidden;
    clear: both;
}

Modelos de Caixa em Diferentes Navegadores

Modelo W3C: Dimensões do content não incluem padding e border

Modelo IE: Dimensões do content incluem padding e border

A propriedade box-sizing: border-box padroniza o comportamento entre navegadores, facilitando o cálculo de dimensões.