Búsqueda personalizada
 
 
 
 
Creación de un menú vertical configurando las pseudoclases
 

Hasta ahora siempre que hemos especificado tamaños de letra, margin, padding, border etc. lo hemos hecho a través de pixeles. Esto debido a que la forma más sencilla de imaginar un tamaño, por lo menos para los que estamos trabajando todo el día en una computadora, es el tamaño de un pixel del monitor.

Veremos que hay varias unidades de medida para indicar tamaños y que algunas son más indicadas para algunas situaciones que otras.

Disponemos de las siguientes unidades de medida:

px (pixeles) 
em (altura de la fuenta por defecto)
ex (altura de la letra x) 
in (pulgadas) 
cm (centmetros) 
mm (milmetros) 
pt (puntos, 1 punto es lo mismo que 1/72 pulgadas) 
pc (picas, 1 pc es lo mismo que 12 puntos) 
% (porcentaje)

Un ejemplo que muestra una serie de prrafos asignando la propiedad font-size con distintos valores y unidades de medida:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="pixel1">Este texto tiene 12 px<p>
<p class="pixel2">Este texto tiene 15 px</p>
<p class="em1">Este texto tiene 1 em</p>
<p class="em2">Este texto tiene 1.5 em</p>
<p class="ex1">Este texto tiene 1 ex</p>
<p class="ex2">Este texto tiene 1.5 ex</p>
<p class="in1">Este texto tiene 1 in</p>
<p class="in2">Este texto tiene 1.5 in</p>
<p class="cm1">Este texto tiene 1 cm</p>
<p class="cm2">Este texto tiene 1.5 cm</p>
<p class="mm1">Este texto tiene 10 mm</p>
<p class="mm2">Este texto tiene 15 mm</p>
<p class="pt1">Este texto tiene 10 pt</p>
<p class="pt2">Este texto tiene 15 pt</p>
<p class="pc1">Este texto tiene 1 pc</p>
<p class="pc2">Este texto tiene 1.5 pc</p>
<p class="porcentaje1">Este texto tiene 150%</p>
<p class="porcentaje2">Este texto tiene 200%</p>
</body>
</html>

La hoja de estilo correspondiente es:

.pixel1 {
  font-size:12px;
}
.pixel2 {
  font-size:15px;
}
.em1{
  font-size:1em;
}
.em2{
  font-size:1.5em;
}
.ex1{
  font-size:1ex;
}
.ex2{
  font-size:1.5ex;
}
.in1{
  font-size:1in;
}
.in2{
  font-size:1.5in;
}
.cm1{
  font-size:1cm;
}
.cm2{
  font-size:1.5cm;
}
.mm1{
  font-size:10mm;
}
.mm2{
  font-size:15mm;
}
.pt1{
  font-size:10pt;
}
.pt2{
  font-size:15pt;
}
.pc1{
  font-size:1pc;
}
.pc2{
  font-size:1.5pc;
}
.porcentaje1{
  font-size:150%;
}
.porcentaje2{
  font-size:200%;
}

Los especialistas sobre el tema recomiendan utilizar em como medida cuando la salida es el monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamao de texto.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion