Listas de estilos CSS

Tabla de contenido

    Mostrar tabla de contenidos

Listas desordenadas:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Listas ordenadas:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Listas HTML y propiedades de listas CSS

En HTML, existen dos tipos principales de listas:

  • listas desordenadas (<ul>): los elementos de la lista están marcados con viñetas

  • listas ordenadas (<ol>): los elementos de la lista están marcados con números o letras

Las propiedades de la lista CSS le permiten:

  • Establecer diferentes marcadores de elementos de lista para listas ordenadas

  • Establecer diferentes marcadores de elementos de lista para listas desordenadas

  • Establecer una imagen como marcador de elemento de lista

  • Agregue colores de fondo a listas y elementos de lista

Diferentes marcadores de elementos de lista

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

El siguiente ejemplo muestra algunos de los marcadores de elementos de lista disponibles:

Ejemplo

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;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Nota: Algunos de los valores son para listas desordenadas y otros para listas ordenadas.

Una imagen como marcador de elemento de lista

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>The list-style-image Property</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Coloque los marcadores de elementos de la lista

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

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

  • Coffee - A brewed drink prepared from roasted coffee beans...
  • Tea
  • Coca-cola

"posición-estilo-lista: interior;" 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 empuja el texto al principio:

  • Coffee - A brewed drink prepared from roasted coffee beans...
  • Tea
  • Coca-cola

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

Eliminar la configuración predeterminada

La propiedad list-style-type:none también se puede Se utiliza para quitar los marcadores/balas. Tenga en cuenta que la lista también tiene un margen predeterminado. y acolchado. Para eliminar esto, agregue margin:0 y padding:0 a <ul> o <ol>:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding from list:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Lista - Propiedad taquigráfica

La propiedad list-style es una propiedad abreviada. Se utiliza para configurar todos los enumerar propiedades en una declaración:

Ejemplo

ul
{
   
list-style: square inside url("sqpurple.gif");
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<h2>The list-style Property</h2>

<p>The list-style property is a shorthand property, which is used to set all the list properties in one declaration.</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Cuando se utiliza la propiedad abreviada, el orden de los valores de la 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 algún motivo no se puede mostrar)

list-style-position

(especifica si los marcadores de elementos de la lista deben aparecer dentro o fuera del flujo de contenido)

list-style-image

(especifica una imagen como marcador de elemento de la lista)

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

Lista de estilos con colores

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

Cualquier cosa agregada a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que Las propiedades agregadas a la etiqueta <li> afectarán a los elementos de la lista individuales:

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;
}

Resultado :

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
END_DIV

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Más ejemplos

Este ejemplo demuestra cómo crear una lista con un borde izquierdo rojo.

Lista personalizada con borde izquierdo rojo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}
</style>
</head>
<body>

<h2>List with a red left border</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Este ejemplo demuestra cómo crear una lista con bordes y sin viñetas.

Lista con bordes de ancho completo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}
</style>
</head>
<body>

<h2>A bordered list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Este ejemplo demuestra todos los diferentes marcadores de elementos de lista en CSS.

Todos los diferentes marcadores de elementos de lista para listas

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>

<h2>All List Style Types</h2>

<ul class="a">
  <li>Circle type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Disc type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="c">
  <li>Square type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ol class="d">
  <li>Armenian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="e">
  <li>Cjk-ideographic type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="f">
  <li>Decimal type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="g">
  <li>Decimal-leading-zero type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="h">
  <li>Georgian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="i">
  <li>Hebrew type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="j">
  <li>Hiragana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="k">
  <li>Hiragana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="l">
  <li>Katakana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="m">
  <li>Katakana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="n">
  <li>Lower-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="o">
  <li>Lower-greek type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="p">
  <li>Lower-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="q">
  <li>Lower-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="r">
  <li>Upper-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="s">
  <li>Upper-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="t">
  <li>Upper-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="u">
  <li>None type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="v">
  <li>inherit type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Todas las propiedades de la lista CSS

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 la lista (viñetas)

list-style-type

Especifica el tipo de marcador de elementos de lista.