Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[8]
Unidades y Colores en CSS

Publicidad

[8.1] unidades relativas y absolutas

CSS proporciona en realidad dos tipos de medidas: absolutas y relativas. Las absolutas utilizan magnitudes que se indican de forma independientes. El caso más claro es usar como unidad de medida el píxel.

Si por ejemplo indicamos que el texto tenga un tamaño de 12px, ocupará 12 píxeles, independientemente del medio, o de las características de la letra base.

Las unidades absolutas producen efectos no deseados: 12 píxeles puede ser un tamaño suficiente para un dispositivo de poca resolución, como un móvil de 480x320 píxeles de pantalla; pero en un dispositivo de alta calidad, como por ejemplo un iPad retina por ejemplo, sería un tamaño apenas legible en esa pantalla que tiene más de 300 píxeles por pulgada (12 píxeles ocupan muy poco tamaño).

Por contra, las unidades relativas hacen que el tamaño de la letra no dependa de la resolución sino de un tamaño base. Ese tamaño base depende en cada dispositivo (se supone que se adapta de forma apropiada al dispositivo) con la finalidad de que los elementos de la página se adapten a dicho dispositivo.

La desventaja de las unidades relativas es que ya no disponemos de la posibilidad de saber con exactitud el tamaño de un elemento; medirá más o menos según el tamaño base que se esté utilizando en cada dispositivo de usuario. En realidad hoy en día es una gran ventaja, ya que estamos obligados a diseñar de forma adaptativa (responsive design), pero es difícil de utilizar.

[8.1.1]unidades absolutas de medida

Esta es la lista de las unidades de medida utilizables en CSS:

Para tener una percepción más directa de la relación entre unidades absolutas y relativas, podemos acudir a la dirección:

http://www.w3schools.com/cssref/css_pxtoemconversion.asp

[8.1.2]unidades relativas de medida

Como la recomendación actual es que las páginas se adapten al dispositivo que las está viendo, se recomienda usar tamaños relativos. La unidad más recomendable a usar es em, por la precisión que tiene. El tamaño de la letra indicado con em (como se ha explicado en el apartado anterior) es relativo al contenedor, es decir toma el tamaño que tiene el elemento que contiene a aquel sobre el que indicamos el tamaño y a partir de él se recalcula el nuevo tamaño.

Esto se entiende mejor con un ejemplo:

<style>
	body{
		font-size:20px;
	h1{
		font-size:2em;
	}
	span{
		font-size:1.4em;
	}
</style>
<body>
  <h1>Soy texto titular<span> y yo también</span></h1>
  <span>Yo no</span>
</body>

Sorprendentemente el resultado de este código es:

Donde se observa que el texto y yo también aparece incluso más grande que el resto de la etiqueta h1 (aunque el tamaño de h1 es 2em y el de span es 1.4em)

La razón es que, como em expresa tamaños relativos al contenedor, h1 tiene como contenedor a body y por ello el tamaño de la letra de h1 es de 40 píxeles. Como span tiene como contenedor a h1, se multiplica 1,4 · 40 y así el texto y yo también ocupará 56 píxeles.

Sin embargo el texto yo no, que está también dentro de un elemento de tipo span, se muestra con un tamaño de 28 píxeles al ser su contenedor la etiqueta body.

Debido a la complejidad de las páginas web actuales. Esa forma de funcionar de la unidad em, puede dar lugar a dificultades para diseñar la página web. Por ello se incorporó la unidad rem, que, aun siendo relativa, establece como base el tamaño por defecto de la página (lo que se fije para el documento html completo).

Así, si modificamos el ejemplo anterior:

<style>
	html{
		font-size:20px;
	}
	h1{
		font-size:2rem;
	}
	span{
		font-size:1.4rem;
	}
</style>
<body>
  <h1>Soy texto titular<span> y yo también</span></h1>
  <span>Yo no</span>
</body>

Con ese código se obtiene el resultado:

Los textos de las dos etiquetas span son iguales (serán de 28 píxeles) ya que la unidad rem toma como base el tamaño de la letra raíz (en el código de ejemplo redefinida a 20 píxeles).

Podemos combinar ambas medidas en el mismo documento. Por otro lado hay que recordar que, mientras que la unidad em es aceptada casi por cualquier navegador, rem todavía no es reconocida por muchos navegadores.

[8.2] unidades para ángulos

Se usan por ejemplo en transiciones y animaciones.

Hay numerosas etiquetas con capacidad de mostrar colores. Para indicar un color, CSS dispone de estas posibilidades:

Color

Name

Hexadecimal

Modo RGB

Modo HSL

 

Alice Blue

#F0F8FF

rgb(94%,97%,100%)

hsl(208,100%,97%)

 

Antique White

#FAEBD7

rgb(98%,92%,84%)

hsl(34,78%,91%)

 

Aqua

#00FFFF

rgb(0%,100%,100%)

hsl(180,100%,50%)

 

Aquamarine

#7FFFD4

rgb(50%,100%,83%)

hsl(160,100%,75%)

 

Azure

#F0FFFF

rgb(94%,100%,100%)

hsl(180,100%,97%)

 

Beige

#F5F5DC

rgb(96%,96%,86%)

hsl(60,56%,91%)

 

Bisque

#FFE4C4

rgb(100%,89%,77%)

hsl(33,100%,88%)

 

Black

#000000

rgb(0%,0%,0%)

hsl(0,0%,0%)

 

Blanched Almond

#FFEBCD

rgb(100%,92%,80%)

hsl(36,100%,90%)

 

Blue

#0000FF

rgb(0%,0%,100%)

hsl(240,100%,50%)

 

Blue Violet

#8A2BE2

rgb(54%,17%,89%)

hsl(271,76%,53%)

 

Brown

#A52A2A

rgb(65%,16%,16%)

hsl(0,59%,41%)

 

Burlywood

#DEB887

rgb(87%,72%,53%)

hsl(34,57%,70%)

 

Cadet Blue

#5F9EA0

rgb(37%,62%,63%)

hsl(182,26%,50%)

 

Chartreuse

#7FFF00

rgb(50%,100%,0%)

hsl(90,100%,50%)

 

Chocolate

#D2691E

rgb(82%,41%,12%)

hsl(25,75%,47%)

 

Coral

#FF7F50

rgb(100%,50%,31%)

hsl(16,100%,66%)

 

Cornflower

#6495ED

rgb(39%,58%,93%)

hsl(219,79%,66%)

 

Cornsilk

#FFF8DC

rgb(100%,97%,86%)

hsl(48,100%,93%)

 

Crimson

#DC143C

rgb(86%,8%,24%)

hsl(348,83%,47%)

 

Cyan

#00FFFF

rgb(0%,100%,100%)

hsl(180,100%,50%)

 

Dark Blue

#00008B

rgb(0%,0%,55%)

hsl(240,100%,27%)

 

Dark Cyan

#008B8B

rgb(0%,55%,55%)

hsl(180,100%,27%)

 

Dark Goldenrod

#B8860B

rgb(72%,53%,4%)

hsl(43,89%,38%)

 

Dark Gray

#A9A9A9

rgb(66%,66%,66%)

hsl(0,0%,66%)

 

Dark Green

#006400

rgb(0%,39%,0%)

hsl(120,100%,20%)

 

Dark Khaki

#BDB76B

rgb(74%,72%,42%)

hsl(56,38%,58%)

 

Dark Magenta

#8B008B

rgb(55%,0%,55%)

hsl(300,100%,27%)

 

Dark Olive Green

#556B2F

rgb(33%,42%,18%)

hsl(82,39%,30%)

 

Dark Orange

#FF8C00

rgb(100%,55%,0%)

hsl(33,100%,50%)

 

Dark Orchid

#9932CC

rgb(60%,20%,80%)

hsl(280,61%,50%)

 

Dark Red

#8B0000

rgb(55%,0%,0%)

hsl(0,100%,27%)

 

Dark Salmon

#E9967A

rgb(91%,59%,48%)

hsl(15,72%,70%)

 

Dark Sea Green

#8FBC8F

rgb(56%,74%,56%)

hsl(120,25%,65%)

 

Dark Slate Blue

#483D8B

rgb(28%,24%,55%)

hsl(248,39%,39%)

 

Dark Slate Gray

#2F4F4F

rgb(18%,31%,31%)

hsl(180,25%,25%)

 

Dark Turquoise

#00CED1

rgb(0%,81%,82%)

hsl(181,100%,41%)

 

Dark Violet

#9400D3

rgb(58%,0%,83%)

hsl(282,100%,41%)

 

Deep Pink

#FF1493

rgb(100%,8%,58%)

hsl(328,100%,54%)

 

Deep Sky Blue

#00BFFF

rgb(0%,75%,100%)

hsl(195,100%,50%)

 

Dim Gray

#696969

rgb(41%,41%,41%)

hsl(0,0%,41%)

 

Dodger Blue

#1E90FF

rgb(12%,56%,100%)

hsl(210,100%,56%)

 

Firebrick

#B22222

rgb(70%,13%,13%)

hsl(0,68%,42%)

 

Floral White

#FFFAF0

rgb(100%,98%,94%)

hsl(40,100%,97%)

 

Forest Green

#228B22

rgb(13%,55%,13%)

hsl(120,61%,34%)

 

Fuchsia

#FF00FF

rgb(100%,0%,100%)

hsl(300,100%,50%)

 

Gainsboro

#DCDCDC

rgb(86%,86%,86%)

hsl(0,0%,86%)

 

Ghost White

#F8F8FF

rgb(97%,97%,100%)

hsl(240,100%,99%)

 

Gold

#FFD700

rgb(100%,84%,0%)

hsl(51,100%,50%)

 

Goldenrod

#DAA520

rgb(85%,65%,13%)

hsl(43,74%,49%)

 

Gray 

#808080

rgb(50%,50%,50%)

hsl(0,0%,50%)

 

Green (W3C)

#008000

rgb(0%,50%,0%)

hsl(120,100%,25%)

 

Green Yellow

#ADFF2F

rgb(68%,100%,18%)

hsl(84,100%,59%)

 

Honeydew

#F0FFF0

rgb(94%,100%,94%)

hsl(120,100%,97%)

 

Hot Pink

#FF69B4

rgb(100%,41%,71%)

hsl(330,100%,71%)

 

Indian Red

#CD5C5C

rgb(80%,36%,36%)

hsl(0,53%,58%)

 

Indigo

#4B0082

rgb(29%,0%,51%)

hsl(275,100%,26%)

 

Ivory

#FFFFF0

rgb(100%,100%,94%)

hsl(60,100%,97%)

 

Khaki

#F0E68C

rgb(94%,90%,55%)

hsl(54,77%,75%)

 

Lavender

#E6E6FA

rgb(90%,90%,98%)

hsl(240,67%,94%)

 

Lavender Blush

#FFF0F5

rgb(100%,94%,96%)

hsl(340,100%,97%)

 

Lawn Green

#7CFC00

rgb(49%,99%,0%)

hsl(90,100%,49%)

 

Lemon Chiffon

#FFFACD

rgb(100%,98%,80%)

hsl(54,100%,90%)

 

Light Blue

#ADD8E6

rgb(68%,85%,90%)

hsl(195,53%,79%)

 

Light Coral

#F08080

rgb(94%,50%,50%)

hsl(0,79%,72%)

 

Light Cyan

#E0FFFF

rgb(88%,100%,100%)

hsl(180,100%,94%)

 

Light Goldenrod

#FAFAD2

rgb(98%,98%,82%)

hsl(60,80%,90%)

 

Light Gray

#D3D3D3

rgb(83%,83%,83%)

hsl(0,0%,83%)

 

Light Green

#90EE90

rgb(56%,93%,56%)

hsl(120,73%,75%)

 

Light Pink

#FFB6C1

rgb(100%,71%,76%)

hsl(351,100%,86%)

 

Light Salmon

#FFA07A

rgb(100%,63%,48%)

hsl(17,100%,74%)

 

Light Sea Green

#20B2AA

rgb(13%,70%,67%)

hsl(177,70%,41%)

 

Light Sky Blue

#87CEFA

rgb(53%,81%,98%)

hsl(203,92%,76%)

 

Light Slate Gray

#778899

rgb(47%,53%,60%)

hsl(210,14%,53%)

 

Light Steel Blue

#B0C4DE

rgb(69%,77%,87%)

hsl(214,41%,78%)

 

Light Yellow

#FFFFE0

rgb(100%,100%,88%)

hsl(60,100%,94%)

 

Lime (W3C)

#00FF00

rgb(0%,100%,0%)

hsl(120,100%,50%)

 

Lime Green

#32CD32

rgb(20%,80%,20%)

hsl(120,61%,50%)

 

Linen

#FAF0E6

rgb(98%,94%,90%)

hsl(30,67%,94%)

 

Magenta

#FF00FF

rgb(100%,0%,100%)

hsl(300,100%,50%)

 

Maroon

#7F0000

rgb(50%,0%,0%)

hsl(0,100%,25%)

 

Medium Aquamarine

#66CDAA

rgb(40%,80%,67%)

hsl(160,51%,60%)

 

Medium Blue

#0000CD

rgb(0%,0%,80%)

hsl(240,100%,40%)

 

Medium Orchid

#BA55D3

rgb(73%,33%,83%)

hsl(288,59%,58%)

 

Medium Purple

#9370DB

rgb(58%,44%,86%)

hsl(260,60%,65%)

 

Medium Sea Green

#3CB371

rgb(24%,70%,44%)

hsl(147,50%,47%)

 

Medium Slate Blue

#7B68EE

rgb(48%,41%,93%)

hsl(249,80%,67%)

 

Medium Spring Green

#00FA9A

rgb(0%,98%,60%)

hsl(157,100%,49%)

 

Medium Turquoise

#48D1CC

rgb(28%,82%,80%)

hsl(178,60%,55%)

 

Medium Violet Red

#C71585

rgb(78%,8%,52%)

hsl(322,81%,43%)

 

Midnight Blue

#191970

rgb(10%,10%,44%)

hsl(240,64%,27%)

 

Mint Cream

#F5FFFA

rgb(96%,100%,98%)

hsl(150,100%,98%)

 

Misty Rose

#FFE4E1

rgb(100%,89%,88%)

hsl(6,100%,94%)

 

Moccasin

#FFE4B5

rgb(100%,89%,71%)

hsl(38,100%,86%)

 

Navajo White

#FFDEAD

rgb(100%,87%,68%)

hsl(36,100%,84%)

 

Navy

#000080

rgb(0%,0%,50%)

hsl(240,100%,25%)

 

Old Lace

#FDF5E6

rgb(99%,96%,90%)

hsl(39,85%,95%)

 

Olive

#808000

rgb(50%,50%,0%)

hsl(60,100%,25%)

 

Olive Drab

#6B8E23

rgb(42%,56%,14%)

hsl(80,61%,35%)

 

Orange

#FFA500

rgb(100%,65%,0%)

hsl(39,100%,50%)

 

Orange Red

#FF4500

rgb(100%,27%,0%)

hsl(16,100%,50%)

 

Orchid

#DA70D6

rgb(85%,44%,84%)

hsl(302,59%,65%)

 

Pale Goldenrod

#EEE8AA

rgb(93%,91%,67%)

hsl(55,67%,80%)

 

Pale Green

#98FB98

rgb(60%,98%,60%)

hsl(120,93%,79%)

 

Pale Turquoise

#AFEEEE

rgb(69%,93%,93%)

hsl(180,65%,81%)

 

Pale Violet Red

#DB7093

rgb(86%,44%,58%)

hsl(340,60%,65%)

 

Papaya Whip

#FFEFD5

rgb(100%,94%,84%)

hsl(37,100%,92%)

 

Peach Puff

#FFDAB9

rgb(100%,85%,73%)

hsl(28,100%,86%)

 

Peru

#CD853F

rgb(80%,52%,25%)

hsl(30,59%,53%)

 

Pink

#FFC0CB

rgb(100%,75%,80%)

hsl(350,100%,88%)

 

Plum

#DDA0DD

rgb(87%,63%,87%)

hsl(300,47%,75%)

 

Powder Blue

#B0E0E6

rgb(69%,88%,90%)

hsl(187,52%,80%)

 

Purple

#7F007F

rgb(50%,0%,50%)

hsl(300,100%,25%)

 

Red

#FF0000

rgb(100%,0%,0%)

hsl(0,100%,50%)

 

Rosy Brown

#BC8F8F

rgb(74%,56%,56%)

hsl(0,25%,65%)

 

Royal Blue

#4169E1

rgb(25%,41%,88%)

hsl(225,73%,57%)

 

Saddle Brown

#8B4513

rgb(55%,27%,7%)

hsl(25,76%,31%)

 

Salmon

#FA8072

rgb(98%,50%,45%)

hsl(6,93%,71%)

 

Sandy Brown

#F4A460

rgb(96%,64%,38%)

hsl(28,87%,67%)

 

Sea Green

#2E8B57

rgb(18%,55%,34%)

hsl(146,50%,36%)

 

Seashell

#FFF5EE

rgb(100%,96%,93%)

hsl(25,100%,97%)

 

Sienna

#A0522D

rgb(63%,32%,18%)

hsl(19,56%,40%)

 

Silver

#C0C0C0

rgb(75%,75%,75%)

hsl(0,0%,75%)

 

Sky Blue

#87CEEB

rgb(53%,81%,92%)

hsl(197,71%,73%)

 

Slate Blue

#6A5ACD

rgb(42%,35%,80%)

hsl(248,54%,58%)

 

Slate Gray

#708090

rgb(44%,50%,56%)

hsl(210,13%,50%)

 

Snow

#FFFAFA

rgb(100%,98%,98%)

hsl(0,100%,99%)

 

Spring Green

#00FF7F

rgb(0%,100%,50%)

hsl(150,100%,50%)

 

Steel Blue

#4682B4

rgb(27%,51%,71%)

hsl(207,44%,49%)

 

Tan

#D2B48C

rgb(82%,71%,55%)

hsl(34,44%,69%)

 

Teal

#008080

rgb(0%,50%,50%)

hsl(180,100%,25%)

 

Thistle

#D8BFD8

rgb(85%,75%,85%)

hsl(300,24%,80%)

 

Tomato

#FF6347

rgb(100%,39%,28%)

hsl(9,100%,64%)

 

Turquoise

#40E0D0

rgb(25%,88%,82%)

hsl(174,72%,57%)

 

Violet

#EE82EE

rgb(93%,51%,93%)

hsl(300,76%,72%)

 

Wheat

#F5DEB3

rgb(96%,87%,70%)

hsl(39,77%,83%)

 

White

#FFFFFF

rgb(100%,100%,100%)

hsl(0,0%,100%)

 

White Smoke

#F5F5F5

rgb(96%,96%,96%)

hsl(0,0%,96%)

 

Yellow

#FFFF00

rgb(100%,100%,0%)

hsl(60,100%,50%)

 

Yellow Green

#9ACD32

rgb(60%,80%,20%)

hsl(80,61%,50%)