Las listas CSS son muy útiles para llegar a un conjunto de puntos numerados o con viñetas. Este artículo le mostrará cómo controlar el tipo, la posición y el estilo de usando CSS. Los siguientes consejos se cubrirán aquí,
- Propiedades CSS
- La propiedad de tipo de estilo de lista
- Listas CSS: programa de muestra
- Valores de marcador paraEn la propiedad list-style-position
Así que comencemos entonces
Listas CSS
Propiedades CSS
Hay cinco propiedades CSS diferentes en las que puede usarlo para controlar listas:
- Tipo-estilo-lista: Nos permite controlar la forma o apariencia del marcador.
- Posición-estilo-lista: Especifica que se necesita un punto largo para ajustar a una segunda línea o debe alinearse con la primera línea o comenzar con el marcador.
- Imagen de estilo de lista: especifica que se debe agregar una imagen para el marcador o hacerla más atractiva en lugar de las viñetas o los puntos numerados.
- Estilo de lista: muestra la abreviatura de las propiedades anteriores.
- Marker-offset: Especifica la distancia entre el marcador y el texto ingresado en la lista.
Aquí las listas más utilizadas son: tipo de estilo de lista y posición de estilo de lista. Se explica a continuación
manejo de archivos en java ejemplo
Continuando con este artículo sobre listas CSS
La propiedad de tipo de estilo de lista
En la propiedad list-style-type, le permite controlar la forma y el estilo de las viñetas o el marcador en el caso de la lista desordenada. En caso de lista ordenada, se trata de numeración de caracteres.
A continuación, la tabla que representa para las listas desordenadas:
| Valor | Descripción |
| Ninguna | N / A |
| Dto | Se rellena con el círculo (predeterminado). |
| Circulo | Es un círculo vacío. |
| Cuadrado | Se rellena el cuadrado. |
A continuación, la tabla que representa para las listas ordenadas:
| Valor | Descripción | Ejemplo |
| Decimal | Es un numero | 1,4,3 |
| Cero inicial decimal | 0 antes del número real | 01, 04, 03 |
| Alfa inferior | Son caracteres alfanuméricos en minúscula. | a B C D |
| Alfa superior | Son caracteres alfanuméricos en mayúscula. | A B C D |
| Romano inferior | Son números romanos en minúscula. | yo, ii, iii, iv, v |
| Alto-romano | Son números romanos en mayúscula. | I, II, III, IV, V |
| Griego inferior | El marcador está en griego inferior | alfa, gamma |
| Latín inferior | El marcador está en latín inferior | a B C D |
| Latín alto | El marcador está en latín superior | A B C D |
Continuando con este artículo sobre listas CSS
Listas CSS: programa de muestra
- Java
- Pitón
- Angular
- Java
- Pitón
- Angular
- Java
- Pitón
- Angular
- Java
- Pitón
- Angular
- Java
- Pitón
- Angular
Salida
Continuando con este artículo sobre listas CSS
La propiedad list-style-position
Valores de marcador para la propiedad In list-style-position
En la propiedad list-style-position, muestra que el marcador debe aparecer dentro o fuera del cuadro que contiene las viñetas. Esto puede tener uno de los dos valores:
| Valor | Descripción |
| Ninguna | N / A |
| Dentro | En este caso, si el texto va en la segunda línea, el texto se ajustará debajo del marcador y también mostrará dónde habría comenzado el texto si las listas tuvieran un valor afuera. |
| fuera de | En este caso, si el texto va a la segunda línea, el texto se alineará con el inicio de la primera línea. |
Ejemplo:
- Matemáticas
- Ciencias Sociales
- Física
- Matemáticas
- Ciencias Sociales
- Física
- Matemáticas
- Ciencias Sociales
- Física
- Matemáticas
- Ciencias Sociales
- Física
Salida
Esto nos lleva al final de este artículo sobre listas CSS.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo capacita en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del artículo y nos comunicaremos con usted.