Apuntes del curso

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:
▪ in, del inglés “inches”, pulgadas (1 pulgada son 2.54 centímetros)
▪ cm, centímetros
▪ mm, milímetros
▪ pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)
▪ pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)

A continuación se muestran ejemplos de utilización de unidades absolutas:
body { margin: 0.5in; }
h1 { line-height: 2cm; }
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }

CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje está formado
por un valor numérico seguido del símbolo % y siempre está referenciado a otra medida. Cada
una de las propiedades de CSS que permiten indicar como valor un porcentaje, define el valor al
que hace referencia ese porcentaje.
Los porcentajes se pueden utilizar por ejemplo para establecer el valor del tamaño de letra de
los elementos:
body { font-size: 1em; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
Los tamaños establecidos para los elementos <h1> y <h2> mediante las reglas anteriores, son
equivalentes a 2em y 1.5em respectivamente, por lo que es más habitual definirlos mediante em.
Los porcentajes también se utilizan para establecer la anchura de los elementos:
Introducción a CSS Capítulo 3. Unidades de medida y colores
http://www.librosweb.es 35
div#contenido { width: 600px; }
div.principal { width: 80%; }
<div id=”contenido”>
<div>

</div>
</div>
En el ejemplo anterior, la referencia del valor 80% es la anchura de su elemento padre. Por tanto,
el elemento <div> cuyo atributo class vale principal tiene una anchura de 80% x 600px =
480px.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Nube de etiquetas

A %d blogueros les gusta esto: