(X)HTML tiene un repertorio
bastante limitado de opciones de formato de texto. CSS tiene muchas más posibilidades. Con CSS
se puede cambiar el tipo de fuente, tamaño, peso, altura de línea, color de
fondo y de primer plano, espaciado y alineamiento del texto, decidir si debería
estar subrayado, con una línea por encima, tachado o parpadeando, y convertirlo
a mayúsculas, minúsculas o versales. También puede aplicar esos cambios a todo
un documento o un sitio.
Muchas de las propiedades
explicadas en este capítulo se aplican, sobre todo, a texto, pero eso no
significa que sólo sean para texto. Muchas de ellas también funcionan en otros
tipos de contenido.
Tipos de fuente
Una de las decisiones más
importantes que adoptará para su sitio web es la fuente que utilizará para el
cuerpo y los encabezados.
Establecer el tipo de fuente
font-family: nombre de la primera fuente, nombre 2, .. nombre n
Ejemplo:
h1,h2
{font-family:”Arial Black”}
p
{font-family:”Palatino Linotype”}
- Los nombres de las fuentes con varias palabras se escriben entre comillas (simples o dobles).
- Se puede especificar cualquier fuente, pero el visitante sólo verá las fuentes que tenga instaladas en su sistema. Por eso conviene utilizar fuentes que sean habituales. Si no está instalada ninguna de las fuentes especificadas, el navegador utilizará la fuente predeterminada.
- Si la fuente que quiere utilizar está en preinstalada Mac y Windows basta con especificarla. Si la fuente tiene distintos nombres en cada sistema, puede especificar los dos nombres y cada sistema utilizará el que tenga instalada. Si la fuente que quiere utilizar no está preinstalada en ningún sistema puede especificar fuentes estándar alternativas para los dos sistemas operativos.
- Puede utilizar los siguientes nombres genéricos de fuente: serif, sans-serif, cursive, fantasy y monospace, como último intento por influir en la fuente que se muestre.
- La propiedad font-family se hereda.
Crear cursivas
font-style: oblique à para texto oblicuo.
font-style: italic à para texto en cursiva.
font-style: normal à para eliminar cursiva.
Ejemplo
.emph {font-style: italic;}
- Una de las razones por la que es posible que desee eliminar cursivas es para enfatizar texto en un párrafo que ha heredado el formato cursiva de una etiqueta padre.
- También se puede utilizar i o em en (X)HTML para crear cursivas.
- La propiedad font-style se hereda.
Aplicar el formato negrita
font-weight: bold à
Da un peso medio en negrita al texto.
font-weight: bolder/lighter
à
Para utilizar un valor relativo al peso actual.
font-weigt: (100, 200, 300, 400, .., 900). Donde 400 representa un
peso normal, y 700 representa la negrita.
font-weight: normal à Desactiva el formato
negrita.
Ejemplo:
h1, h2
{font-family:”Arial Black”, “Helvetica Bold”, sans-serif; font-weight:normal;}
p{font-family:
“Verdana”, “Helvetica”, sans-serif;}
.emph{font-style:italic;
font-weight:bold;}
a:link, a:hover
{font-weight:bold;}
- font-weight se hereda.
- Se puede eliminar el formato negrita de cualquier etiqueta donde se haya aplicado automáticamente (h1, por ejemplo), y donde se haya heredado de una etiqueta padre.
Establecer el tamaño de fuente
Hay dos formas básicas de
establecer el tamaño de la fuente para el texto en una página. Se puede indicar
que se utilice un tamaño específico o se puede hacer que el tamaño dependa del
padre del elemento.
font-size: Indicar tamaño
exacto por ejemplo 16px o 1em
font-size:
Indicar una palabra clave: xx-small, x-small, small, medium, large,
x-large, xx-large.
- No se debe especificar espacios en blanco entre el número y la unidad.
- Un píxel representa, como promedio 1/80 de una pulgada de alto (1/32 cm), aunque depende de la resolución de la pantalla.
- Si ajusta el tamaño de fuente con píxeles, los visitantes que utilicen Internet Explorer (hasta e incluyendo la versión 7) no podrán cambiar el tamaño del texto con la opción Cambiar tamaño de letra/Tamaño de la fuente del navegador.
- Sólo se debe utilizar puntos, cm, mm, o picas en las hojas de estilo que se utilicen para formatear una salida impresa.
- Diferentes navegadores interpretan las palabras clave de forma diferente. Explorer 5.x utiliza small como su tamaño base, mientras que Internet Explorer 6, Opera y Netscape utilizan medium.
- La propiedad font-size se hereda.
Ejemplo:
h1,h2 {font-family:
“Arial Black”, sans-serif; font-weight:normal}
h1{font-size:22px}
h2{font-size:16px;}
p{font-family:”Palatino
Linotype”, Palatino, serif; font-size:14px;}
.emp{font-style:italic;
font-weight:bold;}
a:link{font-weight:bold}
#toc{font-size:12px}
Establecer un tamaño que dependa del tamaño
del elemento padre.
font-size: Valor relativo, por ejemplo 1.5em o 150%
font-size: Palabra clave relativa: larger o smaller.
- El nuevo tamaño se calcula multiplicando el porcentaje o factor em por el tamaño del elemento padre. Si body está ajustado a 16 píxeles, un elemento p contenido en él con un valor relativo de 75% se mostrará con 12 píxeles.
- El tamaño del elemento padre puede ser ajustado por el diseñador, puede ser heredado, o puede derivar de los valores predeterminados del navegador. En la mayoría de los navegadores, el tamaño predeterminado para el elemento body es de 16 píxeles.
- Un em es igual al tamaño de la fuente. Por tanto 1em es igual al 100 por cien.
- Los em y los porcentajes están bien soportados en los navegadores más actuales.
Ejemplo:
h1,h2 {font-family:
“Arial Black”, sans-serif; font-weight:normal}
h1{font-size:1.37em}
h2{font-size:1em;}
p{font-family:”Palatino
Linotype”, Palatino, serif; font-size:87%;}
.emp{font-style:italic;
font-weight:bold;}
a:link{font-weight:bold}
#toc{font-size:75%}
Suponiendo un tamaño de texto por
defecto de 16 píxeles, esta hoja de estilo será equivalente a la del anterior
ejemplo.
Establecer la altura de la línea
La altura de la línea hace
referencia a la interlínea del párrafo, es decir, a la cantidad de espacio
entre cada línea de un párrafo. Utilizar una altura de línea grande puede
facilitar algunas veces la lectura del cuerpo de texto. Un alto de línea
pequeño para los encabezados (con más de una línea) a menudo los hace más
atractivos.
line-height: n / p% / a à Donde n es el número
que se multiplicará por el tamaño de fuente del elemento para obtener la altura
de línea deseada. O bien, p% es un porcentaje del tamaño de la fuente. O bien,
a es un valor absoluto expresado en píxeles, puntos, etc.
- Si utiliza un número para determinar la altura de la línea, este factor se hereda por todos los elementos hijos. Por lo tanto, si el tamaño de fuente de un padre es 16 píxeles y la altura de línea es de 1,5, la altura de línea del padre será de 24 (16x1,5). Si la fuente del hijo es de 10, su altura de línea será de 15 (10x1,5).
- Si utiliza un valor de porcentaje o em, solamente el tamaño resultante se hereda. Por lo tanto, dado un padre de 16 píxeles con una altura de línea de 150%, la altura de la línea del padre será de 24 píxeles. Sin embargo, todos los elementos hijo también heredarán una altura de línea de 24 píxeles, con independencia del tamaño de fuente.
Ejemplo
p{font-family:”Palatino
Linotype”, Palatino, serif; font-size:87%; line-height:170%;}
Suponiendo un elemento body por
defecto de 16 píxeles, el tamaño de fuente del elemento p será del 87% o unos
14 píxeles. La altura de línea será el 170% de esos 14 píxeles, esto es, unos
24 píxeles.
Establecer todos los valores de fuente al
mismo tiempo
Se puede establecer el estilo de
fuente, peso, variante, tamaño, altura de línea y tipo al mismo tiempo.
- font
- Si lo desea escriba normal, oblique o italic para establecer el estilo de fuente deseado.
- Si lo desea escriba normal, bold, bolder o lighter, o un múltiplo de 100 (hasta 900) para establecer el peso de la fuente.
- Si lo desea escriba nomal o small-caps para eliminar o establecer las tipografias versales.
- Escriba el tamaño de fuente deseado.
- Si lo desea escriba /altura-línea (cantidad de espacio que debería haber entre dos líneas).
- Escribir un espacio seguido del tipo o tipos de fuentes deseados, en orden de preferencia, separados por comas.
- Las tres primeras propiedades se pueden especificar en cualquier orden u omitir. Si las omite, se establecen en normal, que es posible que no sea lo que se espera.
- Las propiedades de tamaño y tipo siempre se deben especificar explícitamente, primero el tamaño y luego la familia.
- La altura de línea, que es opcional, debe venir directamente después del tamaño y la barra inclinada.
- La propiedad font se hereda.
Ejemplo
h1, h2{font:1.37em
“Arial Black”, sans-serif;}
h2{font-size:1em;}
p{font:87%/170%
“Palatino Linotype”, Palatino, serif;}
Esta hoja de estilo es
equivalente a la del ejemplo anterior. No se tiene que especificar que el
font-weight sea normal para h1 y h2, ya que normal es el valor por defecto para
la propiedad font.
Establecer el color
Se puede cambiar el color para cualquier
cantidad de texto en la página web.
color: nombrecolor;
- Nombrecolor puede ser uno de los 16 colores predefinidos.
- #rrggbb con la representación hexadecimal del color.
- rgb(r,g,b), donde r, g y b son los valores enteros de 0 y 255 que especifican la cantidad de rojo, verde o azul, respectivamente, en el color deseado.
- rgb(r%,g%,b%) donde r, g y b dan el porcentaje de rojo, verde y azul, respectivamente.
- Puede utilizar la propiedad color para cambiar el color de cualquier elemento X(HTML)
- La propiedad color se hereda.
Cambiar el fondo del texto
El fondo hace referencia no sólo
al fondo de toda la página, sino al fondo del elemento especificado. En otras
palabras, puede cambiar el fondo de unos pocos párrafos o palabras al
establecer el fondo de esas palabras en un color diferente.
background: transparent / color / url (imagen.gif) para utilizar
una imagen cualquiera como fondo.
- Si lo desea, escriba repeat para disponer la imagen en mosaico tanto horizontal como verticalmente, repeat-x para que solamente sea horizontalmente, repeat-y para que solamente sea verticalmente, y no-repeat para que no se repita en mosaico.
Si lo desea,
escriba fixed o scroll para determinar si el fondo tiene que desplazarse con el
lienzo.
- Si lo desea, escriba x y para establecer la posición de la imagen de fondo, donde x e y se pueden expresar como un porcentaje o una distancia absoluta desde la esquina superior izquierda. O bien, utilizar valores de top, center, o bottom para x y left, center y right para y.
- Puede especificar tanto un color como el URL de una imagen para el fondo. El color se utilizará hasta que la imagen se cargue, o si no se carga por alguna razón, y se verá por cualquier parte transparente de la imagen.
- La propiedad background no se hereda.
Controlar el espaciado
Se puede añadir o reducir el
espacio entre las palabras o entre las letras.
Para especificar el espacio entre
las palabras:
word-spacing: longitud (un número con unidades, tales como 0.4em o
5px)
Para especificar el espacio entre
letras:
letter-spacing: longitud (un número con unidades, tales como 0.42em
o 5px).
- Se pueden utilizar valores negativos para el espaciado de letras y palabras, aunque la visualización siempre depende de las posibilidades del navegador.
- Los valores de espaciado de palabra y letra se pueden ver afectados por la alineación elegida.
- Utilice un valor normal o 0 para establecer el espaciado de letra y palabra en sus valores por defecto (es decir, para no añadir espacio extra).
- Si utiliza un valor em, solamente el tamaño resultante se hereda. Por lo tanto, un padre a 16 píxeles con .1em de espacio extra entre palabras tendrá 1.6 píxeles de espacio extra entre cada palabra. Y todos los elementos hijo también tendrán 1.6 píxeles de espacio extra entre palabras, con independencia de su tamaño fuente. Establezca explícitamente el espacio extra para los elementos hijos si necesita anular este valor.
- Las propiedades word-spacing y setter-spacing se heredan.
Ejemplo:
body {background:#eef}
h1, h2 {font: 1.37em "Arial Black",
sans-serif;color: navy; letter-spacing:0.4em}
h2 {font-size: 1em}
p {font: 87%/170% "Palatino
Linotype", Palatino, serif; color:#909}
.emph {font-style: italic;font-weight:bold}
a:link {font-weight:bold; color:#74269D}
a:visited {font-weight:normal; color:#909}
#toc {font-size: 75%; background:#EBC6F9}
Aquí, se ha añadido .4em de
espacio extra entre las letras (que a un tamaño de fuente de 22px significará 9
píxeles adicionales entre cada letra).
Añadir sangrías
Se puede determinar el espacio
que debería existir delante de la primera línea de un párrafo determinado.
text-indent:longitud donde
longitud es un número con unidades, tales como 1.5em o 18px.
No hay comentarios:
Publicar un comentario