martes, 7 de abril de 2009

60.- HTML - Estilos y efectos de fuentes - Color

Vamos a 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, o con sus nombres en ingles.

Pasemos al Código de ejemplo: http://bobuu.blogspot.com
(He agregado un <br>, salto de línea en el código para poder ver el resultado en dos líneas).

<html>
  <head>
    <title>Fuente - Colores</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>

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 ingles, su representación en el explorador es la misma que para los valores RGB de antes.

<html>
  <head>
    <title>Fuente - Colores</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>

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 no se obtendrían los resultados deseados.

-----------------------------------------------------------

Podéis encontrar más información sobre este tema en: Semarimoli

Temas anteriores *
59.- HTML - Estilos y efectos de fuentes <sub></sub> subíndice
58.- HTML - Estilos y efectos de fuentes <sup></sup> superindice
57.- HTML - Estilos y efectos de fuentes <small></small> pequeño
56.- HTML - Estilos y efectos de fuentes <big><big> grande.
55.- HTML - Estilos y efectos de fuentes <i></i> italica o cursiva
54.- HMTL - Estilos y efectos de fuentes <tt> </tt> teletipo
53.- HTML - Estilos y efectos de fuentes <s></s> tachado
52.- HTML - Estilos y efectos de fuentes <strike><strike/> tachado.
51.- HTML - Estilos y efectos de fuentes <u></u> subrayado.
50.- HTML - Estilos y efectos de fuentes <b></b> negrita 
soolucionescom

1 comentario:

  1. Hola, podríais decirme como se hace para cambiar el color del fondo.
    gracias
    Isa

    ResponderEliminar

Gracias por tu comentario, en un maximo de 48 horas sera publicado.