EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Medios en CSS

            Medios en CSS

            Medios en CSS

            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:

            Contenidos del artículo

            • 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
            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.

            Leer más en el siguiente artículo recomendado

            Ejercicio propuesto

            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>

            Navegación de entradas

            ← Tipos de diseño web CSS ¿cuál utilizo?
            Media queries CSS para cumplir las necesidades del diseño responsive →

            Tutorial CSS Nivel Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Flexbox, modelo de caja flexible
            • 5. CSS Grid para maquetar contenido con rejillas
            • 6. Centrar horizontal y verticalmente un elemento
            • 7. Preprocesadores Less y Sass
            • 8. Prácticas CSS
            • 9. Chuleta CSS Nivel avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            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



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados