EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Contacto
  • Blog
Contenido adicional
  • Metodología Scrum

Medios en CSS

Medios en CSS

Medios en CSS

Tabla de contenidos

  • Estilos para diferentes medios en CSS
  • 1.1. Medios definidos con <link>
  • 1.2. Medios definidos con @media
  • 1.3. Medios definidos con @import
  • 1.4. Hojas de estilo auditivas, CSS Speech Module
  • Ejercicios propuestos

Estilos para diferentes medios en CSS

Las hojas de estilos CSS permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, proyectores, televisores, etc. La tabla siguiente muestra el nombre que se utiliza en CSS para identificar cada medio:

Tabla 1.1: Medios CSS
Medio Descripción
all Todos los dispositivos
print Para documentos paginados y mostrados en vista de impresión
screen Pantallas de ordenador
speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas

Una de las ventajas de CSS es que nos permite modificar los estilos de una página en función del medio en el que se visualiza. Hay tres formas diferentes de indicar el medio en el que se deben aplicar los estilos CSS. Veamos cada una de ellas.

1.1. Medios definidos con <link>

Se puede utilizar la etiqueta <link> en el código html para enlazar los archivos CSS externos. Para ello utilizaremos el atributo media para indicar el medio en el que se aplica el estilo de cada archivo mencionado en el atributo href.

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

1.2. Medios definidos con @media

Mediante la regla @media podemos indicar de forma directa el medio o medios en los que se aplicarán los estilos. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de @media. Si los estilos se aplican a varios medios, se incluyen los nombres separados mediante comas.

En el siguiente ejemplo se define que el tamaño de letra de la página visualizada en una pantalla será de 12 píxeles. Sin embargo, cuando se impriman los contenidos de la página, su tamaño de letra será de 11 puntos. En cualquier caso el texto de la letra será de color azul.

@media print  { body { font-size: 11pt; } } 
@media screen { body { font-size: 12px; } } 
@media { body { color: blue; } } /* Se aplica a todo */

1.3. Medios definidos con @import

Gracias a las reglas de tipo @import se pueden enlazar archivos CSS externos para indicar los estilos que se aplican en cada medio. Este método viene muy bien para no tener todos los estilos en una misma hoja.

En el ejemplo siguiente se carga el archivo “estilosPantalla.css” cuando la página se visualiza por pantalla. Cuando la página se imprime se carga el archivo “estilosImpresora.css”. El archivo estilos.css se cargará en ambos medios.

@import url("estilosPantalla.css") screen; 
@import url("estilosImpresora.css") print;
@import url("estilos.css"); /* Se aplica a todo por defecto*/

1.4. Hojas de estilo auditivas, CSS Speech Module

Las hojas de estilo auditivas proporcionan información para usuarios invidentes y de navegadores de voz de manera parecida a la que se proporciona visualmente.

Las propiedades CSS definidas en el módulo del habla (CSS Speech Module) permiten a los autores controlar de forma declarativa la presentación de un documento en la versión auditiva.

El procesamiento auditivo de un documento combina la síntesis de voz (también conocido como “TTS”, el acrónimo de “Text to Speech“) y los iconos auditivos (“audio cues” en esta especificación).

Las propiedades CSS del habla proporcionan la capacidad de controlar el tono del habla y velocidad, el volumen, voces TTS utilizadas, etc.

Estas propiedades CSS pueden ser utilizadas junto con las propiedades visuales (medios mixtos), o como una alternativa completa fonética a una presentación visual.

W3C

Leer más en el siguiente artículo recomendado

Ejercicios propuestos

Actividad 2.1

Cuando se imprime una página web normalmente lo que queremos es el contenido, no la presentación visual de la página como logotipos e imágenes decorativas. Además, los elementos de la interfaz como menús, listas desplegables y botones no tiene sentido imprimirlos porque no se puede interactuar con ellos.

Por ejemplo, al imprimir una página web puede interesar no imprimir la cabecera (<header>), el pie de página (<footer>), el menú de navegación principal (<nav>) e información adicional al contenido (<aside>).

  • Añade una nueva hoja de estilo utilizando medios definidos con <link> para que no se imprima el <header>), el <footer>), el <nav> y el <aside>

Actividad 2.2

Crea un fichero HTML como el de la actividad anterior pero ahora agrega los estilos utilizando la opción @import

Actividad 2.3

Interpreta el siguiente código y explica las diferentes propiedades y sus valores.

h1, h2, h3, h4 {
  voice-family: male;
  richness: 80;
  cue-before: url("beep.au")
}
Compartir

UD4. CSS Avanzado

  • 1. Tipos de diseño web
  • 2. Medios en CSS
  • 3. Media queries CSS
  • 4. Metaetiqueta viewport
  • 5. Sombras CSS
  • 6. Gradientes CSS
  • 7. Selector de atributos en CSS
  • 8. Transiciones en CSS
  • 9. Transformaciones en CSS
  • 10. Propiedad overflow
  • 11. Flexbox, modelo de caja flexible
  • 12. Centrar horizontal y verticalmente con CSS
  • 13. Preprocesadores Less y Sass
  • 14. Estilos, elementos y código para la composición de tu web
  • 15. Herramientas útiles y referencias CSS

Unidades

  • UD1. Planificación de interfaces gráficas
  • UD2. HTML
  • UD3. CSS básico
  • UD4. CSS avanzado
  • UD5. Imágenes, licencias y software de gestión
  • UD6. Sonido, vídeo y animaciones
  • UD7. Plantillas y frameworks de desarrollo
  • UD8. Integración de contenido interactivo
  • UD9. Diseño de webs accesibles
  • UD10. Usabilidad web
  • Metodología Scrum

ENLACES

  • Nosotros
  • Contacto
  • Mapa del sitio
  • Blog

CodePen

codepen

CURSOS

  • Diseño de Interfaces Web

REDES SOCIALES

NUESTRA MISIÓN

Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

Únete y recibe gratis contenido exclusivo



    © 2020 Eniun Diseño Web y Marketing Digital
    Política de privacidad y cookies
    • Metodología Scrum
    Contenido adicional
    • Metodología Scrum
    • Metodología Scrum
    Utilizamos cookies de terceros para personalizar el contenido, los anuncios y con motivos de análisis del tráfico. La navegación por la web implica la aceptación de nuestra Política de Cookies.Estoy de acuerdo