Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Cómo diseñar listas con CSS

Las listas HTML pueden tener una cantidad de estilos diferentes aplicados usando CSS. Éstos son algunos de los más utilizados.

Tipo de estilo de lista

Determina cómo se ve la bala. Para obtener información sobre los valores posibles, consulte la list-style-typepágina.
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  ul {
    tamaño de letra : 1.5em ;
    tipo de estilo de lista : círculo ;
  }
</ estilo >
Al aire libre
< ul >
  < li > Listar artículo uno </ li >
  < li > Lista de elementos dos </ li >
  < li > Lista de elementos tres </ li >
</ ul >

Imagen de estilo de lista

Para obtener más información sobre el uso de imágenes para sus viñetas, consulte list-style-image.
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  ul {
    tamaño de fuente : 22px ;
    list-style-image : url ( "/pix/samples/bullet1.png" );
  }
</ estilo >
Al aire libre
< ul >
  < li > Listar artículo uno </ li >
  < li > Lista de elementos dos </ li >
  < li > Lista de elementos tres </ li >
</ ul >

Posición del estilo de lista

Determina si la viñeta se encuentra dentro del cuadro que contiene la lista o fuera. Para más información, consulte list-style-position.
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  ul {
    tamaño de letra : 1.5em ;
  }
  .inside {
    list-style-position : interior ;
  }
  .outside {
    list-style-position : afuera ;
  }
</ estilo >
Al aire libre
< ul  class = "inside" >
  < li > Listar artículo uno </ li >
  < li > Lista de elementos dos </ li >
  < li > Lista de elementos tres </ li >
</ ul >
< ul  class = "outside" >
  < li > Listar artículo uno </ li >
  < li > Lista de elementos dos </ li >
  < li > Lista de elementos tres </ li >
</ ul >

Estilo de lista

La list-stylepropiedad es taquigrafía para establecer las propiedades de la lista.
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  ul {
    tamaño de letra : 1.5em ;
    estilo de lista : cuadrado  interior ;
  }
</ estilo >
Al aire libre
< ul >
  <li>List item one</li>
  < li > Lista de elementos dos </ li >
  < li > Lista de elementos tres </ li >
</ ul >

Listas sin estilo

De forma predeterminada, la mayoría de las listas de estilos de los navegadores de una determinada manera. Por ejemplo, la mayoría de las listas tienen un punto de viñeta u otro marcador de lista para cada elemento. Las listas también suelen tener relleno y margen aplicado.
Sin embargo, es posible que no siempre desee que las listas aparezcan de esta manera. De hecho, es muy común que los desarrolladores utilicen listas sin estilo. Las listas sin estilo son aquellas a las que se les ha eliminado cualquier relleno, margen y marcador de lista.
Las listas sin estilo a menudo se utilizan en la navegación del sitio web y en otros lugares donde cualquier marcador, relleno y márgenes de la lista se interpongan en el camino.
Aquí hay un ejemplo de una lista sin estilo:
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  ul {
    tamaño de fuente : 22px ;
    margen : 0 ;
    relleno-izquierda : 0 ;
    estilo de lista : ninguno ;
  }
</ estilo >
Al aire libre
< ul >
  < li > Manzanas </ li >
  < li > Naranjas </ li >
  < li > Sandías </ li >
</ ul >

Listas en línea

Puede ir un paso más allá y convertir la lista sin estilo en una lista en línea.
Puedes hacerlo configurando display: inline-block;contra los lielementos.
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  ul {
    tamaño de fuente : 22px ;
    margen : 0 ;
    relleno-izquierda : 0 ;
    estilo de lista : ninguno ;
  }
  ul > li {
    pantalla : bloque en línea ;
  }
</ estilo >
Al aire libre
< ul >
  < li > Manzanas </ li >
  < li > Naranjas </ li >
  < li > Sandías </ li >
</ ul >

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas