domingo, 8 de mayo de 2011

60 - HTML - Estilos y efectos de fuentes - Color

Vamos a profundizar un poco más en la forma de dar color al texto, como ya hemos visto anteriormente (Ver Pág 51) para alegrar nuestra web, o resaltar nuestros textos con colores.

Para indicar el color de un texto se utiliza la propiedad "font" con el atributo "color".

Código     : <font color="#FF0000">Rojo</font>

Resultado: muestra el texto entre las etiquetas en color rojo.

Hay dos formas de indicar el valor de la propiedad color, la primer en sus valores RGB (red, green, blue) rojo, verde, azul. Es decir que combinando estos valores se obtienen los diferentes colores. Y la otra forma es con sus nombres en inglés.

Pasemos al Código de ejemplo utilizando los valores RGB:

<html>

<head>

<title>Fuente - Colores utilizando los códigos RGB</title>

</head>

<body>

<font color="#000000">Negro</font> <br>

<font color="#C0C0C0">Plata</font> <br>

<font color="#808080">Gris</font> <br>

<font color="#FFFFFF">Blanco</font> <- Blanco<br>

<font color="#800000">Marron</font> <br>

<font color="#FF0000">Rojo</font> <br>

<font color="#8800080">Purpura</font> <br>

<font color="#FF00FF">Fucsia</font> <br>

<font color="#008000">Verde</font> <br>

<font color="#00FF00">Verde lima</font> <br>

<font color="#808000">Verde Oliva</font> <br>

<font color="#FFFF00">Amarillo</font> <br>

<font color="#000080">Azul Marino</font> <br>

<font color="#0000FF">Azul</font> <br>

<font color="#008080">Azul Verdoso</font> <br>

<font color="#00FFFF">Celeste</font> <br>

</body>

</html>

Programa 41

El ejemplo en el navegador:
Negro
Plata
Gris
Blanco <- Blanco
Marron
Rojo
Purpura
Fucsia
Verde
Verde lima
Verde Oliva
Amarillo
Azul Marino
Azul
Azul Verdoso
Celeste

Y ahora el mismo ejemplo pero dándole a los atributos de color su valor en inglés, su representación en el explorador es la misma que para los valores RGB de antes.

Pasemos al Código de ejemplo utilizando los valores de los colores en inglés:

<html>

<head>

<title>Fuente - Colores utilizando los códigos en inglés</title>

</head>

<body>

<font color="black">Negro</font> <br>

<font color="silver">Plata</font> <br>

<font color="gray">Gris</font> <br>

<font color="white">Blanco</font> <- Blanco<br>

<font color="maroon">Marron</font> <br>

<font color="red">Rojo</font> <br>

<font color="purple">Purpura</font> <br>

<font color="fuchsia">Fucsia</font> <br>

<font color="green">Verde</font> <br>

<font color="lime">Verde lima</font> <br>

<font color="olive">Verde Oliva</font> <br>

<font color="yellow">Amarillo</font> <br>

<font color="navy">Azul Marino</font> <br>

<font color="blue">Azul</font> <br>

<font color="teal">Azul Verdoso</font> <br>

<font color="aqua">Celeste</font> <br>

</body>

</html>

Programa 42

El resultado en el navegador es el mismo que utilizando los codigos RGB.

Nota: Se aconseja utilizar estos colores que son los que la mayoría de los navegadores incluyen en su paleta de colores, aunque se pueden hacer cientos de variedades utilizando las combinaciones rgb, no todos los colores obtenidos se encuentran en las paletas de colores de los navegadores con lo que podrían no obtenerse los resultados deseados.

No hay comentarios:

Publicar un comentario