Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 79

Visitas el mes pasado: 177

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




1. El lenguaje CSS (IV)

1.4 Colores y medidas

html

En muchas de las propiedades CSS debemos asignar como valor un color o una medida. Veremos en esta página cómo definir colores y medidas para expresarlos como valores de las propiedades CSS.


Definir colores

La forma de definir los colores no es exclusiva del lenguaje CSS ya que en otros lenguajes como HTML o Javascript, cuando tenemos que definir colores, usaremos los mismos métodos que para CSS.

Tenemos cinco métodos de escribir los valores que definen el color. Estos son: Palabras clave, RGB numérico, RGB hexadecimal, RGB porcentual y colores del sistema.

Recientemente, con las nuevas versiones HTML5 y CSS3, se incorporan los métodos RGBA y HSL, los cuales no los veremos aquí, sino que se explicarán en los manuales dedicados a estas nuevas versiones.


Palabras clave.

Hay una serie de colores que se pueden definir mediante palabras clave. Estas palabras son el nombre del color en inglés. Los colores que así se definen son:


aqua black blue
fuchsia gray green
lime maroon navy
olive orange purple
red silver teal
white yellow

Esta lista es muy limitada, son sólo 17 colores, por lo que este método, aunque es muy sencillo, apenas se usa en las hojas de estilo de los sitios Web reales.

Además de esta lista básica, las últimas versiones de los navegadores modernos soportan muchos otros nombres de colores, de manera que amplian bastante esta lista. La lista completa se puede ver en http://es.wikipedia.org/wiki/Colores_web#Tabla_de_colores.


Método RGB decimal

El método RGB se basa en la descomposición del color en los tres colores primarios que utiliza la pantalla: el rojo, el verde y el azul, (R = Red, G = Green, B = Blue, sus nombres en inglés, de ahí el nombre del método).

Los distintos métodos RGB para definir colores se basan en la cantidad o intensidad que tiene un color determinado, de cada uno de los colores primarios.

Definir un color en RGB es por tanto definir la cantidad de mezcla de los tres colores primarios que hace falta para conseguir ese color. Por lo tanto un color definido en RGB tendrá siempre tres números que lo definen. el primero corresponderá al color rojo, el segundo al verde, y el tercero al azul.

La diferencia entre los distintos métodos RGB está en la escala usada para medir los colores y en el tipo de números que usa esa escala, así como la forma de escribirlo en el archivo CSS.

El RGB decimal usa una escala pàra cada número que va del 0 al 255, siendo el 0 la ausencia de color y el 255 el máximo de color. La forma de escribir el valor es: rgb(x,y,z); siendo x, y, z los valores respectivos de los colores rojo, verde, y azul. (números entre el 0 y el 255)


RGB porcentual.

El metodo RGB porcentual es muy similar al método RGB decimal, con la única diferencia de que el valor de los componentes RGB está entre el 0% y el 100%. la forma de escribir el valor en CSS es: rgb(x%,y%,z%);. Es decir expresamos la intensidad del color en tantos por ciento. Por tanto x, y, z, son los valores respectivos de los colores rojo, verde, y azul, que pueden estar entre el 0 y el 100. Estos números irán seguidos del signo del porcentaje (%).


Método RGB hexadecimal

Aunque puede parecer el más complicado, ya que los números se escriben en el sistema hexadecimal, es el más usado.

el sistema hexadecimal consiste en escribir los números en base 16, es decir aparte de las cifras del 0 al 9 se utilizan también las letras de la a a la f como si fueran cifras, con lo cual la secuencia de cifras sería la siguiente:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

En esta secuencia despues del número nueve la "a" corresponde al 10, la "b" al 11, y así hasta la "f" que será el número 15. El 16 lo escribiremos ya con 2 cifras (10).

En el sistema hexadecimal tenemos un total de 256 números de dos cifras (del 00 al ff), usaremos por tanto un número de dos cifras hexadecimal por cada color básico. Al igual que con la escala del RGB decimal tendremos 256 números para definir la intensidad de cada color básico, sólo que aquí los escribimos de otra manera.

Para definir un color con RGB hexadecimal se siguen los siguientes pasos:

Las cifras hexadecimales que se escriben con letras es indiferente ponerlas en mayusculas o minúsculas, por ejemplo podemos escribir #FFFF00 o también #ffff00.


Definir los componentes de un color.

Definir los colores en RGB hexadecimal puede resultar complicado, si no se tiene una aplicación que nos ayude. La mayoría de programas de diseño gráfico o de retoque fotográfico disponen de una paleta de colores que nos indica el nombre del color en RGB decimal y hexadecimal. Nosotros utilizaremos principalmente los siguientes programas para obtener los valores de los colores:


Método colores del sistema.

El metodo de colores del sistema es similar al de los "colores por su nombre", pero en este caso se hace referencia al color que muestran algunos elementos del sistema operativo del usuario. Es decir si utilizamos el sistema operativo Windows, definimos los colores por su utilización en el sistema operativo.

Existen varios colores definidos, como por ejemplo ActiveBorder, que hace referencia al color del borde de las ventanas activas. La lista completa de colores definidos se puede ver en http://www.w3.org/TR/CSS21/ui.html#system-colors., punto 18.2

Aunque es posible definir los colores en CSS utilizando estos nombres, este es un método que casi nunca se utiliza, por lo que se puede considerar prácticamente como una rareza.


Medidas en CSS

Muchas propiedades CSS tienen como valor una medida. En CSS al expresar el valor de una medida debemos poner siempre el número (cantidad) seguido del indicador de unidad de medida. Este consiste en unas letras que indican el tipo de medida. Por ejemplo, no podemos poner simplemente 10 sino que debemos poner 10px, (10 pixels).

Sólamente cuando el valor es 0 podemos dejar de poner el indicador de medida, por ejemplo podemos poner 0px o simplemente 0.

En HTML esto es diferente, ya que las medidas se indican normalmente en píxeles y podemos poner simplemente la cantidad (sin indicar el "px" detrás).

En CSS podemos encontrar los siguientes tipos de unidades de medidas:


Unidades relativas

La unidades relativas son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios. A continuación se muestra la lista de unidades de medida relativas y la referencia que se toma para determinar su valor real:

el valor de 1em es en principio el mismo del tamaño de letra del navegador por defecto, mientras que el valor de 1ex es aproximadamente 1.5em. Las medidas indicadas en píxel también se consideran relativas, ya que el aspecto de los elementos dependerá de la resolución del dispositivo en el que se visualiza el documento HTML.


Unidades absolutas

Las unidades absolutas definen las medidas de forma completa, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados. A continuación se muestra la lista completa de unidades absolutas definidas por CSS y su significado:

De todas las unidades absolutas, la única que se utiliza con cierta frecuencia es la de los puntos (pt). El motivo es que se trata de la unidad preferida para indicar el tamaño de letra del texto para los documentos que se van a imprimir


Porcentajes

otra unidad de medida relativa son los porcentajes. Un porcentaje está formado por un valor numérico seguido del símbolo % y siempre está referenciado a otra medida.

Cuando se refieren a tamaños de letra se toma como referencia la letra del elemento contenedor: letra del contenedor = 100%. Cuando se refieren a anchuras o alturas, o medidas, se toma como referencia la anchura, altura o medida del elemento contenedor (la cual es el 100%, por lo tanto si queremos que éste se mantenga dentro, tendrá que ser inferior al 100%.


Recomendaciones

En general, se recomienda el uso de unidades relativas siempre que sea posible, ya que mejora la accesibilidad de la página y permite que los documentos se adapten mejor a cualquier medio y dispositivo.

Se recomienda el uso de la unidad "em" para indicar el tamaño del texto y para todas las medidas que sean posibles.

Normalmente se se utiliza el píxel y los porcentajes para definir la estructura y diseño del documento (básicamente, la anchura de las columnas y elementos de las páginas) y el "em" y los porcentajes para el tamaño de letra de los textos.

Es muy importante escribir bien los valores de colores y medidas. Una de las principales causas de errores en la programación de páginas es no escribir bien los valores de colores y medidas. Se recomienda por tanto especial cuidado. Un número mal puesto o de más, o un pàréntesis mal puesto para los colores, o dejar de indicar detrás del número el tipo de medida para las medidas, suelen ser errores frecuentes que si tenemos cuidado son fáciles de detectar o corregir.

Es recomendable volver a visitar esta página si tenemos dudas, para recordar cómo debemos escribir los valores de colores o medidas cuando tengamos que escribirlos en CSS.





En la siguiente página veremos los diferentes tamaños, colores y formatos de texto tratados con CSS.

Texto en CSS



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com