Listas CSS
CSS Tutorial » Listas CSS
Hay tres tipos diferentes de listas en HTML:
- Listas desordenadas (<ul>): - una lista de elementos, donde cada elemento de la lista está marcado con viñetas.
- Listas ordenadas (<ol>): - una lista de elementos, donde cada elemento de la lista está marcado con números.
- Lista de definiciones: - una lista de elementos, con una descripción de cada elemento.
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:
- Controle la forma o apariencia del marcador.
- Especifique una imagen para el marcador en lugar de una viñeta o un número.
- Establezca la distancia entre un marcador y el texto de la lista.
- Especifique si el marcador aparecerá dentro o fuera del cuadro que contiene los elementos de la lista.
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:
<!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">
</body>
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ol>
</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:
<!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>:
<!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>
</body>
<ul class = "demo">
<li> Café </li>
<li> Té </li>
<li> Coca Cola </li>
</ul>
</html>
Listas CSS bonitas, ejemplos, horizontales, estilos, quitar punto, ordenadas, desplegables, css listas elegantes, css listas html
Listas CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.