Tutorial Inicial CSS

Conhecimento básico necessário

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

  • HTML
  • XHTML

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

Resumo do CSS
  • CSS significa folhas de estilo em cascata (Cascading Style Sheets)
  • Definição de estilocomo exibir Elementos HTML
  • Estilos geralmente são armazenados emFolhas de estiloem
  • Adicionar estilos ao HTML 4.0 foi feito pararesolve o problema da separação do conteúdo da apresentação
  • Folha de estilo externapode aumentar significativamente a eficiência
  • As folhas de estilo externas são geralmente armazenadas em arquivos .cssem
  • Muitas definições de estilo podemCascadingPara um

O estilo resolveu um problema comum.

As tags HTML foram originalmente projetadas para definir o conteúdo do documento. Usando tags como <h1>, <p>, <table>, o HTML era esperado para expressar informações como 'isto é um título', 'isto é um parágrafo', 'isto é uma tabela'. E a disposição do documento era esperada para ser feita pelo navegador, sem usar nenhuma tag de formatação.

Devido aos dois principais navegadores (Netscape e Internet Explorer) continuamente adicionarem novos tags e atributos HTML (como tags de fonte e atributos de cor) às especificações HTML, tornou-se cada vez mais difícil criar sites cujo conteúdo documental esteja claramente separado da camada de apresentação do documento.

Para resolver esse problema, a World Wide Web Consortium (W3C), uma aliança de padronização sem fins lucrativos, assumiu a missão de padronização do HTML e criou STYLES (estilos) 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 do trabalho.

A definição de folha de estilo determina como os elementos HTML são exibidos, tags de estilo e atributos de cor, como nos estilos do HTML 3.2, são geralmente armazenados em arquivos .css externos. Editando apenas um simples documento CSS, as folhas de estilo externas permitem que você mude a aparência da disposição de todas as páginas do site ao mesmo tempo.

Devido à capacidade de controlar ao mesmo tempo o estilo e a disposição de várias páginas, o CSS pode ser considerado uma inovação na área de design da WEB. Como desenvolvedor de sites, você pode definir estilos para cada elemento HTML e aplicá-los a qualquer número de páginas desejadas. Para realizar transformações globais, basta simplesmente alterar o estilo e todos os elementos do site serão automaticamente atualizados.

Estilos múltiplos são empilhados em uma

As folhas 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 de um único 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ções padrão do navegador
  2. Folha de estilo externa
  3. Folha de estilo interna (localizada dentro do <head> do elemento)
  4. Estilos em linha (dentro do elemento HTML)

Portanto, os estilos em linha (dentro do elemento HTML) têm a maior prioridade, o que significa que eles terão prioridade sobre as seguintes declarações de estilo: declarações de estilo no <head> do elemento, declarações de estilo em folhas de estilo externas ou declarações de estilo no navegador (valor padrão).