Las hojas de estilo ya se han mencionado varias veces a lo largo de esta serie. Estas hojas de estilo permiten separar estrictamente maquetación y diseño. Gracias a CSS, los elementos HTML sólo son responsables de la descripción lógica o semántica del documento web.
La experiencia ha demostrado que al principio es útil saber qué aspecto tiene una hoja de estilo. Eche un vistazo a un primer ejemplo.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutoriales.es</title> <meta charset="UTF-8" /> <style> h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; } p { font-family:Geneva, Arial, Helvetica, Serif; color:#0066FF; } </style> </head> </body> <h1>PSD-Tutorials.de</h1> <p>tu portal de gráficos, web y fotografía</p> </body> </html>El documento tiene este aspecto en el navegador:
En la zona del cuerpo del fichero HTML se han definido dos elementos:
- un encabezamiento
- un párrafo de texto
Estos dos elementos se formatean mediante CSS. Para ello, se define un área de hoja de estilo en el área head mediante style. Los elementos se formatean dentro de esta área.
Esta es la definición para el encabezado h1:
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
La sintaxis mostrada define dos cosas:
- Se determina la familia de fuentes.
- Se define el tamaño de la fuente.
Llegados a este punto, hablaremos primero de la sintaxis utilizada en general. Cada instrucción CSS consta básicamente de dos partes: un selector y la declaración CSS. El selector se utiliza para definir el elemento que debe formatearse. La declaración CSS determina el aspecto final del formato. El selector está siempre a la izquierda, la declaración CSS a la derecha entre llaves.
La declaración CSS propiamente dicha se compone de dos elementos: la propiedad y el valor. La propiedad y el valor van separados por dos puntos. El valor va seguido de punto y coma.
Selector { propiedad: valor; }Integración de hojas de estilo
Hay muchas formas diferentes de integrar hojas de estilo en las páginas web. En primer lugar, puede asignar instrucciones de estilo directamente a una etiqueta HTML. Un ejemplo:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
En este ejemplo, el encabezamiento se muestra en azul.
También puede añadir varias declaraciones de estilo a una etiqueta HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Basta con escribirlas una tras otra, separadas por punto y coma.
En principio, los llamados estilos en línea sólo son útiles si hay que dar formato a áreas individuales de una página. Sin embargo, normalmente debería evitar este tipo de formato directo, ya que hace que el código HTML resulte demasiado confuso.
Definición central en la cabecera
Puede definir una hoja de estilo central en el área head del archivo HTML. Esto define todos los estilos que deben aplicarse a este archivo.
<head> <style type="text/css"> .text { font-family: "Courier New", Courier, monospace; font-size: 200%; } </style> </head>
La ventaja de esta variante: A diferencia de la variante inline, los formatos definidos pueden utilizarse varias veces en el documento. En el ejemplo anterior, se definió el texto de la clase CSS. (Información detallada sobre los selectores como la clase utilizada aquí seguirá en el próximo tutorial). Esta clase ahora se puede utilizar tantas veces como sea necesario en el documento.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">tu portal de gráficos, web y fotografía</p>
A diferencia de la variante inline, una definición de este tipo también tiene la ventaja de que los cambios se pueden realizar muy rápidamente.
Externalización de las instrucciones CSS
La variante más práctica de la definición CSS es la externalización de estilos a un archivo externo. Esto permite que cualquier número de archivos HTML accedan al mismo archivo CSS. Esto facilita la estandarización del formato de todos los archivos pertenecientes al proyecto web. Así, los cambios posteriores que deban afectar a todas las páginas pueden realizarse sin problemas.
<link rel="stylesheet" type="text/css" href="css/styles.css">
El elemento link se define en la cabecera del archivo HTML. Dentro de link, primero se especifica la combinación atributo-valor rel="stylesheet". A continuación se indica type="text/css". El archivo CSS correspondiente se asigna al atributo href. Al igual que al incrustar imágenes, preste atención a la ruta correcta. En el ejemplo actual, asumo que el archivo CSS styles.css se encuentra en el directorio css, que a su vez está en el mismo nivel que el archivo HTML real.
El archivo CSS referenciado es un archivo de texto normal con el sufijo css. Las instrucciones CSS correspondientes se definen en el archivo CSS externo.
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
Como alternativa a la variante de enlace mostrada, también pueden importarse hojas de estilo. También en este caso, las instrucciones CSS se encuentran en un archivo externo. Para ello se utiliza la siguiente sintaxis:
<style type="text/css"> @import url("css/styles.css"); </style>.
Dentro de los corchetes se especifica la ruta al archivo CSS que se desea importar. Por cierto, @import es sintaxis CSS. Por tanto, la sentencia @import también puede utilizarse dentro de archivos CSS. Esto permite llamar a otras hojas de estilo desde una hoja de estilo, lo que permite una mejor organización de las hojas de estilo.
Naturalmente, se plantea la cuestión de si se debe utilizar link o @import. En principio, prefiero link, ya que esta variante es sencillamente más rápida y, por tanto, el rendimiento de la página es mejor.
Hojas de estilo específicas para cada medio
Puedes definir hojas de estilo para medios completamente diferentes, como impresoras o la pantalla. Para ello se utiliza el atributo media. También se puede asignar una hoja de estilo a varios medios separados por comas.
<link rel="stylesheet" media="pantalla" href="css/styles.css"> <link rel="stylesheet" media="imprimir " href="css/druck.css">
En este caso, se ha llamado a dos hojas de estilo, una para la pantalla y otra para cuando se imprima la página. Por lo tanto, el archivo CSS print .c ss se carga cuando se llama a la función de impresión del navegador. Están disponibles los siguientes valores de medios
- all - Se aplica a todos los medios de salida.
- aural - El archivo CSS se utiliza para los sistemas de salida de voz.
- braille - El archivo CSS está destinado a impresoras Braille con retroalimentación táctil, que pueden generar el llamado "Braille".
- gofrado - Está destinado a las impresoras de páginas Braille.
- handheld - Destinado a dispositivos portátiles.
- print - Este archivo CSS está destinado a la impresión en papel. Los navegadores deberían utilizar automáticamente este archivo cuando se llama a la función de impresión.
- projection - Esta variante está pensada para presentaciones proyectadas.
- screen - Destinado a la visualización en pantalla.
- tty - El archivo CSS se aplica a los medios que utilizan una rejilla de caracteres fija. Puede tratarse, por ejemplo, de teletipos y terminales.
- tv - Se utiliza para dispositivos similares a televisores. Se supone que los dispositivos tienen una resolución baja y sólo pueden desplazarse de forma limitada.
Además de la sintaxis HTML mostrada a través del elemento de enlace, también existen variantes CSS especiales. Aquí se utiliza @import o @media.
<style type="text/css"> @media screen, projection { /* Formatos para pantalla */ } @media print { /* Formatos para impresión */ } </style>
Dentro del elemento style, @media se utiliza para definir un área para definiciones de formato destinadas a un medio de salida específico. Después de @media debe especificarse uno de los tipos de medios ya descritos, separado por espacios. Los tipos de medios múltiples deben ir separados por comas.
