unslug pt-pt: move

1 files changed, 341 insertions, 0 deletions

diff --git a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..d5c15375d7
--- /dev/null
+++ b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,341 @@
+---
+title: Cor
+slug: Web/CSS/Como_começar/Cor
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+translation_of_original: Web/Guide/CSS/Getting_started/Color
+---
+<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>
+
+<p>Esta página explica mais sobre como você pode especificar cores no CSS.</p>
+
+<p>Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Cor" name="Informa.C3.A7.C3.A3o:_Cor">Informação: Cor</h2>
+
+<p>Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:</p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primárias</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secundárias</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Seu navegador pode suportar muitas cores nomeadas, como:
+    <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
+     <tbody>
+      <tr>
+       <td>dodgerblue</td>
+       <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+       <td>peachpuff</td>
+       <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+       <td>tan</td>
+       <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+       <td>firebrick</td>
+       <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+       <td>aquamarine</td>
+       <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Para detalhes sobre esta lista extendida, veja: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos <em>hexadecimais</em> na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Para a paleta total, especifique dois digitos hexadecimais por cada componente:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Exemplos</caption>
+ <tbody>
+  <tr>
+   <td>Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos:
+    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+     <tbody>
+      <tr>
+       <td>Começe com vermelho puro:</td>
+       <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+       <td><code>#f00</code></td>
+      </tr>
+      <tr>
+       <td>Para tornar isto mais pálido, adicione um pouco de verde e azul:</td>
+       <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+       <td><code>#f77</code></td>
+      </tr>
+      <tr>
+       <td>Para tornar isto mais alaranjado, adicione um pouquinho mais de verde:</td>
+       <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+       <td><code>#fa7</code></td>
+      </tr>
+      <tr>
+       <td>Para tornar isto mais escuro, reduza todos os componentes:</td>
+       <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+       <td><code>#c74</code></td>
+      </tr>
+      <tr>
+       <td>Para reduzir a saturação, faça os componentes mais parecidos:</td>
+       <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+       <td><code>#c98</code></td>
+      </tr>
+      <tr>
+       <td>Se você quiser deixar todos os componentes iguais, você obterá cinza:</td>
+       <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+       <td><code>#ccc</code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>Para uma sombra pastel como azul pálido:
+    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+     <tbody>
+      <tr>
+       <td>Começe com branco puro:</td>
+       <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+       <td><code>#fff</code></td>
+      </tr>
+      <tr>
+       <td>Reduza um pouco os outros componentes:</td>
+       <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+       <td><code>#eef</code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens.
+    <p>Por exemplo, este marrom (vermelho escuro):</p>
+
+    <div style="width: 24em;">
+    <pre>
+rgb(128, 0, 0)
+</pre>
+    </div>
+
+    <p><br>
+     Para maiores detalhes sobre como especificar cores, veja: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> na CSS Specification.</p>
+
+    <p>Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> na CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Propriedades_de_cor" name="Propriedades_de_cor">Propriedades de cor</h3>
+
+<p>Você já usou a propriedade <code>color</code> para textos.</p>
+
+<p>Você também já usou a propriedade <code>background-color</code> para mudar elementos de fundo.</p>
+
+<p>Fundos podem ser configurados para <code>transparent</code> para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>As caixas de <strong>Exemplo</strong> neste tutorial usam este fundo amarelo pálido:
+    <div style="width: 24em;">
+    <pre>
+background-color: #fffff4;
+</pre>
+    </div>
+
+    <p>As caixas de <strong>Mais detalhes</strong> usam esta paleta cinza:</p>
+
+    <div style="width: 24em;">
+    <pre>
+background-color: #f4f4f4;
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor" name="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor">Ação: Usando códigos de cor</h2>
+
+<p>Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)</p>
+
+<div style="width: 32em;">
+<pre class="eval">/*** CSS Tutorial: Página de Cor ***/
+
+/* Fonte da Página */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* Parágrafos */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* Letras Iniciais */
+strong {
+  color: red;
+  <strong>background-color: #ddf;</strong>
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+</pre>
+</div>
+
+<p>Atualize seu navegador para ver o resultado:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado.
+    <p>(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cor" title="Talk:pt/CSS/Como_começar/Cor">Discussão</a>.</p>
+
+<p>Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.</p>
+
+<p>A próxima página explica como você pode fazer exceções para separar rigorosamente: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>