28-Listas en css

Listas desordenadas:

• cafe
• te
• leche
• agua
• vino
• cerveja

Listas ordenadas:

1. cafe
2. te
3. leche
4. agua
5. vino
6. cerveja

propiedades de listas CSS

Las listas en html o css se pueden apresentar de dos tipos:

• Listas desordenadas <ul> - los elementos de la lista estan marcados con una vineta
• Listas ordenadas <ol> - Los elementos estan marcados con numeros o letras

Las propiedades de la lista CSS le permiten:

• Establecer diferentes marcadores de elementos de lista para listas ordenadas
• Establezca diferentes marcadores de elementos de lista para listas desordenadas
• Establecer una imagen como marcador de elemento de lista
• Agregar colores de fondo a listas y elementos de lista

...

Marcadores de elementos de lista diferentes

La propriedad list-style-type especifica el tipo de elemento de la lista marcador.

Codigo de algunos ejemplos

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

Algunos ejemplos

• Coffee
• Tea
• Coca Cola

• Coffee
• Tea
• Coca Cola

Example of ordered lists:

1. Coffee
2. Tea
3. Coca Cola

1. Coffee
2. Tea
3. Coca Cola

---

Una imagen como marcador de elemento de lista

La propriedad list-style-image especifica una imagen como la lista marcador de artículo:

Para poner una imagen como marcador de una lista, lo primero es que la imagen sea pequena, porque se no quedaria muy mal

Usamos la propriedad mensionada anteriormente seguido de la aurl de la imagen

ejemplo de codigo

        ul {
            list-style-image: url('sqpurple.gif');
          }
    

ejemplo de lista

• Coffee
• Tea
• Coca Cola

marcadores de elementos de la lista

La propriedad list-style-position especifica la posición de los marcadores de elementos de lista (viñetas).

"posición de estilo de lista: fuera;" significa que las viñetas estarán fuera el elemento de la lista. El inicio de cada línea de un elemento de la lista se alineará verticalmente. Esto es predeterminado:

• Café - Una bebida preparada a partir de granos de café tostado...
• Té
• Coca-cola

"posición-estilo-lista: dentro;" significa que las viñetas estarán dentro el elemento de la lista. Como es parte del elemento de la lista, será parte del texto y empuje el texto al principio:

• Café - Una bebida preparada a partir de granos de café tostado...
• Té
• Coca-cola

Ejemplo del codigo

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

Eliminar configuración predeterminada

La propriedad list-style-type:none también puede ser utilizado para eliminar los marcadores/viñetas.

Tenga en cuenta que la lista también tiene un margen predeterminado y acolchado. Para eliminar esto, agregue margin:0y padding:0a <ul> o <ol>:

ejemplo del codigo

                ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                  }
            

Propiedad abreviada

La propriedad list-style es una propiedad abreviada.

Se utiliza para configurar todos los lista de propiedades en una declaración:

Cuando se usa la propiedad abreviada, el orden de los valores de propiedad es:

• list-style-type(si se especifica una imagen de estilo de lista, el valor de esta propiedad se mostrará si la imagen por alguna razón no se puede mostrar)
• list-style-position(especifica si los marcadores de elementos de lista deben aparecer dentro o fuera del flujo de contenido)
• list-style-image(especifica una imagen como el elemento de la lista marcador)

Si falta uno de los valores de propiedad anteriores, el valor predeterminado para el se insertará la propiedad faltante, si la hay.

Lista de estilos con colores

También podemos diseñar listas con colores, para que se vean un poco más interesante.

Todo lo que se agregue a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que las propiedades añadidas a la etiqueta <li> afectarán a los elementos de la lista individuales:

Codigo del ejemplo

            ol {
                background: #ff9999;
                padding: 20px;
              }
              
              ul {
                background: #3399ff;
                padding: 20px;
              }
              
              ol li {
                background: #ffe5e5;
                color: darkred;
                padding: 5px;
                margin-left: 35px;
              }
              
              ul li {
                background: #cce5ff;
                color: darkblue;
                margin: 5px;
              }
        

ejemplos praticos

1. Coffee
2. Tea
3. Coca Cola

• Coffee
• Tea
• Coca Cola

---

Todas las propiedades de la lista CSS

Propriedad	Descricion
list-style	Establece todas las propiedades de una lista en una declaración
list-style-image	Especifica una imagen como marcador de elemento de lista
list-style-position	Especifica la posición de los marcadores de elementos de lista (viñetas)
list-style-type	Especifica el tipo de marcador de elemento de lista

---

Ir al indice