aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-pt/learn/css/building_blocks/values_and_units/index.html')
-rw-r--r--files/pt-pt/learn/css/building_blocks/values_and_units/index.html342
1 files changed, 0 insertions, 342 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
deleted file mode 100644
index 1c5855e14c..0000000000
--- a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
+++ /dev/null
@@ -1,342 +0,0 @@
----
-title: Cor
-slug: Learn/CSS/Building_blocks/Values_and_units
-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
-original_slug: Web/CSS/Como_começar/Cor
----
-<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>