Primeiros passos (Tutorial CSS)

 

Introdução

Esse tutorial o introduz ao Cascading Style Sheets (CSS) e aos seus recursos básicos com exemplos práticos os quais você mesmo pode tentar no seu próprio computador e está dividido em duas partes:

  • A Parte I ilustra as características padrões do CSS que funcionam em todos os browsers Mozilla e também em qualquer outro dentre os mais modernos.
  • A Parte II conta com alguns exemplos de características especiais que funcionam em Mozilla mas não necessariamente em outros ambientes.

Esse tutorial é baseado na Especificação do CSS 2.1.

Quem deve usar esse tutorial?

Esse tutorial é, principalmente, para iniciantes no CSS.

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que você já conhece, focando apenas no que o interessa.

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

O que você precisa saber antes de começar?

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um browser Mozilla(Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

Se você não quiser trabalhar com arquivos então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

Algumas partes desse tutorial exigem outro software Mozilla mas elas são opcionais. Se você não quiser fazer o download desse outro software Mozilla você pode ignora-las. Este software referenciado por esse tutorial inclui:

Nota: CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes você vai precisar de um monitor colorido e visão colorida normal.

Como usar esse tutorial

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você precisa olha-las caso não queira.

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda "Mais detalhes"(More details). Utilize os links para encontrar informações de referência sobre o CSS.

Parte I do Tutorial

Uma guia básico passo-a-passo do CSS

  1. O que é CSS
  2. Porque usar CSS
  3. Como o CSS funciona
  4. Cascata e Herança
  5. Seletores
  6. CSS legível
  7. Estilos de Texto
  8. Cores
  9. Conteúdo
  10. Listas
  11. Caixas
  12. Layout
  13. Tabelas
  14. Mídia

Parte II do Tutorial

Examples that show the scope of CSS used with other web and Mozilla technologies.

  1. JavaScript
  2. Gráficos SVG
  3. Dados XML
  4. Ligações XBL
  5. Interfaces de Usuário XUL

Document Tags and Contributors

Contributors to this page: eduardocastro, netfuzzer55, ethertank
Última atualização por: ethertank,