Ahora que ya te has aproximado al concepto de las hojas de estilo en cascada y sabes cómo aplicar las variaciones vamos a detallar un poco más las características que podemos definir. No vamos a realizar una definición exhaustiva de todas las posibilidades, pero sí veremos las más habituales.
Tamaño de texto
Atributo: font-size
Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), anchura de la letra eme (em) o altura de la letra equis (ex). También se puede utilizar un valor porcentual respecto al tamaño base que se utiliza por defecto.
Ejemplos:
Tamaño 250%
Tamaño 18 puntos
Tamaño 2 em Tamaño 1 em
Tamaño 3 ex Tamaño 1 ex
Tamaño 18 píxels
Tamaño 1 centímetro
Tamaño 0,5 pulgadas
Si necesitas utilizar decimales tendrás que utilizar la notación anglosajona, en la que el separador decimal es el punto en lugar de la coma.
Tipo de letra
Atributo: font-family
Valores: Se puede utilizar el nombre de la letra. Es conveniente añadir, separados por comas, nombres de letras similares y finalizar, por si no está instalada ninguna de ellas, con el nombre de la familia. Las familias de letras básicas son: serif, sans-serif, monospace, cursive y fantasy.
Ejemplos: Podríamos hacer una referencia del tipo font-family:Arial,Helvetica,Verdana,sans-serif
Familia serif
Familia
sans-serif
Familia
monospace
Familia cursive
Familia fantasy
Las familias cursive y fantasy se presentan en Netscape como serif y sans-serif respectivamente.
Estilos de letra
Atributo: font-style
Valores: Se puede utilizar normal o italic. Permite alternar entre la presentación entre ambos tipos.
Ejemplos: Letra normal Letra itálica
Grosor de la letra
Atributo: font-weight
Valores: Aunque la especificación CSS indica que se pueden utilizar las palabras extra-light, light, demi-light, medium, demi-bold, bold, extra-bold que irán mostrando la letra en una escala ascendente de grosor sólo he podido comprobar la validez del atributo bold, puesto que no parece que los navegadores actuales sean capaces de mostrar la escala de grosor mencionada.
Ejemplos: Letra bold
Combinar los atributos referentes a la fuente de letra
No es necesario que especifiquemos los atributos de forma independiente. Podemos agruparlos si se mantiene el orden tamaño, familia, estilo, grosor. De hecho, es recomendable que definamos la etiqueta body para que la base de todos los elementos de texto tenga las mismas características.
Ejemplo: body {font-size:12pt; font-family:sans-serif; font-style:italic; font-weight:bold} da como resultado que todo el texto de la página tome como base la apariencia que se muestra aquí.
Color
El atributo de color puede aplicarse al texto, pero también a otros elementos de la página, por lo que se menciona de forma independiente.
|
black |
silver |
gray |
white |
|
|
|
|
|
|
maroon |
red |
purple |
fuchsia |
|
|
|
|
|
|
green |
lime |
olive |
yellow |
|
|
|
|
|
|
navy |
blue |
teal |
aqua |
Valores: Para nombrar un color pueden utilizarse varios métodos:
Márgenes
Atributo: margin
Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px).
Los márgenes se suelen especificar dentro de la etiqueta body ya que habitualmente se utilizan para definir toda la página.
Interlineado
Atributo: line-height
Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%).
Ejemplos: En esta línea se ha empleado un interlineado del 200%, de forma que presente una distancia doble a la habitual, respecto a la anterior y la posterior .
En esta línea se ha empleado un interlineado de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar que la parte superior de las letras llega hasta la base del renglón anterior.
Sangría
Atributo: text-indent
Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px) o porcentaje(%)
Ejemplos: Este párrafo tiene aplicado un sangrado de 45 puntos y por eso su primera línea se inicia tras dejar un espacio en blanco al principio del renglón.
Alineación
Atributo: text-align
Valores: Además de los valores aceptados por el lenguaje HTML (left, center y right) nos permite introducir la justificación respecto a los dos márgenes utilizando la palabra justify.
Ejemplos: Todos los textos de este curso están diseñados con el atributo justify para evitar el efecto denominado de "banderas" o "gallardetes" provocado por la falta de ajuste del final o principio de renglón respecto al margen.
Fondos
Atributo: background
Valores: podemos utilizar el nombre o la referencia RGB de un color o bien el URL de una imagen. Con ello podemos hacer que los fondos se apliquen solamente a una determinada porción del documento, en lugar de hacerlo a toda la página.
Ejemplos:
En este párrafo se ha aplicado un fondo utilizando la etiqueta background:orange
Ahora se ha utilizado una imagen y la forma de expresarlo ha sido background:URL(imagenes/claro09.jpg)
Pseudoclases :link, :visited y :hover
Habitualmente, los navegadores muestran subrayado el texto de los enlaces y varían el color en función de que el enlace haya sido visitado o no. Sin embargo, cada vez es más frecuente ver páginas en las que los enlaces no aparecen subrayados y adoptan otros colores.
Aunque se podría conseguir el mismo efecto definiendo las propiedades en cada página, la forma más cómoda de hacerlo es incluyendo en una hoja de estilo las características que deberá tener el texto en cada situación. Para ello se incluirá en el archivo css de definición del estilo las propiedades para presentar:
El texto de un enlace no visitado (a:link)
El texto de un enlace visitado (a:visited)
El texto de un enlace cuando pasamos el ratón sobre él (a:hover)