CSS elimina marcadores. Viñetas estándar para una lista numerada. Eliminar marcadores predeterminados
¡Buen día!
En este artículo, aprenderá sobre todas las posibilidades de las listas, comprenderá cómo hacer una lista numerada y dominará las etiquetas que lo ayudarán a convertir una lista con viñetas simple en una más interesante y llamativa con viñetas arbitrarias. Después de completar la lección, comprenderá dónde se usan las listas y bajo qué circunstancias se pueden usar.
Este artículo es el tercero de este breve curso sobre Conceptos básicos de HTML. antes de leer esta lección Recomiendo pasar por los dos anteriores:
El artículo acaba de comenzar y ya puede notar el uso de una lista con viñetas estándar. En mi sitio web parece bastante simple: a la izquierda hay una pequeña sangría con una línea y un marcador cuadrado. Más adelante en el artículo veremos en detalle qué tipos de marcadores existen, cómo hacer números y también cómo hacer tu propio marcador.
En cada parte del artículo se acompañará la creación de determinadas listas. explicaciones detalladas insertando una lista particular.
1. Listas con viñetas en HTML
Este tipo de lista se utiliza para enumerar en el texto un conjunto de elementos con significados similares. Esta podría ser una lista de enlaces relacionados con el mismo tema, explicación detallada Para partes individuales texto. Pero veamos cómo se ven las listas con viñetas en el código:
Y así es como se ve en el navegador:
Arroz. 1.1. Vista estándar etiquetado lista sin numerar HTML en el navegador1.1 Viñetas estándar para listas con viñetas
En la imagen de arriba (Figura 1.1.) puede ver los círculos al principio de cada elemento del menú. Este es el marcador. De forma predeterminada, aparece como un círculo relleno en el navegador. Hay varios tipos de marcadores en HTML: círculo relleno, círculo vacío y cuadrado. No requieren ningún CSS ni imágenes de terceros:
1.2 Marcador de lista en forma de círculo vacío
Ya conoces los valores de los atributos, pero ahora veamos cómo crear una lista con viñetas HTML en código. De la tabla anterior hemos elegido el segundo valor "círculo" para atributo de tipo y lo pedí en nuestra lista con viñetas:
| <HTML > <cabeza > <título > Ejemplo de una lista con viñetas con un marcador circular vacío</título> </cabeza> <cuerpo > <p> Estrellas:</p> <tipo ul = "círculo" > <li > Sirio</li> <li > Arcturus</li> <li > Pólux</li> <li > Betelgeuse</li> <li > Sol</li> </ul> </cuerpo> </html> |
Veamos inmediatamente cómo se verá este código en el navegador:
Arroz. 1.2.Vista de un marcador de lista como un círculo en el navegador
1.3 Marcador de lista en forma de cuadrado
Veamos también el último ejemplo con un marcador cuadrado para una lista HTML:
Presta atención al marcador, se ha vuelto cuadrado:Arroz. 1.3.: Vista de un marcador de lista como un cuadrado en el navegador
Nota importante Este método ya no se utiliza para crear estilos para listas con viñetas. Existe una clara separación entre CSS (lea qué es CSS) y HTML. HTML sirve para marcar y CSS sirve para crear una apariencia atractiva. Código que contieneeste atributo
, al especificar el tipo de documento actual como HTML5 ("
"), dará un error durante la validación. Si no ha oído qué es la validación, este es el lugar para usted.El error será el siguiente: Arroz. 1.4. Error en el validador al utilizar el atributo "tipo" de una lista
Hemos ordenado las listas con viñetas. Ahora pasemos a las listas numeradas y luego veamos las listas anidadas y varias
ejemplos listos para usar , que se utilizan con mayor frecuencia en sitios reales. 2. Listas numeradas en HTML
A diferencia del tipo de lista anterior, las listas numeradas tienen una característica importante: se numeran automáticamente. Esto es útil cuando necesitas numerar
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <HTML > <cabeza > <título > gran lista</título> </cabeza> <cuerpo > <p>. Hacerlo manualmente llevará mucho tiempo y aún puede confundirse. Una lista numerada se especifica mediante la etiqueta. Cómo se ve en la práctica:</p> <Ejemplo de una lista numerada: <li > Ejemplo de una lista numerada estándar</li> <li > Del uno al cinco:</li> <li > viejo ></li> <li > Primero</li> <li > Segundo</li> <Tercero </cuerpo> </html> |
Cuatro Quinto/ol>
Así es como se ve una lista numerada:configuración estándar
en el navegador:
Arroz. 2.1.
| Lista numerada en el navegador con configuración estándar | Al igual que su predecesor (lista con viñetas), tiene sus propios estilos para mostrar números. La numeración regular no es el único tipo de viñeta para una lista numerada en HTML. | 2.1 Viñetas estándar para listas numeradas |
|---|---|---|
| Aquí podemos elegir no entre tres tipos de marcadores, sino entre cinco: | 1 |
|
| Ejemplo de lista Marcadores en forma de números arábigos. | Bádminton |
|
| a | chomolungma |
|
| A | La cumbre se desploma |
|
| i | Mar de Filipinas |
|
I
Rojo Verde Para una lista numerada, también podemos comenzar nuestra numeración desde cualquier número. Para hacer esto necesitas configurar atributo adicional"comenzar" . Esta numeración funciona en todo tipo de marcadores para listas numeradas. Cómo se ve en la práctica:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <HTML > <cabeza > <título > Numeración personalizada para una lista numerada</título> </cabeza> <cuerpo > <p> Empezamos a numerar desde doce:</p> <tipo ol = "a" inicio = "12" > <li > Doce</li> <li > Trece</li> <li > Catorce</li> <li > Quince</li> <li > Dieciséis</li> <Tercero </cuerpo> </html> |
Así es como aparecerá en el sitio real:
Arroz. 2.2.Numeración a partir de un número arbitrario en una lista numerada
En la imagen de arriba, numeramos la lista a partir de doce, mientras hacíamos marcadores en forma de letras latinas minúsculas. Creo que ahora ha quedado claro cómo utilizar estos atributos en sus proyectos.
Bien, pasemos ahora a las listas HTML anidadas.
3. Cómo hacer una lista multinivel (anidada) en HTML
En el sitio se utilizan listas de varios niveles para crear menús. Este menú suele aparecer como un menú desplegable hacia abajo (lección activada) o un menú desplegable hacia la izquierda o hacia la derecha. Estos menús le permiten almacenar otros elementos del menú de forma compacta.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <HTML > <cabeza > <título > Usando modelos de automóviles como ejemplo, crearemos una lista de varios niveles en HTML:</título> </cabeza> <cuerpo > <Lista de viñetas anidadas HTML <li > ul ><Lista de viñetas anidadas HTML <li > Citroën</li> <li > berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> </ul> </li> <li > C4 Gran Picasso</li> <li > Kia</li> <li > toyota</li> <li > Audi</li> </ul> </cuerpo> </html> |
lexus
Observe cómo se ve la lista de varios niveles en el navegador:Arroz. 3.1.
- Ejemplo de una lista multinivel en HTML
- en el lugar donde ocurre
- , el navegador agrega automáticamente un salto de línea;
- la lista tiene sangrías en la parte superior e inferior;
- De forma predeterminada, los marcadores se muestran como un círculo relleno;
- Cada elemento de la lista se desplaza hacia la derecha en relación con el texto principal.
- disco: marcadores en forma de círculo relleno;
- círculo: marcadores en forma de círculo abierto;
- cuadrado - marcadores cuadrados.
- Sepulkí
- sepulcaria
- Sepulenación
- No funcionará, por lo que tendrás que solucionarlo. Para hacer esto, oculte los marcadores de la lista usando propiedades de estilo de lista con el valor none y en el texto antes del contenido
- Agregamos nuestro propio carácter usando el pseudoelemento ::before. En el ejemplo 2, dicho marcador es un triángulo.
Ejemplo 2: Uso::antes
Liza - Sepulkí
- sepulcaria
- Sepulenación
Resultado este ejemplo mostrado en la Fig. 2. Dado que el uso de la propiedad de estilo de lista con el valor none no elimina los marcadores en absoluto, sino que solo los oculta de la vista, la lista aparece desplazada hacia la derecha. Para deshacerse de esta característica, el ejemplo agrega propiedad de sangría de texto Con valor negativo. Su tarea es mover el texto un carácter hacia la izquierda.
Arroz. 2. Marcadores arbitrarios en la lista.
No es necesario que el carácter esté en formato hexadecimal; se puede insertar directamente en el texto. Lo principal es guardar el documento en codificación UTF-8 y que el editor lo admita. Los caracteres en sí y sus códigos se pueden tomar, por ejemplo, de LibreOffice Writer (Fig. 3).
Arroz. 3. Seleccionar un símbolo en LibreOffice
Lista con marcadores dibujados a mano.
Los estilos le permiten establecer cualquier imagen adecuada como marcador a través de la propiedad list-style-image. El valor es relativo o camino absoluto A archivo gráfico, como se muestra en el ejemplo 3.
Ejemplo 3: usar una imagen como marcador
Liza - Sepulkí
- sepulcaria
- Sepulenación
El mejor dibujo para elegir. tamaño pequeño para evitar convertir elementos de la lista en subtítulos. En la figura. La Figura 4 muestra el resultado de un ejemplo de uso de imágenes pequeñas como marcadores.
Arroz. 4. Dibujar como marcador
Usar list-style-image tiene algunas desventajas:
- el patrón no se puede mover hacia arriba o hacia abajo;
- en diferentes navegadores La posición de la imagen en relación con el texto puede diferir.
Estas deficiencias se pueden evitar utilizando la propiedad de fondo, que establece imagen de fondo. Para cada elemento de la lista
- Quitamos los marcadores originales y configuramos. imagen de fondo sin repetición. Y para que el texto no aparezca encima de la imagen, lo desplazamos hacia la derecha usando padding-left (ejemplo 4).
Ejemplo 4: uso de fondo
Ul (margen izquierdo: -1em;) li (estilo de lista: ninguno; fondo: url(images/bullet.png) sin repetición 0 2px; relleno izquierdo: 20px;)
Posición del texto y la viñeta.
Hay dos formas de colocar un marcador en relación con el texto: el marcador se mueve fuera del borde de los elementos de la lista o se envuelve alrededor del texto (Fig. 5).
adentro afuera Arroz. 5. Colocación de marcadores en relación con el texto.
Para controlar la posición de los marcadores, utilice propiedad de posición de estilo de lista. Tiene dos significados: afuera - los marcadores se colocan afuera bloque de texto(este es el valor predeterminado) y dentro: las viñetas son parte del bloque de texto y se muestran en el elemento de la lista (ejemplo 5).
Ejemplo 5: cambiar la posición de los marcadores
Liza - Antes de comenzar, verifique que el equipo incluido con el kit 3BM esté incluido.
- En ausencia de uno o más dispositivos periféricos Debe ponerse en contacto inmediatamente con el personal técnico de los VT.
- Después de la inspección métodos visuales Desde su lugar de trabajo, puede encender con cuidado el 3BM.
El resultado de este ejemplo se muestra en la Fig. 6.
CSS permite crear listas numeradas y con viñetas, diseñar listas con viñetas con imágenes y, si es necesario, eliminar por completo cualquier marca de lista con viñetas.
estilos CSS lista de marcadores.
tipo de estilo de lista
tipo de estilo de lista: disco | circulo | cuadrado | decimales | bajo-romano | alto-romano | alfa inferior | alfa superior | ninguno ;
Significado :
disco: lista con viñetas en forma de círculo relleno
círculo: lista con viñetas en forma de círculo vacío
cuadrado: una lista con viñetas en forma de cuadrado relleno
decimal: lista numerada con números arábigos (1,2,3, etc.)
romano superior: lista numerada en números romanos grandes (I, II, III, IV, etc.)
Bajo romano: lista numerada que utiliza números romanos pequeños (i,ii,iii,iv, etc.)
alfa superior – lista numerada en mayúsculas(A, B, C, etc.)
alfa inferior – lista numerada letras minúsculas(a, b, c, etc.)
ninguno – sin marcador.
Ejemplo:
Listar propiedades en CSS - Cree en lo mejor, espera lo peor.
- La vida es una enfermedad, con un desenlace fatal.
- Nunca digas nunca.
Resultado :
Hay casos en los que es necesario eliminar la visualización de un marcador en la lista. Para hacer esto, escriba el código CSS.
tipo de estilo de lista: ninguno;
Ejemplo:
Listar propiedades en CSS - Cree en lo mejor, espera lo peor.
- Nunca digas nunca.
Resultado :
Puede reemplazar los marcadores regulares en la lista. propias imágenes. Esto se puede hacer usando la propiedad list-style-image.
imagen-estilo-lista
imagen-estilo-lista: URL(imagen.png);
Ejemplo:
Listar propiedades en CSS - Cree en lo mejor, espera lo peor.
- La vida es una enfermedad con un desenlace fatal.
- Nunca digas nunca.
Resultado :
También puede establecer la distancia de la lista con viñetas al texto. Esto se puede hacer usando la propiedad padding-left en el selector li.
Ejemplo:
Listar propiedades en CSS - Cree en lo mejor, espera lo peor.
- La vida es una enfermedad con un desenlace fatal.
- Nunca digas nunca.
Resultado :
La siguiente tarea es cambiar el color del marcador sin cambiar el color del texto. ¿Cómo es esto posible? El color del marcador se puede cambiar agregando una etiqueta a la prueba. .
Se parece a esto: - texto
- Cree en lo mejor, espera lo peor.
- La vida es una enfermedad con un desenlace fatal.
- Nunca digas nunca.
- Cree en lo mejor, espera lo peor. Punto 1.
- La vida es una enfermedad mortal. Punto 2.
- Nunca digas nunca. Punto 3
- Eso es todo lo que sabía. Punto 4
Hicimos una lista de varios niveles usando viñetas (etiqueta ). Apareció una lista de varios niveles con modelos de Citroën con otros marcadores. La lista principal tiene viñetas llenas y la lista del segundo nivel tiene círculos vacíos. Pero, como recordarás, usando el atributo "tipo" podemos redefinir los marcadores (es mejor configurar ). Pero podemos unirnos
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <HTML > <cabeza > <título > listas multinivel</título> </cabeza> <cuerpo > <Lista de viñetas anidadas HTML <li > numerados y marcados de la siguiente manera:<Ejemplo de una lista numerada: <li > Listas numeradas, con viñetas y multinivel en HTML<Lista de viñetas anidadas HTML <li > Primer grupo de tulipanes</li> </ul> </li> <li > Clase primera<Lista de viñetas anidadas HTML <li > Tulipanes tempranos simples</li> </ul> </li> <Tercero </li> </ul> </cuerpo> </html> |
segunda clase
tulipanes de felpa
En el ejemplo anterior tenemos doble anidamiento (2 niveles). En primer lugar, se incluye una lista de dos clases de tulipanes; Luego, se anida una lista con viñetas dentro de cada uno de los elementos de la lista numerada.Veamos cómo se ve en el navegador:
Arroz. 3.2. Ejemplo de una lista numerada de varios niveles a una lista con viñetas en el navegador y se dividen en pestañas HTML (estructura), CSS (estilos) y Resultado (resultado).
4.1 Cómo convertir una lista HTML en una cadena
Puede ser necesario convertir una lista HTML en una cadena al crear menú horizontal. Es muy fácil de hacer:
4.2 Cómo hacer una lista HTML sin icono
Responsable de esto propiedad de tipo de estilo de lista en CSS (más detalles):
4.3 Cómo centrar una lista en HTML
Un elemento de lista es elemento de bloque, por lo que se debe centrar usando márgenes. Pero hay uno punto importante— debemos especificar explícitamente el ancho para que funcione la alineación:
4.4 Cómo hacer una lista en HTML con imágenes
Una sola propiedad es suficiente Imagen-estilo-lista CSS. Dentro de la URL, especifique la dirección antes del icono. Solo quiero señalar que es mejor seleccionar inmediatamente una imagen pequeña, porque la altura de la línea de la lista depende de ello:
4.5 Lista con viñetas HTML tu viñeta
En este caso, debes conectarte con antelación. iconos de fuentes(por ejemplo, FontAwesome). Luego puedes crear cualquier ícono en lugar de un marcador estándar:
4.6 Cómo hacer una lista en HTML en varias columnas
Para hacer una lista en varias columnas usaremos propiedad CSS recuento de columnas (la propiedad solo se admite en los siguientes navegadores: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). También debe establecer la altura de la lista para ver la división en varias columnas:
5. Practica trabajar con listas.
En el siguiente vídeo podéis ver todo el trabajo con listas HTML en la práctica:
Listas con viñetas permitirte romper texto grande en bloques separados, cada uno de los cuales comienza con un marcador; normalmente un pequeño punto actúa como marcador. Esto atrae la atención del lector hacia el texto y aumenta su legibilidad.
Con elemento
- Las siguientes características están asociadas:
La Figura 1 muestra el resultado del ejemplo, ilustrando las características anteriores de la lista con viñetas.
Arroz. 1. Vista de lista con viñetas
Tipo de marcador
Los tokens pueden aceptar uno de tres tipos: círculo relleno (predeterminado), círculo abierto y cuadrado. Para seleccionar el tipo de marcador, utilice la propiedad de tipo de estilo de lista o la propiedad de estilo de lista universal (ejemplo 1). Se aplican los siguientes valores:
Ejemplo 1: cambiar la apariencia de un marcador
El ejemplo muestra cómo crear una lista con viñetas utilizando un pequeño cuadrado de color sólido como icono de viñeta. Aunque el número de valores está limitado a tres, esto no quiere decir que tengamos a nuestra disposición únicamente tres tipos de marcador. Hay muchos caracteres especiales que pueden actuar con éxito como icono de marcador. Atorníllelos directamente a
Ejemplo:
Resultado :
Adición al tema general.
Si por alguna razón necesita establecer la numeración de la lista de marcadores no desde cero, sino, digamos, desde 8, puede realizar este movimiento.
Ejemplo:
Resultado :
Este tema ha llegado a su fin.
