Lenguajes de Marcas CSS

Hojas de Estilo (Css) parte IV
Unidades de medida (px, cm, mm, em etc.).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 hayvarias 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 (centímetros)
mm (milímetros)
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 párrafos asignando la propiedad font-size con distintos valores
y unidades de medida:


Problema



Este texto tiene 12 px
Este texto tiene 15 px
Este texto tiene 1 em
Este texto tiene 1.5 em
Este texto tiene 1 ex
Este texto tiene 1.5 ex
Este texto tiene 1 in
Este texto tiene 1.5 in
Este texto tiene 1 cm
Este texto tiene 1.5 cm
Estetexto tiene 10 mm
Este texto tiene 15 mm
Este texto tiene 10 pt
Este texto tiene 15 pt
Este texto tiene 1 pc
Este texto tiene 1.5 pc
Este texto tiene 150%
Este texto tiene 200%



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 emcomo medida cuando la salida es el
monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamaño de texto.

Formas para indicar el color.
Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales
(rojo,verde,azul) precedido por el caracter #:

background-color:#ff0000;

Ahora veremos otras sintaxis para indicar el color:background-color:rgb(255,0,0);

Utilizando la función rgb pasando como parámetro la cantidad de rojo,verde y azul en formato
decimal (un valor entre 0 y 255).
También con la función rgb podemos indicar un porcentaje entre 0% y 100% para cada
componente:
background-color:rgb(100%,0%,0%)

Por último en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores:
background-color:#ffaaff;Lo podemos indicar con esta otra sintaxis:

background-color:#faf;

Es decir si cada valor hexadecimal está formado por el mismo carácter podemos utilizar esta
sintaxis simplificada indicando un carácter solamente. Es decir a este color no lo podemos
representar con la sintaxis indicada:
background-color:#ffaafa

Ya que los últimos 2 caracteres, fa, son distintos.

Definir un cursorpara un control HTML.Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a mostrar
cuando la flecha del mouse se encuentra sobre el control HTML.
Los valores que podemos asignarle a esta propiedad son:
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize

s-resize
w-resize
text
wait
help
auto
default

Veamosun ejemplo para configurar la propiedad cursor para la marca ancla:


Problema



Este texto tiene por mostrar las anclas con un cursor distinto al que
está definido por defecto:
google.com
yahoo.com
msn.com



La hoja de estilo es:
a{
cursor:help;
}

Aplicación de hojas de estilo a un formulario.Un formulario es el elemento esencial para el envío de datos al servidor por...