Skip to content
› Computer Science

Compreendendo os 3 tipos de estilos CSS

15 de maio de 2021

O desenvolvimento de sites front-end é frequentemente representado como um banquinho de três pernas composto de:

  • HTML para a estrutura de um site
  • CSS para os estilos visuais
  • Javascript para comportamentos

A segunda perna deste banco, Cascading Style Sheets, suporta três estilos diferentes que você pode adicionar a um documento.

  1. Estilos embutidos
  2. Estilos incorporados
  3. Estilos externos

Cada um desses estilos CSS apresenta vantagens e desvantagens exclusivas.

Hardik Pethani / Getty Images

Estilos Inline

Estilos embutidos são estilos escritos diretamente na tag do documento HTML. Os estilos embutidos afetam apenas a tag específica a que são aplicados:

Esta regra CSS desativa a decoração de texto sublinhado padrão para este link. No entanto, isso não mudaria nenhum outro link na página. Esta é uma das limitações dos estilos embutidos. Uma vez que eles mudam apenas em um item específico, você precisaria encher seu HTML com esses estilos para obter um design de página unificado. Essa não é uma prática recomendada: na verdade, é uma etapa distante dos dias de Fonte tags e a combinação de estrutura e estilo em páginas da web. Os estilos embutidos também requerem uma especificidade muito alta. Isso torna difícil substituí-los por outros estilos não embutidos. Por exemplo, se você deseja tornar um site responsivo e alterar a aparência de um elemento em determinados pontos de interrupção usando consultas de mídia, os estilos embutidos em um elemento tornam isso difícil de fazer. Os estilos embutidos são apropriados apenas quando você os usa com moderação, na abordagem de “exceção à regra” que separa um ou dois elementos de seus pares na página.

Estilos Embutidos

Os estilos incorporados residem no cabeçalho do documento. Eles estão envoltos em

Folhas de estilo que são adicionadas ao cabeçalho de um documento também adicionam uma quantidade significativa de código de marcação a essa página, o que também pode tornar a página mais difícil de gerenciar no futuro. A vantagem das folhas de estilo incorporadas é que elas são carregadas imediatamente com a própria página, em vez de exigir que outros arquivos externos sejam carregados. Essa técnica pode ser uma vantagem de uma perspectiva de desempenho e velocidade de download.

Folhas de estilo externas

A maioria dos sites hoje usa folhas de estilo externas. Estilos externos são estilos escritos em um documento separado e anexados a vários documentos da web. Eles são chamados para o documento principal usando um

  • tag no cabeçalho do documento. As folhas de estilo externas podem residir no mesmo servidor que o HTML ou podem ser obtidas de outro servidor inteiramente. Geralmente, esse é o caso de ativos, como fontes, que muitos sites pegam emprestado do Google. As folhas de estilo externas afetam qualquer documento ao qual estão anexadas, o que significa que se você tiver um site de 20 páginas em que cada página usa a mesma folha de estilo (normalmente é assim que é feito), você pode fazer uma mudança visual em cada uma delas páginas simplesmente editando aquela folha de estilo. Essa economia torna o gerenciamento de sites a longo prazo muito mais fácil.

  • A maioria dos web designers profissionais usa um arquivo CSS principal para controlar o layout e o design de um site. A desvantagem das folhas de estilo externas é que elas requerem páginas para buscar e carregar esses arquivos externos. Nem todas as páginas usarão todos os estilos da folha CSS, portanto, muitas páginas carregarão uma página CSS muito maior do que a necessária. Embora seja verdade que há um impacto no desempenho de arquivos CSS externos, certamente pode ser minimizado. Realisticamente, os arquivos CSS são apenas arquivos de texto, portanto, não são grandes para começar. Se todo o seu site usar um único arquivo CSS, você também terá a vantagem de esse documento ser armazenado em cache depois de ser carregado inicialmente, o que significa que pode haver um leve impacto no desempenho da primeira página para algumas visitas, mas as páginas subsequentes usarão o arquivo CSS em cache, portanto, qualquer acerto seria negado.

    Formato mla apa chicago Sua Citação

    Kyrnin, Jennifer. "Compreendendo os 3 tipos de estilos CSS." ThoughtCo, maio. 14, 2021, thinkingco.com/types-of-css-styles-3466921.
    Kyrnin, Jennifer. (2021, 14 de maio). Compreendendo os 3 tipos de estilos CSS. Obtido em https://www.thoughtco.com/types-of-css-styles-3466921
    Kyrnin, Jennifer. "Compreendendo os 3 tipos de estilos CSS." ThoughtCo. https://www.thoughtco.com/types-of-css-styles-3466921 (acessado em 15 de maio de 2021).

    Recomendado: Evitando estilos embutidos para design CSS