EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            tipos de diseño web
            Tipos de diseño web ¿cuál utilizo?
            18/10/2019
            Media queries
            Media queries CSS para cumplir las necesidades del diseño responsive
            20/10/2019

            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 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>
            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
            • 16. CSS Grid para maquetar contenido con rejillas

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results