Introdução ao CSS

Conhecimentos básicos necessários

Antes de continuar, você precisa ter uma compreensão básica das seguintes informações:

  • HTML
  • XHTML

Se você desejar aprender esses projetos primeiro, por favor, acesse Página inicial Acesse os tutoriais relacionados.

Resumo do CSS

  • CSS significa Cascading Style Sheets (Cascading Style Sheets)
  • Definições de estiloComo exibir Elementos HTML
  • Os estilos são geralmente armazenados emFolhas de estiloNo
  • Incorporar folhas de estilo no HTML 4.0 foi feito paraResolve o problema da separação de conteúdo e apresentação
  • Folha de Estilo ExternaPode aumentar significativamente a eficiência
  • As folhas de estilo externas são geralmente armazenadas em Arquivos CSSNo
  • Múltiplas definições de estilo podemCascadingPara um

As folhas de estilo resolveram um problema comum.

As tags HTML foram originalmente projetadas para definir o conteúdo do documento. Ao usar tags como <h1>, <p>, <table>, a intenção do HTML era expressar informações como “Este é um título”, “Este é um parágrafo”, “Esta é uma tabela”. Ao mesmo tempo, a disposição do documento era feita pelo navegador, sem usar tags de formatação.

Devido aos dois principais navegadores (Netscape e Internet Explorer) continuamente adicionarem novos tags e atributos (como tags de fonte e atributos de cor) ao padrão HTML, tornou-se cada vez mais difícil criar sites onde o conteúdo do documento é claramente independente da camada de apresentação do documento.

Para resolver esse problema, a World Wide Web Consortium (W3C), essa organização de padronização sem fins lucrativos, assumiu a missão de padronizar o HTML e criou estilos (Style) além do HTML 4.0.

Todos os navegadores populares suportam folhas de estilo em cascata.

As folhas de estilo aumentam significativamente a eficiência.

As folhas de estilo definem como os elementos HTML devem ser exibidos, da mesma forma que os tags de fonte e atributos de cor no HTML 3.2. Normalmente, os estilos são armazenados em arquivos externos .css. Através da edição de um simples documento CSS, as folhas de estilo externas permitem que você altere ao mesmo tempo a disposição e a aparência de todos os páginas do site.

Devido ao controle simultâneo de estilos e layout de múltiplas páginas, o CSS pode ser considerado uma inovação na área do design da WEB. Como desenvolvedor de sites, você pode definir estilos para cada elemento HTML e aplicá-los em qualquer número de páginas que desejar. Para atualizações globais, basta alterar o estilo e todos os elementos do site serão atualizados automaticamente.

Estilos múltiplos são empilhados em um

As tabelas de estilo permitem definir informações de estilo de várias maneiras. Os estilos podem ser definidos em um único elemento HTML, no elemento de cabeçalho da página HTML, ou em um arquivo CSS externo. Mesmo que várias folhas de estilo externas sejam referenciadas dentro do mesmo documento HTML.

Ordem de Empilhamento

Quando o mesmo elemento HTML é definido por mais de um estilo, qual estilo será usado?

Em geral, todos os estilos são empilhados em uma nova tabela virtual de estilos com base nas seguintes regras, onde o número 4 tem a maior prioridade.

  1. Configuração Padrão do Navegador
  2. Folha de Estilo Externa
  3. Folha de Estilo Interna (localizada dentro do tag <head>)
  4. Estilo Inline (interno do elemento HTML)

Portanto, o estilo inline (interno do elemento HTML) tem a maior prioridade, o que significa que ele prevalece sobre as seguintes declarações de estilo: as declarações de estilo no tag <head>, as declarações de estilo nas folhas de estilo externas, ou as declarações de estilo no navegador (valor padrão).