CSS para crear listas llamativas
Las listas son un gran elemento de diseño web porque permiten una fácil lectura por parte del usuario final. La mayoría de los usuarios quieren respuestas rápidamente, y solo hojearán un sitio web inicialmente para ver si responde a su pregunta. Esto es especialmente cierto si ingresan a su sitio web a través de un motor de búsqueda.

El uso de etiquetas de encabezado y listas es una excelente manera de permitir que las personas vean fácilmente el contenido principal de su sitio web. Si consideran que las listas y los subtítulos son interesantes, existe una mayor probabilidad de que permanezcan en su sitio. Esto, por supuesto, conduce a tasas reducidas de "rebote" y ayuda a mejorar la credibilidad y la clasificación de su sitio web en los motores. Cualquier cosa que mejore la legibilidad y facilite la lectura de los ojos siempre beneficiará a un sitio web. Un gran diseño siempre tiene en mente la legibilidad.

CSS es una manera fácil y muy efectiva de crear listas elegantes con viñetas personalizadas (marcadores). Puede incluir diferentes formas o gráficos personalizados simples que se relacionen con el logotipo, los colores o el tema de su sitio web. Por ejemplo, en un sitio web de ghost tours, creé un pequeño ícono de fantasma que se usó en la barra de navegación lateral y en elementos de la lista sin ordenar en la página principal. Era simple, pero muy lindo y vinculado al tema de los sitios, lo que hacía que esos elementos de la página se destacaran.

Otras veces, las viñetas pueden distraer del contenido importante de una lista. En ese caso, se puede usar una propiedad de estilo de lista de "ninguno" para eliminar los marcadores generados automáticamente.

Propiedades de estilo de lista



Use la propiedad de tipo de estilo de lista para seleccionar el tipo de marcador que aparece con cada elemento de la lista. Los valores disponibles son disco, círculo, cuadrado, decimal, romana inferior, romana superior, griego inferior, latín inferior, latín superior, alfa inferior, alfa superior y ninguno.

Para especificar su propia imagen como marcador, use la propiedad list-style-image de la siguiente manera:

ul {list-style-image: url (imagename.jpg);
list-style-position: afuera;
}

La url es relativa a la hoja de estilo y debe apuntar a la carpeta donde está su imagen. En este caso, la imagen estaría en la misma carpeta que el archivo CSS y HTML. Si coloca sus imágenes en una carpeta separada, incluiría eso también: url (images / imagename.jpg)

Posiciones de marcador



También puede personalizar la posición de los marcadores. En el ejemplo anterior, la propiedad exterior hace que la viñeta aparezca fuera del área de contenido.
list-style-position: inside permite la viñeta dentro del área de contenido para que se encuentre con el contenido de la lista.

Técnica de taquigrafía



Otra forma rápida de formatear una lista usando CSS es la técnica abreviada. Con este método, todas las propiedades de la lista se especifican en una sola propiedad:

ul
{
list-style: circle url ("image.gif");
}

en el método abreviado, todos los valores deben aparecer en un orden específico de la siguiente manera:

tipo-estilo-lista
list-style-position (dentro, fuera)
imagen-estilo-lista

No importa si omite un valor, siempre que los demás permanezcan en el orden correcto.

Las listas personalizadas son muy útiles y CSS las hace fáciles de lograr. Los detalles simples transforman los sitios web promedio en sitios web de alto rendimiento.


Instrucciones De Vídeo: Diseño de tablas con CSS (Marzo 2024).