COLORES EN HTML

Una página web está diseñada y pensada para verse a través de un monitor. El monitor utiliza los colores primarios
aditivos rojo, verde y azul. Esto es conocido como el sistema RGB por las siglas de los colores en inglés.

De esta forma podemos crear un color indicando la cantidad de cada uno de los primarios que interviene en la mezcla. Para cada
color podemos especificar 256 intensidades distintas, y al ser tres colores podemos obtener un total aproximado de 16 millones de
colores.

En html, podemos definir un color RGB con valores hexadecimales, siguiendo el formato #F7F0E2 (el más utilizado), con valores para
cada color entre el 00 (mínimo) y FF (máximo). Podemos expresarlo con valores decimales, con la fórmula rgb(247, 240, 226), con
valores entre 0 y 255, o siguiendo este mismo formato con valores porcentuales, como rgb(90%, 60%, 35%). Así, el color lo podemos
definir como #FA75C4, rgb(250, 117, 196) o rgb(98%, 46%, 77%).

Además los colores más comunes tienen un nombre propio en inglés. Por lo que en vez de poner #0000FF podemos escribir
directamente blue.

Puedes ver estos colores en la siguiente tabla:

Color Nombre RGB Color Nombre RGB

AliceBlue #F0F8FF LightPink #FFB6C1
AntiqueWhite #FAEBD7 LightSalmon #FFA07A
Aqua #00FFFF LightSeaGreen #20B2AA
Aquamarine #7FFFD4 LightSkyBlue #87CEFA
Azure #F0FFFF LightSlateGray #778899
Beige #F5F5DC LightSlateGrey #778899
Bisque #FFE4C4 LightSteelBlue #B0C4DE
Black #000000 LightYellow #FFFFE0
BlanchedAlmond #FFEBCD Lime #00FF00
Blue #0000FF LimeGreen #32CD32
BlueViolet #8A2BE2 Linen #FAF0E6
Brown #A52A2A Magenta #FF00FF
BurlyWood #DEB887 Maroon #800000
CadetBlue #5F9EA0 MediumAquamarine #66CDAA
Chartreuse #7FFF00 MediumBlue #0000CD
Chocolate #D2691E MediumOrchid #BA55D3
Coral #FF7F50 MediumPurple #9370DB
CornflowerBlue #6495ED MediumSeaGreen #3CB371
Cornsilk #FFF8DC MediumSlateBlue #7B68EE
Crimson #DC143C MediumSpringGreen #00FA9A
Cyan #00FFFF MediumTurquoise #48D1CC
DarkBlue #00008B MediumVioletRed #C71585
DarkCyan #008B8B MidnightBlue #191970

DOCENTE : SARMIENTO JURADO,JOOB H.

 colores no se ven igual en todos los monitores, hay un conjunto de colores que son recomendables para su utilización en las páginas
web ya que muestran pocas diferencias de color en distintos monitores, son conocidos como colores web o colores seguros.

Existen 216 colores seguros para web, se obtienen combinando los valores 00, 33, 66, 99, CC y FF y son estos:

#000000 #000033 #000066 #000099 #0000CC #0000FF

#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF

color. Por ejemplo, #FF9900 es lo mismo que #F90, y #FFFFFF es igual que #FFF.

FORMATO DEL TEXTO

Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más detalle viendo las posibilidades que ofrecen.
Empezaremos con el formato del texto y las propiedades que se le pueden aplicar: color, fuente, tamaño, inclinación, grosor, decoración
y mayúsculas/minúsculas.

COLOR

El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas:

a. Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.

b. Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.
c. Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.
d. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo color: green; o color: DarkGreen;.

Como todo esto es un poco lioso, hay herramientas que facilitan el trabajo con los colores, por ejemplo, ColorPic es un pequeño
programa gratuito que puedes descargarte en esta dirección: http://www.iconico.com/colorpic/. Los mejores editores gráficos también
incorporan herramientas en este sentido, más adelante veremos como trabajar con colores con el editor Kompozer.

Si todavía no lo has hecho, es conveniente que veas este tema básico sobre colores . Puedes encontrar más información sobre
los colores en el Curso de Illustrator.

En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas a la elección de los colores más apropiados.

FUENTE

Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo
en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman";.

Pero hemos de tener en cuenta que puede que quien vea la página no tenga instalada la fuente que queramos. Para evitar esto,
existen cinco fuentes genéricas que sí se mostrarán en cualquier equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no quiere

DOCENTE : SARMIENTO JURADO,JOOB H.

 decir que sólo debamos de utilizar estas cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El navegador
elegirá, comenzando por la derecha, la primera disponible, por lo que es conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;.

Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir diferentes fuentes y previsualizar su forma, más
adelante veremos como hacerlo con Kompozer.

TAMAÑO

El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamaño, pero lo más frecuente
es utilizar px (pixels), o porcentajes % o em, estas dos últimas son tamaños relativos al tamaño de la fuente del elemento que está por
encima. 100% o 1em, sería el mismo tamaño, mientras que 200% o 2em sería el doble y 50% o 0.5em sería la mitad.

Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el texto de la página de forma más coherente. Así
los discapacitados visuales podrán utilizar el comando para cambiar el tamaño de texto que tienen los navegadores.
http://usalo.es/152/botones-para-cambiar-el-tamano-de-letra/

INCLINACIÓN

Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de los siguientes valores:

• normal. Coloca el estilo de forma normal, sin inclinación.

• oblique. Inclina el texto.
• italic. Además de inclinarlo, susituye la fuente por su versión en itálica si está disponible. Aunque la mayoría de los navegadores
no lo hacen.
GROSOR

Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita, utilizando font-weight. Puede tomar los siguientes
valores:

• normal. El texto no se muestra en negrita.

• bold. El texto se muestra en negrita.

Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los navegadores no las muestran.

DOCENTE : SARMIENTO JURADO,JOOB H.