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
            Propiedades fuentes CSS
            Propiedades de las fuentes en CSS
            11/10/2019
            Propiedades tablas css
            Propiedades de las tablas en CSS
            11/10/2019

            Propiedades de las listas en CSS

            Propiedades listas CSS

            Propiedades de las listas en CSS.

            Tabla de contenidos

            • 8. Propiedades de las listas
            • 8.1. List-style-type
            • 8.2. List-style-image
            • 8.3. List-style-position
            • 8.4. List-style

            8. Propiedades de las listas

            Las propiedades CSS de las listas son las que nos permiten controlar los estilos de los marcadores y la posición de los elementos dentro de las listas. En la tabla 8.1 se muestran las propiedades de las listas más utilizadas.

            Tabla 8.1: Propiedades de las listas
            Propiedad Descripción Valores
            list-style-type Estilo aplicable a los marcadores visuales de las listas disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
            list-style-image Imagen aplicable a los elementos de las listas url(«…») | none
            list-style-position Posición del marcador dentro de la lista inside | outside
            list-style Permite establecer varios estilos de la lista en una sola propiedad list-style-type | list-style-position | list-style-image

            8.1. List-style-type

            .a {list-style-type: circle;}
            .b {list-style-type: square;}
            .c {list-style-type: upper-roman;}
            .d {list-style-type: lower-alpha;}

            0


            8.2. List-style-image

            ul.a { list-style-image: url('https://i.racjonalista.pl/img/em/lol.gif'); }
            ul.b { list-style-image: url('https://media.giphy.com/media/tBik70kZOJKOk/giphy.gif'); }

            0


            8.3. List-style-position

            ul.a { list-style-position: outside; }
            ul.b { list-style-position: inside; }

            0


            8.4. List-style

            ul.a { list-style: square outside; }
            ul.b { list-style: circle inside; }

            0

            Ejercicio propuesto

            Convierte una lista <ul> en una botonera horizontal.

             <ul>
                      <li><a href="#">Inicio</a></li>
                      <li><a href="#">Servicios</a></li>
                      <li><a href="#">Contacto</a></li>
              </ul>

            Gracias a los estilos podemos convertir una lista <ul> en una botonera horizontal, en una galería de fotos u en otros elementos. En el siguiente ejemplo puedes ver una barra de navegación bastante típica que puedes encontrar en cualquier web.

            Presta atención a que no se han utilizado clases, sólo se ha necesitado hacer uso de selectores etiqueta y selectores descendientes. Además fíjate que gracias al padding que se le ha incluido en los enlaces, serían perfectamente pulsables.

            0


            0


            0

            Comprueba tu aprendizaje

            ¿Cómo se indica que el marcador tiene forma de círculo en una lista?

            ¡Bien! ¡Has fallado!

            ¿Cómo indicamos una imagen para el marcador de una lista?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad se modifica la posición del marcador dentro de una lista?

            ¡Bien! ¡Has fallado!

            CSS. Propiedades de las listas
            ¡Muy bien!
            Sigue practicando...
            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • 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