Foros del Web » Creando para Internet » CSS »

Media Types,

Estas en el tema de Media Types, en el foro de CSS en Foros del Web. Pues como lo dice el tema de mi mensaje, quisiera un poco más de orientación sobre este uso de CSS para imprimir páginas, bien... he ...
  #1 (permalink)  
Antiguo 19/11/2004, 21:36
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Media Types,

Pues como lo dice el tema de mi mensaje, quisiera un poco más de orientación sobre este uso de CSS para imprimir páginas, bien... he visto algunos temas sobre esto y aún asi tengo unas cuantas dudas

Pues lo que quiero saber es como funcionan estos elementos (Media) ¿Se llaman como se llama a una hoja externa? mmm, ya me volví a confundir. Ok voy de nuevo... para no hacerles perder su tiempo voy a ir al grano. He encontrado esto por alli:

Código:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head><body>....</body>
</html>
Pregunto...
¿Estas acciones se llaman por medio de hipervínculos? ¿Algo así como un enlace a una hoja de estilos aparte? En serio que estoy bastante confundido Pero si me hechan una manita con esto, se los voy a agradecer mucho
Desde ya gracias y un saludo...
__________________
_______
Jorge Rojas.
  #2 (permalink)  
Antiguo 20/11/2004, 08:53
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Con @media tu le indicas al CSS en qué momento activar los atributos definidos.

Ejemplo:

@media screen{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print{
p.test {font-family:times,serif; font-size:10px}
}

Con eso le estas diciendo que cuando el parrafo de clase "test" sea mostrado en pantalla, lo haga con la fuente Verdana a un tamaño de 14px. Pero que sea mostrado con una Times de 10px cuando el visitante quiera imprimir dicho texto.

Pero en realidad esto s ehace llamando 2 hojas de estilo distintas, una para mostrar el documento en pantalla y la otra para visualizar el documento impreso.

<link href="estilo1.css" type="text/css" rel="stylesheet" media="screen">
<link href="estilo2.css" type="text/css" rel="stylesheet" media="print">

De esta manera te manejas con dos hojas de estilo:
estilo1.css que esta especialmente elaborada para ver la pagina en pantalla.
estilo2.css que esta elaborada especialmente para cuando quieran imprimir la pagina (en este segundo estilo puedes ocultar elementos d ela pagina que no quieres que se impriman, asi sólo dejas lo justo y necesario)
__________________
El conocimiento es libre: Movimiento por la Devolución
  #3 (permalink)  
Antiguo 20/11/2004, 14:07
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Información Que tal frijolerou,

Muchas gracias por tu explicación Me has aclarado bastante mi duda, pero aún tengo una pequeña interrogante... Ya tenía una idea de que se hacía de esa forma, y de hecho lo intenté hacer pero no me funcionó Y lo que se me ocurreo que pueda ser es que aparte de llamar la hoja externa... (en dicha hoja externa, ¿hay que colocar algo mas?) ¿O solo se hace como se haría una hoja cualquiera? es decir, no hay que dar alguna otra especificación ¿dentro de ella?

Vamos a ver si me explico mejor...
Si yo tengo un estilo en la página que muestro con estilos, imágenes, etc.:(obviamente esta no es la quiero que se imprima) y le voy a dar todo el formato que quiero que tenga etc,etc. Pregunto... ¿Puedo hacerla de esta forma? ¿O tengo que escribir esto @media screen dentro del código donde está el directorio de la hoja miestilo.css?

<link rel="stylesheet" href="miestilo.css" type="text/css">

Eso es lo último que me gustaría que me explicaras
Gracias de antemano
__________________
_______
Jorge Rojas.
  #4 (permalink)  
Antiguo 21/11/2004, 09:09
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
No e snecesario colocar nada especial dentro d elas distintas hojas de estilo. Basta con que le des dicha opcion al momento de llamarlas mediante el link:

<link rel="stylesheet" href="miestilo.css" type="text/css" media="screen">

<link rel="stylesheet" href="miestilo2.css" type="text/css" media="print">
__________________
El conocimiento es libre: Movimiento por la Devolución
  #5 (permalink)  
Antiguo 21/11/2004, 15:01
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Mensaje Ok,

He tomado nota y comprendido el mensaje.

Muchas gracias frijolerou.
Slds...
__________________
_______
Jorge Rojas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:26.