O que saber
- Palavra-chave de cor: Em um arquivo HTML, digite p {cor: preto;} para mudar a cor de cada parágrafo, onde Preto refere-se à sua cor escolhida.
- Hexadecimal: Em um arquivo HTML, digite p {cor: # 000000;} para mudar a cor, onde 000000 refere-se ao valor hexadecimal escolhido.
- RGBA: Em um arquivo HTML, digite p {cor: rgba (47,86,135,1);} para mudar a cor, onde 47,86,135,1 refere-se ao valor RGBA escolhido.
CSS oferece controle sobre a aparência do texto nas páginas da web que você cria e gerencia. Neste guia, mostramos como alterar as cores da fonte em CSS usando palavras-chave de cores, códigos de cores hexadecimais ou números de cores RGB.
Como usar estilos CSS para alterar a cor da fonte
Os valores de cores podem ser expressos como palavras-chave de cores, números de cores hexadecimais ou números de cores RGB. Para esta lição, você precisará ter um documento HTML para ver as alterações CSS e um arquivo CSS separado anexado a esse documento. Vamos dar uma olhada no elemento de parágrafo, especificamente.
Use palavras-chave de cores para alterar as cores da fonte
Para alterar a cor do texto para cada parágrafo em seu arquivo HTML, vá para a folha de estilo externa e digite p {}. Coloque o cor propriedade no estilo seguido por dois pontos, como p {cor:}. Em seguida, adicione o valor da sua cor após a propriedade, terminando com um ponto e vírgula. Neste exemplo, o texto do parágrafo é alterado para a cor preta:
p {
cor preta;
}
Use valores hexadecimais para alterar as cores da fonte
Usar palavras-chave de cores para alterar o texto para vermelho, verde, azul ou alguma outra cor básica não fornecerá a precisão que você pode estar procurando ao criar diferentes tons dessas cores. É para isso que servem os valores hexadecimais. Este estilo CSS pode ser usado para colorir seus parágrafos de preto porque o código hexadecimal # 000000 se traduz em preto. Você pode até usar uma abreviação com esse valor hexadecimal e escrevê-lo como # 000 com os mesmos resultados.
p {
cor: # 000000;
}
Os valores hexadecimais funcionam bem quando você precisa de uma cor que não seja simplesmente preto ou branco. Por exemplo, este código hexadecimal oferece a capacidade de definir um tom de azul muito específico – um azul de faixa média, semelhante a uma ardósia:
p {
cor: # 2f5687;
}
Hex funciona definindo os valores RGB (vermelho, verde, azul) de uma cor separadamente com valores de base dezesseis. É por isso que eles contêm as letras UMA Através dos F além dos dígitos 0 Através dos 9. Cada cor, vermelho, verde e azul, recebe seu próprio valor de dois dígitos. 00 é o menor valor possível, enquanto FF é o mais alto. As cores são listadas em ordem RGB em hexadecimal, de modo que os primeiros dois dígitos representam o valor vermelho e assim por diante.
Use valores de cor RGBA para alterar as cores da fonte
Finalmente, você pode usar os valores de cor RGBA para editar as cores da fonte. O RGCA é compatível com todos os navegadores modernos, portanto, você pode usar esses valores com a certeza de que funcionará para a maioria dos visualizadores, mas também pode definir um fallback fácil. Este valor RGBA é igual à cor azul ardósia especificada acima:
p {
cor: rgba (47,86,135,1);
}
Os três primeiros valores definem os valores de Vermelho, Verde e Azul e o número final é a configuração alfa para transparência. A configuração alfa é definida como 1 para significar 100 por cento, portanto, essa cor não tem transparência. Se você definir esse valor como um número decimal, como 0,85, ele será convertido em 85 por cento de opacidade e a cor ficará ligeiramente transparente. Se você deseja à prova de balas seus valores de cor, copie este código CSS:
p {
cor: # 2f5687;
cor: rgba (47,86,135,1);
}
Essa sintaxe define primeiro o código hexadecimal e, em seguida, substitui esse valor pelo número RGBA. Isso significa que qualquer navegador mais antigo que não suporte RGBA obterá o primeiro valor e ignorará o segundo. É importante ter em mente que a propriedade color funciona em qualquer elemento de texto HTML em CSS. Você pode, por exemplo, alterar todas as cores de seus links. Este exemplo tornará seus links verdes brilhantes:
uma {
cor: # 16c616;
}
Isso funciona com vários elementos ao mesmo tempo. Você pode definir todos os níveis de título simultaneamente. Por exemplo, isso definirá todos os elementos do título para uma cor azul meia-noite:
h1, h2, h3, h4, h5, h6 {
cor: # 020833;
}
Chegar com os valores hexadecimais ou RGBA para suas cores nem sempre é fácil. A maioria dos web designers usará um programa de edição de imagens, como Photoshop ou GIMP, para gerar os códigos exatos. Você também pode encontrar ferramentas de seleção de cores convenientes online, como esta da w3schools.
Outras maneiras de estilizar uma página HTML
As cores da fonte podem ser alteradas com uma folha de estilo externa, uma folha de estilo interna ou um estilo embutido no documento HTML. No entanto, as práticas recomendadas determinam que você deve usar uma folha de estilo externa para seus estilos CSS. Uma folha de estilo interna, que são estilos escritos diretamente no “cabeçalho” do seu documento, geralmente são usados apenas para sites pequenos de uma página. Os estilos embutidos devem ser evitados, pois são semelhantes às antigas tags de “fonte” com as quais lidamos há muitos anos. Esses estilos embutidos tornam muito difícil gerenciar o estilo da fonte, pois você deve alterá-los a cada instância do estilo embutido.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Como alterar as cores da fonte do site com CSS.” ThoughtCo, maio. 14 de 2021, thinkingco.com/change-font-color-with-css-3466754.
Kyrnin, Jennifer. (2021, 14 de maio). Como alterar as cores da fonte do site com CSS. Obtido em https://www.thoughtco.com/change-font-color-with-css-3466754
Kyrnin, Jennifer. “Como alterar as cores da fonte do site com CSS.” ThoughtCo. https://www.thoughtco.com/change-font-color-with-css-3466754 (acessado em 25 de maio de 2021).
