1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: CSS
slug: Web/CSS
tags:
- CSS
- Design
- Estilos
- Landing
- Layout
- Referencia
translation_of: Web/CSS
---
<div>{{CSSRef}}</div>
<p class="summary"><strong>CSS</strong> (<strong><em>Cascading Style Sheets</em> ou Folhas de Estilo em Cascata)</strong> é uma linguagem de <a href="/pt-BR/docs/Web/API/StyleSheet">estilo</a> usada para descrever a apresentação de um documento escrito em<a href="/pt-BR/HTML" title="HTML"> HTML</a> ou em <a href="/pt-BR/docs/Glossary/XML" title="XML">XML</a> (incluindo várias linguagens em XML como <a href="/pt-BR/SVG" title="SVG">SVG</a>, <a href="/pt-BR/docs/Web/MathML">MathML</a> ou <a href="/pt-BR/XHTML">XHTML</a>). O CSS descreve como elementos são mostrados na tela, no papel, na fala ou em outras mídias.</p>
<p>CSS é uma das principais linguagens da <strong>open web</strong> e é padronizada em navagadores web de acordo com as <a class="external" href="http://w3.org/Style/CSS/#specs">especificação da W3C</a>. Desenvolvido em níveis, o CSS1 está atualmente obsoleto, o CSS2.1 é uma recomendação e o <a href="/pt-BR/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, agora dividido em pequenos módulos, está progredindo para a sua padronização.</p>
<section id="sect1">
<ul class="card-grid">
<li><span>Introdução CSS</span>
<p>Se você é novo no desenvolvimento web, certifique-se de ler nosso artigo <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a> para aprender o que é CSS e como usá-lo.</p>
</li>
<li><span>Tutoriais CSS</span>
<p>Nossa <a href="/pt-BR/docs/Aprender/CSS">área de aprendizado CSS</a> contém diversos tutoriais para levá-lo do nível iniciante ao avançado, cobrindo todos os fundamentos.</p>
</li>
<li><span>Referências CSS</span>
<p>Nossa <a href="/pt-BR/docs/Web/CSS/CSS_Reference">extensa referência CSS</a> para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Tutoriais">Tutoriais</h2>
<p>Nossa <a href="/pt-BR/docs/Learn/CSS">área de aprendizado CSS</a> contempla múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.</p>
<p><strong><a href="/pt-BR/docs/Learn/CSS/First_steps">Introdução ao CSS</a></strong></p>
<p>Esse módulo inicia com o funcionamento básico do CSS, incluindo seletores e propriedades, escrever regras CSS, aplicar CSS ao HTML, como especificar comprimento, cor, e outras unidades em CSS, cascata e herança, o básico do modelo de caixas, e depuração de CSS.</p>
<p><strong><a href="/pt-BR/docs/Learn/CSS/Styling_text">Estilização do texto</a></strong></p>
<p>Esse módulo discute os fundamentos da estilização de textos, incluindo a definição de fontes, negritos, itálicos, linhas e espaçamentos de letras, sombras e outras propriedades de textos.</p>
<p><strong><a href="/pt-BR/docs/Learn/CSS/Building_blocks">Estilização de caixas</a></strong></p>
<p>Esse módulo foca na estilização de caixas, um dos passos fundamentais para o layout de uma página web. Nesse módulo nós recapitulamos o modelo de caixas, então abordamos o controle do layout das caixas definindo margens, bordas e preenchimento, cores de fundo customizadas, imagens e outras características extravagantes como sombras e filtros em caixas.</p>
<p><strong><a href="/pt-BR/docs/Learn/CSS/CSS_layout">Layout CSS</a></strong></p>
<p>Neste ponto nós já vimos os fundamentos do CSS, como estilizar texto e estilizar e manipular caixas que contém seu conteúdo. Agora veremos como posicionar suas caixas no lugar certo em relação à janela de exibição e um ao outro. Nós cobrimos os pré-requisitos necessários e agora você pode se aprofundar no layout do CSS com diferentes configurações de exibição, métodos tradicionais de layout envolvendo float e posicionamento, e modernas ferramentas para layout como flexbox.</p>
<h2 id="Referências">Referências</h2>
<ul>
<li><a href="/pt-BR/docs/Web/CSS/CSS_Reference">Referências CSS</a>: Essa extensa referência para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.</li>
<li>Conceitos chave do CSS:
<ul>
<li>A <a href="/pt-BR/docs/Web/CSS/sintaxe">sintaxe e formas da linguagem</a></li>
<li><a href="/pt-BR/docs/Web/CSS/Specificity">Especificidade</a>, <a href="/pt-BR/docs/Web/CSS/inheritance">herança</a> e <a href="/en-US/docs/Web/CSS/Cascade">cascata</a></li>
<li><a href="/pt-BR/docs/Web/CSS/box_model">Box model</a> e <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing">colapso de margem</a></li>
<li>O <a href="/en-US/docs/Web/CSS/Containing_block">containing block</a></li>
<li><a href="/pt-BR/docs/Web/Guide/CSS/Understanding_z_index/O_contexto_de_empilhamento">Empilhamento</a> e <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block-formatting context</a></li>
<li>Valores <a href="/pt-BR/docs/Web/CSS/valor_inicial">iniciais</a>, <a href="/pt-BR/docs/Web/CSS/valor_computado">computados</a>, <a href="/pt-BR/docs/Web/CSS/Valor_usado">usados</a> e <a href="/pt-BR/docs/Web/CSS/Valor_atual">reais</a></li>
<li><a href="/pt-BR/docs/Web/CSS/Shorthand_properties">Propriedades abreviadas do CSS</a></li>
<li><a href="/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
<li><a href="/pt-BR/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
<li><a href="/pt-BR/docs/Web/CSS/Media_Queries">Media queries</a></li>
</ul>
</li>
</ul>
</div>
<div class="section">
<h2 class="Tools" id="Livro_de_receitas">Livro de receitas</h2>
<p>O <a href="/pt-BR/docs/Web/CSS/Layout_cookbook">livro de receitas de layout CSS</a> tem como objetivo juntar receitas para padrões comuns de layout, coisas que você pode precisar para implementar em seus sites. Além de prover código você pode usá-lo como ponto de partida em seus projetos, essas receitas destacam as diferentes formas de utilização das especificações de layout e as escolhas que você pode fazer como desenvolvedor.</p>
<h2 class="Tools" id="Ferramentas_para_desenvolvimento_de_CSS">Ferramentas para desenvolvimento de CSS</h2>
<ul>
<li>Você pode usar o <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> para verificar se o seu CSS é válido. Essa é uma ferramenta indispensável de depuração.</li>
<li><a href="/pt-BR/docs/Tools">As Ferramentas do Firefox para desenvolvedores</a> permitem ver e editar o CSS de uma página ao vivo usando as ferramentas de <a href="/pt-BR/docs/Tools/Page_Inspector">Inspeção</a> e <a href="/pt-BR/docs/Tools/Style_Editor">Editor de Estilo</a>.</li>
<li><a class="link-https" href="https://addons.mozilla.org/pt-BR/firefox/addon/60">O complemento Web Developer</a> para Firefox também permite a observação e edição de CSS ao vivo dos sites visualizados.</li>
<li>A comunidade web criou várias outras<a href="/pt-BR/docs/Web/CSS/Tools"> pequenas ferramentas CSS</a> para você usar.</li>
</ul>
</div>
</div>
</section>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/pt-BR/docs/Web/Demos_of_open_web_technologies">CSS demos</a>: Inspire-se explorando criativos exemplos das mais recentes tecnologias CSS em ação.</li>
<li>Linguagens web nas quais o CSS é frequentemente aplicado: <a href="/pt-BR/docs/Web/HTML">HTML</a>, <a href="/pt-BR/docs/Web/SVG">SVG</a>, <a href="/pt-BR/docs/Web/MathML">MathML</a>, <a href="/pt-BR/docs/Web/XHTML">XHTML</a> e <a href="/pt-BR/docs/Glossary/XML">XML</a>.</li>
<li>Tecnologias Mozilla que usam extensivamente o CSS: <a href="/pt-BR/docs/XUL">XUL</a>, <a href="/pt-BR/docs/Extensions">complementos</a> e <a href="/pt-BR/Add-ons/Themes">temas</a> do <a href="/pt-BR/Firefox">Firefox</a> e <a href="/pt-BR/docs/Mozilla/Thunderbird">Thunderbird.</a></li>
</ul>
|
