Visita la Nueva Versión de ComoCrearTuWeb!!
Los EstilosCómoCrearTuWeb > Menú Principal > Los Estilos > Introducción
Introdución Su Utilidad

 

Opciones de Estilo

Est. Predeterminados Nuevos Estilos Para una página Para toda la Web

 

Creando Hojas de Estilos

Requerimientos Sintaxis Las Propiedades Las Unidades

 

Asociando Hojas de Estilo

Como Asociar la Hoja

 

Aplicando Hojas de Estilo

Opciones A Nivel de Bloque A Nivel de Línea De una Sola Vez

 

Ejemplos Prácticos

Antes de ... Ejemplo I Ejemplo II Ejemplo III Ejemplo IV Ejemplo V

 

Cosejos Finales

Recomendaciones Simplificando Depurando

Foro de Estilos

Al Menú Principal


Página Anticuada. Visita la nueva versión.


Las Unidades de Medida

Como hemos visto, algunas propiedades toman valores numéricos, pero para que funcionen correctamente tenemos que indicar en que unidades estamos midiendo. No es lo mismo un centímetro que un Kilómetro, verdad? Pues si solo indicamos como valor 1, el navegador no sabrá muy bien si es una u otra unidad y los efectos pueden ser desastrosos.

Para remediar esto haremos uso de tres tipos de unidades. Las unidades absolutas, las relativas y los tantos por ciento.

Unidades Absolutas

Son medidas de un tamaño fijo, como por ejemplo, un centímetro. Si indicamos medidas de este tipo, es posible que una imagen (por ejemplo) de 10 cm sea demasiado grandota para un monitor grandote, y relativamente pequeña para uno menor. Es por eso que se prefieran las medidas Relativas. Las absolutas solo deben usarse (bajo mi punto de vista, claro) cuando sepamos con certeza las dimensiones del medio de salida (monitor, impresora, etc) lo cual no siempre en posible.

Las distintas unidades Absolutas que podemos usar son las siguientes:

  • in: son pulgadas (en inglés "inches") y equivalen a 2.5 centímetros aproximadamente.
  • cm; centímetros y equivalen exactamente a .. pues a un centímetro.
  • mm: Acertaste, es el milímetro.
  • pt: el Punto equivale a 0.014 pulgadas, si la memoria no me falla (que suele ocurrir con frecuencia).
  • pc: Las picas, equivalen a 12 puntos.

Si queréis ponerle decimales usad el punto, no la coma.

Unidades Relativas

Adoptan el valor relativo al tamaño del documento, del monitor, impresora, etc, según el caso. Personalmente las recomiendo para casi todo. Son las siguientes:

  • px: la más utilizada es el Pixel que es , para entendernos, la cantidad de puntos en los que se divide el monitor. Si tu monitor tiene una definición de 800x600, se refiere a pixeles.
  • ex: se refiere a la altura de la "x" del tipo de letra usada, creo.
  • em: también llamada "cuadratín" es relativa al tamaño de letra definido por font-size.

Como veis, las dos últimas no las conozco mucho, je je, pero nadie es perfecto y menos un servidor, je je. Pero podéis hacer experimentos con ellas para ver como se comportan. Yo suelo usar los pixeles casi siempre.

ATENCIóN!!: Nunca separéis la cifra (el número) de las unidades (px, pt, ex, em) pues entonces algunos Navegadores no las leeran. Es decir, no vale poner 15_px (suponiendo que "_" es un espacio). Solo vale 15px (todo junto) Recordadlo bien, vale?

Los tantos por ciento % o porcentajes

Se refiere al tanto por ciento de la medida característica de la zona donde esté el elemento al que se aplica. Por ejemplo, si se especifica un tamaño de celda de 25%, ésta será una cuarta parte de la tabla. Si se indica una anchura del 25% a una tabla, esta sera el 25% del sitio donde éste, normalmente del documento, pero si la tabla está dentro de otra, será el 25% del tamaño de la tabla que la contiene. Claro? un poco lioso, no? je je.

Algunas propiedades admiten valores negativos para todas estas unidades, aunque los efectos no serán claros siempre, de modo que conviene comprobarlos antes de nada.

Agunos ejemplos de propiedades, sus valores y unidades podrían ser:

p { text-indent: 20px; } sangria de párrafo de 20 px

.gigante { font-size: 10cm} texto de 10cm de "alto?"

p { word-spacing: 5mm} espacio entre palabras de 5 mm

etc.. Otros ejemplos aplicados son:

Tamaño de letra de 12px

Tamaño de letra de 12pt

Tamaño de letra de 0.3in

Tamaño de letra de 10mm

Puedes comprobar que las medidas absolutas no varian de tamaño aunque tu varies el tamaño del texto desde tu navegador. Esto hay que tenerlo en cuenta, pues un tamaño absoluto pequeño puede imposibilitar la lectura a algunos visitantes, pues les quitas la opción de agrandar el texto con el Navegador (si es que conocen esa posibilidad, claro.). Así que prueba bien las medidas escogidas.

Dinos Algo..

Entra en el nuevo Foro CCTW


Esta versión es antigua. Visita la nueva web de: ComoCrearTuWeb


Entra en el nuevo Foro CCTW


Mas Cosillas..

Acerca de CCTW

ChatCCTW  Actualizaciones  Recomendar  Colabora  Errores?  Agradécemelo  Escríbeme
Actualizada el Sábado, 14-May-2011 18:45 Creada y diseñada por Jorgens