Revision 776489 of CSS

<p><strong>CSS</strong> (<strong>Cascading Style Sheets</strong>) é uma linguagem de <a href="/en-US/docs/DOM/stylesheet">estilo</a> usada para descrever a apresentação de um documento escrito em<a href="/en/HTML" title="en/HTML"> HTML</a> ou em <a href="/en/XML" title="en/XML">XML</a> (incluindo várias linguagens em XML como <a href="/en/SVG" title="en/SVG">SVG</a> ou <a href="/en/XHTML" title="en/XHTML">XHTML</a>).</p>

<p>CSS é uma das linguagens núcleo da <em>open web</em> e tem sido padronizado pela <a class="external" href="https://w3.org/Style/CSS/#specs">Especificações da W3C</a>. Desenvolvido em níveis, o CSS1 está obsoleto, já o CSS2.1 é uma recomendação e o <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, dividido em pequenos módulos, está agora progredindo para a sua padronização. Atualmente, o nível 4 dos seletores CSS está em fase de rascunho.</p>

<div style="margin:auto;text-align:center">
<div class="callout-box action-driven" style="min-height:10em">
<h4>Referencias CSS</h4>

<p>Uma <a href="/pt-BR/docs/Web/CSS/Reference" title="en/CSS/CSS_Reference">referência</a> para <em>desenvolvedores Web</em>, que descreve as propriedades e os conceitos do CSS.</p>
</div>

<div class="callout-box action-driven" style="min-height:10em">
<h4>Tutorials css</h4>

<p>Uma <a href="/en/CSS/Getting_Started" title="en/CSS/Getting_Started">introdução passo-a-passo</a> para ajudar <em>iniciantes</em> a começar. Este provê todos os fundamentos necessários.</p>
</div>

<div class="callout-box action-driven" style="min-height:10em">
<h4>Demos CSS3</h4>

<p>Uma <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">coleção de demos</a> que mostra as últimas tecnologias do CSS em ação: um impulso para a criatividade</p>
</div>

<p>&nbsp;</p>
</div>

<table class="topicpage-table">
 <tbody>
  <tr>
   <td>
    <h3 id="Documentos_sobre_CSS">Documentos sobre CSS</h3>

    <dl>
     <dt>Conceitos chave CSS</dt>
     <dd>Descreve a <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">sintaxe da linguagem</a> e introduz fundamentos como <a href="/en/CSS/Specificity" title="Specificity">especificações</a> e <a href="/en/CSS/inheritance" title="inheritance">herança</a>,o <a href="/en/CSS/box_model" title="Box model">box model</a> e <a href="/en/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> e contextos <a href="/en/CSS/block_formatting_context" title="block formatting context">block-formatting</a>, os valores <a href="/en/CSS/initial_value" title="initial value">iniciais</a>, <a href="/en/CSS/computed_value" title="computed value">computados</a>, <a href="/en/CSS/used_value" title="used value">usados</a> e <a href="/en/CSS/actual_value" title="actual value">atuais</a>. Entidades como <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">CSS shorthand properties</a> também são definidas.</dd>
     <dt><a href="/en/CSS/Writing_Efficient_CSS" title="https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS">Escrevendo CSS eficiente</a></dt>
     <dd>Explica como o motor das folhas de estilo funciona, descrevendo regras para um CSS escrito de forma mais eficiente .</dd>
     <dt><a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using_CSS_transforms">Criando transformações em CSS</a></dt>
     <dd>Apresenta operações 2D que podem ser aplicados em cada elemento de forma a rotacionar, torcer entre outras transformações.</dd>
     <dt><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">Criando transições em CSS</a></dt>
     <dd>Define como mudar um aspecto de um elemento usando animações entre o estado inicial e o final.</dd>
     <dt><a href="/en/CSS/CSS_animations" title="en/CSS/CSS animations">Criando animações em CSS</a></dt>
     <dd>Descreve como definir animações de um elemento e também como&nbsp; <a href="/en/CSS/CSS_animations/Detecting_CSS_animation_support" title="https://developer.mozilla.org/en/CSS/CSS_animations/Detecting_CSS_animation_support">detect</a> em Javascript se o navegador suportar.</dd>
     <dt><a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">Criando gradientes em CSS</a></dt>
     <dd>Define como definir gradientes, imagens compostas de variações de cores.</dd>
     <dt><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/Using_the_CSS_multi-column_layout">Criando multi-column layouts em CSS</a></dt>
     <dd>Define como criar paginas multi colunasa em CSS</dd>
     <dt><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple_backgrounds">Criando multiplos backgrounds em CSS</a></dt>
     <dd>Descreve como definir vários backgrounds em um mesmo elemento.</dd>
     <dt><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Criando <em>media queries</em> em CSS</a></dt>
     <dd>Descreve como selecionar páginas de estilo baseadas nos dispositivos de renderização.</dd>
     <dt><a href="/en/CSS_Counters" title="CSS Counters">Criando contadores em CSS</a></dt>
     <dd>Define como usar contadores e numeradores automaticos, principalmente em listas.</dd>
     <dt>Fontes and Tipografia</dt>
     <dd>Informa sobre gerenciar suas <a href="/en/CSS/font" title="font">fontes</a> usando {{ cssxref("@font-face") }} e o formato <a href="/en/WOFF" title="https://developer.mozilla.org/en/About_WOFF">WOFF font</a>.</dd>
     <dt><a href="/en/CSS/Using_CSS_flexible_boxes" title="Using CSS multi-column layouts">Criando caixas flexíveis</a></dt>
     <dd>Descreve como criar caixas flexíveis no layout.</dd>
     <dt><a href="/en/Consistent_List_Indentation" title="en/Consistent_List_Indentation">Lista de Indentação Consistente</a></dt>
     <dd>Tentar mudar a identação das listas com CSS pode não ser tão fácil. Descubra como conseguir.</dd>
     <dt><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Criando estilos dinâmicos</a></dt>
     <dd>Como obter informação e manipular estilos via DOM.</dd>
    </dl>

    <p><span><a href="/Special:Tags?tag=CSS&amp;language=en" title="Special:Tags?tag=CSS&amp;language=en">Ver Tudo...</a></span></p>
   </td>
   <td>
    <h3 id="Community" name="Community">Receba ajuda da comunidade</h3>

    <p>Você precisa de ajuda com problemas relacionados à CSS e não consegue encontrar uma solução?</p>

    <ul>
     <li>Veja as <a href="/en/CSS/Common_CSS_Questions" title="en/CSS/Common_CSS_Questions">perguntas frequentes</a> que dão dicas sobre como resolver problemas de CSS</li>
     <li>Consulte o fótum de layout, o qual aborda HTML e CSS: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}</li>
    </ul>

    <ul>
     <li>Faça a sua pergunta no canal Mozilla IRC: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
     <li>Faça a sua perguta no <a class="external" href="https://www.css-discuss.org/">Fórum de discussão sobre CSS</a></li>
    </ul>

    <p><span class="alllinks"><a class="external" href="https://www.catb.org/~esr/faqs/smart-questions.html" title="https://www.catb.org/~esr/faqs/smart-questions.html">Não se esqueça da <em>netiquette</em>...</a></span></p>

    <h3 id="Tools" name="Tools">Ferramentas para facilitar o desenvolvimento css</h3>

    <ul>
     <li><span class="external">O </span><a class="external" href="https://jigsaw.w3.org/css-validator/">Serviço de validação do W3C para </a><span id="result_box" lang="pt"><span class="hps">verifica a validade do</span><span class="hps"> CSS</span>. <span class="hps">É uma</span> <span class="hps">ferramenta de depuração</span> <span class="hps">de valor inestimável.</span></span></li>
    </ul>

    <ul>
     <li>A <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">extensão Firebug</a><span class="external"> do firefox, é uma extensão bem popular</span> que permite a edição local ao vivo de estilos CSS em páginas web. <span id="result_box" lang="pt"><span class="hps">Muito prática</span> <span class="hps">para testar</span> <span class="hps">algumas mudanças</span><span> no estilo, embora</span> <span class="hps">esta extensão</span> <span class="hps">possa ir muito mais além</span></span>.</li>
     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> do Firefox também permite assistir e editar em tempo real CSS em sites visualizados. Mais simples que o Firebug, firmemente menos poderoso.</li>
     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> do Firefox permite editar CSS na barra lateral.</li>
    </ul>

    <p><span class="alllinks"><a href="/Special:Tags?tag=CSS:Tools&amp;language=en" title="Special:Tags?tag=CSS:Tools&amp;language=en">Ver todos...</a></span></p>

    <h3 id="Related_Topics" name="Related_Topics">Tópicos relacionados</h3>

    <ul>
     <li>Aprenda na Mozilla <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">Recursos CSS</a>.</li>
    </ul>

    <ul>
     <li>Linguagens Open Web no qual o CSS é aplicado: <a href="/en/HTML" title="en/HTML">HTML</a>, <a href="/en/SVG" title="SVG">SVG</a>, <a href="/en/XHTML" title="en/XHTML">XHTML</a>, <a href="/en/XML" title="en/XML">XML</a>.</li>
     <li>Tecnologias Mozilla que criam extensão para o uso do CSS: <a href="/en/XUL" title="en/XUL">XUL</a>, Firefox e Thunderbird <a href="/en/Extensions" title="en/Extensions">extensões</a> e <a href="/en/Themes" title="en/Themes">temas</a>.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>{{ languages( { "de": "de/docs/CSS", "es": "es/docs/CSS", "fr": "fr/docs/CSS", "it": "it/docs/CSS", "ja": "ja/docs/CSS", "ko": "ko/docs/CSS", "nl": "nl/docs/CSS", "pl": "pl/docs/CSS", "pt": "pt/docs/CSS", "zh-cn": "cn/docs/CSS", "zh-tw": "zh_tw/docs/CSS" } ) }}</p>