Contenidos
Como crear un curso online
Custom-checkbox bootstrap 4
Algunas versiones de las tecnologías de asistencia anunciarán el contenido generado por CSS, así como fuentes de iconos específicas. El anuncio puede ser redundante, inexacto y/o sin sentido. Por eso se utiliza aria-hidden=”true”.
“Las fuentes de iconos son vectores, representados al tamaño establecido por el CSS. Se escalan como lo haría un gráfico vectorial, generando una imagen clara sin importar el tamaño de la pantalla o la resolución. Aunque al principio los desarrolladores se mostraron un poco reacios a subirse al carro de esta tendencia, rápidamente se están dando cuenta del valor que ofrecen las fuentes de iconos a la hora de crear sitios que cumplan los estándares cada vez más exigentes de la industria del diseño. Su mayor flexibilidad en el diseño y el ajuste permite a los diseñadores ilustrar plenamente los puntos del sitio sin interrumpir las funciones de las que los equipos de desarrollo y SEO tendrán que ocuparse más tarde”. – Cosette Jarrett
“Las fuentes de iconos son simplemente fuentes. Sin embargo, en lugar de contener letras o números, contienen símbolos y glifos. Se pueden estilizar con CSS de la misma manera que se estiliza el texto normal, lo que las ha convertido en una opción popular en la web.” – George Martsoukos
Cabe destacar que la cuestión fundamental no ha cambiado. Todavía no se pueden aplicar estilos (bordes, etc.) directamente al elemento checkbox y hacer que esos estilos afecten a la visualización del checkbox HTML. Lo que ha cambiado, sin embargo, es que ahora es posible ocultar la casilla de verificación real y sustituirla por un elemento con estilo propio, utilizando únicamente CSS. En particular, debido a que el CSS tiene ahora un selector :checked ampliamente soportado, puedes hacer que tu reemplazo refleje correctamente el estado marcado de la casilla.
Aquí hay un artículo útil sobre el estilo de las casillas de verificación. Básicamente, ese escritor encontró que varía enormemente de un navegador a otro, y que muchos navegadores siempre muestran la casilla de verificación por defecto sin importar cómo la estilices. Así que realmente no hay una manera fácil.
Puede lograr un efecto de casilla de verificación personalizado usando las nuevas habilidades que vienen con las pseudo clases :after y :before. La ventaja de esto, es: No necesitas añadir nada más al DOM, sólo el checkbox estándar.
Etiqueta span
En esta lección aprenderemos sobre los atributos class e ID, y dos etiquetas que son útiles para estructurar nuestro HTML. Si no has seguido las lecciones hasta ahora, deberías empezar desde el principio del curso. Para esta lección querrás tener tu “index.html” abierto tanto en el Bloc de notas como en tu navegador para que podamos hacer cambios en él y refrescar el navegador para verlos, como siempre.
Por ejemplo, nuestra página puede tener muchos elementos <li>. (¿recuerdas <li>? <li> es un elemento de lista – un elemento que aparece como parte de una lista). Imagina una página con muchas listas diferentes en ella, todas con muchos elementos <li>.
Con nuestra comprensión de los selectores probablemente podemos adivinar lo que significa este CSS – si tenemos un <span> con la clase importante (es decir, span.important) entonces hazlo en negrita y rojo. Si guardas y actualizas, puedes ver que el texto ahora se muestra en rojo y en negrita:
Ok. Así que el <div> ha puesto “grandes noticias” en su propia línea. Esto es lo que queremos decir cuando decimos que <div> actúa como un bloque – ahora es un bloque separado entre las otras dos líneas, en lugar de estar en línea como lo estaba la etiqueta <span>. Esta es la diferencia esencial entre <div> y <span> – <div> comienza una nueva línea para todo su contenido. Técnicamente es un poco más complicado que eso, como veremos cuando estudiemos el modelo de bloques con más detalle. Pero por ahora eso nos da una buena comprensión para trabajar.
Span y div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Entradas relacionadas
Bienvenid@, soy Patricia Gómez y te invito a leer mi blog de interés.
