Un bon disseny tipogràfic és una part important d'un lloc web reeixit. CSS us dóna un gran control sobre l'aparició del text a les pàgines web de les pàgines web que compileu. Això inclou la possibilitat de canviar el color de qualsevol tipus de lletra que utilitzeu.
Els colors de font es poden canviar utilitzant un full d'estil extern , un full d'estil intern o es pot canviar utilitzant l'estil en línia dins del document HTML. Les bones pràctiques fan que hàgiu d'utilitzar un full d'estils extern per als vostres estils CSS. Un full d'estil intern, que són estils escrits directament al "cap" del vostre document, generalment només s'utilitzen per a petits llocs d'una pàgina. S'han d'evitar els estils en línia, ja que són similars a les antigues etiquetes de "tipus de lletra" que vam tractar fa molts anys. Aquests estils en línia dificulten l'administració de l'estil de font, ja que haureu de canviar-los en cada cas de l'estil en línia.
En aquest article, aprendreu a canviar el color de la font usant un full d'estil extern i un estil que s'utilitza en una etiqueta de paràgraf. Podeu aplicar la mateixa propietat d'estil per canviar el color de la font a qualsevol etiqueta que envolti el text, inclosa l'etiqueta
.S'està afegint estils per canviar el color del tipus de lletra
Per a aquest exemple, haureu de tenir un document HTML per al marcat de la vostra pàgina i un fitxer CSS separat que s'adjunta a aquest document. Probablement, el document HTML inclogui diversos elements. El que ens ocupa el propòsit d'aquest article és l'element de paràgraf.
A continuació us indiquem com canviar el color del text del text dins de les etiquetes de paràgraf usant el full d'estils extern.
Els valors del color es poden expressar com a paraules clau de color, números de color RGB o números de color hexadecimals.
- Afegiu l'atribut d'estil de l'etiqueta de paràgraf:
- p {}
- Col·loqueu la propietat del color a l'estil. Col·loca dos punts després d'aquesta propietat:
- p {color:}
- A continuació, afegiu el valor del color després de la propietat. Assegureu-vos d'acabar amb aquest valor amb un punt i coma:
- p {color: negre;}
Els paràgrafs de la vostra pàgina ara seran de color negre.
Aquest exemple utilitza una paraula clau de color: "negre". Aquesta és una forma d'afegir color a CSS, però és molt limitant. L'ús de paraules clau per a "negre" i "blanc" és senzill, ja que aquests dos colors són molt específics, però què passa si utilitzeu paraules clau com "vermell", "blau" o "verd"? Exactament quina ombra de color vermell, blau o verd obtindrà? No podeu especificar exactament quina tonalitat de color voleu amb les paraules clau. És per això que els valors hexadecimals s'utilitzen sovint en lloc de les paraules clau de color.
p {color: # 000000; }
Aquest estil CSS també faria que el color dels paràgrafs fos negre, perquè el codi hexadecimal de # 000000 es tradueix a negre. Fins i tot podeu utilitzar taquigrafia amb aquest valor hexadecimal i escriure-la com a només # 000 i obtindreu el mateix.
Com ja hem esmentat, els valors hexadecimals funcionen bé quan necessiteu un color que no sigui simplement blanc o negre. Aquí teniu un exemple:
p {color: # 2f5687; }
Aquest valor hexadecimal estableix els paràgrafs en un color blau, però a diferència de la paraula clau "blau", aquest codi hexadecimal us permet definir una tonalitat de color blau molt específica, probablement la que el dissenyador triï quan creï la interfície per a aquest lloc web. En aquest cas, el color seria un blau de color vermell de mida mitjana.
Finalment, també podeu utilitzar els valors de color RGBA per als colors de les fonts. Actualment, RGCA és compatible amb tots els navegadors moderns, de manera que podeu utilitzar aquests valors amb poca preocupació perquè no sigui compatible amb un navegador web, però també podeu configurar una còpia de seguretat fàcil.
p {color: rgba (47,86,135,1); }
Aquest valor RGBA és el mateix que el color blau de la pissarra especificat anteriorment. Els primers 3 valors estableixen els valors Rojo, Verd i Blau i el número final és la configuració alfa. Està configurat com a "1", que significa "100%", de manera que aquest color no tindria transparència. Si ho heu establert a un número decimal, com ara .85, es traduiria en un 85% d'opacitat i el color seria lleugerament transparent.
Si voleu valors a prova de bales, feu això:
p {
color: # 2f5687;
color: rgba (47,86,135,1);
}
Aquesta sintaxi estableix primer el codi hexadecimal. A continuació, es sobreescriu aquest valor amb el número RGBA. Això significa que qualsevol navegador antic que no sigui compatible amb RGBA obtindria el primer valor i ignoraria el segon. Els navegadors moderns usarien el segon per la cascada CSS.