Como começar

  • Revision slug: CSS/Como_começar
  • Revision title: Como começar
  • Revision id: 261266
  • Created:
  • Creator: Leandro Mercês Xavier
  • Is current revision? Não
  • コメント /* Tutorial Parte I */

Revision Content

Introdução

Este tutorial o introduz a CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).

Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes.

  • Parte I ilustra os recursos básicos de CSS que funcionam nos navegadores Mozilla e também na maioria dos navegadores modernos.
  • Parte II contém alguns exemplos de recursos especiais que funcionam no Mozilla, mas não necessariamente funcionam em outros ambientes.

Este tutorial é baseado na Especificação CSS 2.1.

Quem deve ler este tutorial?

Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.

Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.

Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.

Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.

O que você precisa antes de começar?

Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox ou Mozilla Suite). Você também deve saber como utilizá-los de um modo básico.

Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.

Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.

Nota:  A CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.

Como utilizar este tutorial

Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.

Em cada página, utilize a seção Informações para entender como a CSS funciona. Utilize a seção Ações para tentar usar a CSS em seu próprio computador.

Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.

Para se aprofundar em CSS, leia as informações nas caixas entituladas Mais detalhes. Utilize os links para localizar informações referentes a CSS.

Tutorial Parte I

Um guia passo-a-passo para CSS.

  1. O que é CSS
  2. Porque usar CSS
  3. Como o CSS trabalha
  4. Cascata e herança
  5. Seletores
  6. CSS legível
  7. Estilos de texto
  8. Cor
  9. Conteúdo
  10. Listas
  11. Caixas
  12. Disposição
  13. Tabelas
  14. Mídia

Tutorial Parte II

Exemplos que mostram o escopo da CSS no Mozilla.

  1. JavaScript
  2. XBL bindings
  3. Interfaces de usuário XUL
  4. Gráficos SVG
  5. Dados XML
{{ wiki.languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

Revision Source

<p>
</p>
<h3 name="Introdu.C3.A7.C3.A3o"> Introdução </h3>
<p>Este tutorial o introduz a CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).
</p><p>Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes.
</p>
<ul><li>Parte I ilustra os recursos básicos de CSS que funcionam nos navegadores Mozilla e também na maioria dos navegadores modernos.
</li></ul>
<ul><li>Parte II contém alguns exemplos de recursos especiais que funcionam no Mozilla, mas não necessariamente funcionam em outros ambientes.
</li></ul>
<p>Este tutorial é baseado na <a class="external" href="http://www.w3.org/TR/CSS21/">Especificação CSS 2.1</a>.
</p>
<h4 name="Quem_deve_ler_este_tutorial.3F"> Quem deve ler este tutorial? </h4>
<p>Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.
</p><p>Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.
</p><p>Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.
</p><p>Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.
</p>
<h4 name="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F"> O que você precisa antes de começar? </h4>
<p>Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox ou Mozilla Suite).  Você também deve saber como utilizá-los de um modo básico.
</p><p>Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.
</p><p>Poucas partes deste tutorial podem requerer outro software Mozilla.  Essas partes são opcionais.  Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.
</p><p><strong>Nota: </strong>
A CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores.
Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.
</p>
<h4 name="Como_utilizar_este_tutorial"> Como utilizar este tutorial </h4>
<p>Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência.
Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.
</p><p>Em cada página, utilize a seção <i>Informações</i> para entender como a CSS funciona.
Utilize a seção <i>Ações</i> para tentar usar a CSS em seu próprio computador.
</p><p>Para testar seus conhecimentos, faça o teste ao final de cada página.
As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.
</p><p>Para se aprofundar em CSS, leia as informações nas caixas entituladas <i>Mais detalhes</i>.
Utilize os links para localizar informações referentes a CSS.
</p>
<h3 name="Tutorial_Parte_I"> Tutorial Parte I </h3>
<p>Um guia passo-a-passo para CSS.
</p>
<ol><li><b><a href="pt/CSS/Como_come%c3%a7ar/O_que_%c3%a9_CSS">O que é CSS</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Porque_usar_CSS">Porque usar CSS</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Como_o_CSS_trabalha">Como o CSS trabalha</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Cascata_e_heran%c3%a7a">Cascata e herança</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Seletores">Seletores</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/CSS_leg%c3%advel">CSS legível</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Estilos_de_texto">Estilos de texto</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Cor">Cor</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Conte%c3%bado">Conteúdo</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Listas">Listas</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Caixas">Caixas</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Disposi%c3%a7%c3%a3o">Disposição</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/Tabelas">Tabelas</a></b>
</li><li><b><a href="pt/CSS/Como_come%c3%a7ar/M%c3%addia">Mídia</a></b>
</li></ol>
<h3 name="Tutorial_Parte_II"> Tutorial Parte II </h3>
<p>Exemplos que mostram o escopo da CSS no Mozilla.
</p>
<ol><li><b><a href="pt/CSS/Getting_Started/JavaScript">JavaScript</a></b>
</li><li><b><a href="pt/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b>
</li><li><b><a href="pt/CSS/Getting_Started/Interfaces_de_usu%c3%a1rio_XUL">Interfaces de usuário XUL</a></b>
</li><li><b><a href="pt/CSS/Getting_Started/Gr%c3%a1ficos_SVG">Gráficos SVG</a></b>
</li><li><b><a href="pt/CSS/Getting_Started/Dados_XML">Dados XML</a></b>
</li></ol>
{{ wiki.languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}
Revert to this revision