Diferencia entre revisiones de «Medios CSS»
m (Texto reemplazado: «<div align="justify">» por «») |
|||
| (No se muestran 2 ediciones intermedias de 2 usuarios) | |||
| Línea 1: | Línea 1: | ||
| + | |||
| + | |||
{{Ficha de documento | {{Ficha de documento | ||
|nombre = Medios CSS | |nombre = Medios CSS | ||
| Línea 14: | Línea 16: | ||
|signatarios = | |signatarios = | ||
|función = | |función = | ||
| − | |||
}} | }} | ||
| − | |||
| − | |||
| − | + | '''Medios CSS.''' Son [[hojas]] de estilos que indican diferentes medios de dispositivos. | |
| + | ==Características== | ||
| + | Una de las características más importantes de las [[hojas]] de estilos CSS es que permiten indicar diferentes reglas para diferentes medios o dispositivos: pantalla, [[impresora]], [[Teléfono celular|móviles]], [[proyector]], etc. Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de [[voz]] para los medios de [[audio]]. <br> | ||
| + | |||
| + | La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su [[descripción]]:<br> | ||
| + | |||
==Tabla 1-1. Medios definidos por CSS== | ==Tabla 1-1. Medios definidos por CSS== | ||
<br> | <br> | ||
[[Archivo:TablaMediosCSS.jpg|500px|thumb|center|Tabla de medios CSS]] | [[Archivo:TablaMediosCSS.jpg|500px|thumb|center|Tabla de medios CSS]] | ||
| − | + | ||
| − | Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla | + | Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla] y print (para definir el aspecto de la página cuando se imprime), seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil). CSS permite definir reglas específicas para cada medio y reglas compartidas por varios o todos los medios. Existen varios métodos para indicar el medio en el que se deben aplicar las reglas.<br> |
| − | + | ||
===Medios definidos con las reglas de tipo @media=== | ===Medios definidos con las reglas de tipo @media=== | ||
<br> | <br> | ||
| Línea 38: | Línea 42: | ||
body { line-height: 1.2 }<br> | body { line-height: 1.2 }<br> | ||
}<br> | }<br> | ||
| − | + | ||
| − | El ejemplo anterior asigna un tamaño de letra de 13 [[píxel]] para la página que se muestra en pantalla y un tamaño de letra de 10 puntos para la página que se imprime. Por último, se indica un interlineado igual al 120% del tamaño de letra tanto para la página en pantalla como para la página impresa. | + | El ejemplo anterior asigna un tamaño de [[letra]] de 13 [[píxel]] para la página que se muestra en pantalla y un tamaño de letra de 10 puntos para la página que se imprime. Por último, se indica un interlineado igual al 120% del tamaño de letra tanto para la página en pantalla como para la página impresa. |
| − | + | ||
| − | + | ==Medios definidos con las reglas de tipo @import== | |
@import url("estilos_basicos.css") screen;<br> | @import url("estilos_basicos.css") screen;<br> | ||
@import url("estilos_impresora.css") print;<br> | @import url("estilos_impresora.css") print;<br> | ||
| − | + | ||
| − | Cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer archivo CSS. Cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS. | + | Cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer [[archivo]] CSS. Cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS. |
| − | + | ||
===Medios definidos con la etiqueta=== | ===Medios definidos con la etiqueta=== | ||
<link><br> | <link><br> | ||
| Línea 52: | Línea 56: | ||
<link rel="stylesheet" type="text/css" media="print, handheld"<br> | <link rel="stylesheet" type="text/css" media="print, handheld"<br> | ||
href="especial.css" /><br> | href="especial.css" /><br> | ||
| − | + | ||
| − | Este ejemplo es muy similar al anterior: el primer archivo CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media=”screen”). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media=”print”) o al visualizarla en un dispositivo móvil (media=”handheld”), como por ejemplo en un iPhone. | + | Este ejemplo es muy similar al anterior: el primer [[archivo]] CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media=”screen”). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media=”print”) o al visualizarla en un dispositivo móvil (media=”handheld”), como por ejemplo en un iPhone. |
| − | + | ||
==Medios definidos mezclando varios métodos== | ==Medios definidos mezclando varios métodos== | ||
Este último ejemplo mezcla los métodos descritos anteriormente: | Este último ejemplo mezcla los métodos descritos anteriormente: | ||
| Línea 62: | Línea 66: | ||
/* Estilos específicos para impresora */<br> | /* Estilos específicos para impresora */<br> | ||
}<br> | }<br> | ||
| − | + | ||
| − | La primera regla de tipo @import, indica el archivo CSS que se debe cargar para obtener los estilos con los que se muestra la página en pantalla. La segunda regla de tipo @media especifica directamente los estilos que se deben utilizar al imprimir la [[página web]]. | + | La primera regla de tipo @import, indica el [[archivo]] CSS que se debe cargar para obtener los estilos con los que se muestra la página en pantalla. La segunda regla de tipo @media especifica directamente los estilos que se deben utilizar al imprimir la [[página web]]. |
</div> | </div> | ||
| − | + | ||
==Fuente== | ==Fuente== | ||
| − | * Libro "Introducción a CSS" del autor Javier Eguíluz Pérez, [[20 de febrero]] de [[2008]]. Los contenidos de este libro están bajo una licencia Creative Commons. | + | * [[Libro]] "Introducción a CSS" del autor Javier Eguíluz Pérez, [[20 de febrero]] de [[2008]]. Los contenidos de este libro están bajo una licencia Creative Commons. |
| − | + | ||
[[Category:Códigos y Sistemas de Codificación]] | [[Category:Códigos y Sistemas de Codificación]] | ||
última versión al 19:49 28 ago 2019
Medios CSS  |
|---|
Medios CSS. Son hojas de estilos que indican diferentes medios de dispositivos.
Sumario
Características
Una de las características más importantes de las hojas de estilos CSS es que permiten indicar diferentes reglas para diferentes medios o dispositivos: pantalla, impresora, móviles, proyector, etc. Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio.
La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su descripción:
Tabla 1-1. Medios definidos por CSS
Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla] y print (para definir el aspecto de la página cuando se imprime), seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil). CSS permite definir reglas específicas para cada medio y reglas compartidas por varios o todos los medios. Existen varios métodos para indicar el medio en el que se deben aplicar las reglas.
Medios definidos con las reglas de tipo @media
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
El ejemplo anterior asigna un tamaño de letra de 13 píxel para la página que se muestra en pantalla y un tamaño de letra de 10 puntos para la página que se imprime. Por último, se indica un interlineado igual al 120% del tamaño de letra tanto para la página en pantalla como para la página impresa.
Medios definidos con las reglas de tipo @import
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
Cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer archivo CSS. Cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS.
Medios definidos con la etiqueta
<link>
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
<link rel="stylesheet" type="text/css" media="print, handheld"
href="especial.css" />
Este ejemplo es muy similar al anterior: el primer archivo CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media=”screen”). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media=”print”) o al visualizarla en un dispositivo móvil (media=”handheld”), como por ejemplo en un iPhone.
Medios definidos mezclando varios métodos
Este último ejemplo mezcla los métodos descritos anteriormente:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos específicos para impresora */
}
La primera regla de tipo @import, indica el archivo CSS que se debe cargar para obtener los estilos con los que se muestra la página en pantalla. La segunda regla de tipo @media especifica directamente los estilos que se deben utilizar al imprimir la página web.
Fuente
- Libro "Introducción a CSS" del autor Javier Eguíluz Pérez, 20 de febrero de 2008. Los contenidos de este libro están bajo una licencia Creative Commons.
