Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

9. Otras propiedades CSS (III)

9.3 Medios CSS

Introducción

Se llaman medios a las distintas tecnologías que hay para presentar un documento de html. El más común es la pantalla de ordenador, pero el documento también puede imprimirse, verse en el móvil, abrirse con un dispositivo braille, con un sintetizador de voz. etc.

El lenguaje CSS permite crear distintas hojas de estilo para un mismo documento, de forma que puede aplicarse cada una de ellas a un medio distinto, así de una misma página puede haber una versión para pantalla, otra para imprimir, otra para móviles, otra para lenguaje braille, etc.

Definir el documento

Si queremos que el documento no se vea igual en un medio que en otro, debemos crear diferentes hojas de estilo para cada medio. Estas pueden estar enlazadas en el documento principal de dos formas:

• mediante el atributo "media" en la etiqueta link que enlaza la hoja de estilos. En este ejemplo se enlaza a una hoja de estilos que indica una versión para imprimir:
  <link rel="stylesheet" type="text/css" href="imprimir.css" media="print" />
• mediante la regla @ import. Enlazamos también a una hoja de estilos externa de la siguiente manera:
  @import url("estilo.css") print;
• mediante la regla @media, insertando el código en la misma página.

La etiqueta link es la forma clásica de enlazar archivos externos. Mediante el atributo media indicamos el tipo de medio al que va dirigido. La página se abrirá con ese estilo sólo en los medios que le indiquemos. Podemos indicar más de uno, siempre que los escribamos separados por comas:

La regla @import

La regla @import es otra forma de enlazar un archivo externo. observese que tiene que estar dentro del código CSS, con lo que se enlaza una hoja de estilos con otra hoja de estilos.

Cualquier regla @import debe preceder a todas las reglas especificadas en una hoja de estilo. por tanto estas reglas siempre debe estar en primer lugar de la hoja, solo puede ser precedida por otra regla @import.

Observese que tampoco tiene llaves. Escribimos @import e inmediatamente después la dirección del archivo que queremos aplicar, mediante la formula: url("ruta_archivo.css"), aunque también podemos escribir directamente la ruta entre comillas. Después escribiremos el tipo de medio al que se aplica la hoja. Podemos escribir la regla @import de cualquiera de estas dos formas:

@import "ruta_fichero.css" print;

@import url("ruta_fichero.css") print;

Es importante escribir la regla en una sola línea y acabarla siempre con el punto y coma (;), para indicar claramente donde empieza y acaba cada regla.

para especificar más de un tipo de medio para una hoja, los pondremos seguidos y separados por comas:

@import url("ruta_fichero.css") print, braille, embossed ;

Si no especificamos ningún medio se entiende que la hoja sirve para todos los medios.

La regla @media

La regla @media permite insertar el código CSS en la misma página que estamos. su sintaxis es la siguiente:

@media tipo_de_medio { -Código CSS para este medio- }

Donde pone "tipo de medio se especifica el tipo de medio, si hay más de uno pueden ponerse separados por comas. Entre llaves pondremos todo el código CSS que aplicamos a ese tipo de medio. Ejemplo:

@media tv, projection {
   body:  { background-color: lime; }
   h1  { font-size: 2em; color: purpre; text-align: center; }
   h2  { font-size: 1.5em; color: blue; text-align: center; }
   p { font-size: 1em; color: olive; text-align: justify; } 
   }

Tipos de medios

Los tipos de medios indican los dispositivos para mostrar la página. En la hoja de estilos podemos escribir los siguientes:

• all : Para todos los dispositivos. es el valor por defecto.
• braille : Para los dispositivos táctiles de braille.
• embossed : Para las impresoras de paginas braille.
• handheld : Para teléfonos móviles y dispositivos de mano (pantalla pequeña y ancho de banda limitada).
• print : Para impresoras y documentos vistos en pantalla en modo "vista previa a impresión".
• projection : Para proyectores y presentaciones proyectadas.
• screen : Para las pantallas de ordenadores en color. (PC, Mac, ...)
• speech : Para los sintetizadores de voz.
• tty : Para medios que usan una rejilla de caracteres de espacio fijo (Ej: teletipos, terminales, dispositivos portátiles con monitor de baja resolución, etc.).
• tv : Para televisores y dispositivos similares. (resolución baja, con color y sonido).

Estilo para imprimir

Lo normal al crear una página es definir un estilo general para todos los medios, y algunos más específicos para otros medios. Cualquier página que quiera tener un poco de calidad debe ofrecer una versión para imprimir al usuario, por lo que he elegido este medio para ver cómo puede diferenciarse el estilo de un medio a otro.

En las versiones para imprimir se suelen eliminar contenidos superfluos, se modifican o eliminan algunas imágenes y los colores de fondo y se modifican los contenidos de texto para facilitar su lectura. veamos cómo se hace esto.

ocultar contenidos superfluos

Hay partes de la página que no tiene sentido imprimirlas, tales como menús de navegación, imágenes de fondo, pie de página, partes de la cabecera, etc. Ocultar estas partes que no se van a imprimir es tan fácil como aplicarles la propiedad display: none. Ejemplo:

#cabecera, #menu, #lateral, #pie {display: none; }

corregir la estructura de la página

Al quitar algunos bloques, el cuerpo principal puede quedar desajustado respecto de la anchura de la página. Debemos pues ajustar el ancho del contenido a imprimir al ancho de la página. colocar o corregir los márgenes si es necesario, y reajustar el contenido de los elementos que se van a imprimir.

modificar el tipo y colores de letra

Debemos asegurarnos de que el tipo de letra es facilmente legible, si hace falta lo cambiamos, y es conveniente que el color del texto sea en negro, ya que aunque la mayoría de impresoras admiten los colores, con páginas con el texto en negro, permitimos al usuario ahorrar costes.

Imprimir los enlaces

En un medio impreso no tiene sentido poner enlaces, pero sí que podemos indicar la dirección del enlace, sobre todo cuando es una página externa. para ello podemos usar la propiedad content vista en la página anterior de la siguiente forma:

a:after {content: attr(href); }

En este ejemplo se imprime la ruta del enlace (el valor del atributo href) después de su referencia. Si queremos que se imprima antes usaremos el seudoelemento :before, pudiendo también incluir algún texto (tal como se ve en el uso de la propiedad content en el apartado anterior).

El inconveniente de usar el código anterior es que se imprimen también los enlaces internos, lo cual no tiene sentido dar la referencia. para ello la solución consiste en dar a los enlaces externos en el código html un atributo class y hacer referencia a ellos en el selector de la regla CSS. Ejemplo:

todos los enlaces externos deberán llevar el atributo:

<a class="externo" href="http: ..."> ...</a>

Y la regla CSS a aplicar será:

.externo:after {content: attr(href); }

Debemos comprobar cómo quedará nuestra página impresa, a cada paso que demos, para darle el aspecto deseado. No hace falta imprimirla cada vez que hagamos un cambio; basta con mirar en el navegador en "archivo/vista preliminar" para ver como queda nuestra página impresa.

Si seguimos sólo el manual de CSS continuaremos en e siguiente tema:

Trucos CSS

Si seguimos el manual de HTML y el de CSS al mismo tiempo, continuaremos en el siguiente tema de HTML:

Otros aspectos de HTML

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com