Las propiedades CSS mostradas en este tutorial pueden utilizarse para diseñar listas. La información se refiere a los elementos HTML ul y ol. Por lo tanto, puede personalizar las listas ordenadas y desordenadas según sus deseos.
Información general sobre la lista
list-style es un resumen de las tres propiedades siguientes:
- list-style-type
- list-style-position
- list-style-image
El tipo de representación gráfica de las viñetas que preceden a las listas y su sangría pueden modificarse mediante list-style. Las especificaciones anteriores están separadas entre sí por una coma. El orden es indiferente. Además, no es necesario especificar un valor para cada propiedad.
He aquí un ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> ul { list-style:square; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>En el navegador se ve así:
Viñetas gráficas
Puede especificar su propio gráfico como viñeta. Para ello se utiliza la propiedad list-style-image. Son posibles los siguientes valores
- url - el nombre del archivo y posiblemente la ruta del gráfico
- none - no se muestra ningún gráfico.
Un ejemplo
ul { list-style-image: url(bullet.gif); }
Asegúrese de que la ruta del gráfico especificada en URL es correcta.
Si se especifica una ruta incorrecta, el navegador debería recurrir a un carácter de viñeta estándar.
Posición de las viñetas
List-style-position se utiliza para especificar cómo debe comportarse la numeración o las viñetas con respecto a la sangría.
- inside - la primera línea está sangrada para que la viñeta y la entrada de la lista estén alineadas a la izquierda.
- fuera - la viñeta se coloca a la izquierda de la entrada de la lista.
En el siguiente ejemplo, se utilizan los dos valores inside y outside.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> ul.a { list-style-position:inside; } ul.b { list-style-position:outside; } </style> </head> <body> <p>Una lista interior:</p> <ul class="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>Una lista exterior:</p> <ul class="b"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>Puedes ver directamente qué efectos diferentes tienen realmente estos dos valores.
Definir la apariencia de las viñetas
Puede definir explícitamente la apariencia de los caracteres de las viñetas. También se puede influir en la apariencia de las listas numeradas. Para ello se utiliza la propiedad list-style-type. Se permiten los siguientes valores para esta propiedad:
- decimal - para listas ol: numeración 1, 2, 3 etc.
- lower-roman - para listas ol: numeración i., ii., iii. etc.
- upper-roman - para listas ol: numeración I., II. , III., IV. etc.
- bajo-alfa o bajo-latín - para listasol: numeración I ., II., III., IV. etc.
- upper-alpha o upper-latin - para listas ol: numeración A., B., C., D. etc.
- disc - para ul-lists: círculo relleno como carácter de viñeta
- círculo - para ul-lists: círculo vacío como carácter de viñeta
- square - para ul-lists: rectángulo como carácter de viñeta
- none - ni carácter de viñeta ni numeración
- lower-greek - para listas ol: numeración con letras griegas
- hebreo - para listas ol: numeración con letras hebreas
- decimal-leading-zero - para listas ol: numeración con cero a la izquierda 0: 01., 02., 03., 04. etc.
- cjk-ideographic - para ol-listas: numeración con caracteres ideográficos
- hiragana - para ol-lists: numeración japonesa (con minúsculas)
- katakana - para listas ol: numeración japonesa (con mayúsculas)
- hiragana-iroha - para listas ol: numeración japonesa (con minúsculas)
- katakana-iroha - para listas ol: numeración japonesa (con mayúsculas)
El siguiente ejemplo utiliza algunas de las variantes enumeradas.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <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> <ul class="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ul class="b"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li>
</ul> <ol class="c"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <olol class="d"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> </html>En el navegador aparece la siguiente imagen:
Contador
El contenido puede numerarse utilizando listas ol. Sin embargo, esta forma de numeración no es realmente práctica para aplicaciones más complejas. CSS ofrece una alternativa para esto con los contadores.
A continuación le mostraré cómo se pueden utilizar los contadores.
En primer lugar, creo un nuevo contador para el elemento body.
body { counter-reset: chapter; }Gracias a esta definición, el contador chapter existe en el documento. Ahora puedes utilizar este contador.
h1 { contador-incremento: chapter; }
Con la sintaxis mostrada, el contador se incrementa automáticamente en el valor 1 cada vez que aparece un nuevo elemento h1. El problema con esto es que el contador aún no es visible. Esto puede cambiarse fácilmente utilizando pseudoelementos.
h1::before { contenido: contador(capítulo) ". "; }
Una aplicación completa podría tener este aspecto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> body { counter-reset: chapter; } h1 { counter-increment: chapter; } h1::before { content: counter(chapter) ". "; } </style> </head> <body> <h1>Capítulo</h1> <h1>Capítulo</h1> </body> </html>Y este es el resultado en el navegador:
En el ejemplo mostrado, :: before muestra el número correspondiente al principio del elemento h1. Para que el número no esté directamente unido al texto del encabezamiento, se insertan un punto y un espacio después del número.
contenido: contador(capítulo) ". "
También es posible realizar recuentos anidados. Para ello, defina el contador en el punto en el que debe volver a empezar desde el principio.
h1 { counter-increment: chapter; counter-reset: subchapter; }En este ejemplo, el contador se reinicia siempre que aparece un nuevo elemento h1. El siguiente ejemplo muestra una aplicación típica para contadores anidados.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> body { counter-reset:chapter; } h1 { counter-reset:subchapter; } h1:before { counter-increment:chapter; content: counter(chapter) ". "; } h2:before { counter-increment:subchapter; content:counter(chapter) "." counter(subcapitulo) " "; } </style> </head> <body> <h1>Capitulo</h1> <h2>Subcapitulo</h2> <h2>Subcapitulo</h2> <h2> <h2>Subcapítulo</h2> <h1>Capítulo</h1> <h2>Subcapítulo</h2> <h2>Subcapítulo</h2> <h2>Subcapítulo</h2> </body> </html>En el navegador se ve así:
Los ejemplos han mostrado lo potentes que son los contadores.
