unslug pt-br: move

46 files changed, 946 insertions, 1421 deletions

diff --git a/files/pt-br/web/css/-moz-cell/index.html b/files/pt-br/web/css/-moz-cell/index.html
deleted file mode 100644
index 6e5b44d286..0000000000
--- a/files/pt-br/web/css/-moz-cell/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: '-moz-cell'
-slug: Web/CSS/-moz-cell
-translation_of: Web/CSS/cursor
-translation_of_original: Web/CSS/-moz-cell
----
-<div>{{CSSRef}} {{deprecated_header}}</div>
-
-<p><em>Não use esse valor! </em>Use o valor <code>cursor</code> {{cssxref("cursor#cell","cell")}} em seu lugar.</p>
diff --git a/files/pt-br/web/css/valor_atual/index.html b/files/pt-br/web/css/actual_value/index.html
index b7f9307a58..b7f9307a58 100644
--- a/files/pt-br/web/css/valor_atual/index.html
+++ b/files/pt-br/web/css/actual_value/index.html
diff --git a/files/pt-br/web/css/seletor_de_atributos/index.html b/files/pt-br/web/css/attribute_selectors/index.html
index 88881a61ea..88881a61ea 100644
--- a/files/pt-br/web/css/seletor_de_atributos/index.html
+++ b/files/pt-br/web/css/attribute_selectors/index.html
diff --git a/files/pt-br/web/css/-moz-box-ordinal-group/index.html b/files/pt-br/web/css/box-ordinal-group/index.html
index 3c3963b7e6..3c3963b7e6 100644
--- a/files/pt-br/web/css/-moz-box-ordinal-group/index.html
+++ b/files/pt-br/web/css/box-ordinal-group/index.html
diff --git a/files/pt-br/web/css/comentário/index.html b/files/pt-br/web/css/comments/index.html
index dabb46a04f..dabb46a04f 100644
--- a/files/pt-br/web/css/comentário/index.html
+++ b/files/pt-br/web/css/comments/index.html
diff --git a/files/pt-br/web/css/valor_computado/index.html b/files/pt-br/web/css/computed_value/index.html
index a4932b8d40..a4932b8d40 100644
--- a/files/pt-br/web/css/valor_computado/index.html
+++ b/files/pt-br/web/css/computed_value/index.html
diff --git a/files/pt-br/web/css/css_animations/usando_animações_css/index.html b/files/pt-br/web/css/css_animations/using_css_animations/index.html
index 4bdd91ad9f..4bdd91ad9f 100644
--- a/files/pt-br/web/css/css_animations/usando_animações_css/index.html
+++ b/files/pt-br/web/css/css_animations/using_css_animations/index.html
diff --git a/files/pt-br/web/css/tools/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html
index d350bce6b5..d350bce6b5 100644
--- a/files/pt-br/web/css/tools/border-image_generator/index.html
+++ b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html
diff --git a/files/pt-br/web/css/tools/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html
index a7db08eb69..a7db08eb69 100644
--- a/files/pt-br/web/css/tools/border-radius_generator/index.html
+++ b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html
diff --git a/files/pt-br/web/css/css_background_and_borders/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/index.html
index 59c2117194..59c2117194 100644
--- a/files/pt-br/web/css/css_background_and_borders/index.html
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/index.html
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
new file mode 100644
index 0000000000..d7c3ccfa3f
--- /dev/null
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
@@ -0,0 +1,109 @@
+---
+title: Alterando a escala das imagens de background
+slug: Web/Guide/CSS/Scaling_background_images
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images
+---
+<p><span class="seoSummary">A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real.</span> Você pode tanto aumentar como diminuir a imagem.</p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Duplicando uma imagem grande</h2>
+
+<p>Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p>
+
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Isto pode ser conseguido</span> <span class="hps">usando</span> <span class="hps">o</span> <span class="hps">seguinte</span> <span class="hps">CSS</span></span>:</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas <span id="result_box" lang="pt"><span class="hps">você pode</span> <span class="hps">considerar a adição de</span> <span class="hps">uma versão</span> <span class="hps">pré-fixada</span> <span class="hps">se você</span> <span class="hps">está focando em </span><span class="hps">browsers</span> <span class="hps">muito antigos.</span></span></p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">Esticando uma imagem</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Você também pode especificar</span> <span class="hps">ambos</span> <span class="hps">os</span> <span class="hps">tamanhos,</span> <span class="hps">horizontal e vertical</span> <span class="hps">da imagem,</span> <span class="hps">assim</span><span>:</span></span></p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>O resultado fica assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up"><span class="short_text" id="result_box" lang="pt"><span class="hps">Aumentando escala de uma</span> <span class="hps">imagem</span></span></h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Na outra extremidade</span> <span class="hps">do espectro</span><span>, é possível</span> <span class="hps">dimensionar</span><span>-se</span> <span class="hps">uma imagem</span> <span class="hps">no</span> <span class="hps">fundo</span><span>.</span> <span class="hps">Aqui nós</span> aumentamos a escala de <span class="hps">um</span> <span class="hps">favicon</span> <span class="hps">de pixel</span> <span class="hps">32x32</span> para <span class="hps">300x300</span> <span class="hps">pixels</span><span>:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Como você pode ver</span><span>, o</span> <span class="hps">CSS</span> <span class="hps">é, na verdade</span><span>, essencialmente</span> <span class="hps">idêntico, salvo</span> <span class="hps">o nome do</span> <span class="hps">arquivo de imagem.</span></span></p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Valores especiais: "contain" e "cover"</h2>
+
+<p>Da mesma maneira que o {{cssxref("&lt;length&gt;")}}, a <span id="result_box" lang="pt"><span class="hps">propriedade</span> <span class="hps">CSS</span> de </span>{{ cssxref("background-size") }} <span id="result_box" lang="pt"><span class="hps">oferece dois</span> <span class="hps">valores de tamanho</span> <span class="hps">especial,</span> contain <span class="hps">e</span> cover<span class="hps">.</span> <span class="hps">Vamos dar uma</span> <span class="hps">olhada nestes</span><span>.</span></span></p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> contain <span class="hps">especifica</span> <span class="hps">que, independentemente</span> <span class="hps">do</span> <span class="hps">tamanho</span> <span class="hps">da caixa que contém</span><span>,</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve</span> <span class="hps">ser</span> <span class="hps">dimensionado</span> <span class="hps">de modo a que</span> <span class="hps">cada</span> <span class="hps">lado</span> <span class="hps">seja tão grande quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">que não exceda</span> <span class="hps">o</span> <span class="hps">comprimento do lado</span> <span class="hps">correspondente do recipiente</span><span>.</span> <span class="hps">Tente redimensionar</span> <span class="hps">a janela</span> <span class="hps">usando um navegador que</span> <span class="hps">suporta</span> <span class="hps">imagens de fundo</span> <span class="hps">de escala</span> <span class="hps">(como o</span> <span class="hps">Firefox 3.6</span> <span class="hps">ou posterior) para</span> <span class="hps">ver isso em ação</span> <span class="hps">no exemplo</span> <span class="hps">vivo</span> <span class="hps">abaixo.</span></span></p>
+
+<figure>
+<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Tente redimensionar a janela e ver o que acontece.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> cover <span class="hps">especifica</span> <span class="hps">que</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve ser dimensionado</span> <span class="hps">de modo que seja</span> <span class="hps">tão pequena quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">assegurar</span> <span class="hps">que ambas as dimensões</span> <span class="hps">são maiores</span> <span class="hps">do que</span> <span class="hps">ou igual</span> <span class="hps">à dimensão</span> <span class="hps">correspondente do recipiente</span><span>.</span></span></p>
+
+<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure>
+
+<p>Os exemplos à seguir usam HTML &amp; CSS:</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Tente redimensionar a janela e ver o que acontece.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="See_also" name="See_also">Veja Também</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+</ul>
diff --git a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
index d0e4fa11f7..d0e4fa11f7 100644
--- a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
diff --git a/files/pt-br/web/css/box_model/index.html b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html
index 8c0db35cf6..8c0db35cf6 100644
--- a/files/pt-br/web/css/box_model/index.html
+++ b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html
diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
index cb658d4131..cb658d4131 100644
--- a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html
+++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
diff --git a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html b/files/pt-br/web/css/css_colors/color_picker_tool/index.html
index a98aaf9342..a98aaf9342 100644
--- a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html
+++ b/files/pt-br/web/css/css_colors/color_picker_tool/index.html
diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
index 05318caa79..05318caa79 100644
--- a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html
+++ b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
diff --git a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html
index e14ba15c2d..e14ba15c2d 100644
--- a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html
+++ b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html
diff --git a/files/pt-br/web/css/css_positioning/understanding_z_index/index.html b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..488ca0f600
--- /dev/null
+++ b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,48 @@
+---
+title: Understanding CSS z-index
+slug: Web/Guide/CSS/Understanding_z_index
+tags:
+  - CSS
+  - Entendendo_CSS_z-index
+  - Guía
+  - Web
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.</p>
+
+<blockquote>
+<p style=""><em>Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.</em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao <em>render</em> normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.</p>
+
+<p>Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de <em>stacking</em>. Uma sessão dedicada foi  reservada na especificação do CSS  <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> para explicar melhor essas regras.</p>
+
+<p>Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.</p>
+
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Regras padrões de empilhamento</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : Como lidar com elementos que usam <em>float</em></li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Usando index-z para mudar o empilhamento padrão</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notas sobre contexto do empilhamento</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarquia, z-index no último <em>level</em></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarquia, z-index em todos os <em>levels</em></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarquia, z-index no segundo <em>level</em></li>
+</ol>
+
+<p><small><em>Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.</em> </small></p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/web/css/seletores_css/index.html b/files/pt-br/web/css/css_selectors/index.html
index 644d9d87e9..644d9d87e9 100644
--- a/files/pt-br/web/css/seletores_css/index.html
+++ b/files/pt-br/web/css/css_selectors/index.html
diff --git a/files/pt-br/web/css/css_tipos/index.html b/files/pt-br/web/css/css_types/index.html
index 79256061ae..79256061ae 100644
--- a/files/pt-br/web/css/css_tipos/index.html
+++ b/files/pt-br/web/css/css_types/index.html
diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html
deleted file mode 100644
index 7880e00f6d..0000000000
--- a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: Cascata e herança
-slug: Web/CSS/Getting_Started/Cascading_and_inheritance
-tags:
-  - Guía
-  - Iniciante
-translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
-translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">Primeiros Passos (Tutorial CSS)</a>; Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.</span></p>
-
-<h2 class="clearLeft" id="Informação_Cascata_e_Herança">Informação: Cascata e Herança</h2>
-
-<p>O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.</p>
-
-<p>Existem três fontes principais de estilos que constituem a cascata. São elas:</p>
-
-<ul>
- <li>Os estilos padrões do navegador;</li>
- <li>Os estilos especificados pelos usarios que estão lendo o documento;</li>
- <li>Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais:
-  <ul>
-   <li>Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos</li>
-   <li>No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.</li>
-   <li>Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.</li>
-  </ul>
- </li>
-</ul>
-
-<p>O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-
-<p>Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.</p>
-
-<p>Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo <code>userContent.css</code> do seu navegador.</p>
-
-<p>Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.</p>
-</div>
-
-<p>Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.</p>
-
-<p>Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).</p>
-
-<p>Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.</p>
-
-<p>Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.</p>
-
-<p>Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.</p>
-
-<p>Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.</p>
-
-<p>Mais detalhes</p>
-
-<div class="tuto_details">
-<p>CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. </p>
-
-<p>Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.</p>
-
-<p>Se você quiser saber todos os detalhes da cascata e herança, consulte  <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na especificação do CSS</p>
-</div>
-
-<h2 id="Ação_Usando_herança">Ação: Usando herança</h2>
-
-<ol>
- <li>Edite o seu arquivo CSS.</li>
- <li>Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element:
-  <pre class="brush:css">p {color: blue; text-decoration: underline;}
-</pre>
- </li>
- <li>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.<br>
-
-  <p>Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.</p>
- </li>
-</ol>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
-</table>
-
-<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
- <caption>Antes</caption>
- <tbody>
-  <tr>
-   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <caption>Depois</caption>
- <tbody>
-  <tr>
-   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type">Desafio</div>
-Mude o seu estilo de modo que somente as letras vermelhas sublinhadas:
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
-
-<pre class="brush: css">p {color: blue; }
-strong {color: red; text-decoration: underline;}
-</pre>
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução do desafio.</a></div>
-
-<h2 id="Qual_o_próximo">Qual o próximo?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, &lt;p&gt; e &lt;strong&gt;, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a>.</p>
diff --git a/files/pt-br/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html
deleted file mode 100644
index 2ead5ccae7..0000000000
--- a/files/pt-br/web/css/getting_started/como_css_funciona/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Como o CSS funciona
-slug: Web/CSS/Getting_Started/Como_CSS_funciona
-tags:
-  - 'CSS:PrimeirosPassos'
-  - Guía
-  - Iniciante
-  - Web
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. </span></p>
-
-<h2 class="clearLeft" id="Informação_Como_o_CSS_funciona">Informação: Como o CSS funciona</h2>
-
-<p>Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:</p>
-
-<ol>
- <li>O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.</li>
- <li>O navegador exibe o conteúdo do DOM.</li>
-</ol>
-
-<p>Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando <em>tags</em>, que são sequências que começam com '&lt;' e terminam com '&gt;'. A maioria dos elementos possui <em>tags </em>emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '&lt;' e '&gt;'. Para a tag final, coloque um '/' depois do '&lt;' e antes do nome do elemento.</p>
-
-<p>Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.</p>
-
-<p>O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.</p>
-
-<p>Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-No seu documento de exemplo, a tag &lt;p&gt;  e seu final &lt;/p&gt; criam um recipiente:
-
-<pre class="brush:html">&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;
-</pre>
-
-<h2 id="Exemplo_em_tempo_real">Exemplo em tempo real</h2>
-
-<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
-
-<p>No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós '<em>strongs</em>' e os nós de texto. Os nós <em>'strong'</em>  são eles próprios pais, com nós de texto como filhos.</p>
-
-<pre><span style="color: black;">P</span>
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">C</span>"
-├─"<span style="color: black;">ascading</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-├─"<span style="color: black;">tyle</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-└─"<span style="color: black;">heets</span>"</pre>
-</div>
-
-<h2 id="Ação_Analisando_um_DOM">Ação: Analisando um DOM</h2>
-
-<h3 id="Utilizando_Inspetor_DOM">Utilizando Inspetor DOM</h3>
-
-<p>Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on <a href="/en/DOM_Inspector" title="en/DOM_Inspector">Inspetor DOM</a> do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).</p>
-
-<ol>
- <li>Use seu navegador Mozilla para abrir seu documento HTML de exemplo.</li>
- <li>Na barra de menu do seu navegador, escolha <strong>Ferramentas  &gt; Inspetor DOM</strong>, ou <strong>Ferramentas &gt; Desenvolvimento Web &gt; Inspetor DOM</strong>.
-  <div class="tuto_details">
-  <div class="tuto_type">Mais detalhes</div>
-
-  <p>Se o seu navegador Mozilla não ter o DOMi, você pode <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalá-lo a partir do site de Add-ons </a> e reiniciar seu navegador.  Depois, retorne para esse tutorial.</p>
-
-  <p>Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.</p>
-  </div>
- </li>
- <li>No DOMi, expanda o nó do seu documento clicando em suas flechas.
-  <p><strong>Nota: </strong> Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.</p>
-
-  <p>Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:</p>
-
-  <pre>│ ▼╴<span style="color: black;">P</span>
-│ │ │ ▼╴<span style="color: black;">STRONG</span>
-│ │ └<span style="color: darkblue;">#text</span>
-│ ├╴<span style="color: darkblue;">#text</span>
-│ ►╴<span style="color: black;">STRONG</span>
-│ │</pre>
-
-  <p>Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.</p>
-
-  <p>Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.</p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Desafio</div>
-
-<p>No DOMi, clique em um nó <em><strong><small>STRONG</small></strong></em>.</p>
-
-<p>Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.</p>
-
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para o desafio.</a></div>
-
-<h3 id="Usando_Raio-X_Goggles_da_Web">Usando Raio-X Goggles da Web</h3>
-
-<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web </a>exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.</p>
-
-<ol>
- <li>Vá para a página inicial do <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web</a>.</li>
- <li>Arraste o link do <em>bookmarklet </em>na página para a barra de ferramentas do seu navegador.</li>
- <li>Abra o seu documento HTML de exemplo.</li>
- <li>Ative o Raio-X Goggles da Web clicando no <em>bookmarklet </em>na sua barra de ferramentas.</li>
- <li>Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.</li>
-</ol>
-
-<h2 id="O_que_vem_depois">O que vem depois?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">próxima página</a> explica mais sobre essas interações.</p>
diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html
deleted file mode 100644
index 389962ab07..0000000000
--- a/files/pt-br/web/css/getting_started/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Iniciando com o CSS
-slug: Web/CSS/Getting_Started
-tags:
-  - CSS
-  - Guia(2)
-  - Guía
-  - Iniciante
-  - Web
-translation_of: Learn/CSS/First_steps
-translation_of_original: Web/Guide/CSS/Getting_started
----
-<p> </p>
-
-<h2 id="Introdução">Introdução</h2>
-
-<p>Esse tutorial é uma introdução ao <em>Cascading Style Sheets</em> (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:</p>
-
-<ul>
- <li>A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.</li>
-</ul>
-
-<ul>
- <li>A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.</li>
-</ul>
-
-<p>Esse tutorial é baseado na <a href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificação do CSS 2.1</a>.</p>
-
-<h3 id="Quem_deve_usar_esse_tutorial">Quem deve usar esse tutorial?</h3>
-
-<p>Esse tutorial é, principalmente, para iniciantes no CSS.</p>
-
-<p>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.</p>
-
-<p>Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.</p>
-
-<p>Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.</p>
-
-<h3 id="O_que_você_precisa_saber_antes_de_começar">O que você precisa saber antes de começar?</h3>
-
-<p>Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.</p>
-
-<p>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.</p>
-
-<p>Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, <strong>você pode ignorá-las</strong>. O software referenciado por esse tutorial inclui:</p>
-
-<ul>
- <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
-</ul>
-
-<p><strong>Nota: </strong>O 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.</p>
-
-<h3 id="Como_usar_esse_tutorial">Como usar esse tutorial</h3>
-
-<p>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.</p>
-
-<p>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.</p>
-
-<p>Para testar seu entendimento, faça o desafio do fim de cada página. <strong>Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.</strong></p>
-
-<p>Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda <em>Mais detalhes</em> (<em>More details</em>). Utilize os links para encontrar informações de referência sobre o CSS.</p>
-
-<h2 id="Parte_I_do_Tutorial">Parte I do Tutorial</h2>
-
-<p>Uma guia básico passo a passo do CSS</p>
-
-<ol>
- <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">O que é o CSS</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Porque usar o CSS</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como o CSS funciona</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascata e herança</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Seletores</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">CSS legível</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Estilos de texto</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Cores</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Conteúdo</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Listas</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Caixas</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tabelas</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Mídia</a></strong></li>
-</ol>
-
-<h2 id="Parte_II_do_Tutorial">Parte II do Tutorial</h2>
-
-<p>Exemplos do uso do CSS juntamente com outras tecnologias</p>
-
-<ol>
- <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Gráficos SVG</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dados XML</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Ligações XBL</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfaces de usuário XUL</a></strong></li>
-</ol>
-
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "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", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html
deleted file mode 100644
index 544deb8960..0000000000
--- a/files/pt-br/web/css/getting_started/javascript/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: JavaScript e CSS
-slug: Web/CSS/Getting_Started/JavaScript
-translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
-translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
----
-<p>{{ CSSTutorialTOC() }}</p>
-<p>Esta é a pirmeira sessão da Parte II do <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">Tutorial de CSS</a>. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.</p>
-<p>Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.</p>
-<p>Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.</p>
-<p>Sessão Anterior (da Parte I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br>
-  Próxima sessão: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
-<h3 id="Information:_JavaScript" name="Information:_JavaScript">Informação: JavaScript</h3>
-<p>JavaScript é um <em>programming language</em>. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.</p>
-<p>JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica</p>
-<p>Há três formas de fazer isso:</p>
-<ul>
-  <li>Trabalhando com lista de documentos de stylesheets—por exemplo: adicionando, removendo ou adicionando uma stylesheet.</li>
-  <li>Trabalhando com as regras em uma stylesheet—por exemplo: adicionando, removendo ou modificando uma regra.</li>
-  <li>Trabalhando com um documento individual na DOM—modificando seu estilo independentemente do stylesheetsdo documento.</li>
-</ul>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
-  <caption>
-    Mais detalhes</caption>
-  <tbody>
-    <tr>
-      <td>Para mais informações sobre JavaScript, veja a página <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> nesta wiki.</td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">Ação: Uma demonstração de  JavaScript</h3>
-<p>Faça um novo documento em HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:</p>
-<div style="width: 48em;">
-  <pre class="brush:html;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-
-&lt;head&gt;
-&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
-&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
-&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;h1&gt;JavaScript sample&lt;/h1&gt;
-
-&lt;div id="square"&gt;&lt;/div&gt;
-
-&lt;button type="button" onclick="doDemo(this);"&gt;Click Me&lt;/button&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-<p>Crie um novo arquivo  CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p>
-<div style="width: 48em;">
-  <pre class="brush:css;">/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-</pre>
-</div>
-<p>Crie um novo arquivo de texto, <code>script5.js</code>. Coie e cole o conteúdo daqui:</p>
-<div style="width: 48em;">
-  <pre class="brush:js;">// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "#fa4";
-  button.setAttribute("disabled", "true");
-  setTimeout(clearDemo, 2000, button);
-}
-
-function clearDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "transparent";
-  button.removeAttribute("disabled");
-}
-</pre>
-</div>
-<p>Abra o documento no seu Browser e pressione o botão.</p>
-<p>Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:</p>
-<table>
-  <tbody>
-    <tr>
-      <td style="padding-right: 2em;">
-        <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-          <tbody>
-            <tr>
-              <td>
-                <p><strong>JavaScript demonstration</strong></p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-      <td>
-        <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-          <tbody>
-            <tr>
-              <td>
-                <p><strong>JavaScript demonstration</strong></p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<div class="note">
-  <strong>Notas importantes </strong>sobre esta demonstração:
-  <ul>
-    <li>Os links do documento HTML document linca a como usual, e também linca o script.</li>
-    <li>O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.</li>
-    <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li>
-    <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade CSS<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">background-color</code><span style="line-height: 1.5em;">. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.</span></li>
-    <li>Seu browser tem uma regra built-in CSS para<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">button{{ mediawiki.external('disabled=\"true\"') }}</code><span style="line-height: 1.5em;"> ela muda a aparência dos botões quando está disabilitado.</span></li>
-  </ul>
-</div>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
-  <caption>
-    Desafio</caption>
-  <tbody>
-    <tr>
-      <td>
-        <p>Mude o script e então o <span style="line-height: inherit;">square salta para a direita em 20 em quando muda as cores, e salta de volta depois.</span></p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veja a solução deste desafio.</a></p>
-<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">O que vem agora?</span></p>
-<p>Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Di</a>scussão.</p>
-<p>Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras <span style="line-height: inherit;">stylesheets) para selecionar elementos. A próxima página demonstra isso: </span><strong style="line-height: inherit;"><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>
diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html
deleted file mode 100644
index 72dc8dc227..0000000000
--- a/files/pt-br/web/css/getting_started/lists/index.html
+++ /dev/null
@@ -1,272 +0,0 @@
----
-title: Manipulando Listas
-slug: Web/CSS/Getting_Started/Lists
-translation_of: Learn/CSS/Styling_text/Styling_lists
-translation_of_original: Web/Guide/CSS/Getting_started/Lists
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}</p>
-
-<p><font><font>Este é o 10º seção do </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="EN-US / docs / Web / Guia / CSS / Introdução"><font><font>CSS Introdução</font></font></a><font><font> tutorial; </font><font>ele descreve como você pode usar CSS para especificar o aparecimento de listas. </font><font>Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.</font></font></p>
-
-<h2 class="clearLeft" id="Informação_Lists"><font><font>Informação: Lists</font></font></h2>
-
-<p><font><font>Se você aceitou o desafio na </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/ en-US / docs / Web / Guia / CSS / Getting_Started / Conteúdo"><font><font>última </font></font></a><font><font>seção, </font><font>em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.</font></font></p>
-
-<p><font><font>CSS proporciona propriedades especiais que são projetados para listas. </font><font>Geralmente é mais conveniente usar estas propriedades sempre que puder.</font></font></p>
-
-<p><font><font>Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.</font></font></p>
-
-<p><font><font>O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.</font></font></p>
-
-<h3 id="Listas_não_ordenadas"><font><font>Listas não ordenadas</font></font></h3>
-
-<p><font><font>Em uma lista </font></font><em><font><font>desordenada</font></font></em><font><font>, cada item da lista é marcado da mesma forma.</font></font></p>
-
-<p><font><font>CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:</font></font></p>
-
-<ul style="padding-left: 2em;">
- <li style="list-style-type: disc;"><code><font><font>disc</font></font></code></li>
- <li style="list-style-type: circle;"><code><font><font>circle</font></font></code></li>
- <li style="list-style-type: square;"><code><font><font>square</font></font></code></li>
-</ul>
-
-<p style="list-style-type: square;">        none</p>
-
-<p><font><font>Alternativamente, você pode especificar o URL de uma imagem.</font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Exemplo</font></font></div>
-
-<p><font><font>Essas regras especificam diferentes marcadores para diferentes classes de item da lista:</font></font></p>
-
-<pre class="brush:css"><font><font>li.open {list-style: circle;} </font></font><font><font>
-li.closed {list-style: disc;}</font></font>
-</pre>
-
-<p><font><font>Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):</font></font></p>
-
-<pre class="brush: html"><font><font>&lt;ul&gt; </font></font><font><font>
-  &lt;li class="open"&gt; Lorem ipsum &lt;/ li&gt; </font></font><font><font>
-  &lt;li class="closed"&gt; dolor sit &lt;/ li&gt;
-  &lt;li class="closed"&gt; Amet consectetuer &lt;/ li&gt;
-  &lt;li class="open"&gt; Magna aliquam &lt;/ li&gt;
-  &lt;li class="closed"&gt; Autem veleum &lt;/ li&gt;
-&lt;/ ul&gt;</font></font>
-</pre>
-
-<p><font><font>O resultado pode parecer:</font></font></p>
-
-<p><font><font>{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}</font></font></p>
-</div>
-
-<h3 id="Listas_ordenadas"><font><font>Listas ordenadas</font></font></h3>
-
-<p><font><font>Em uma lista<em>ordenada</em></font></font><font><font> , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.</font></font></p>
-
-<p><font><font>Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:</font></font></p>
-
-<ul style="padding-left: 2em;">
- <li><code>decimal</code></li>
- <li><code>lower-roman</code></li>
- <li><code>upper-roman</code></li>
- <li><code>lower-latin</code></li>
- <li><code>upper-latin</code></li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Exemplo</font></font></div>
-
-<p><font><font>Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe </font></font><code><font><font>informações, os itens são identificados com letras maiúsculas.</font></font></code></p>
-
-<pre><code>&lt;ol class="info"&gt;
-  &lt;li&gt;Lorem ipsum&lt;/li&gt;
-  &lt;li&gt;Dolor sit&lt;/li&gt;
-  &lt;li&gt;Amet consectetuer&lt;/li&gt;
-  &lt;li&gt;Magna aliquam&lt;/li&gt;
-  &lt;li&gt;Autem veleum&lt;/li&gt;
-&lt;/ol&gt;</code></pre>
-
-<pre class="brush:css"><font><font>ol.info {list-style: upper-latin;}
-</font></font></pre>
-
-<p><font><font>O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:</font></font></p>
-
-<p><font><font>{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}</font></font></p>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
-
-<p><font><font>O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. </font><font>Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. </font><font>Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.</font></font></p>
-
-<p><font><font>Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. </font><font>No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.</font></font></p>
-
-<p><font><font>Browsers diferem na maneira de implementar os estilos para listas. </font><font>Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</font></font></p>
-</div>
-
-<h3 id="Contadores"><font><font>Contadores</font></font></h3>
-
-<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
-<p><strong><font><font>Nota: </font></font></strong><font><font> Alguns navegadores não suportam contadores. </font><font>O </font></font><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html"><font><font>conteúdo CSS e compatibilidade do navegador</font></font></a><font><font> página no </font></font><a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/"><font><font>site de modo Quirks</font></font></a><font><font> contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. </font><font>Páginas individuais na </font></font><a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference"><font><font>referência CSS</font></font></a><font><font> neste local também têm tabelas de compatibilidade do navegador.</font></font></p>
-</div>
-
-<p><font><font>Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. </font><font>Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</font></font></p>
-
-<p><font><font>Para especificar a numeração, você precisa de um </font></font><em><font><font>contador</font></font></em><font><font> com um nome que você especificar.</font></font></p>
-
-<p><font><font>Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. </font><font>O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.</font></font></p>
-
-<p><font><font>Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.</font></font></p>
-
-<p><font><font>Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o </font></font><code><font><font>conteúdo</font></font></code><font><font> da propriedade (como você fez na página anterior, </font><font>Conteúdo) </font><font>.</font></font></p>
-
-<p><font><font>No valor do </font></font><code><font><font>conteúdo</font></font></code><font><font> de propriedade, especifique </font></font><code><font><font>counter ()</font></font></code><font><font> com o nome de seu contador. </font><font>Opcionalmente especifique um tipo. </font><font>Os tipos são os mesmos que na </font></font><strong><font><font>lista ordenada</font></font></strong><font><font> secção acima.</font></font></p>
-
-<p><font><font>Normalmente, o elemento que apresenta o contador também incrementa-lo.</font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Exemplo</font></font></div>
-
-<p><font><font>Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe </font><font>numeradas:</font></font></p>
-
-<pre class="brush:css"><font><font>h3.numbered {counter-reset: mynum;}
-</font></font></pre>
-
-<p> </p>
-
-<p><font><font>Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe </font><font>numeradas:</font></font></p>
-
-<pre class="brush: html"><font><font>&lt;p class = "numbered"&gt; Lorem ipsum &lt;/ p&gt;
-&lt;p class = "numbered"&gt; dolor sit &lt;/ p&gt;
-&lt;p class = "numbered"&gt; Amet consectetuer &lt;/ p&gt;
-&lt;p class = "numbered"&gt; Magna aliquam &lt;/ p&gt;
-&lt;p class = "numbered"&gt; Autem veleum &lt;/ p&gt;</font></font>
-</pre>
-
-<pre class="brush:css"><font><font>body </font></font><font><font>
-   {counter-reset: </font></font><font><font>
-mynum;} </font></font><font><font>
-p.numbered:before
-  {content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}</font></font>
-</pre>
-
-<p><font><font>O resultado se parece com isso:</font></font></p>
-
-<p><font><font>{{ EmbedLiveSample("Contadores", '300', '200', '') }}</font></font></p>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
-
-<p><font><font>Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.</font></font></p>
-
-<p><font><font>Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. </font><font>No exemplo acima, os contadores estão em negrito mas os itens da lista não são.</font></font></p>
-
-<p><font><font>Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. </font><font>Para mais detalhes, consulte </font></font><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters"><font><font>contadores automáticos e numeração</font></font></a><font><font> em CSS Specification.</font></font></p>
-</div>
-
-<h2 id="Listas_denominadas_Ação"><font><font>Listas denominadas: Ação</font></font></h2>
-
-<p><font><font>Crie um novo documento HTML, </font><font>doc2.html. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
-
-<pre class="brush:html;"><font><font>&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Sample document 2&lt;/title&gt;
-    &lt;link rel="stylesheet" href="style2.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-
-    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Arctic&lt;/li&gt;
-      &lt;li&gt;Atlantic&lt;/li&gt;
-      &lt;li&gt;Pacific&lt;/li&gt;
-      &lt;li&gt;Indian&lt;/li&gt;
-      &lt;li&gt;Southern&lt;/li&gt;
-    &lt;/ul&gt;
-
-    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
-    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
-    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
-    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
-    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
-    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</font></font>
-
-</pre>
-
-<p><font><font>Faça uma nova folha de estilo, </font><font>style2.css. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
-
-<pre class="brush:css;"><font><font>/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}</font></font>
-</pre>
-
-<p><font><font>Se o layout e comentário não são a seu gosto, alterá-los.</font></font></p>
-
-<p><font><font>Abra o documento no seu browser. </font><font>Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. </font><font>Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):</font></font></p>
-
-<p><font><font>{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}</font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Desafios</font></font></div>
-
-<p><font><font>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:</font></font></p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
- <tbody>
-  <tr>
-   <td>
-    <p><strong>The oceans</strong></p>
-
-    <ul>
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<p><font><font>Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:</font></font></p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
- <tbody>
-  <tr>
-   <td>
-    <p><strong>(A) The oceans</strong></p>
-
-    <p><strong>. . .</strong></p>
-
-    <p><strong>(B) Numbered paragraphs</strong></p>
-
-    <p><strong>. . .</strong></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="EN-US / docs / Web / Guia / CSS / Introdução / desafio soluções # Lists"><font><font>Ver soluções para esses desafios.</font></font></a></p>
-
-<h2 id="Qual_o_proximo"><font><font>Qual o proximo?</font></font></h2>
-
-<p><font><font>{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. </font><font>A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, </font><font>caixas.</font></font></p>
diff --git a/files/pt-br/web/css/getting_started/oque_&eacute;_css/index.html b/files/pt-br/web/css/getting_started/oque_&eacute;_css/index.html
deleted file mode 100644
index 1ccc04f0ce..0000000000
--- a/files/pt-br/web/css/getting_started/oque_&eacute;_css/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: O que é CSS
-slug: Web/CSS/Getting_Started/Oque_&eacute;_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de <span class="seoSummary"> i<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">ntrodução as CSS </a> e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.</span></p>
-
-<h2 class="clearLeft" id="O_que_é_CSS">O que é CSS ?</h2>
-
-<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).</p>
-
-<p>Um <em>documento</em> é um conjunto de informações que são estruturadas utilizando uma <em>linguagem de marcação</em>.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Examples</div>
-
-<ul>
- <li>Um documento, é uma página da web como esta que você está lendo.<br>
-  A informação que você vê em uma página web  é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language).</li>
- <li>Dialogos, também chamados de Janelas Modais de um aplicativo,  são frequentemente documentos.<br>
-  Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.</li>
-</ul>
-</div>
-
-<p>Neste tutorial, temos boxes com o título <strong>Mais detalhes c</strong>omo o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.</p>
-
-<p>Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.</p>
-
-<p>Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:</p>
-
-<table style="background-color: inherit; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td><a href="/en/HTML" title="en/HTML">HTML</a></td>
-   <td>para paginas web</td>
-  </tr>
-  <tr>
-   <td><a href="/en/XML" title="en/XML">XML</a></td>
-   <td>para documentos estruturados em geral</td>
-  </tr>
-  <tr>
-   <td><a href="/en/SVG" title="en/SVG">SVG</a></td>
-   <td>para gráficos</td>
-  </tr>
-  <tr>
-   <td><a href="/en/XUL" title="en/XUL">XUL</a></td>
-   <td>para interfaces de usuários em Mozilla</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p>
-</div>
-
-<p><em>Apresentar</em> um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de <em>user agent</em> (UA), no Brasil <span style="background-color: rgb(244, 244, 244);"><em>agente de usuário</em></span>. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.</p>
-
-<p>Para mais definições formais sobre  terminologia relacionadas com CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definições</a> na especificação CSS.</p>
-</div>
-
-<h2 id="Ação_Criando_um_documento">Ação: Criando um documento</h2>
-
-<ol>
- <li>Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.</li>
- <li>Copie e cole o código HTML abaixo . Salve o arquivo usando o nome <code>doc1.html</code>
-  <pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Documento de exemplo&lt;/title&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar.
-  <p>Você deve ver o texto  com as letras iniciais em negrito, como este:</p>
-
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p>O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.</p>
- </li>
-</ol>
-
-<h2 id="O_que_veremos_depois">O que veremos depois?</h2>
-
-<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na <a href="/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">próxima seção</a> você usará CSS para especificar o estilo.</p>
diff --git a/files/pt-br/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html
deleted file mode 100644
index 453aa4c966..0000000000
--- a/files/pt-br/web/css/getting_started/porque_usar_css/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Por que usar CSS?
-slug: Web/CSS/Getting_Started/Porque_usar_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
----
-<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary">Esta segunda parte do  <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.</span></p>
-
-<h2 class="clearLeft" id="Informação_Por_que_usar_CSS">Informação: Por que usar CSS?</h2>
-
-<p>As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag &lt;head&gt; do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag &lt;head&gt; de seu documento.</p>
-
-<p>Uma folha de estilo externa, tem muitas vantagens.:</p>
-
-<ul>
- <li>Ajuda a evitar código repetido</li>
- <li>Facilita a manutenção</li>
- <li>Permite fazer mudança no site inteiro alterando apenas um arquivo.</li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-
-<p>Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..</p>
-
-<p>Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.</p>
-
-<p>Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.</p>
-</div>
-
-<p>Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.</p>
-
-<p>Por exemplo, você pode usar a tag &lt;b&gt; para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag &lt;body&gt;.</p>
-
-<p>Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.</p>
-</div>
-
-<h2 id="Ação_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2>
-
-<ol>
- <li><span id="result_box" lang="pt"><span class="hps">Crie outro</span> <span class="hps">arquivo de texto</span> <span class="hps">no mesmo</span> <span class="hps">diretório que o documento</span> <span class="hps">doc1.html</span> <span class="hps">você criou</span> <span class="hps">na primeira seção</span><span>.</span></span></li>
- <li>Salve seu documento como: <code>style1.css</code>. Este arquivo será sua folha de estilos.</li>
- <li>Em seu CSS, cole a linha abaixo, e salve o arquivo:
-  <pre class="brush: css">strong {color: red;}
-</pre>
- </li>
-</ol>
-
-<h3 id="Linkando_seu_documento_para_sua_folha_de_estilo">Linkando seu documento para sua folha de estilo</h3>
-
-<ol>
- <li>Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo:
-  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Documento Simples com CSS&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas:
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p>
-
-<div class="tuto_example" id="challenge">
-<div class="tuto_type">Desafio</div>
-
-<p>Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.</p>
-
-<p>Encontre mais cinco nomes de cores que as CSS trabalham.</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para este desafio.</a></div>
-
-<h2 id="O_que_veremos">O que veremos?</h2>
-
-<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">aprender mais</a> sobre como seu navegador trabalha e exibe um documento.</p>
diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html
deleted file mode 100644
index 3870c68936..0000000000
--- a/files/pt-br/web/css/getting_started/seletores/index.html
+++ /dev/null
@@ -1,430 +0,0 @@
----
-title: Seletores
-slug: Web/CSS/Getting_Started/Seletores
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.</span></p>
-
-<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2>
-
-<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p>
-
-<pre class="brush: css">strong {
-  color: red;
-}
-</pre>
-
-<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>A parte dentro das chaves é a <em>declaração</em>.</p>
-
-<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p>
-
-<p>O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.</p>
-
-<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p>
-</div>
-
-<p>Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.</p>
-
-<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p>
-
-<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
-
-<h3 id="Seletores_com_Classe">Seletores com Classe</h3>
-
-<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.</p>
-
-<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p>
-
-<h3 id="Seletores_com_ID">Seletores com ID</h3>
-
-<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p>
-
-<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>:
-
-<pre class="brush: html">&lt;p class="chave" id="principal"&gt;
-</pre>
-
-<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p>
-
-<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p>
-
-<pre class="brush: css">.chave {
-  color: green;
-}
-</pre>
-
-<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p>
-
-<pre class="brush: css">#principal {
-  font-weight: bolder;
-}
-</pre>
-</div>
-
-<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3>
-
-<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:</p>
-
-<dl>
- <dt><code>[disabled]</code></dt>
- <dd>Seleciona todos os elementos com o atributo "disabled".</dd>
- <dt><code>[type='button']</code></dt>
- <dd>Seleciona todos os elementos do tipo "button".</dd>
- <dt><code>[class~=key]</code></dt>
- <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd>
- <dt><code>[lang|=es]</code></dt>
- <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd>
- <dt>[title*="example" i]</dt>
- <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd>
- <dt><code>a[href^="https://"]</code></dt>
- <dd>Seleciona links seguros.</dd>
- <dt><code>img[src$=".png"]</code></dt>
- <dd>IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.</dd>
-</dl>
-
-<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3>
-
-<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p>
-
-<p>Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Syntax</div>
-
-<pre class="brush:css">selector:pseudo-class {
-  property: value;
-}
-</pre>
-</div>
-
-<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4>
-
-<ul>
- <li>{{ Cssxref(":link") }}</li>
- <li>{{ Cssxref(":visited") }}</li>
- <li>{{ Cssxref(":active") }}</li>
- <li>{{ Cssxref(":hover") }}</li>
- <li>{{ Cssxref(":focus") }}</li>
- <li>{{ Cssxref(":first-child") }}</li>
- <li>{{ Cssxref(":last-child") }}</li>
- <li>{{ Cssxref(":nth-child") }}</li>
- <li>{{ Cssxref(":nth-last-child") }}</li>
- <li>{{ Cssxref(":nth-of-type") }}</li>
- <li>{{ Cssxref(":first-of-type") }}</li>
- <li>{{ Cssxref(":last-of-type") }}</li>
- <li>{{ Cssxref(":empty") }}</li>
- <li>{{ Cssxref(":target") }}</li>
- <li>{{ Cssxref(":checked") }}</li>
- <li>{{ Cssxref(":enabled") }}</li>
- <li>{{ Cssxref(":disabled") }}</li>
-</ul>
-
-<h2 id="Informação_Especificidade">Informação: Especificidade</h2>
-
-<p>Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p>
-</div>
-
-<p>Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.</p>
-
-<p>Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.</p>
-
-<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2>
-
-<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p>
-
-<table id="relselectors">
- <caption>Common selectors based on relationships</caption>
- <tbody>
-  <tr>
-   <td style="width: 10em;"><strong>Selector</strong></td>
-   <td><strong>Selects</strong></td>
-  </tr>
-  <tr>
-   <td><code>A E</code></td>
-   <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td>
-  </tr>
-  <tr>
-   <td><code>A &gt; E</code></td>
-   <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td>
-  </tr>
-  <tr>
-   <td><code>E:first-child</code></td>
-   <td>Any E element that is the <em>first child</em> of its parent</td>
-  </tr>
-  <tr>
-   <td><code>B + E</code></td>
-   <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td>
-  </tr>
- </tbody>
-</table>
-
-<p>You can combine these to express complex relationships.</p>
-
-<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Example</div>
-
-<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p>
-
-<pre class="brush: html">&lt;table id="data-table-1"&gt;
-...
-&lt;tr&gt;
-&lt;td&gt;Prefix&lt;/td&gt;
-&lt;td&gt;0001&lt;/td&gt;
-&lt;td&gt;default&lt;/td&gt;
-&lt;/tr&gt;
-...
-</pre>
-
-<p>These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:</p>
-
-<pre class="brush:css">    #data-table-1 td:first-child {text-decoration: underline;}
-    #data-table-1 td:first-child + td {text-decoration: line-through;}
-</pre>
-
-<p>The result looks like:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <table style="margin-right: 2em; width: 18em;">
-     <tbody>
-      <tr>
-       <td><u>Prefix</u></td>
-       <td><s>0001</s></td>
-       <td>default</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">More details</div>
-
-<p>In the usual way, if you make a selector more specific, then you increase its priority.</p>
-
-<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p>
-
-<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p>
-
-<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p>
-</div>
-
-<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2>
-
-<ol>
- <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li>
- <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again:
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p id="first"&gt;
-      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-    &lt;p id="second"&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Now edit your CSS file. Replace the entire contents with:
-  <pre class="brush:css">strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-</pre>
- </li>
- <li>Save the files and refresh your browser to see the result:
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p>You can try rearranging the lines in your CSS file to show that the order has no effect.</p>
-
-  <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p>
-
-  <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Challenges</div>
-
-<ol>
- <li>Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue:
-  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too:
-  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<ol>
- <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
-
-  <pre class="brush: css">#second { color: blue; }
-</pre>
-  A more specific selector, <code>p#second</code> also works.</li>
- <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
-  <pre class="brush: css">p { color: blue; }
-</pre>
- </li>
-</ol>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
-
-<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2>
-
-<ol>
- <li>Create an HTML file with following content:
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Now edit your CSS file. Replace the entire contents with:
-  <pre class="brush: css">a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-</pre>
- </li>
- <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect):
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2>
-
-<p>With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p>
-
-<pre class="brush: css">div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover &gt; ul {
-  display: block;
-}</pre>
-
-<p>to be applied to an HTML structure like the following:</p>
-
-<pre class="brush: html">&lt;div class="menu-bar"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
-      &lt;ul&gt;
-        &lt;li&gt;
-          &lt;a href="example.html"&gt;Link&lt;/a&gt;
-        &lt;/li&gt;
-        &lt;li&gt;
-          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-          &lt;ul&gt;
-            &lt;li&gt;
-              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-              &lt;ul&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-              &lt;/ul&gt;
-            &lt;/li&gt;
-            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-          &lt;/ul&gt;
-        &lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p>
-
-<h2 id="What_next">What next?</h2>
-
-<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/pt-br/web/css/hifens/index.html b/files/pt-br/web/css/hyphens/index.html
index c8e718562f..c8e718562f 100644
--- a/files/pt-br/web/css/hifens/index.html
+++ b/files/pt-br/web/css/hyphens/index.html
diff --git a/files/pt-br/web/css/imagem/index.html b/files/pt-br/web/css/image/index.html
index fe9631cb30..fe9631cb30 100644
--- a/files/pt-br/web/css/imagem/index.html
+++ b/files/pt-br/web/css/image/index.html
diff --git a/files/pt-br/web/css/valor_inicial/index.html b/files/pt-br/web/css/initial_value/index.html
index fea27bfe3c..fea27bfe3c 100644
--- a/files/pt-br/web/css/valor_inicial/index.html
+++ b/files/pt-br/web/css/initial_value/index.html
diff --git a/files/pt-br/web/css/modelo_layout/index.html b/files/pt-br/web/css/layout_mode/index.html
index 883cdbd4a4..883cdbd4a4 100644
--- a/files/pt-br/web/css/modelo_layout/index.html
+++ b/files/pt-br/web/css/layout_mode/index.html
diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html
new file mode 100644
index 0000000000..4b7f7f52d5
--- /dev/null
+++ b/files/pt-br/web/css/mask/index.html
@@ -0,0 +1,150 @@
+---
+title: mask
+slug: mask
+tags:
+  - CSS
+  - Compatibilidade Mobile
+  - Internet
+  - Layout
+  - Referencia
+  - SVG
+  - Web
+  - máscaras
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">A propriedade</span> <span class="hps">máscara</span> <span class="alt-edited hps">no</span> <span class="hps">CSS</span> <span class="hps">permite aos usuários</span> alterarem <span class="hps">a visibilidade de</span> <span class="hps">um item</span> <span class="hps">parcialmente ou</span> <span class="hps">totalmente</span> <span class="hps">escondendo o</span> <span class="hps">item.</span> <span class="alt-edited hps">Isso é obtido</span> <span class="hps">por qualquer</span> <span class="hps">mascaramento</span> <span class="hps">ou</span> <span class="hps">cortes na imagem</span> <span class="hps">em pontos específicos</span><span>.</span></span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush:css">/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.</p>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: css">.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td><span id="result_box" lang="pt"><span class="hps">Estende-se</span> <span class="hps">a sua utilização</span> <span class="hps">para</span> <span class="hps">elementos HTML</span><span>.</span><br>
+    <span class="hps">Estende</span> <span class="hps">sua sintaxe</span><span>, tornando-a</span> <span class="hps">uma simplificação para</span> <span class="hps">as novas</span> <span class="hps">propriedades</span> <span class="hps">da </span></span><code>mask-*</code> <span id="result_box" lang="pt"><span class="hps">definidos nessa</span> <span class="hps">especificação.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico (para o SVG)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [*]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Aplica-se a</span> <span class="hps">elementos</span> <span class="hps">HTML</span></span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} [*]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, <span class="short_text" id="result_box" lang="pt"><span class="hps">o espaço de cor</span> <span class="hps">padrão</span> <span class="hps">ao manusear</span> <span class="hps">máscaras é</span> <span class="hps">sRGB</span></span>; anteriormente, o padrão <span class="short_text" id="result_box" lang="pt"><span class="hps">(</span><span class="alt-edited hps">suportado apenas</span> <span class="hps">espaço de cor</span></span>) era linearRGB. <span id="result_box" lang="pt"><span class="hps">Isso muda</span> <span class="hps">a aparência de</span> <span class="hps">efeitos de máscara</span><span>, mas</span> <span class="hps">traz</span> o <span class="hps">Gecko</span> <span class="hps">em</span> <span class="hps">conformidade</span> <span class="hps">com a segunda edição</span> <span class="hps">da especificação</span> <span class="hps">SVG</span> <span class="hps">1.1.</span></span></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Aplicanto efeitos SVG no conteúdo HTML</a></li>
+ <li><a href="/en-US/docs/SVG">SVG</a></li>
+</ul>
diff --git a/files/pt-br/web/css/media_queries/using_media_queries/index.html b/files/pt-br/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..4b9728eebd
--- /dev/null
+++ b/files/pt-br/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,639 @@
+---
+title: Usando Media Queries
+slug: Web/Guide/CSS/CSS_Media_queries
+tags:
+  - CSS
+  - Desenho Responsivo
+  - Design Responsivo
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<p>Uma <strong>media query</strong> consiste de um <em>media type </em>e pelo menos uma expressão que limita o escopo das folhas de estilo usando <em>media features</em>, tal como largura, altura e cor. <em>Media queries</em>, adicionadas no<span class="seoSummary"> <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, </span>deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p><em>Media queries</em> consistem de um <em><a href="en-US/docs/Web/CSS/@media">media type</a></em> e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em <em>media features</em>, que determinam ou verdadeiro ou falso. Os resultados da <em>query</em> são verdadeiros se o <em>media type</em> especificado na <em>media query</em> corresponde ao tipo do documento exibido no dispositivo e todas as expressões na <em>media query</em> são verdadeiras.</p>
+
+<pre class="brush: html">&lt;!-- CSS media query em um elemento de link --&gt;
+&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+&lt;!-- CSS media query dentro de um stylesheet --&gt;
+
+&lt;style&gt;
+@media (max-width: 600px)
+{
+  .facet_sidebar
+   {
+    display: none;
+   }
+}
+&lt;/style&gt;</pre>
+
+<p>Quando uma <em>media query</em> é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com <em>media queries</em> ligadas a tag &lt;link&gt; <a href="http://scottjehl.github.com/CSS-Download-Tests/">vão fazer download</a> mesmo se suas <em>medias queries</em> retornarem falso (eles não se aplicam, no entanto).</p>
+
+<p>A menos que você use os operadores <code>not</code> ou <code>only</code>, o <em>media type</em> é opcional e o tipo <code>all</code> será implícito.</p>
+
+<h3 id="Operadores_lógicos">Operadores lógicos</h3>
+
+<p>Você pode compor <em>media queries</em> complexos usando operadores lógicos, incluindo <code>not</code>, <code>and</code>, e <code>only</code>. O operador <code>and</code> é usado para combinar múltiplas <em><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries$edit#Media_features">media features</a></em> em uma mesma <em>media query</em>, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a <em>query</em> seja verdadeiro. O operador <code>not</code> é usado para negar uma <em>media query</em> inteira. O operador <code>only</code> é usado para aplicar um estilo apenas se a <em>query</em> inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores <code>not</code> ou <code>only</code>, você tem que especificar um tipo de <em>media</em> explícito.</p>
+
+<p>Você também pode combinar múltiplas <em>medias queries</em> em uma  lista separadas por vírgulas, se qualquer uma das <em>media queries</em> na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador <code>or</code>.</p>
+
+<h4 id="and"><strong>and</strong></h4>
+
+<p>A palavra-chave <code>and</code> é usada para combinar múltiplas <em>media features</em>, bem como combinar <em>media features</em> com <em>media types</em>. Uma <em>media query</em> básica, uma<em> media feature</em> simples com a <em>media type</em> <code>all</code>, pode parecer com isso:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador <code>and</code> para deixar todas as <em>media features</em> juntas.</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Agora, a <em>media query</em> acima vai apenas retorna verdadeira se o viewport for 700px, <em>wide</em> ou <em>wider</em> e a tela estiver em <em>landscape</em>. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for <em>media type</em> TV, você pode encadear essas <em>features</em> com a <em>media type</em> usando o operador <code>and</code>.</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Agora, a <em>media query</em> acima vai ser aplicada apenas se a <em>media type</em> for TV, o <em>viewport</em> for 700px <em>wide</em> ou <em>wider</em>, e a tela estiver em paisagem.</p>
+
+<h4 id="Listas_separadas_por_vírgula">Listas separadas por vírgula</h4>
+
+<p>Listas separadas por vírgulas comportam-se como o operador <code>or</code> quando utilizadas em <em>media queries</em>. Quando utilizamos <em>media queries</em> com uma lista separada por vírgulas, se qualquer <em>media queries</em> retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada <em>media query</em> em um lista separa por vírgulas é tratada como uma <em>query</em> individual, e qualquer operador aplica em uma <em>media query</em> não afeta os outros. Isto significa que <em>media queries</em> separadas por vírgulas podem ter objetivos diferentes de <em>media</em> <em>features</em>, <em>types</em> e <em>states</em>.</p>
+
+<p>Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Acima, se eu estivesse em um dispositivo <code>screen</code> com um <em>viewport</em> largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como <code>@media all and (min-width: 700px)</code> será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo <code>screen</code> iria falhar no <em>media type</em> <code>handheld</code> na segunda <em>media query</em>. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um <em>viewport</em> de largura de 500px, enquanto a primeira media query falha devido a largura do <em>viewport</em>, a segunda <em>media query</em> teria sucesso e assim o <em>media statement</em> retorna verdadeiro.</p>
+
+<h4 id="not">not</h4>
+
+<p>A palavra chave <code>not</code> se aplica em toda a <em>media query</em> e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um <code>min-width: 700px</code> recurso consultado). Um not vai apenas negar a <em>media query</em> que é aplicada, de modo não toda a <em>media query</em> que apresente uma <em>media querie</em> com uma lista separada por vírgulas. A palavra chave <code>not</code> não pode ser usada para negar uma característica individual da <em>query</em>, apenas uma <em>media query</em> inteira. Por exemplo, o <code>not</code> é avaliado por último na <em>query</em> seguinte:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>Isto significa que a <em>query</em> é avaliada assim:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... em vez disso:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>Um outro exemplo, veja a <em>media query</em> seguinte:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>É avalida desta forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">A palavra chave </span><em><code style="font-size: 14px;">only</code></em><span style="line-height: 21px;"> previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF">Pseudo-BNF</h3>
+
+<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p><em>Media queries</em> são <em>case insensitive</em>.  <em>Media queries</em> envolvidas em <em>media types</em> desconhecidos serão sempre falsas.</p>
+
+<div class="note"><strong>Nota:</strong> Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.</div>
+
+<h2 id="Características_de_mídia">Características de mídia</h2>
+
+<p>A maioria das <em>media features</em> podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “&lt;” e “&gt;” , que entrem em conflito com HTML e XML. Se você usar uma <em>media feature</em> sem especificar um valor, a expressão retorna verdadeiro, se o valor da <em>feature</em> for diferente de zero.</p>
+
+<div class="note"><strong>Nota:</strong> Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.</div>
+
+<h3 id="cor">cor</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.</p>
+
+<div class="note"><strong>Nota:</strong> Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.</div>
+
+<h4 id="Exemplos">Exemplos</h4>
+
+<p>Aplicar uma folha de estilo a todos dispositivos:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> Sim</p>
+
+<p>Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.</p>
+
+<h4 id="Exemplos_2">Exemplos</h4>
+
+<p>Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).</p>
+
+<h4 id="Exemplo">Exemplo</h4>
+
+<p>A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).</p>
+
+<h4 id="Exemplo_2">Exemplo</h4>
+
+<p>A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).</p>
+
+<h4 id="Exemplo_3">Exemplo</h4>
+
+<p>Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" /&gt;
+</pre>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).</p>
+
+<h4 id="Exemplo_4">Exemplo</h4>
+
+<p>Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:</p>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> todas<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.</p>
+
+<h4 id="Exemplo_5">Exemplo</h4>
+
+<p>Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Nota:</strong>  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> yes</p>
+
+<p>A característica <code>height</code> descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).</p>
+
+<div class="note"><strong>Nota:</strong> Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features <code>width</code> e <code>height</code>.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.</p>
+
+<h4 id="Exemplos_3">Exemplos</h4>
+
+<p>Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Valor:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Indica se o <em>viewport</em> é modo <em>landscape</em> (o visor é mais largo do que mais alto) ou <em>portrait</em> (o visor é mais alto do que mais largo).</p>
+
+<h4 id="Exemplo_6">Exemplo</h4>
+
+<p>Para aplicar a folha de estilo apenas em orientação <em>portrait</em>:</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<div class="note"><strong>Nota: </strong>Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.</div>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).</p>
+
+<h4 id="Exemplos_4">Exemplos</h4>
+
+<p>Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Valor:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/TV")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Descreve o processo de digitalização de dispositivos saída de televisão.</p>
+
+<h4 id="Exemplo_7">Exemplo</h4>
+
+<p>Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>A <em>media feature</em> <code>width </code>descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).</p>
+
+<p><strong>Nota:</strong><br>
+ Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em <em>media queries </em>usando media features <code>width</code> e <code>height</code>.</p>
+
+<h4 id="Exemplos_5">Exemplos</h4>
+
+<p>Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa <em>query</em>:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>Essa <em>media query </em>especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>Essa <em>query </em>especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+</pre>
+
+<h2 id="Especificação_da_Mozilla_para_mídias_características">Especificação da Mozilla para mídias características</h2>
+
+<p>Mozilla oferece várias <em>media features</em> para específicos <em>Gecko</em> . Algumas dessas podem ser sugeridas como <em>media features</em> oficiais.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong>no</p>
+
+<p>Se o usuário tenha configurado seu dispositivo para usar a aparência <em>"Graphite"</em> no <em>Mac OS X</em>, o valor é 1. Se o usuário está usando a aparência padrão <em>blue</em>, ou não está num <em>Mac OS X</em>, o valor é 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se o usuário está usando <em>Maemo </em>com o tema original, o valor é 1; Se está usando o mais novo tema <em>Fremantle</em>, o valor é 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&amp;16") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Dar o número de pixels do dispositivo por pixels do CSS.</p>
+
+<div class="geckoVersionNote">
+<p><strong>Não use este recurso. </strong></p>
+
+<p>Em vez disso, use o recurso <em><code>resolution</code></em> com a unidade <code>dppx</code>.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e <code>-webkit-device-pixel-ratio</code> com navegadores baseados no WebKit que não suportam <code>dppx</code>.</p>
+
+<p>Exemplo:</p>
+
+<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
+       (min-resolution: 2dppx),             /* Forma padrão */
+       (min-resolution: 192dpi)             /* dppx fallback */ </pre>
+
+<p>Veja este artigo <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG</a> para ccompatibilidade de boas práticas em relação a <em><code>resolution</code></em> e <em><code>dppx</code></em>.</p>
+</div>
+
+<div class="note"><strong>Nota</strong>: Esta <em>media feature</em> é também implementada pelo Webkit e pelo <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 para Windows Phone 8.1</a>como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Os prefixos min e max implementados pelo Gecko são nomeados <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> e <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; mas os mesmos prefixos implementados pelo Webkit são chamados <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> e <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Valor:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+</ul>
+
+<p>Isto é fornecido pelas <em>skins das aplicações</em> e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<h4 id="Exemplo_8">Exemplo</h4>
+
+<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Valor:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>Isto é previsto para <em>skins</em> de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.</p>
+
+<h2 id="Compatibilidade_no_navegador">Compatibilidade no navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome("21") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>{{ CompatOpera("9") }}</td>
+   <td>{{ CompatSafari("4") }}</td>
+  </tr>
+  <tr>
+   <td>Grade</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Resolução</td>
+   <td>{{ CompatChrome("29") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("&lt;integer&gt;")}} values;<br>
+    {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Scan</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
+ <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
+ <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li>
+</ul>
diff --git a/files/pt-br/web/css/word-wrap/index.html b/files/pt-br/web/css/overflow-wrap/index.html
index c23f4b966d..c23f4b966d 100644
--- a/files/pt-br/web/css/word-wrap/index.html
+++ b/files/pt-br/web/css/overflow-wrap/index.html
diff --git a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html
index 273c7765e3..273c7765e3 100644
--- a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html
+++ b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html
diff --git a/files/pt-br/web/css/pseudo-elementos/index.html b/files/pt-br/web/css/pseudo-elements/index.html
index a457c9ac9a..a457c9ac9a 100644
--- a/files/pt-br/web/css/pseudo-elementos/index.html
+++ b/files/pt-br/web/css/pseudo-elements/index.html
diff --git a/files/pt-br/web/css/css_reference/index.html b/files/pt-br/web/css/reference/index.html
index 1afbf4890e..1afbf4890e 100644
--- a/files/pt-br/web/css/css_reference/index.html
+++ b/files/pt-br/web/css/reference/index.html
diff --git a/files/pt-br/web/css/elemento_substituido/index.html b/files/pt-br/web/css/replaced_element/index.html
index 22ba1b8ad0..22ba1b8ad0 100644
--- a/files/pt-br/web/css/elemento_substituido/index.html
+++ b/files/pt-br/web/css/replaced_element/index.html
diff --git a/files/pt-br/web/css/valor_resolvido/index.html b/files/pt-br/web/css/resolved_value/index.html
index a045149bc7..a045149bc7 100644
--- a/files/pt-br/web/css/valor_resolvido/index.html
+++ b/files/pt-br/web/css/resolved_value/index.html
diff --git a/files/pt-br/web/css/valor_espeficifco/index.html b/files/pt-br/web/css/specified_value/index.html
index 939aa09234..939aa09234 100644
--- a/files/pt-br/web/css/valor_espeficifco/index.html
+++ b/files/pt-br/web/css/specified_value/index.html
diff --git a/files/pt-br/web/css/sintaxe/index.html b/files/pt-br/web/css/syntax/index.html
index 4d6ff0bf1c..4d6ff0bf1c 100644
--- a/files/pt-br/web/css/sintaxe/index.html
+++ b/files/pt-br/web/css/syntax/index.html
diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/universal_selectors/index.html
index 15e64a08ca..15e64a08ca 100644
--- a/files/pt-br/web/css/seletor_universal/index.html
+++ b/files/pt-br/web/css/universal_selectors/index.html
diff --git a/files/pt-br/web/css/valor_usado/index.html b/files/pt-br/web/css/used_value/index.html
index 18c48dedb5..18c48dedb5 100644
--- a/files/pt-br/web/css/valor_usado/index.html
+++ b/files/pt-br/web/css/used_value/index.html
diff --git a/files/pt-br/web/css/sintexe_valor/index.html b/files/pt-br/web/css/value_definition_syntax/index.html
index d14bcaecdf..d14bcaecdf 100644
--- a/files/pt-br/web/css/sintexe_valor/index.html
+++ b/files/pt-br/web/css/value_definition_syntax/index.html
diff --git a/files/pt-br/web/css/modelo_visual/index.html b/files/pt-br/web/css/visual_formatting_model/index.html
index a37a0cc7b0..a37a0cc7b0 100644
--- a/files/pt-br/web/css/modelo_visual/index.html
+++ b/files/pt-br/web/css/visual_formatting_model/index.html