Hemos producido un video para acompañar esta lección. Se recomienda que lea el texto de abajo también, sin embargo. El video está aquí:

Color de la red Valores

Hay muchos otros estilos de fuentes que puedes usar en tu CSS. Empezaremos con los colores de las fuentes. (Estrictamente hablando, sin embargo, el COLOR no es un estilo de fuente - es puede ser usado casi en cualquier lugar para colorear muchas cosas diferentes):

Puedes tener casi cualquier color de letra que quieras para tu texto (inglés británico los usuarios, noten la "u" que falta después de la segunda "o". El americano la ortografía se utiliza en HTML y CSS). Para especificar un color, puedes usar uno de los tres formatos:

  • El nombre de un color se deletrea
  • El nombre de un color como valor hexadecimal
  • El nombre de un color como valor RGB

Hay una lista bastante larga y exótica de nombres de colores que puedes usar, cosas como Cadete Azul, Fantasma Blanco, Chifón de Limón. Pero también puedes usar un color simple nombre como el rojo o el azul. El código CSS es este:

H1 {

text-align: center;
fuente-familia: Courier New, Courier, Mono;
color: rojo;

}

Así que escribes la palabra "color" seguida de un punto. Luego escribes la nombre de su color.

Hay 17 colores comunes y 130 no tan comunes. Los colores comunes que pueden usar son: aqua, negro, azul, fucsia, gris, gris, verde, lima, granate, azul marino, oliva, púrpura, rojo, plata, verde azulado, blanco y amarillo.

Para una lista completa de todos los nombres de colores que puedes usar, mira esta página de Wikipedia:

Wikipedia - Colores de la web

Valores hexadecimales (etiqueta__7)

Los valores hexadecimales se usan mucho en el diseño de páginas web. Si nunca has oído de ellos antes de usar el número del 0 al 9, y las letras de la A a la F (Base 16). En la Base 16, se usan las letras en lugar de los números 10, 11, 12, 13, 14 y 15. Así que A = 10, B = 11, C = 12, etc. Si quieres representar el número 256 en hexadecimal entonces es FF.

Se utilizan tres valores de color, uno para el rojo, uno para el verde y uno para el azul. Cada valor de color tiene dos porta-placas hexadecimales. Por ejemplo, aquí está el color rojo:

#FF0000

Aquí está el color verde:

#00FF00

Y aquí está el color azul:

#0000FF

Así que el rojo tiene dos letras F en la posición roja, dos ceros en la posición verde, y dos ceros en la posición azul. En otras palabras, cambia el valor del rojo por completo y apagar los valores de verde y azul.

El verde tiene dos ceros, dos F, y luego dos ceros otra vez. El azul tiene cuatro ceros entonces dos F$0027s.

El negro sólo tiene 6 ceros, lo que significa que hay que apagar el rojo, el verde y el azul.

Tenga en cuenta que debe utilizar el símbolo de hachís/libra ( # ) antes de los seis lugares. valores.

Puedes combinar los valores de números y letras hexadecimales:

#2F0B99

Pruébelos usted mismo en su código:

H1 {

text-align: center;
fuente-familia: Courier New, Courier, Mono;
color: #2F0B99; (etiqueta_1) }

Ejercicio
Cambie los valores en las seis posiciones, usando los números del 0 al 9, y las letras De la A a la F. ¿Cuáles son los siguientes colores?

color: #1BAA12;

color: #1087AC;

color: #451DE2;

Valores RGB (etiqueta__7)

Puedes usar valores RGB en tu CSS, si lo prefieres. (RGB significa Rojo, Verde, Azul.) Una vez más, se utilizan marcadores de posición para los diferentes valores de color. Esta vez, ...usas el número del 0 al 255. Los usas así: (etiqueta_1) color: RGB(255, 0, 0);

Note que los números se escriben entre un par de paréntesis redondos, y están separados por comas.

Ejercicio
Juega con los valores RGB. ¿Cuáles son los siguientes colores?

color: RGB(0, 255, 0);

color: RGB(125, 125, 0);

color: RGB(255, 255, 10);

En lugar de experimentar para conseguir el color que quieres, una forma fácil de conseguir el El color correcto Hexadecimal o RGB es escribir las palabras "color picker" en un motor de búsqueda como Google. Entonces tendrás un montón de sitios web que te dan los valores correctos para escribir simplemente jugando con el color deslizadores.

En la próxima lección, aprenderás sobre los tamaños de las fuentes.

| Tamaño de las fuentes |