A la hora de especificar tamaños CSS nos permite usar diferentes tipos de unidades, estas además pueden ser absolutas o relativas:
- Absolutas. Cualquier longitud expresada en una de estas unidades siempre se mostrará del mismo tamaño.
- Relativas. Dependen del tamaño de otro elemento.
Normalmente se utilizan unidades absolutas para la secciones y la estructura de la página web porque se adaptan mejor a diferentes tamaños de pantalla. Las más habituales son los porcentajes y la unidad em.
Para las dimensiones de imágenes y vídeos se suelen utilizar píxeles. Es la única unidad absoluta que se utiliza habitualmente.
Se debe especificar la unidad usada:
- Por ejemplo si queremos especificar un tamaño de 13 píxeles utilizaremos: 13px
|
Unidades absolutas |
|
|---|---|
|
cm |
Centímetros |
|
mm |
Milímetros |
|
In |
Pulgadas |
|
px * |
Píxeles |
|
pt |
Puntos |
|
pc |
Picas |
*: Los píxeles son relativos a la pantalla.
|
UNIDADES RELATIVAS |
|
|---|---|
|
em |
Relativa al tamaño del tipo de letra por defecto |
|
porcentajes (%) |
Relativos a las dimensiones del elemento contenedor |
|
ex |
Relativa al valor de |
|
ch |
Relativa al ancho del cero “0” |
|
rem |
Relativa al tamaño de letra del elemento raíz |
Ejemplo de porcentajes (1)
En esta página se crean dos secciones. La primera tiene fondo verde y su anchura la mitad que el elemento contenedor, <body>, que al ser un elemento de bloque ocupa todo la anchura disponible.
Las dos secciones también ocuparían toda la anchura si no fuera por las reglas de estilo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Porcentajes</title>
<style>
#s1{
background-color:green;
width:50%;
}
#s2{
background-color:blue;
width:30%;
}
</style>
</head>
<body>
<section id = "s1">Contenido sección 1</section>
<section id = "s2">Contenido sección 2</section>
</body>
</html>Se vería así:
Ejemplo de porcentajes (2)
Con la altura (height) ocurre lo mismo, pero hay que tener en cuenta que depende del contenido que haya en la página, a no ser que se fije un valor para el elemento como en este ejemplo. El elemento <body> tiene una altura fijada en píxeles. Las secciones tienen la altura y anchura expresadas en porcentajes relativos a los del elemento <body>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Porcentajes</title>
<style>
body{
height:800px;
}
#s1{
background-color:green;
width:50%;
height:40%;
}
#s2{
background-color:blue;
width:30%;
height:20%;
}
</style>
</head>
<body>
<section id = "s1">Contenido sección 1</section>
<section id = "s2">Contenido sección 2</section>
</body>
</html>Se vería así:
Ejemplo de unidades em (3)
Para las fuentes es habitual utilizar la unidad em, que hace referencia al tamaño de la fuente actual.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Unidades em</title>
<style>
.grande {font-size: 2em;}
.muyGrande {font-size: 4em}
</style>
</head>
<body>
<p>Normal</p>
<p class = "grande">Grande</p>
<p class = "muyGrande">Muy grande</p>
</body>
</html>Se vería así:
