AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Listas CSS


Next Page >>
HTML images

CSS Tutorial » Listas CSS

Hay tres tipos diferentes de listas en HTML:

Diseñar listas con CSS

CSS proporciona varias propiedades para aplicar estilo y formatear las listas ordenadas y desordenadas que se utilizan con más frecuencia.
Estas propiedades de la lista CSS normalmente le permiten:

En la siguiente sección discutiremos las propiedades que se pueden usar para diseñar listas HTML.

 

Diferentes marcadores de elementos de lista

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

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

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
ul.a_lista {
list-style-type: circle;
}

ul.b_lista {
list-style-type: square;
}

ol.c_lista {
list-style-type: upper-roman;
}

ol.d_lista {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2> Listas </h2>
<p> Ejemplo de listas desordenadas: </p>
<ul class = "a_lista">
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ul>

<ul class = "b_lista">
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ul>

<p> Ejemplo de listas ordenadas: </p>
<ol class = "c_lista">
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ol>

<ol class = "d_lista">
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ol>

</body>
</html>

 

Cambiar la posición de los marcadores de lista

De forma predeterminada, los marcadores de cada elemento de la lista se colocan fuera de sus cuadros de visualización.

Sin embargo, también puede colocar estos marcadores o viñetas dentro de los cuadros de visualización del elemento de la lista utilizando la propiedad list-style-position junto con el valor dentro.
En este caso, las líneas se ajustarán debajo del marcador en lugar de tener sangría. He aquí un ejemplo:

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Setting the Position of List Marker</title>
<style>
body{
font-size: 15px;
font-family: Verdana, Geneva, sans-serif;
}
ol li {
padding: 8px;
margin: 6px;
background-color: #DFDFFF;
}
ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}
</style>
</head>
<body>
<h2> Posición del marcador de lista: interior </h2>
<ol class = "in">
<li> Abróchese el cinturón de seguridad </li>
<li> Encienda el motor del automóvil y observe más de cerca el grupo de instrumentos para ver si hay alguna señal de advertencia. </li>
<li> Mire a su alrededor con atención y vaya </li>
</ol>
<h2> Posición del marcador de lista: exterior </h2>
<ol class = "out">
<li> Abróchese el cinturón de seguridad </li>
<li> Encienda el motor del automóvil y observe más de cerca el grupo de instrumentos para ver si hay alguna señal de advertencia. </li>
<li> Mire a su alrededor con atención y vaya </li>
</ol>
</body>
</html>

Etiquetas: Listas CSS bonitas, ejemplos, horizontales, estilos, quitar punto, ordenadas, desplegables, css listas elegantes, css listas html,

 

Eliminar la configuración predeterminada, quitar punto

La propiedad list-style-type: none también se puede utilizar para eliminar los marcadores / viñetas - quitar punto.

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

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

<p> Lista predeterminada: </p>
<ul>
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ul>

<p> Elimine viñetas, márgenes y relleno: </p>
<ul class = "demo">
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ul>

</body>
</html>

 



Listas CSS bonitas, ejemplos, horizontales, estilos, quitar punto, ordenadas, desplegables, css listas elegantes, css listas html
Listas CSS - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.