Funcionamiento básico
de CSS
Antes
de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban
etiquetas HTML especiales para modificar el aspecto de los elementos de la
página. El siguiente ejemplo muestra una página HTML con estilos definidos sin
utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo
de estilos sin CSS</title>
</head>
<body>
<h1><font
color="red"
face="Arial"
size="5">Titular
de la página</font></h1>
<p><font
color="gray"
face="Verdana"
size="2">Un
párrafo de texto no muy largo.</font></p>
</body>
</html>
El
ejemplo anterior utiliza la etiqueta <font>
con sus atributos color, face y size para definir el
color, el tipo y el tamaño de letra de cada elemento de la página.
El
problema de utilizar este método para definir el aspecto de los elementos se
puede ver claramente con el siguiente ejemplo: si la página tuviera 50
elementos diferentes, habría que insertar 50 etiquetas <font>.
Si el sitio web entero se compone de 10.000 páginas diferentes, habría que
definir 500.000 etiquetas <font>.
Como cada etiqueta <font>
tiene tres atributos, habría que definir 1.5 millones de atributos.
Como
el diseño de los sitios web está en constante evolución, es habitual modificar
cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con el
ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000
etiquetas y 1.5 millones de atributos
La solución que propone CSS es mucho mejor, como se puede
ver en el siguiente ejemplo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas
<font>. Como se verá más
adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se
aplican en la página.En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas
<h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con
un tamaño de letra grande. Además, las etiquetas <p> de la página se deben
ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solución anterior, pero sigue sin ser una solución ideal. Como los estilos CSS sólo se aplican en la página que los incluye, si queremos que las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían copiar 10.000 veces esas mismas reglas CSS. Más adelante se explica la solución que propone CSS para evitar este problema.
Formas de inclusión de CSS en HTML
Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta<style> de
HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de
la sección <head>).Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.
Los ejemplos mostrados en este libro utilizan este método para aplicar CSS al contenido HTML de las páginas. De esta forma el código de los ejemplos es más conciso y se aprovecha mejor el espacio.
Incluir CSS en los elementos HTML
El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas<font>.Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
</body>
</html>
Glosario básico
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
·
Regla: cada uno de los estilos que componen
una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un
símbolo de "llave de
apertura" (
{), otra
parte denominada "declaración" y
por último, un símbolo de "llave
de cierre" (
}).
·
Selector: indica el elemento o elementos
HTML a los que se aplica la regla CSS.
·
Declaración: especifica los estilos que se
aplican a los elementos. Está compuesta por una o más propiedades CSS.
·
Propiedad: característica que se modifica
en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de
fondo, etc.
·
Valor: establece el nuevo valor de la
característica modificada en el elemento.
Un archivo CSS puede contener un número ilimitado de
reglas CSS, cada regla se puede aplicar a varios selectores diferentes y cada
declaración puede incluir tantos pares propiedad/valor como se desee.
El estándar CSS 2.1 define 115 propiedades, cada una con
su propia lista de valores permitidos. Por su parte, los últimos borradores del
estándar CSS 3 ya incluyen 239 propiedades.Sintaxis de la definición de cada propiedad CSS
A lo largo de los próximos capítulos, se incluyen las definiciones formales de la mayoría de propiedades de CSS. La definición formal se basa en la información recogida en el estándar oficial y se muestra en forma de tabla.Una de las principales informaciones de cada definición es la lista de posibles valores que admite la propiedad. Para definir la lista de valores permitidos se sigue un formato que es necesario detallar.
Si el valor permitido se indica como una sucesión de palabras sin ningún carácter que las separe (paréntesis, comas, barras, etc.) el valor de la propiedad se debe indicar tal y como se muestra y con esas palabras en el mismo orden.
Si el valor permitido se indica como una sucesión de valores separados por una barra simple (carácter
|) el valor de la propiedad debe tomar uno y
sólo uno de los valores indicados. Por ejemplo, la notación <porcentaje> | <medida> |
inherit indica que la propiedad solamente puede
tomar como valor la palabra reservada inherit o un porcentaje o una
medida.Si el valor permitido se indica como una sucesión de valores separados por una barra doble (símbolo
||) el valor de la propiedad puede tomar uno
o más valores de los indicados y en cualquier orden.Por ejemplo, la notación
<color> || <estilo> || <medida> indica que la propiedad puede tomar como valor cualquier combinación de
los valores indicados y en cualquier orden. Se podría establecer un color y un
estilo, solamente una medida o una medida y un estilo. Además, el orden en el
que se indican los valores es indiferente. Opcionalmente, se pueden utilizar
paréntesis para agrupar diferentes valores.Por último, en cada valor o agrupación de valores se puede indicar el tipo de valor: opcional, obligatorio, múltiple o restringido.
El carácter
* indica que el valor ocurre cero o más veces; el carácter +
indica que el valor ocurre una o más veces; el carácter ?
indica que el valor es opcional y por último, el carácter {número_1, número_2} indica que el valor ocurre al menos tantas veces como el valor indicado en
número_1 y como máximo tantas veces como el valor indicado en número_2.Por ejemplo, el valor
[<family-name> , ]*
indica que el valor de tipo <family_name> seguido por una coma se puede incluir cero o más veces. El valor <url>? <color> significa que la URL es opcional y el color obligatorio y en el orden
indicado. Por último, el valor [<medida>
| thick | thin] {1,4} indica que se pueden escribir entre 1 y 4
veces un valor que sea o una medida o la palabra thick o la palabra thin.No obstante, la mejor forma de entender la notación formal para las propiedades de CSS es observar la definición de cada propiedad y volver a esta sección siempre que sea necesario
Selectores
Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.
A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.
El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.
No obstante, la mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.
Selector universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):* {
margin: 0;
padding: 0;
}
*).
A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un
mismo estilo se pueda aplicar a todos los elementos de una página.No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados, como se verá más adelante.
Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:p {
...
}
< y >)
correspondiente a los elementos que se quieren seleccionar.El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}
h1, h2 y h3 comparten los mismos estilos:h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
,) y el resultado es que la siguiente regla
CSS es equivalente a las tres reglas anteriores:h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.El selector del siguiente ejemplo selecciona todos los elementos
<span> de la página que se encuentren dentro de un elemento <p>:p span { color: red; }
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
p
span selecciona tanto texto1
como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser
descendiente directo del otro. La única condición es que un elemento debe estar
dentro de otro elemento, sin importar el nivel de profundidad en el que se
encuentre.Al resto de elementos
<span> de la página que no
están dentro de un elemento <p>, no se les aplica la regla CSS anterior.Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los
<span> contenidos dentro de un <h1>:p span { color: red; }
h1 span { color: blue; }
·
Los elementos
<span>
que se encuentran dentro de un elemento <p> se
muestran de color rojo.
·
Los elementos
<span>
que se encuentran dentro de un elemento <h1> se
muestran de color azul.
·
El resto de elementos
La sintaxis formal del selector descendente se muestra a
continuación:<span> de
la página, se muestran con el color por defecto aplicado por el navegador.selector1 selector2 selector3 ... selectorN
En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
<em> que se encuentren dentro de elementos de tipo <span>, que a su vez se
encuentren dentro de elementos de tipo <a> que se encuentren
dentro de elementos de tipo <p>.No debe confundirse el selector descendente con la combinación de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre
dentro de un elemento de tipo <p>.
Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la
condición del selector p
* a.Agrupación de reglas Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se aplican a un mismo selector se definan en diferentes reglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
<h1>. Antes de que el
navegador muestre la página, procesa todas las reglas CSS de la página para
tener en cuenta todos los estilos definidos para cada elemento.Cuando el selector de dos o más reglas CSS es idéntico, se pueden agrupar las declaraciones de las reglas para hacer las hojas de estilos más eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
h1 { color: red; font-size: 2em; font-family: Verdana; }
h1 {color:red;font-size:2em;font-family:Verdana;}
Herencia
Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Si se considera el siguiente ejemplo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { color: blue; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
body
solamente establece el color de la letra para el elemento <body>.
No obstante, la propiedad color es una de las que se heredan de forma automática, por lo que todos los
elementos descendientes de <body> muestran ese mismo color de letra. Por tanto, establecer el color de la
letra en el elemento <body> de la página implica cambiar el color de letra de todos los elementos de
la página.Aunque la herencia de estilos se aplica automáticamente, se puede anular su efecto estableciendo de forma explícita otro valor para la propiedad que se hereda, como se muestra en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
<body>, por lo que todos los elementos de la página se mostrarían con ese mismo
color y tipo de letra. No obstante, las otras reglas CSS modifican alguno de
los estilos heredados.De esta forma, los elementos
<h1> de la página se
muestran con el tipo de letra Verdana establecido por el selector h1 y se muestran de color negro que es el valor heredado del elemento <body>.
Igualmente, los elementos <p> de la página se muestran del color rojo establecido por el selector p y
con un tipo de letra Arial heredado del elemento <body>.La mayoría de propiedades CSS aplican la herencia de estilos de forma automática. Además, para aquellas propiedades que no se heredan automáticamente, CSS incluye un mecanismo para forzar a que se hereden sus valores, tal y como se verá más adelante.
Por último, aunque la herencia automática de estilos puede parecer complicada, simplifica en gran medida la creación de hojas de estilos complejas. Como se ha visto en los ejemplos anteriores, si se quiere establecer por ejemplo la tipografía base de la página, simplemente se debe establecer en el elemento
<body> de la página y el resto de elementos la heredarán de forma automática.
Colisiones de estilos
En
las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a
un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden
dar colisiones como la del siguiente ejemplo:
p { color: red; }
p { color: blue; }
<p>...</p>
¿De
qué color se muestra el párrafo anterior? CSS tiene un mecanismo de resolución
de colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que
se trate (de navegador, de usuario o de diseñador), la importancia de cada
regla y lo específico que sea el selector.
El
método seguido por CSS para resolver las colisiones de estilos se muestra a
continuación:
1.
Determinar todas
las declaraciones que se aplican al elemento para el medio CSS seleccionado.
2.
Ordenar las
declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y
su prioridad (palabra clave !important).
3.
Ordenar las
declaraciones según lo específico que sea el selector. Cuanto más genérico es
un selector, menos importancia tienen sus declaraciones.
4.
Si después de
aplicar las normas anteriores existen dos o más reglas con la misma prioridad,
se aplica la que se indicó en último lugar.
Hasta
que no se expliquen más adelante los conceptos de tipo de hoja de estilo y la
prioridad, el mecanismo simplificado que se puede aplicar es el siguiente:
1.
Cuanto más
específico sea un selector, más importancia tiene su regla asociada.
2.
A igual especificidad,
se considera la última regla indicada.
Como
en el ejemplo anterior los dos selectores son idénticos, las dos reglas tienen
la misma prioridad y prevalece la que se indicó en último lugar, por lo que el
párrafo se muestra de color azul.
En
el siguiente ejemplo, la regla CSS que prevalece se decide por lo específico
que es cada selector:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p
id="especial">...</p>
Al
elemento <p> se le aplican
las tres declaraciones. Como su origen y su importancia es la misma, decide la
especificidad del selector. El selector *
es el menos específico, ya que se refiere a "todos los elementos de la
página". El selector p
es poco específico porque se refiere a "todos los párrafos de la
página". Por último, el selector p#especial
sólo hace referencia a "el párrafo de la página cuyo atributo id sea igual a
especial". Como el selector p#especial es el más
específico, su declaración es la que se tiene en cuenta y por tanto el párrafo
se muestra de color verde.
Unidades de medida y colores
Muchas de las propiedades de CSS que se ven en los próximos capítulos permiten indicar medidas y colores en sus valores. Además, CSS es tan flexible que permite indicar las medidas y colores de muchas formas diferentes.Por este motivo, se presentan a continuación todas las alternativas disponibles en CSS para indicar las medidas y los colores. En los siguientes capítulos, cuando una propiedad pueda tomar como valor una medida o un color, no se volverán a explicar todas estas alternativas
Colores
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS.Palabras clave
CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
Colores definidos mediante las palabras clave de CSS
La imagen anterior ha sido extraída de la sección sobre
colores de la especificación oficial de CSS.Aunque es una forma muy sencilla de referirse a los colores básicos, este método prácticamente no se utiliza en las hojas de estilos de los sitios web reales, ya que se trata de una gama de colores muy limitada.
Además de la lista básica, los navegadores modernos soportan muchos otros nombres de colores. La lista completa se puede ver en en.wikipedia.org/wiki/Websafe.
RGB decimal
En el campo del diseño gráfico, se han definido varios modelos para hacer referencia a los colores. Los dos modelos más conocidos son RGB y CMYK. Simplificando su explicación, el modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. Técnicamente, el modelo RGB es un modelo de tipo "aditivo", ya que los colores se obtienen sumando sus componentes.Por lo tanto, en el modelo RGB un color se define indicando sus tres componentes R (rojo), G (verde) y B (azul). Cada una de las componentes puede tomar un valor entre cero y un valor máximo. De esta forma, el color rojo puro en RGB se crea mediante el máximo valor de la componente R y un valor de
0 para las componentes G y B.Si todas las componentes valen
0,
el color creado es el negro y si todas las componentes toman su valor máximo,
el color obtenido es el blanco. En CSS, las componentes de los colores
definidos mediante RGB decimal pueden tomar valores entre 0 y 255.
El siguiente ejemplo establece el color del texto de un párrafo:p { color: rgb(71, 98, 176); }
rgb() y
entre paréntesis se indican las tres componentes RGB, en ese mismo orden y
separadas por comas. El color del ejemplo anterior se obtendría mezclando las
componentes R=71, G=98, B=176, que se corresponde con un color azul claro.Si se indica un valor menor que
0
para una componente, automáticamente se transforma su valor en 0.
Igualmente, si se indica un valor mayor que 255, se transforma automáticamente su valor a 255.
RGB porcentual
Las componentes RGB de un color también se pueden indicar mediante un porcentaje. El funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal. La única diferencia es que en este caso el valor de las componentes RGB puede tomar valores entre0% y 100%. Por tanto, para transformar un valor RGB
decimal en un valor RGB porcentual, es preciso realizar una regla de tres
considerando que 0 es igual a 0% y 255 es igual a 100%.El mismo color del ejemplo anterior se puede representar de forma porcentual:
p { color: rgb(27%, 38%, 69%); }
0%, se transforma automáticamente en 0% y si se indica un valor superior a 100%,
se trunca su valor a 100%.RGB hexadecimal
Aunque es el método más complicado para indicar los colores, se trata del método más utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método.Para entender el modelo RGB hexadecimal, en primer lugar es preciso introducir un concepto matemático llamado sistema numérico hexadecimal. Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números (del
0 al 9). Por este motivo, se dice que utilizamos un sistema numérico decimal.No obstante, el sistema decimal es solamente uno de los muchos sistemas numéricos que se han definido. Entre los sistemas numéricos alternativos más utilizados se encuentra el sistema hexadecimal, que utiliza 16 símbolos para representar sus números.
Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la
A a la F) para representar los números. De esta
forma, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B equivale al número 11,
la C al 12, la D al 13, la E al 14 y la F al número 15.Definir un color en CSS con el método RGB hexadecimal requiere realizar los siguientes pasos: - Determinar las componentes RGB decimales del color original, por ejemplo: R =
71, G = 98, B = 176 - Transformar el valor decimal de cada
componente al sistema numérico hexadecimal. Se trata de una operación
exclusivamente matemática, por lo que puedes utilizar una calculadora. En el
ejemplo anterior, el valor hexadecimal de cada componente es: R = 47, G
= 62, B = B0 - Para obtener el color completo en formato RGB hexadecimal, se concatenan
los valores hexadecimales de las componentes RGB en ese orden y se les añade el
prefijo #. De esta forma, el color del ejemplo anterior es #4762B0 en
formato RGB hexadecimal.Siguiendo el mismo ejemplo de las secciones anteriores, el color del párrafo se indica de la siguiente forma utilizando el formato RGB hexadecimal:
p { color: #4762B0; }
.
Herramienta de color de Photoshop para definir los colores según los modelos
RGB, CMYK, Lab, HSB y RGB hexadecimal
El formato RGB hexadecimal es la forma más compacta de
indicar un color, ya que incluso es posible comprimir sus valores cuando todas
sus componentes son iguales dos a dos:#AAA = #AAAAAA
#FFF = #FFFFFF
#A0F = #AA00FF
#369 = #336699
body { background-color: #FFF; color: #000; }
h1, h2, h3, h4, h5, h6 { color: #C00; }
Colores del sistema
Los colores del sistema son similares a los colores indicados mediante su nombre, pero en este caso hacen referencia al color que muestran algunos elementos del sistema operativo del usuario.Existen varios colores definidos, como por ejemplo
ActiveBorder,
que hace referencia al color del borde de las ventanas activas. Consulta la lista completa de
colores del sistema.Aunque es posible definir los colores en CSS utilizando estos nombres, se trata de un método que nunca se utiliza, por lo que se puede considerar prácticamente como una rareza de CSS.
Colores web safe
Como cada componente RGB de los colores puede tomar un
valor entre
0 y 255, el número total de colores que se pueden representar con este formato es
de 256 x 256 x 256 =
16.777.216 colores. Sin embargo, en la década de los
90 los monitores de los usuarios no eran capaces de mostrar más de 256
colores diferentes.
A partir de todos los colores disponibles, se eligieron 216
colores que formaron la paleta de colores "web
safe". Esta paleta de colores podía ser utilizada por los
diseñadores con la seguridad de que se verían correctamente en cualquier
navegador de cualquier sistema operativo de cualquier usuario.
Hoy en día, su importancia ha descendido notablemente, ya
que prácticamente todos los usuarios utilizan dispositivos con una profundidad
de color de 16 y 32 bits. No obstante, el auge en el uso de los dispositivos
móviles hace que siga siendo un tema a considerar, ya que las pantallas de
muchos móviles sólo pueden representar un número reducido de colores.
Consulta la lista completa de
colores web safe y sus valores hexadecimales.
