unslug pt-br: move

8 files changed, 1592 insertions, 0 deletions

diff --git a/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..7880e00f6d
--- /dev/null
+++ b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,128 @@
+---
+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/conflicting/learn/css/building_blocks/selectors/index.html b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..3870c68936
--- /dev/null
+++ b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,430 @@
+---
+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/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..2ead5ccae7
--- /dev/null
+++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,126 @@
+---
+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/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html
new file mode 100644
index 0000000000..1ccc04f0ce
--- /dev/null
+++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html
@@ -0,0 +1,112 @@
+---
+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/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html
new file mode 100644
index 0000000000..453aa4c966
--- /dev/null
+++ b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html
@@ -0,0 +1,106 @@
+---
+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/conflicting/learn/css/first_steps/index.html b/files/pt-br/conflicting/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..389962ab07
--- /dev/null
+++ b/files/pt-br/conflicting/learn/css/first_steps/index.html
@@ -0,0 +1,98 @@
+---
+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/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..4577341105
--- /dev/null
+++ b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,240 @@
+---
+title: Utilizando áudio e vídeo com HTML5
+slug: Web/HTML/Using_HTML5_audio_and_video
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video
+---
+<p style="margin-left: 40px;">O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.</p>
+
+<h2 id="Incorporando_mídia">Incorporando mídia:</h2>
+
+<p>Incorporar mídia em documentos HTML é simples:</p>
+
+<pre class="brush: html">&lt;video src="<a class="linkification-ext" href="http://v2v.cc/~j/theora_testsuite/320x240.ogg" title="Linkification: http://v2v.cc/~j/theora_testsuite/320x240.ogg">http://v2v.cc/~j/theora_testsuite/320x240.ogg</a>" controls&gt;
+  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;
+</pre>
+
+<p>Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.</p>
+
+<p>Aqui há um exemplo de áudio incorporado em um documento HTML</p>
+
+<pre class="brush: html">&lt;audio src="/test/audio.ogg"&gt;
+&lt;p&gt;Seu nevegador não suporta o elemento audio.&lt;/p&gt;
+&lt;/audio&gt;
+</pre>
+
+<p>O atributo <code>src</code> pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.</p>
+
+<pre class="brush: html">&lt;audio src="audio.ogg" controls autoplay loop&gt;
+&lt;p&gt;Seu navegador não suporta o elemento audio &lt;/p&gt;
+&lt;/audio&gt;
+</pre>
+
+<p>Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:</p>
+
+<ul>
+ <li><code>controls</code> : Mostra os controles padrão para o áudio na página.</li>
+ <li><code>autoplay</code> : Faz com que o áudio reproduza automaticamente.</li>
+ <li><code>loop</code> : Faz com que o áudio repita automaticamente.</li>
+</ul>
+
+<pre class="brush: html"><code>&lt;audio src="audio.mp3" preload="auto" controls&gt;&lt;/audio&gt;</code>
+</pre>
+
+<p>O atributo <code>preload</code> é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:</p>
+
+<ul>
+ <li><code>"none"</code> não carrega o arquivo</li>
+ <li><code>"auto"</code> carrega o arquivo</li>
+ <li><code>"metadata"</code> carrega apenas os meta dados do arquivo</li>
+</ul>
+
+<p>Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mp4" type="video/mp4"&gt;
+  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;
+</pre>
+
+<p>Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">media formats supported by the audio and video elements</a> para detalhes.</p>
+
+<p>Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg; codecs=dirac, speex"&gt;
+  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;</pre>
+
+<p>Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.</p>
+
+<p>Se o atributo <code>type</code> não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo <code>source</code> é verificado. Se nenhum dos elementps <code>source</code> pode ser utilizado, um evento <code>error</code> é enviado para o elemento <code>video</code>. Se o atributo <code>type</code> estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo <code>source</code> é verificado.</p>
+
+<p>Veja <a href="/en/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media events</a> para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a>.</p>
+
+<h2 id="Controlando_a_reprodução_de_mídia">Controlando a reprodução de mídia</h2>
+
+<p>Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.play();
+</pre>
+
+<p>A primeira linha pega o primeiro elemento video, e a segunda chama o método <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="en/nsIDOMHTMLMediaElement#play()"><code>play()</code></a> do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia</p>
+
+<p>Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.</p>
+
+<pre class="brush: html">&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
+&lt;div&gt;
+  &lt;button onclick="document.getElementById('demo').play()"&gt;Reproduzir o áudio&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').pause()"&gt;Pausar o áudio&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;Aumentar o volume&lt;/button&gt;
+  &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;Diminuir o volume&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="Parando_o_download_de_mídia">Parando o download de mídia</h2>
+
+<p>Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.</p>
+
+<p>Esta é um modo para parar o download imediatamente:</p>
+
+<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src = "";
+</pre>
+
+<p>Ao definir o atributo <code>src</code> do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.</p>
+
+<h2 id="Navegando_pela_mídia">Navegando pela mídia</h2>
+
+<p>Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade <code>currentTime</code> no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.</p>
+
+<p>Você pode usar a propriedade <code>seekable</code> para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.</p>
+
+<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
+mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
+mediaElement.currentTime = 122; // Ir para 122 segundos
+mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
+</pre>
+
+<h2 id="Especificando_o_intervalo_de_reprodução">Especificando o intervalo de reprodução</h2>
+
+<p>Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.</p>
+
+<p>O intervalo é especificado usando a sintaxe:</p>
+
+<pre>#t=[tempoinicial],[tempofinal]
+</pre>
+
+<p>O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).</p>
+
+<p>Alguns exemplos:</p>
+
+<dl>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt>
+ <dd>Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.</dd>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt>
+ <dd>Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.</dd>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt>
+ <dd>Especifica que o vídeo deve ser reproduzido do início até 2 horas.</dd>
+ <dt><span class="nowiki">http://foo.com/video.ogg#t=60,</span></dt>
+ <dd>Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.</dd>
+</dl>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("9.0") }}</p>
+
+<p>O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.</p>
+</div>
+
+<h2 id="Opções_alternativas">Opções alternativas</h2>
+
+<p>O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.</p>
+
+<p>Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.</p>
+
+<h3 id="Utilizando_Flash">Utilizando Flash</h3>
+
+<p>Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:</p>
+
+<pre class="brush: html">&lt;video src="video.ogv" controls&gt;
+    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
+      &lt;param value="flvplayer.swf" name="movie"/&gt;
+    &lt;/object&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Note que você não deve incluir <code>classid</code> na tag <code>object</code> para que outros navegadores além do Internet Explorer sejam compatíveis.</p>
+
+<h3 id="Reproduzindo_vídeos_em_Ogg_usando_uma_applet_Java">Reproduzindo vídeos em Ogg usando uma applet Java</h3>
+
+<p>Existe uma applet Java chamada <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:</p>
+
+<pre class="brush: html">&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
+  &lt;object type="application/x-java-applet"
+          width="320" height="240"&gt;
+     &lt;param name="archive" value="cortado.jar"&gt;
+     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
+     &lt;param name="url" value="my_ogg_video.ogg"&gt;
+     &lt;p&gt;You need to install Java to play this file.&lt;/p&gt;
+  &lt;/object&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.</p>
+
+<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p>
+
+<p>A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento <code>error</code> ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.</p>
+
+<p>Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:</p>
+
+<pre class="brush: html">&lt;video&gt;
+&lt;source id="mp4_src"
+        src="video.mp4"
+        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
+&lt;/source&gt;
+&lt;source id="3gp_src"
+        src="video.3gp"
+        type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
+&lt;/source&gt;
+&lt;source id="ogg_src"
+        src="video.ogv"
+        type='video/ogg; codecs="theora, vorbis"'&gt;
+&lt;/source&gt;
+&lt;/video&gt;</pre>
+
+<p>Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos <code>error</code> antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.</p>
+
+<h3 id="Detectando_quando_nenhuma_fonte_foi_carregada">Detectando quando nenhuma fonte foi carregada</h3>
+
+<p>Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo <code>networkState</code> do elemento media. Se esse valor for <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, você saberá que todas as fontes falharam o carregamento.</p>
+
+<p>Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Os elementos HTML relacionados a mídia: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li>
+ <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li>
+ <li><a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducing the Audio API Extension</a></li>
+ <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
+ <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
+ <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li>
+ <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li>
+ <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, uma biblioteca JavaScript (mwEmbed) que suporta alternativas de reprodução utilizando HTML5, VLC Player, Java Cortado e OMTK Flash Vorbis player. (É utilizado pela Wikimedia)</li>
+ <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, uma biblioteca Flash que implementa um decodificador Vorbis</li>
+ <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, um wrapper em JavaScript para áudio e vídeo com alternativas de reprodução em flash, open source e GPL</li>
+ <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, uma solução para reprodução de áudio e vídeo em Java, mantido pelo Xiph.org</li>
+ <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, uma framework e reprodutor de mídia para HTML5(open source).</li>
+ <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - framework aberta para áudio e vídeo em HTML5 com uma biblioteca Flash customizada que imita a API de HTML5 para navegadores antigos</li>
+ <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - uma player de vídeo alternativo para HTML5</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<div>{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}</div>
diff --git a/files/pt-br/conflicting/learn/javascript/objects/index.html b/files/pt-br/conflicting/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..aaab9150b3
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/objects/index.html
@@ -0,0 +1,352 @@
+---
+title: Introdução ao JavaScript Orientado a Objeto
+slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+tags:
+  - Construtor
+  - Encapsular
+  - Herança
+  - Intermediário
+  - Membros
+  - Objeto
+  - Orientado a Objeto
+  - POO
+translation_of: Learn/JavaScript/Objects
+translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+---
+<p>JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.</p>
+
+<p>Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.</p>
+
+<h2 id="JavaScript_Review" name="JavaScript_Review">Revisão do Javascript</h2>
+
+<p>Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Uma reintrodução ao JavaScript</a>. Você também pode consultar o <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>.</p>
+
+<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programação Orientada a Objetos</h2>
+
+<p>Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).</p>
+
+<p>A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.</p>
+
+<p>A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.</p>
+
+<h2 id="Terminology" name="Terminology"><span class="short_text" id="result_box" lang="pt"><span class="hps">Terminologia</span></span></h2>
+
+<dl>
+ <dt>Namespaces</dt>
+ <dd>Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.</dd>
+</dl>
+
+<dl>
+ <dt>Classe</dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Define as</span> <span class="hps">características do objeto</span><span>.</span></span> Uma classe é uma definição modelo das propriedades e métodos de um objeto.</dd>
+ <dt>Objeto</dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Um exemplar</span><span class="hps"> de uma classe</span><span>.</span></span></dd>
+ <dt><span class="short_text" id="result_box" lang="pt"><span class="hps">Atributo</span></span></dt>
+ <dd>Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.</dd>
+ <dt>Método</dt>
+ <dd>Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.</dd>
+ <dt>C<span class="short_text" id="result_box" lang="pt"><span class="hps">onstrutor</span></span></dt>
+ <dd>Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.</dd>
+ <dt>Herança</dt>
+ <dd>Uma classe pode herdar características de outra classe.</dd>
+ <dt>Encapsulamento</dt>
+ <dd>Uma maneira de agrupar os dados e os métodos que usam os dados.</dd>
+ <dt>Abstração</dt>
+ <dd>A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.</dd>
+ <dt>Polimorfismo</dt>
+ <dd>Diferentes classes podem definir o mesmo método ou propriedade.</dd>
+</dl>
+
+<p>Para uma descrição mais extensiva sobre programação orientada a objetos, veja <a href="http://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos">Orientação a objetos</a> na Wikipédia.</p>
+
+<h2 id="Programação_Baseada_em_Protótipos">Programação Baseada em Protótipos</h2>
+
+<p>Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como <em>protótipos</em>. Este modelo também é conhecido como <strong>sem classes</strong>, <strong>orientado a protótipo</strong>, ou <strong>programação baseada em exemplares.</strong></p>
+
+<p>O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o <em>framework </em>Viewer para manipular componentes do Morphic) e várias outras.</p>
+
+<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programação Orientada a Objetos em Javascript</h2>
+
+<h3 id="Namespaces">Namespaces</h3>
+
+<p>Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. <strong>Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.</strong></p>
+
+<div class="note">
+<p><strong>Nota: </strong>É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).</p>
+</div>
+
+<p>A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.</p>
+
+<p>Vamos criar um objeto global chamado MEUAPP:</p>
+
+<pre class="brush: js notranslate">// namespaces global
+var MEUAPP = MEUAPP || {};</pre>
+
+<p>No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos</p>
+
+<p>Podemos também criar sub-espaços de nomes.</p>
+
+<pre class="brush: js notranslate"><code>// sub namespaces
+MEUAPP.eventos = {};</code></pre>
+
+<p>A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:</p>
+
+<pre class="notranslate">// Criando um recipiente chamado MEUAPP.metodosEmComum
+// para métodos e propriedades em comum
+
+MEUAPP.metodosEmComum = {
+
+  regexParaNome: "", // definindo uma expressao regular
+                     // para validação de nomes
+
+  regexParaTelefone: "",  // define uma expressao regular para
+                          //validacao de numeros de telefone
+}
+
+// Objeto junto a declaracoes de método
+
+MEUAPP.eventos = {
+
+    adicionarTratador: function(elemento, tipo, funcao) {
+
+    // codigos
+
+    },
+
+    removerTratador: function(elemento, tipo, funcao) {
+
+    // codigos
+
+    },
+
+    obterEvento: function(e) {
+
+    // codigos
+
+    }
+
+    // é possível adicionar outros métodos e propriedades
+
+}
+
+// Sintaxe para usar o método adicionarTratador:
+
+MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);</pre>
+
+<h3 id="Core_Objects" name="Core_Objects">Objetos inclusos por padrão</h3>
+
+<p>JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().</p>
+
+<pre class="brush: js notranslate">console.log(Math.random());
+</pre>
+
+<div class="note"><strong>Nota:</strong> Este e todos os exemplos a seguir presumem que uma função <strong><code>console.log() </code></strong>está definida globalmente. A função <code><strong>console.log() </strong></code>não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.</div>
+
+<p>Veja <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a> para a lista dos objetos inclusos por padrão em JavaScript.</p>
+
+<p>Cada objeto em JavaScript é um exemplar do objeto <code>Object</code> e, portanto, herda todas as suas propriedades e métodos.</p>
+
+<h3 id="Custom_Objects" name="Custom_Objects">Objetos Personalizados</h3>
+
+<h4 id="The_Class" name="The_Class">A Classe</h4>
+
+<p>JavaScript é uma linguagem baseada em protótipos e não contém a declaração <strong><code>class</code></strong>, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.</p>
+
+<pre class="notranslate"><code>var Pessoa = function () {};</code></pre>
+
+<p class="brush: js">O objeto (exemplar de uma classe)</p>
+
+<p>Para criar um novo exemplar de um objeto <code><strong>obj</strong></code><em>, </em>usamos a declaração <code><strong>new obj</strong></code><em>, </em>atribuindo o resultado<em> </em>(que é do tipo <strong><code>obj</code></strong>) a uma variável que será acessada depois.<em> </em></p>
+
+<p>No exemplo acima, definimos uma classe chamada <strong>Pessoa</strong>. No exemplo abaixo, criamos dois exemplares (<code><strong>pessoa1</strong></code> e <code><strong>pessoa2</strong></code>).</p>
+
+<pre class="brush: js notranslate">var pessoa1 = new Pessoa();
+var pessoa2 = new Pessoa();
+</pre>
+
+<div class="note"><strong>Nota: </strong>Por favor, veja também <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> para um novo e alternativo método que cria um exemplar não-inicializado.</div>
+
+<h4 id="The_Constructor" name="The_Constructor">O Construtor</h4>
+
+<p>O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.</p>
+
+<p>O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.</p>
+
+<p>No exemplo abaixo, o construtor da classe <code>Pessoa</code> envia uma mensagem ao <em>log </em>quando um exemplar de <strong><code>Pessoa </code></strong>é criado.</p>
+
+<pre class="brush: js notranslate">var Pessoa = function () {
+  console.log("exemplar criado");
+}
+
+var pessoa1 = new Pessoa();
+var pessoa2 = new Pessoa();
+</pre>
+
+<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Propriedades (atributos de objetos)</h4>
+
+<p>Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.</p>
+
+<p>A palavra-chave <code>this,</code> que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe <code>NomeDoExemplar.Propriedade</code>, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)</p>
+
+<pre class="brush: js notranslate">var Pessoa = function(nome) {
+  this.nome = nome;
+  console.log('Exemplar de Pessoa criado');
+};
+
+var pessoa1 = new Pessoa('Alice');
+var pessoa2 = new Pessoa('Bob');
+
+// mostrando as propriedades nome dos objetos
+console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
+console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log</pre>
+
+<h4 id="The_methods" name="The_methods">Métodos</h4>
+
+<p>Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca <code><strong>()</strong></code> no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do <strong><code>prototype</code></strong> da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.</p>
+
+<p>No exemplo abaixo, definimos e usarmos o método <code><strong>dizerOla()</strong></code> na classe <code><strong>Pessoa</strong></code> .</p>
+
+<pre class="brush: js notranslate">var Pessoa = function (genero) {
+  this.genero = genero;
+  alert('Pessoa instanciada');
+}
+
+Pessoa.prototype.dizerOla = function()
+{
+  alert ('hello');
+};
+
+var pessoa1 = new Pessoa('Masculino');
+var pessoa2 = new Pessoa('Feminino');
+
+// Chamando o método dizerOla em Pessoa .
+pessoa1.dizerOla(); // hello
+</pre>
+
+<p>Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: </p>
+
+<pre class="brush: js notranslate">function Pessoa(genero) {
+  this.genero = genero;
+}
+
+Pessoa.prototype.dizGenero = function()
+{
+  alert(this.genero);
+};
+
+var pessoa1 = new Pessoa('Masculino');
+var informaGenero = pessoa1.dizGenero;
+
+pessoa1.dizGenero(); // 'Masculino'
+informaGenero(); // undefined
+alert(informaGenero === pessoa1.dizGenero); //true
+alert(informaGenero === Pessoa.prototype.dizGenero); //true
+</pre>
+
+<p>Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a>, da seguinte maneira:</p>
+
+<pre class="brush: js notranslate">informaGenero.call(pessoa1); //alerts 'Masculino'
+</pre>
+
+<div class="note">Veja mais sobre em <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> e <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a></div>
+
+<h4 id="Inheritance" name="Inheritance">Herança</h4>
+
+<p>Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (<em>JavaScript suporta apenas herança de classe única</em>). A classe especializada é comumente chamada de <em>filha</em>, e a outra classe é comumente chamada de <em>pai</em>. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> para implementar herança.</p>
+
+<div class="note">
+<p>JavaScript não detecta o  <code>prototype.constructor</code> da classe filha, veja a propriedade <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>, então devemos declará-la manualmente.</p>
+</div>
+
+<p>No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().</p>
+
+<pre class="brush: js notranslate">// define a classe Pessoa
+function Pessoa() {}
+
+Pessoa.prototype.caminhar = function(){
+  alert ('Estou Caminhando!');
+};
+Pessoa.prototype.dizOi = function(){
+  alert ('Oi!');
+};
+
+// define a classe  Estudante
+function Estudante() {
+  // Chama o método pai
+  Pessoa.call(this);
+}
+
+// herda de Pessoa
+Estudante.prototype = new Pessoa();
+
+// <span id="result_box" lang="pt"><span class="hps">corrige</span> <span class="hps">o ponteiro</span> <span class="hps">construtor,</span> <span class="hps">que aponta para</span> <span class="hps">Pessoa</span></span>
+Estudante.prototype.constructor = Estudante;
+
+// adiciona o método dizOi
+Estudante.prototype.dizOi = function(){
+  alert('Oi, eu sou estudante');
+}
+
+// adiciona o método dizTchau
+Estudante.prototype.dizTchau = function(){
+  alert('tchau');
+}
+
+var estudante1 = new Estudante();
+estudante1.dizOi();
+estudante1.caminhar();
+estudante1.dizTchau();
+
+// checa a herança
+alert(estudante1 instanceof Pessoa); // true
+alert(estudante1 instanceof Estudante); // true
+</pre>
+
+<p>Utilizando Object.create a linha de herança deveria ser:</p>
+
+<pre class="brush: js notranslate">Estudante<code class="js plain">.prototype = Object.create(</code>Pessoa<code class="js plain">.prototype);</code></pre>
+
+<h4 id="Encapsulation" name="Encapsulation">Encapsulamento</h4>
+
+<p>Em exemplo anterior, <code>Estudante</code> não precisava saber como <code>o método caminhar() da classe Pessoa</code> seria implementada, mas ainda pode utilizar esté método; a classe <code>Estudante</code> não possui necessidade <span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">explícita de </span></span>definir o método desde que não queremos alterar-lo. Isso se chama <strong>encapsulamento</strong>, <span id="result_box" lang="pt"><span class="hps">pelo qual</span> <span class="hps">cada</span> <span class="hps">classe herda</span> <span class="hps">os métodos de</span> <span class="hps">seu pai</span> <span class="hps">e só</span> <span class="hps">precisa definir</span> <span class="hps">as coisas</span> <span class="hps">que</span> <span class="hps">deseja</span> <span class="hps">mudar.</span></span></p>
+
+<h4 id="Abstraction" name="Abstraction">Abstração</h4>
+
+<p>A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript <span class="short_text" id="result_box" lang="pt"><span class="hps">alcança</span> <span class="hps">especialização</span> <span class="hps">por herança</span></span>, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.</p>
+
+<p>A Função de classe do JavaScript é hedar da classe Object (<span class="short_text" id="result_box" lang="pt"><span class="hps">isso demonstra</span> <span class="hps">a especialização</span> <span class="hps">do modelo</span></span>). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)</p>
+
+<pre class="brush: js notranslate">var foo = function(){};
+alert( 'foo é um Function: ' + (foo instanceof Function) );
+alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
+</pre>
+
+<h4 id="Polymorphism" name="Polymorphism">Polimorfismo</h4>
+
+<p>Assim como todos os métodos e propriedades são definidos dentro da propriedade <code>prototype</code>, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.</p>
+
+<p>As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. </p>
+
+<p>Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.</p>
+
+<h2 id="References" name="References">Referências</h2>
+
+<ol>
+ <li>Mozilla. "<a href="/docs/Web/JavaScript/Guide" title="/docs/Web/JavaScript/Guide">Core JavaScript 1.5 Guide</a>", https://developer.mozilla.org/docs/Web/JavaScript/Guide</li>
+ <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li>
+</ol>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Fernando Trasviña &lt;f_trasvina at hotmail dot com&gt;</li>
+ <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
+</ul>
+</div>
+
+<p>Es: <a href="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos" title="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos">https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos  </a></p>