From 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:50:24 +0100 Subject: unslug pt-pt: move --- .../building_blocks/values_and_units/index.html | 341 +++++++++++++++++++++ 1 file changed, 341 insertions(+) create mode 100644 files/pt-pt/learn/css/building_blocks/values_and_units/index.html (limited to 'files/pt-pt/learn/css/building_blocks/values_and_units') 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 +--- +

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

+ +

Esta página explica mais sobre como você pode especificar cores no CSS.

+ +

Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.

+ +

Informação: Cor

+ +

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primáriasred lime blue 
secundáriasyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ + + + + + + + +
Mais detalhes
Seu navegador pode suportar muitas cores nomeadas, como: + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Para detalhes sobre esta lista extendida, veja: SVG color keywords no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.

+
+ +


+ 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 hexadecimais na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +


+ Para a paleta total, especifique dois digitos hexadecimais por cada componente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.

+ + + + + + + + + + + +
Exemplos
Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Começe com vermelho puro: #f00
Para tornar isto mais pálido, adicione um pouco de verde e azul: #f77
Para tornar isto mais alaranjado, adicione um pouquinho mais de verde: #fa7
Para tornar isto mais escuro, reduza todos os componentes: #c74
Para reduzir a saturação, faça os componentes mais parecidos: #c98
Se você quiser deixar todos os componentes iguais, você obterá cinza: #ccc
+
Para uma sombra pastel como azul pálido: + + + + + + + + + + + + + +
Começe com branco puro: #fff
Reduza um pouco os outros componentes: #eef
+
+ + + + + + + + +
Mais detalhes
Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens. +

Por exemplo, este marrom (vermelho escuro):

+ +
+ 
+rgb(128, 0, 0)
+
+
+ +


+ Para maiores detalhes sobre como especificar cores, veja: Colors na CSS Specification.

+ +

Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: CSS2 System Colors na CSS Specification.

+
+ +

Propriedades de cor

+ +

Você já usou a propriedade color para textos.

+ +

Você também já usou a propriedade background-color para mudar elementos de fundo.

+ +

Fundos podem ser configurados para transparent para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.

+ + + + + + + + +
Exemplo
As caixas de Exemplo neste tutorial usam este fundo amarelo pálido: +
+ 
+background-color: #fffff4;
+
+
+ +

As caixas de Mais detalhes usam esta paleta cinza:

+ +
+ 
+background-color: #f4f4f4;
+
+
+
+ +

Ação: Usando códigos de cor

+ +

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.)

+ +
+
/*** 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;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+ +

Atualize seu navegador para ver o resultado:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ + + + + + + + +
Desafio
No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado. +

(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.)

+
+ +

O que vem depois?

+ +

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 Discussão.

+ +

Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.

+ +

A próxima página explica como você pode fazer exceções para separar rigorosamente: Conteúdo

+ +

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

-- cgit v1.2.3-54-g00ecf