CSS

  • Revision slug: CSS
  • Revision title: CSS
  • Revision id: 293387
  • Criado:
  • Criador: fvargaspf@gmail.com
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

Cascading Style Sheets (CSS) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito emHTML ou em XML (incluindo várias linguagens em XML como SVG ou XHTML).

CSS é uma das linguagems núcleo da open web e tem sido padronizado pela W3C specification. Desenvolvido em níveis, CSS1 é agora obsoleto, o CSS2 é a versão que tem sido usada e CSS3 está agora progredindo para a sua padronização. Os primeiros rascunhos do CSS4 já estão sendo escritos.

Referencias CSS

Uma  referência para desenvolvedores Web que descreve as propriedades e os conceitos do CSS.

tUTORIAIS css

Uma introdução passo-a-passo para ajudar iniciantes a começar. Este provê todos os fundamentos necessários.

demos css3

Uma coleção de demos mostrando as ultimas tecnologias em CSS em ação

Documentos sobre CSS

Conceitos chave CSS
Descreve a sintaxe da linguagem e introduz fundamentos como especificações e herança,o box model e margin collapsing, stacking e contextos block-formatting, os valores iniciais, computados, usados e atuais. Entidades como CSS shorthand properties também são definidas.
Escrevendo CSS eficiente
Explica como o motor das folhas de estilo funciona, descrevendo regras para um CSS escrito de forma mais eficiente .
Criando transformações em CSS
Apresenta operações 2D que podem ser aplicados em cada elemento de forma a rotacionar, torcer entre outras transformações.
Criando transições em CSS
Define como mudar um aspecto de um elemento usando animações entre o estado inicial e o final.
Criando animações em CSS
Descreve como definir animações de um elemento e também como  detect em Javascript se o navegador suportar.
Criando gradientes em CSS
Define como definir gradientes, imagens compostas de variações de cores.
Criando multi-column layouts em CSS
Define como criar paginas multi colunasa em CSS
Criando multiplos backgrounds em CSS
Descreve como definir vários backgrounds em um mesmo elemento.
Criando media queries em CSS
Descreve como selecionar páginas de estilo baseadas nos dispositivos de renderização.
Criando contadores em CSS
Define como usar contadores e numeradores automaticos, principalmente em listas.
Fontes and Tipografia
Informa sobre gerenciar suas fontes usando {{ cssxref("@font-face") }} e o formato WOFF font.
Criando caixas flexíveis
Descreve como criar caixas flexíveis no layout.
Lista de Indentação Consistente
Tentar mudar a identação das listas com CSS pode não ser tão fácil. Descubra como conseguir.
Criando estilos dinâmicos
Como obter informação e manipular estilos via DOM.

Ver Tudo...

eReceba a ajuda da cominidade

Você precisa de ajuda em problemas relacionados comn CSS e não consegue encontrar uma solução?

  • Veja as perguntas frequentes que dão dicas sobre como resolver problemas de CSS
  • Consulte o fótum de layout, o qual aborda HTML e CSS: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

Não se esqueça da netiquette...

Ferramentas para facilitar o desenvolvimento css

  • A extensão Firebug do firefox, é uma extensão bem popular que permite a edição local ao vivo de estilos CSS em páginas web. Muito prática para testar algumas mudanças no estilo, embora esta extensão possa ir muito mais além.
  • Firefox' Web Developer extension also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.
  • Firefox' EditCSS extension allows editing CSS in the sidebar.

View All...

  • Open Web languages on which CSS is often applied: HTML, SVG, XHTML, XML.
  • Mozilla technologies which make extensive use of CSS: XUL, Firefox and Thunderbird extensions and themes.

{{ 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" } ) }}

Fonte da revisão

<p><strong>Cascading Style Sheets</strong> (<strong>CSS</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 linguagems núcleo da <em>open web</em> e tem sido padronizado pela <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Desenvolvido em níveis, CSS1 é agora obsoleto, o CSS2 é a versão que tem sido usada e <a href="/en/CSS/CSS3" title="CSS3">CSS3</a> está agora progredindo para a sua padronização. Os primeiros rascunhos do CSS4 já estão sendo escritos.</p>
<div style="margin:auto;text-align:center;">
  <div class="callout-box action-driven">
    <div>
      Referencias CSS</div>
    <p>Uma&nbsp; <a href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">referência</a> para <span style="text-decoration: underline;">desenvolvedores Web</span> que descreve as propriedades e os conceitos do CSS.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      tUTORIAIS css</div>
    <p>Uma <a href="/en/CSS/Getting_Started" title="en/CSS/Getting_Started">introdução passo-a-passo</a> para ajudar <u>iniciantes</u> a começar. Este provê todos os fundamentos necessários.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      demos css3</div>
    <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> mostrando as ultimas tecnologias em CSS em ação</p>
  </div>
</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">eReceba a ajuda da cominidade</h3>
        <p>Você precisa de ajuda em problemas relacionados comn 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="http://www.css-discuss.org/">Fórum de discussão sobre CSS</a></li>
        </ul>
        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://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="http://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><span class="external">Firefox' </span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.</li>
          <li><span class="external">Firefox' </span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> allows editing CSS in the sidebar.</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">View All...</a></span></p>
        <h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
        <ul>
          <li>Mozilla Learn <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">CSS resources</a>.</li>
        </ul>
        <ul>
          <li>Open Web languages on which CSS is often applied: <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>Mozilla technologies which make extensive use of CSS: <a href="/en/XUL" title="en/XUL">XUL</a>, Firefox and Thunderbird <a href="/en/Extensions" title="en/Extensions">extensions</a> and <a href="/en/Themes" title="en/Themes">themes</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>
Reverter para esta revisão