css 5 - unidades y valores

CSSUnidades y Valores

Harold Maduro

Valores y Unidades

Este es un tema básico y elemental que va a ser la base para cualquier cosa que se quiera hacer con CSS.

Existen “units” que afectan los colores, distancias y tamaños de toda clase de propiedades.

Números

Números

Existen dos tipos de números en CSS: enteros (integers) y fracciones (reals).

Los números sirven como la base para otro tipo de valor o unidad de medida (por ejemplo: 15px), pero en algunas circunstancias, se puede utilizar el número sólo como valor de una propiedad.

Números

Tanto los enteros como fracciones pueden ser positivos o negativos.

Números

Números

h1 { margin: 100px; }

Números

h1 { margin: 100px; }

p { margin-top: -10px; }

Porcentajes

Los porcentajes se colocan con el símbolo de porcentaje (%) después de un número.

Porcentajes

Los valores de porcentaje son relativos a otro valor (el valor del elemento ancestro, o un valor heredado).

Porcentajes

Porcentajes

h1 { width: 100%; }

Porcentajes

h1 { width: 100%; }

p { width: 50%; }

Color

Se pueden especificar los colores ya sea con:

• Nombres

• RGB

Color por nombreExiste un reducido número de colores que se pueden especificar por su nombre. Estos son llamados “named colors”.

Existen sólo 17 colores definidos en la especificación de CSS 2.1:

aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

orange

purple

red

silver

teal

white

yellow

Color por nombre

Color por nombre

color: red;

Color por nombre

color: red;

color: blue;

Color por nombre

Además de estos, los browsers modernos reconocen unos 140 nombres de colores.

Estos 140 nombres están definidos en la especificación de CSS 3.0

Color por RGB

Los colores que vemos en pantalla son creados utilizando mezclas de luces rojas, verdes y azules.

Color por RGBExisten cuatro formas como podemos detallar el color especificando sus valores RGB:

Functional RGB colors

* Numeric: usando el valor en enteros

* Percentage: usando el valor en porcentaje

Hexadecimal RGB colors

* Hexadecimal: usando el valor formado por 6 unidades

* Short Hex: usando el valor resumido, por 3 unidades


Se especifican los porcentajes de cada color:



color: rgb(100%,0%,0%);



color: rgb(100%,0%,0%);

O se especifica usando un valor numérico:



color: rgb(100%,0%,0%);

O se especifica usando un valor numérico:

color: rgb(255,0,0);


Para los valores porcentuales, se pueden utilizar valores fraccionarios para especificar el tono del color:

color: rgb(20.5%,10.5%,0);


Ojo: Para los valores numéricos, sólo acepta números enteros.


Aquí utilizamos los mismos valores hexadecimales que hemos utilizado en el pasado con HTML.

color: #ff0000;


Funciona uniendo 3 números hexadecimales en el rango de 00 hasta el FF para identificar el color.

La sintaxis sería: #RRGGBB, sin ningún tipo de separación, espacio o coma entre ellos.


Si el valor hexadecimal está compuesto por 3 pares de números iguales, se puede utilizar la sintaxis reducida o Short Hex:

color: #ffffff

color: #fff

color: #000000

color: #000

color: #333333

color: #333

color: #bb0000

color: #b00

Short Hex


Si cada uno de los pares de dígitos no se repite, entonces no podemos utilizar la sintaxis reducida.

color: #248901

color: #343434

color: #ececec

color: #F07132

Longitud

Longitud

Muchas propiedades como width o margin dependen de un valor de longitud para determinar su tamaño.

Longitud

Todos los valores de longitud se pueden especificar tanto con un valor positivo o negativo seguido por un “label”.

Longitud

También se pueden utilizar valores fraccionarios como 7.7 o 1.5.

Longitud

Todos los valores de longitud están seguidos por una abreviación de dos letras que representa la unidad de medida que se está especificando; ya sea en pixeles (px), pulgadas (in) o puntos (pt).

La única excepción es el cero (0), que no necesita que le especifiquemos un valor; ya que cero pixeles es lo mismo que cero pulgadas o cero centímetros.

Longitud

Las unidades de medida de longitud están divididas en dos tipos:

longitudes absolutas

longitudes relativas

Longitudes absolutas

Pulgadas - in

Centímetros - cm

Milímetros - mm

Puntos - pt

Picas - pc


width: 40in;

height: 50mm;


Estas unidades de medida son más útiles cuando se está trabajando con impresos, ya que en pantalla, la imagen está afectada por el tamaño del monitor y la resolución de pantalla del mismo.


Utilizarlos para medidas de elementos en pantalla puede resultar en textos que son muy pequeños para leer correctamente en algunas combinaciones de sistema operativo / monitor / browser; mientras que en nuestra pantalla se ve perfectamente bien.

Longitudes relativas

Son llamadas de esta manera ya que son medidas en relación a otro elemento u objeto.

El tamaño real que midan estos elementos puede cambiar debido a factores que van más allá de su control; como por ejemplo, resolución de pantalla, ancho del browser o preferencias del usuario.

Longitudes relativas

Hay tres unidades de medida relativos:

em-height - em

x-height - ex

pixel - px

em

En CSS, un em es considerado el valor determinado del font-size de un elemento.

Si el font-size de un elemento es 14 pixeles, entonces, para ese elemento 1em es equivalente a 14 pixeles.

em

Por ejemplo: si un H1 tiene 20px como su font-size; entonces, 1em es equivalente a 20px para ese H1.

Al especificar margin: 1em para el H1, el margen sería igual a 20px.

em

Cuando se utiliza em para especificar el tamaño del font, entonces el valor de em es relativo al font size del padre.

Por ejemplo, si el BODY tiene un font-size de 10px, un DIV que sea descendiente de él y tenga 2em como su font-size, tendrá un tamaño de letra de 20px.

em

margin-bottom: 3em;

font-size: 2em;

font-size: 1.2em;

ex

ex, se refiere a la altura de una x en minúscula en el font utilizado.

Si se tienen dos párrafos de texto, ambos con el mismo tamaño de letra, pero con tipografías diferentes; el valor de ex sería diferente para cada párrafo.

Esto es, ya que cada font tiene un tamaño de x distinto.

ex

Garamond x

Centhury Gothic xTimes New Roman xArial x

ex

Ojo: Ahora, existen algunos browsers que determinan el valor de ex, obteniendo el valor de em y dividíendolo por la mitad.

Pixeles

Esta es la unidad de medida más sencilla y fácil de entender. 1px en CSS es equivalente a 1px en pantalla.

Pixeles

El valor de pixel se considera relativo ya que depende de la resolución de la pantalla del usuario.

Pixeles

width: 500px;

margin: 20px;

PixelesOjo: Al especificar el tamaño de letra en pixel, Internet Explorer 6.0 no le permite al usuario hacer resize del texto; a pesar de seleccionar un tamaño de texto más grande, el texto no se agranda.

Esto puede crear problemas de usabilidad y accesibilidad.

Esto no es un problema con los browsers modernos.

URLs

Cuando utilizamos el @import directive o el background-image, utilizamos URLs para llamar al archivo indicado.

url(protocol://server/pathname/file)

URLs

Se puede utilizar las rutas absolutas (absolute paths):

url(http://www.bootstudio.com/images/logo.gif)

O se pueden utilizar rutas relativas (relative paths):

url(../images/logo.gif)

http://www.bootstudio.com/images/logo.gif

http://www.bootstudio.com/images/logo.gif

URLs

En CSS las rutas relativas son relativas al archivo CSS, no al archivo HTML que llama al CSS.

Ojo: Nestcape Navigator 4 interpretaba las rutas relativas en relación al archivo HTML, no al archivo CSS.

No se puede colocar un espacio entre url y el paréntesis

Keywords

Keywords

Existen algunos keywords que permiten describir o asignar un valor con una palabra.

Por ejemplo:

none

inherit

normal

underline

Keywords

font-weight: normal;

margin: auto;

text-decoration: none;

Keywords

Si una propiedad acepta keywords, los keywords que podrá usar serán limitados por la definición de la propiedad.

También tengan en cuenta que el comportamiento del elemento al aplicarle un valor de keyword va a ser diferente dependiendo de la propiedad.

Por ejemplo: none es diferente para text-decoration que para font-style.

Keywords

Inherit es un keyword que es compartido por todas las propiedades en CSS 2.1.

Este valor hace que la propiedad herede los mismos valores que su padre.

En la mayoría de los elementos no es necesario especificar inherit; ya que las propiedades se heredan de manera predeterminada; pero puede ser útil en el caso de los backgrounds, margin, padding y border.

inherit

Bibliografía

CSS: The Definitive Guide

Amazon: http://tinyurl.com/5hs7jf

Eric Meyer

http://tinyurl.com/5hs7jf

http://tinyurl.com/5hs7jf

Bibliografía

CSS 2.1 SpecificationWorld Wide Web Consortium

http://www.w3.org/TR/CSS21/syndata.html#values

css 5 - unidades y valores

Technology