Diseñar listas con css. Lista con viñetas. Listas anidadas o multinivel en HTML

La propiedad list-style-type establece el tipo de marcador. aqui esta la mesa valores aceptables para esta propiedad:

En la tabla he enumerado dos propiedades muy inusuales: georgiana y cjk-ideográfica. Estas propiedades se utilizan regionalmente. Hay varios otros significados interesantes similares de esta propiedad, por ejemplo armenio o hiragana, pero no tiene sentido enumerarlos todos.

Ahora un ejemplo del uso de esta propiedad:

1. Primer punto.
2. Segundo punto.
3. Tercer punto.

Tenga en cuenta que hemos cambiado la lista numerada.

en etiquetado.

Figura 1. Propiedad de tipo estilo de lista.

Asegúrese de prestar atención al valor none, este valor elimina los marcadores por completo. Esta propiedad se utiliza a menudo para dar formato a listas cuando ayuda CSS.

La propiedad list-style-type es bastante simple, como otras propiedades para trabajar con listas.

La propiedad list-style-image establece el símbolo del marcador en un archivo gráfico.

• Primer punto.
• Segundo punto.
• Tercer punto.




Esto es lo que vemos:

Figura 3. Formatear el bloque
.

Es importante prestar atención al hecho de que los marcadores de lista se extienden más allá del borde del bloque de elementos.

• , enmarcado por un borde rojo. Esto puede generar resultados inesperados, por ejemplo, reiniciemos relleno
  .
  • Primer punto.
  • Segundo punto.
  • Tercer punto.
  
  
  

  Esto es lo que obtenemos:

  Figura 4. Formatear el bloque
  .

  Los marcadores de lista ahora están fuera del contenedor.

  . Por lo tanto, los marcadores pueden ir más allá del contenedor del artículo al que pertenece la lista, lo que violará apariencia sitio.

  Sería mejor colocarlos dentro de un contenedor.

  • . eso lo solucionaria este problema. Para eso está la propiedad list-style-position.

    La propiedad list-style-position establece la posición del marcador en relación con el bloque

  • . Esta propiedad tiene dos significados:

    El valor predeterminado está fuera.

    Apliquemos esta propiedad a nuestro ejemplo y coloquemos marcadores en el bloque.

  • estableciendo esta propiedad en inside .
    • Primer punto.
    • Segundo punto.
    • Tercer punto.
    
    
    

    Esto es lo que tenemos:

    Figura 5. Propiedad de posición de estilo de lista.

    Las viñetas de la lista ahora están anidadas dentro de un bloque

  • .

    propiedad de estilo de lista

    La propiedad de estilo de lista es una forma abreviada que le permite utilizar los valores de las tres propiedades anteriores.

    Ejemplo: haga una imagen con un marcador y coloque el marcador dentro del bloque de elementos de la lista.

    • Primer punto.
    • Segundo punto.
    • Tercer punto.
    
    
    

    Aquí está el resultado:

    Figura 6. Propiedad de estilo de lista.

    Especificamos dos valores en una propiedad de estilo de lista: la posición del marcador y la ruta del archivo gráfico del marcador.

    La propiedad de estilo de lista se utiliza con mayor frecuencia, incluso para establecer un valor único. Es breve y fácil de escribir.

    Recetas CSS relacionadas

    • Cómo hacer un menú desplegable en CSS, ejemplo complejo con sombras.

    Las listas con viñetas le permiten desglosar texto grande en bloques separados, cada uno de los cuales comienza con un marcador; normalmente un pequeño punto actúa como marcador. Esto atrae la atención del lector hacia el texto y aumenta su legibilidad.

    Con elemento

    Las siguientes características están asociadas:
    • en el lugar donde ocurre
      , el navegador agrega automáticamente un salto de línea;
      • la lista tiene sangrías en la parte superior e inferior;
      • De forma predeterminada, los marcadores se muestran como un círculo relleno;
      • Cada elemento de la lista se desplaza hacia la derecha en relación con el texto principal.

      La Figura 1 muestra el resultado del ejemplo, ilustrando las características anteriores de la lista con viñetas.

      Arroz. 1. Vista de lista con viñetas

      Tipo de marcador

      Los tokens pueden aceptar uno de tres tipos: círculo relleno (predeterminado), círculo abierto y cuadrado. Para seleccionar el tipo de marcador, utilice propiedad de tipo de estilo de lista o estilo de lista universal (ejemplo 1). Se aplican los siguientes valores:

      • disco: marcadores en forma de círculo relleno;
      • círculo: marcadores en forma de círculo abierto;
      • cuadrado - marcadores cuadrados.

      Ejemplo 1: cambiar la apariencia de un marcador

      • Sepulkí
      • sepulcaria
      • Sepulenación
      
      
      

      El ejemplo muestra cómo crear una lista con viñetas utilizando un pequeño cuadrado de color sólido como icono de viñeta. Aunque el número de valores está limitado a tres, esto no quiere decir que tengamos a nuestra disposición únicamente tres tipos de marcador. Hay muchos caracteres especiales que pueden actuar con éxito como icono de marcador. Atorníllelos directamente a

    • No funcionará, por lo que tendrás que solucionarlo. Para hacer esto, oculte los marcadores de la lista usando propiedades de estilo de lista con el valor none y en el texto antes del contenido
    • Agregamos nuestro propio carácter usando el pseudoelemento ::before. En el ejemplo 2, dicho marcador es un triángulo.

      Ejemplo 2: Uso::antes

      • Sepulkí
      • sepulcaria
      • Sepulenación
      
      
      

      Resultado este ejemplo mostrado en la Fig. 2. Dado que el uso de la propiedad de estilo de lista con el valor none no elimina los marcadores en absoluto, sino que solo los oculta de la vista, la lista aparece desplazada hacia la derecha. Para deshacerse de esta característica, el ejemplo agrega propiedad de sangría de texto Con valor negativo. Su tarea es mover el texto un carácter hacia la izquierda.

      

      Arroz. 2. Marcadores arbitrarios en la lista.

      No es necesario que el carácter esté en formato hexadecimal; se puede insertar directamente en el texto. Lo principal es guardar el documento en codificación UTF-8 y que el editor lo admita. Los caracteres en sí y sus códigos se pueden tomar, por ejemplo, de LibreOffice Writer (Fig. 3).

      

      Arroz. 3. Seleccionar un símbolo en LibreOffice

      Lista con marcadores dibujados a mano.

      Los estilos le permiten configurar cualquier imagen adecuada como marcador a través de propiedad de imagen de estilo de lista. El valor es relativo o camino absoluto A archivo gráfico, como se muestra en el ejemplo 3.

      Ejemplo 3: usar una imagen como marcador

      • Sepulkí
      • sepulcaria
      • Sepulenación
      
      
      

      El dibujo es mejor para elegir. talla pequeña para evitar convertir elementos de la lista en subtítulos. En la Fig. La Figura 4 muestra el resultado de un ejemplo de uso de imágenes pequeñas como marcadores.

      

      Arroz. 4. Dibujar como marcador

      Usar list-style-image tiene algunas desventajas:

      • el patrón no se puede mover hacia arriba o hacia abajo;
      • V diferentes navegadores La posición de la imagen con respecto al texto puede diferir.

      Estas deficiencias se pueden evitar utilizando la propiedad de fondo, que establece imagen de fondo. Para cada elemento de la lista

    • Quitamos los marcadores originales y configuramos. imagen de fondo sin repetición. Y para que el texto no aparezca encima de la imagen, lo desplazamos hacia la derecha usando padding-left (ejemplo 4).

      Ejemplo 4: uso de fondo

      Ul (margen izquierdo: -1em;) li (estilo de lista: ninguno; fondo: url(images/bullet.png) sin repetición 0 2px; relleno izquierdo: 20px;)

      Posición del texto y la viñeta.

      Hay dos formas de colocar un marcador en relación con el texto: el marcador se mueve fuera del borde de los elementos de la lista o se envuelve alrededor del texto (Fig. 5).

      adentro	afuera

      Arroz. 5. Colocación de marcadores en relación con el texto.

      Para controlar la posición de los marcadores, utilice la propiedad list-style-position. Tiene dos significados: afuera - los marcadores se colocan afuera bloque de texto(este es el valor predeterminado) y dentro: las viñetas son parte del bloque de texto y se muestran en el elemento de la lista (ejemplo 5).

      Ejemplo 5: cambiar la posición de los marcadores

      • Antes de comenzar, verifique que el equipo incluido con el kit 3BM esté incluido.
      • En ausencia de uno o más dispositivos periféricos Debe ponerse en contacto inmediatamente con el personal técnico de los VT.
      • Después de la inspección métodos visuales Desde su lugar de trabajo, puede encender con cuidado el 3BM.
      
      
      

      El resultado de este ejemplo se muestra en la Fig. 6.

      

      Buenos días a todos, mi queridos amigos y lectores. Ayer lo celebré y quiero decir que todo salió bien, según lo planeado, en el círculo familiar. Bueno, así debería haber sido. Aún así, nos sentamos en el círculo familiar. Bueno, celebraré el 19 de junio con amigos, así que habrá una continuación del banquete. Pero hoy por fin podemos volver al trabajo cotidiano (aunque estoy de vacaciones) y seguir aprendiendo html idioma.

      ¿Sabes? Ayer mi esposa y yo estábamos haciendo una lista de lo que necesitábamos comprar para la casa, para un cumpleaños, para unas vacaciones, y se me ocurrió: “Oh. Y dedicaré el próximo artículo a las listas en html”. En general, hay dos tipos principales, por eso quería dedicar un artículo aparte a cada tipo. Y hoy estudiaremos la lista con viñetas html.

      ¿Qué es una lista con viñetas? Este lista especial, que no contiene acciones ordenadas, pero que, sin embargo, contiene elementos que tienen un significado similar. Y dichas listas se resaltan con algún tipo de íconos, por ejemplo, marcadores, guiones, etc. Aquí en mi blog se presentan en forma de dedo índice y lo uso cuando enumero algo. Veamos un ejemplo.

      Partes de una computadora:

      • tarjeta madre
      • RAM
      • disco duro
      • Tarjeta de video
      • Etc.

      Veamos ahora cómo reproducir todo esto en html.

      Para hacer dichas listas, necesitaremos utilizar dos pares.

      • - lista desordenada. Esta etiqueta se coloca al principio de la lista y se cierra al final. Nos dice que aquí irá una lista desordenada con viñetas.
        • — elemento de lista (elemento de lista). Estas etiquetas contienen cada elemento de la lista.

        De hecho, el procedimiento para crear una lista con viñetas es muy sencillo y te lo mostraré con un ejemplo:

        • peugeot
        • opel

        Cuando guarde el documento y lo abra en el navegador, la lista se verá así. Compruébalo tú mismo, pruébalo.

        

        Atributos

        Y por supuesto, no puedo evitar hablarte de las relacionadas con estas etiquetas. Es cierto que, de hecho, estos atributos ya no se utilizan en html, ya que todo es más sencillo y cómodo de hacer a través de estilos, es decir, CSS. Pero todavía me gustaría decírtelo por desarrollo general así que te presentaré a atributo de tipo y sus significados.

        El atributo de tipo se configura para cambiar el tipo de marcador, pero como dije, en la realidad actual ya no es habitual configurarlo, aunque todavía funciona.

        

        • - este valor es el predeterminado, por lo que no tiene sentido especificarlo en absoluto. Los marcadores parecen círculos rellenos de negro;
          • — gracias a este valor, el marcador seguirá siendo redondo, pero ya no estará relleno;
            • -V en este caso Los marcadores se convertirán en pequeños cuadrados negros.

              Prueba a comprobar por ti mismo cómo funciona y verás todos los cambios.

              

              lista anidada

              Hay ocasiones en las que no estás satisfecho con una sola lista y entonces solo necesitamos hacer una lista anidada para poder distribuir todo correctamente. Tomemos nuestro ejemplo de los coches. En los ejemplos anteriores simplemente hice una lista de autos, pero ahora agreguemos varios modelos más a cada marca.

              Es absolutamente fácil de hacer, solo ve a esa etiqueta.

            • , que queremos expandir, agregar un nuevo contenedor de lista
              , y ya insertamos otro conjunto de etiquetas allí
              • entre qué modelos de automóviles se escribirán. ¿Todo claro? Si no, veamos cómo se ve en el código.

                

                Ahora guardamos y ejecutamos todo en el navegador. Mira lo que tenemos: ahora hay otra lista nueva en cada elemento de la lista. Esto es por lo que nos esforzábamos. Y si te diste cuenta, los marcadores predeterminados se configuran de manera diferente a los principales. Esto se hace a propósito para evitar confusiones, pero puedes poner atributo requerido y selecciona tu marcador. Creo que aquí todo debería quedar claro.

                

                Pero en el futuro estudiaremos CSS y haremos todo en consecuencia, como debe ser. Gracias a los estilos, puedes mejorar enormemente la visualización de la lista e incluso crear tu propio marcador. ¿Ves el menú en mi blog (Inicio, Todos los artículos, Acerca del autor, etc.)? Y, en general, puedes ir a casi cualquier sitio web y ver un menú similar. Entonces, todos estos elementos del menú son elementos de lista, solo que se procesan a través de CSS.

                

                Bueno, en general, creo que entiendes el punto. Pero si quieres dominar HTML y CSS, te recomiendo que veas el curso " HTML5 y CSS3 desde cero hasta profesional". Gracias a este curso aprenderás todo fácilmente conceptos básicos de html y css, y también aprenda a crear usted mismo varios tipos de sitios web: sitios de tarjetas de presentación, blogs, tiendas en línea e incluso páginas de destino. El curso es realmente sorprendente.

                Saludos cordiales, Dmitri Kostin.

                listas CSS— un conjunto de propiedades responsables del diseño de listas. El uso de listas HTML es muy común al crear barras de navegación de sitios web. Los elementos de la lista representan una colección de elementos de bloque.

                Usando propiedades CSS estándar puedes cambiar la apariencia del marcador de lista, agregar una imagen para el marcador, y cambiar la ubicación del marcador. La altura del bloque marcador se puede configurar. propiedad de altura de línea.

                Diseñar listas usando estilos CSS

                1. Tipo de marcador de lista tipo-estilo-lista

                La propiedad cambia el tipo de marcador o quita el marcador para listas con viñetas y numeradas. Heredado.

                tipo de estilo de lista
                Valores:
                desct	Valor por defecto. Un círculo relleno actúa como marcador para los elementos de la lista.
                armenio	Numeración tradicional armenia.
                círculo	Un círculo abierto actúa como marcador.
                cjk-ideográfico	Numeración ideográfica.
                decimal	1, 2, 3, 4, 5, …
                cero decimal	01, 02, 03, 04, 05, …
                georgiano	Numeración tradicional georgiana.
                hebreo	Numeración hebrea tradicional.
                hiragana	Numeración japonesa: a, i, u, e, o,…
                hiragana-iroha	Numeración japonesa: i, ro, ha, ni, ho,…
                katakana	Numeración japonesa: A, I, U, E, O,…
                katakana-iroha	Numeración japonesa: I, RO, HA, NI, HO,…
                alfa inferior	a B C D e, …
                griego inferior	Caracteres minúsculas del alfabeto griego.
                latín bajo	a B C D e, …
                bajo romano	yo, ii, iii, iv, v,…
                ninguno	No hay ningún marcador.
                cuadrado	Un cuadrado lleno o vacío actúa como marcador.
                alfa superior	A B C D E, …
                latino superior	A B C D E, …
                romano superior	I, II, III, IV, V,…
                inicial	Establece el valor de la propiedad en el valor predeterminado.
                heredar	Hereda el valor de la propiedad del elemento padre.

                Sintaxis

                Ul (tipo-estilo-lista: ninguno;) ul (tipo-estilo-lista: cuadrado;) ol (tipo-estilo-lista: ninguno;) ol (tipo-estilo-lista: alfa-inferior;)
                Arroz. 1. Ejemplo de diseño de listas numeradas y con viñetas

                2. Imágenes para elementos de lista estilo-lista-imagen

                Puede utilizar imágenes y rellenos degradados como marcadores de elementos de lista. Heredado.

                Sintaxis

                Ul (imagen-estilo-lista: url("images/romb.png");) ul (imagen-estilo-lista: gradiente lineal(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
                Arroz. 2. Diseña una lista con viñetas usando una imagen. Arroz. 3. Diseña una lista con viñetas usando un degradado.

                3. Posición-estilo-lista

                Esta propiedad brinda la posibilidad de colocar el marcador fuera o dentro del contenido del elemento de la lista. Heredado.

                Hoy en día prácticamente no hay un solo sitio donde no utilicen listas HTML (

                representa una lista ordenada,
                - lista desordenada). En este tutorial te mostraré 8 grandes maneras, permitiéndole hacer atractivas las aburridas listas HTML ordinarias. Simplemente agregaremos algunas técnicas CSS simples y nuestras listas no solo se verán increíbles, sino que también tendrán algunas características adicionales.

                Ahora mire la demostración para ver qué crearemos.

                Se ven mucho mejor, ¿no? Y usted también puede crear dichas listas usando CSS sencillo código. ¿Quieres saber cómo? ¡Leer!

                Lista #1: sistema sencillo navegación

                

                La mayoría de las veces, las listas se utilizan al crear un menú de navegación. Este código de ejemplo HTML/CSS le permite crear un sistema de navegación simple, incluso un poco modesto, pero atractivo.

                • Hogar
                • Blog
                • Acerca de
                • Contacto

                /* LISTA #1 */ #lista1 ( ) #lista1 ul ( estilo de lista: ninguno; alineación de texto: centro; borde superior: 1px sólido #eee; borde inferior: 1px sólido #eee; relleno: 10px 0; ) #list1 ul li ( display:inline; text-transform:mayúscula; padding:0 10px; letter-spacing:10px; ) #list1 ul li a ( text-decoration:none; color:#eee; ) #list1 ul li a:hover (decoración de texto:subrayado;)

                Lista #2: Usar una fuente diferente para la numeración

                

                El problema de utilizar una lista es que se mezcla con el texto. Y los números son siempre del mismo color que el texto.
                Pero agregue un poco de estilo y se olvidará de las limitaciones anteriores y sus listados serán mucho más atractivos. Así es como se hace:

                Los países bajos es un país en...

                Los Estados Unidos de América es un constitucional federal...

                Las Filipinas oficialmente conocida como la República...

                El Reino Unido de Gran Bretaña y...

                /* LISTA #2 */ #lista2 ( ancho:320px; ) #lista2 ol ( estilo de fuente: cursiva; familia de fuente: Georgia, Times, serif; tamaño de fuente:24px; color:#bfe1f1; ) #lista2 ol li ( ) #list2 ol li p ( relleno:8px; estilo de fuente:normal; familia de fuente:Arial; tamaño de fuente:13px; color:#eee; borde izquierdo: 1px sólido #999; ) #list2 ol li p em ( mostrar:bloque; )

                Lista #3: Imágenes de marcadores

                

                Puede cambiar fácilmente la apariencia de los marcadores de listas desordenadas especificando uno de los valores estándar, pero también puede usar imágenes como marcadores. Esta solución ayudará a que tus listas sean más originales. Y aquí está el código:

                • Java
                • .NETO

                /* LISTA #3 */ #list3 ( ) #list3 ul ( lista-estilo-imagen: url("../images/arrow.png"); color:#eee; font-size:18px; ) #list3 ul li (altura de línea: 30px;)

                Lista #4: estilo iPhone

                

                Esta lista está tomada del artículo Contactos de iPhone Aplicación creada usando CSS y jQuery. Así es como se ven las listas en iPhone. Muy atractivo, ¿no? ¿Quieres uno para tu sitio web?

                • toronto 2004
                • Beijing 2008
                • Londres 2012
                • Rio de Janeiro 2016

                /* LISTA #4 */ #lista4 (ancho:320px; familia de fuente:Georgia, Times, serif; tamaño de fuente:15px; ) #list4 ul (estilo de lista: ninguno; ) #list4 ul li ( ) #list4 ul li a ( pantalla:bloque; decoración de texto:ninguna; color:#000000; color de fondo:#FFFFFF; altura de línea:30px; estilo de fondo de borde:sólido; ancho de fondo de borde:1px; borde- color inferior:#CCCCCC; relleno-izquierda:10px; cursor:puntero; ) #list4 ul li a:hover (color:#FFFFFF; imagen de fondo:url(../images/hover.png); repetición de fondo :repeat-x; ) #list4 ul li a fuerte ( margen derecho: 10px; )

                Lista n.º 5: listas anidadas

                

                Las listas anidadas pueden ser increíblemente útiles y verse hermosas. Modificando la tercera técnica (Bullet Images), podemos crear una "lista ampliada". Por supuesto, no sin la ayuda de jQuery:

                1. Google
                   1. Picasa
                   2. quemador de alimentación
                   3. YouTube
                2. microsoft
                   1. Corporación Corel
                   2. Zignales
                   3. ByteTaxi
                3. Yahoo!
                   1. Xoopit
                   2. BuzzTracker
                   3. MiBlogRegistro

                /* LISTA #5 */ #lista5 ( color:#eee; ) #list5 ol ( tamaño de fuente:18px; ) #list5 ol li ( ) #list5 ol li ol ( lista-estilo-imagen: url(".. /images/nested.png"); relleno:5px 0 5px 18px; tamaño de fuente:15px; ) #list5 ol li ol li ( color:#bfe1f1; altura:15px; margen izquierdo:10px; )

                Lista #6: Numeración romana + tipo multilínea

                

                De forma predeterminada, la lista utiliza una numeración estándar (1, 2, 3, 4, etc.). Al cambiar el valor en CSS, puede especificar un tipo diferente de numeración, por ejemplo, romana.
                Además, de forma predeterminada, la numeración y los marcadores se encuentran fuera de la lista ( gran ejemplo Por eso nuestra lista es la número 2). Pero esto se puede solucionar, solo necesita cambiar el valor de la propiedad list-style-position a inside.

                1. Lorem ipsum dolor sit amet, ...
                   Fusce sentarse amet...
                2. Aenean placerat lectus tristique...
                   Vivamus interdum...
                3. Mauris eget sapien arcu, vitae...
                   Phasellus neque risus...
                4. Lago Phasellus feugiat...
                   Duis rhoncus...

                /* LISTA #6 */ #list6 ( font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; ) #list6 ol ( list-style-type: superior -roman; color:#eee; tamaño de fuente: 14px; posición-estilo de lista: dentro;

                Lista #7: Lista lineal con elementos separados por comas

                

                Normalmente, las listas se utilizan para mostrar la cantidad de algo y se muestran como una columna. Pero, ¿qué pasa si necesitas una lista lineal? Esto se logra cambiando el valor. propiedades de visualización en línea. Pero si de repente necesita incrustar una lista en el texto, entonces, de acuerdo con las reglas, los elementos de la lista deben estar separados por una coma. ¿Cómo lograr esto? Y, simplemente, usando el elemento :after del código simbólico.

                • Primer elemento en línea
                • Segundo elemento en línea
                • Tercer elemento en línea
                • Cuarto elemento en línea

                /* LISTA #7 */ #list7 ( ) #list7 ul ( color:#eee; tamaño de fuente:18px; familia de fuentes:Georgia, Times, serif; ) #list7 ul li ( display: inline; ) #list7 ul li:después (contenido: ", ";) #list7 ul li.last:después (contenido: ".";)

                Lista #8: Menú de navegación giratorio

                

                Eso es última tecnología, que requiere CSS3 para funcionar (solo compatible Últimas Versiones Firefox, Safari y Chrome). Cuando pasas el cursor sobre uno de los elementos del bloque, se activa el efecto de rotación. Por supuesto que no es el mejor. manera conveniente, pero muy hermosa.

                • Hogar
                • Blog
                • Acerca de
                • Contacto

                /* LISTA #8 */ #list8 ( ) #list8 ul ( estilo de lista:none; ) #list8 ul li ( familia de fuentes:Georgia,serif,Times; tamaño de fuente:18px; ) #list8 ul li a ( pantalla:bloque; altura:28px; borde izquierdo:5px sólido #222; borde derecho:5px sólido #222; #list8 ul li a:hover ( -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit -box-shadow:10px 10px 20px #000000; 10 píxeles 20 píxeles #000000;

                Conclusión

                Como puede ver, es posible crear elementos únicos a partir de una lista HTML normal. Y todo esto se hace usando CSS. Me alegra mucho que hayas aprendido muchas cosas interesantes por ti mismo.