O bo deseño tipográfico é unha parte importante dun sitio web exitoso. O CSS dálle un excelente control sobre a aparición de texto nas páxinas web das páxinas web que compilas. Isto inclúe a capacidade de cambiar a cor das fontes que usa.
As cores de fontes pódense cambiar usando unha folla de estilo externa , unha folla de estilo interna ou pode modificarse usando estilo en liña no documento HTML. As mellores prácticas dicidan que debes usar unha folla de estilo externa para os teus estilos CSS. Unha folla de estilo interna, que son estilos escritos directamente na "cabeza" do documento, generalmente só se usan para pequenos sitios de unha páxina. Os estilos en liña deben evitarse porque son similares ás vellas etiquetas de "fonte" que tratamos hai moitos anos. Estes estilos en liña fan que sexa moi difícil xestionar o estilo de fonte xa que tería que cambialos en cada caso do estilo en liña.
Neste artigo, aprenderá a cambiar a cor da fonte usando unha folla de estilo externa e un estilo que se usa nunha etiqueta de parágrafo. Pode aplicar a mesma propiedade de estilo para cambiar a cor da fonte en calquera etiqueta que o rodea, incluída a etiqueta
.Engadir estilos para cambiar a cor da fonte
Para este exemplo, tería que ter un documento HTML para a súa marca de páxina e un arquivo CSS separado que estea conectado a ese documento. O documento HTML faría probablemente unha serie de elementos nel. O que nos interesa para os efectos deste artigo é o elemento de parágrafo.
Aquí tes como cambiar a cor da fonte do texto dentro das etiquetas de parágrafo usando a folla de estilo externa.
Os valores de cor pódense expresar como palabras clave de cor, números de cor RGB ou números de cores hexadecimales.
- Engade o atributo de estilo para a etiqueta de parágrafo:
- p {}
- Coloca a propiedade da cor no estilo. Coloca dous puntos despois da propiedade:
- p {cor:}
- A continuación, engade o valor da cor despois da propiedade. Asegúrese de finalizar ese valor cun punto e coma:
- p {cor: negro;}
Os parágrafos da túa páxina agora serán negros.
Este exemplo usa unha palabra clave de cor - "negra". Esa é unha forma de engadir cor en CSS, pero é moi limitante. Usar palabras clave para "negro" e "branco" é sinxelo xa que esas dúas cores son moi específicas, pero que pasa se usa palabras clave como "vermello", "azul" ou "verde"? Exactamente que sombra de vermello, azul ou verde obterás? Non podes especificar exactamente o ton de cor que queres con palabras clave. É por iso que os valores hexadecimales adoitan empregarse en lugar das palabras clave de cor.
p {cor: # 000000; }
Este estilo CSS tamén axustaba a cor dos teus parágrafos a negro, porque o código hexadecimal de # 000000 traduce ao negro. Podería mesmo usar taquigrafia con ese valor hexadecimal e escribilo como só # 000 e tería o mesmo.
Como xa dixemos, os valores hexadecimal funcionan ben cando necesitas unha cor que non sexa simplemente negra ou branca. Aquí tes un exemplo:
p {cor: # 2f5687; }
Este valor hexadeiro axustaríalle os parágrafos a unha cor azul, pero a diferenza da palabra "azul", este código hexadece dálle a posibilidade de configurar un ton de azul moi específico. Probablemente o que elixe o deseñador cando crearon a interface para este sitio web. Neste caso, a coreria sería de medio alcance, azul como a lousa.
Finalmente, tamén pode usar valores de cor RGBA para as cores de fontes. O RGCA agora é compatible con todos os navegadores modernos, polo que pode usar estes valores con pouca preocupación de que non se admita nun navegador web, senón que tamén pode configurar un fallo fácil.
p {cor: rgba (47,86,135,1); }
Este valor RGBA é o mesmo que a cor azul da lousa especificada anteriormente. Os primeiros 3 valores establecen os valores Vermello, Verde e Azul eo número final é a configuración alfa. Está definido como "1", o que significa "100%", polo que esta cor non tería transparencia. Se axusta isto a un número decimal, como .85, traduciríase ao 85% de opacidade ea cor sería lixeiramente transparente.
Se queres resistir a proba de balas os teus valores de cores, farías isto:
p {
cor: # 2f5687;
cor: rgba (47,86,135,1);
}
Esta sintaxe primeiro establece o código hexadecimal. El entón sobrescribe ese valor co número RGBA. Isto significa que calquera navegador anterior que non admita RGBA obtería o primeiro valor e ignorará o segundo. Os navegadores modernos usarían a segunda por a fervenza CSS.