mozilla
Os seus resultados da pesquisa

    Cor

    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árias red   lime   blue  
    secundárias yellow   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

    Etiquetas do documento e colaboradores

    Etiquetas: 
    Contributors to this page: Verruckt, Leandro Mercês Xavier, fscholz, teoli
    Última atualização por: fscholz,