Definición de una lista con viñetas. Listas marcadas. Marcador de lista en forma de círculo vacío

Las listas con viñetas le permiten dividir texto grande en bloques separados, cada uno de los cuales comienza con una viñeta, generalmente un pequeño punto. Esto atrae la atención del lector hacia el texto y aumenta su legibilidad.

con elemento

en el lugar donde se encuentra
- la lista tiene sangrías en la parte superior e inferior;
- los marcadores se muestran como un círculo relleno de forma predeterminada;
- cada elemento de la lista se desplaza a la derecha en relación con el cuerpo del texto.
La Figura 1 muestra el resultado del ejemplo, ilustrando las características anteriores de la lista con viñetas.
Arroz. 1. Vista de la lista con viñetas
tipo de marcador
Los marcadores pueden tomar una de tres formas: círculo lleno (predeterminado), círculo vacío y cuadrado. Para seleccionar el tipo de marcador, utilice la propiedad de tipo de estilo de lista o el estilo de lista genérico (ejemplo 1). Se aplican los siguientes valores:
- disco: marcadores en forma de círculo lleno;
- círculo: marcadores en forma de círculo sin relleno;
- cuadrado - marcadores cuadrados.
Ejemplo 1 - Cambiar la apariencia del marcador
Liza
- sepulki
- Sepulcarios
- Sepulenia
El ejemplo muestra cómo crear una lista con viñetas que utiliza 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 solo tres tipos de marcador. Hay muchos caracteres especiales que pueden actuar con éxito como un icono de marcador. "Atorníllalos" directamente a
no funcionará, así que tienes que trabajar alrededor. Para hacer esto, oculte los marcadores de lista usando la propiedad de estilo de lista con un valor de ninguno y en el texto antes del contenido
agrega tu propio personaje con el pseudo-elemento ::before. En el ejemplo 2, un triángulo actúa como tal marcador.
Ejemplo 2: Usar::before
Liza
- sepulki
- Sepulcarios
- Sepulenia
El resultado de este ejemplo se muestra 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 se desplaza hacia la derecha. Para deshacerse de esta peculiaridad, el ejemplo agrega la propiedad text-indent con un valor negativo. Su tarea es mover el texto a la izquierda por un carácter.
Arroz. 2. Marcadores arbitrarios en la lista
El carácter no tiene que estar en formato hexadecimal, también se puede insertar directamente en el texto. Lo principal es guardar el documento en codificación UTF-8 y que el editor lo soporte. Los propios caracteres y sus códigos se pueden tomar, por ejemplo, de LibreOffice Writer (Fig. 3).
Arroz. 3. Selección de símbolos en LibreOffice
Lista con viñetas dibujadas
Los estilos le permiten establecer cualquier imagen adecuada como marcador a través de la propiedad list-style-image. El valor es una ruta relativa o absoluta al archivo gráfico, como se muestra en el ejemplo 3.
Ejemplo 3: uso de una imagen como marcador
Liza
- sepulki
- Sepulcarios
- Sepulenia
Es mejor elegir una imagen de tamaño pequeño para no convertir los elementos de la lista en leyendas de figuras. En la fig. 4 muestra el resultado de la acción de ejemplo para usar imágenes pequeñas como marcadores.
Arroz. 4. Dibujar como marcador
List-style-image tiene algunos inconvenientes:
- 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.
Estos errores se pueden evitar mediante el uso de la propiedad de fondo, que establece la imagen de fondo. Para cada elemento de la lista

eliminamos los marcadores originales y configuramos la imagen de fondo sin repetir. Y para que el texto no se muestre encima de la imagen, lo desplazamos hacia la derecha mediante padding-left (ejemplo 4).

Ejemplo 4 Uso de fondo

Ul ( margen izquierdo: -1em; ) li ( estilo de lista: ninguno; fondo: url(images/bullet.png) no-repeat 0 2px; padding-left: 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 coloca fuera del borde de los elementos de la lista o se envuelve con texto (Fig. 5).


en el interior	fuera de

Arroz. 5. Colocación de marcadores en relación con el texto

La propiedad list-style-position se utiliza para controlar la posición de los marcadores. Tiene dos significados: exterior: las viñetas se colocan fuera del bloque de texto (este es el valor predeterminado) e interior: las viñetas forman 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 a trabajar, verifique la disponibilidad del equipo incluido en el kit 3BM.
En ausencia de uno o más dispositivos periféricos, debe comunicarse inmediatamente con el personal técnico del CC.
Después de inspeccionar visualmente su área de trabajo, puede encender con cuidado el 3BM.

El resultado de este ejemplo se muestra en la Fig. 6.

Hola, queridos lectores del sitio del blog. Hoy, bajo este título, quiero hablar sobre las diversas listas Html que se pueden crear en función de las etiquetas UL, OL, LI y DL especialmente diseñadas para esto. Con la ayuda de un par de UL y LI, se crean listas con viñetas, con la ayuda de OL y LI, listas numeradas, y con la ayuda de los elementos DL, DT y DD, se crean los llamados listados de definiciones. También consideraremos brevemente los principios de creación de estructuras anidadas.

Quiero recordarles que ya hemos logrado hablar sobre los conceptos básicos del diseño moderno y tabular (). Además, tocamos los conceptos básicos, bueno, aprendimos.

Listas con viñetas basadas en etiquetas UL y LI

La etiqueta UL se usa para crear listas con viñetas y la etiqueta OL se usa para crear listas numeradas. Estas etiquetas están emparejadas y bloquean las etiquetas, al igual que el elemento LI.

Los elementos de lista separados se ubican entre las etiquetas de apertura y cierre, que a su vez están encerradas en el elemento LI de apertura y cierre. En la parte superior e inferior de las listas Html, el navegador agrega una sangría de una línea, similar a la sangría creada por la etiqueta de párrafo.

Veamos, por ejemplo, una versión etiquetada que podría verse así:

Primera linea
Segundo
último elemento

Dentro de las etiquetas UL de apertura y cierre, solo se pueden colocar elementos LI, y ya dentro de estos elementos (párrafos) puede insertar cualquier contenido (texto, imágenes, encabezados, párrafos, enlaces e incluso otras listas).

Aquellos. El UL solo sirve para organizar un listado con viñetas (no ordenado), y todo lo que verá en una página web dentro de él se implementa utilizando el contenido de los elementos LI.

Para UL, puede cambiar la apariencia del marcador configurando diferentes valores para el atributo "Tipo" en él. Si no se especifica "Tipo" (gestión de la apariencia de los marcadores) para el elemento UL, se mostrará el tipo de marcador predeterminado (el disco es un círculo relleno del color del texto):

En los ejemplos anteriores, escribimos el atributo "Tipo" en el elemento UL, utilizando este tipo de marcador para todos los elementos. Pero el atributo "Tipo" también se puede escribir para cada etiqueta LI individual, configurando su propio tipo de marcador para este elemento.

Un ejemplo de una lista con viñetas con diferentes tipos de viñetas para cada elemento:

Marcador de disco lleno
Marcador en forma de disco sin sombrear
Cuadrado

Listas numeradas en Html basadas en la etiqueta OL

Para crear un listado numerado, se utilizan etiquetas OL, dentro de las cuales, nuevamente, se ubicarán los elementos LI. OL y LI, como ya mencioné, están a nivel de bloque (es decir, tienden a ocupar todo el espacio disponible en ancho) y no se puede colocar nada dentro de OL excepto los elementos LI.

Resulta que OL y UL son etiquetas de servicio que solo se necesitan para decirle al navegador qué tipo de lista estamos formando (con viñetas o numerada). En el caso de uno numerado, a la izquierda de cada elemento no veremos un marcador, sino un número y un punto detrás:

Primera linea
Segundo punto
tercera línea

Como mencioné anteriormente, los elementos UL, OL y LI tienen la capacidad de usar el atributo TYPE. Le permite establecer el tipo de marcador o especificar con qué números o letras se numerarán los elementos de la lista. Para una lista ordenada, los parámetros de este atributo pueden tomar los siguientes valores:

Un ejemplo de una lista numerada con diferentes tipos de numeración para cada elemento:
1. numerado en números romanos grandes
2. Numeración en minúsculas latinas
3. Numeración con números romanos pequeños
Al crear listas numeradas, también es posible comenzar a numerar no desde uno, sino desde el número especificado en el atributo INICIO. Por ejemplo:
1. El primer elemento cuyo número se especifica en la etiqueta OL mediante el atributo start="23"
2. El siguiente artículo, con un número uno más
3. otro mas
Para OL, también puede comenzar una nueva numeración desde cualquier valor, comenzando desde cualquier artículo, escribiendo el atributo VALOR con el número requerido en la LI de apertura de este artículo. Por ejemplo:
1. Primer artículo número uno
2. Este elemento recibirá el número especificado en el atributo value="32"
3. Artículo con un gran número
Dar estilo a la apariencia de las listas en CSS (hojas de estilo)
Pero, como regla, ahora la apariencia de los marcadores no se establece a través del atributo TYPE, sino , para el cual se escriben las propiedades correspondientes.
Aquí solo daré un ejemplo de varios marcadores para listas desordenadas, cuya apariencia se establece a través de un archivo separado con hojas de estilo en cascada.
- Primer punto
- Segundo
- Ultimo
Pero hablaremos de ello en próximos artículos. Así se configura la aparición de marcadores para UL en este blog. Las imágenes se utilizan como marcadores: para elementos ordinarios de una lista sin numerar — , para elementos anidados de una lista sin numerar — .
Listas Especiales y Anidadas en Código Html
El tercer y último tipo se denomina "listas de definición" y se configuran mediante tres etiquetas: DL, DT y DD. El DL le dice al navegador que seguirá una lista de definiciones.
Por lo general, este tipo se usa (o se suponía que se usaría) para escribir entradas de diccionario que consisten en términos (incluidos en las etiquetas DT) y sus descripciones (incluidas en las etiquetas DD).

Primer periodo

Descripción

Segundo período

Su descripción

Si observa el ejemplo anterior, notará que el elemento DD (descripción del término) se desplaza (en 40 px) en relación con el elemento DT (el término en sí).
En general, DL, DT y DD son etiquetas de bloque, y solo se puede insertar contenido con etiquetas en línea dentro del elemento DT (resulta que los elementos de bloque de encabezados y párrafos no se pueden usar dentro de DT). Y dentro de las etiquetas DD, puede insertar cualquier elemento, tanto en línea como en bloque.
lista anidada en Html se crea por analogía con uno simple, pero dentro de la lista principal, algunos de los elementos se incluyen nuevamente en la etiqueta de apertura y cierre UL u OL.
Tenga en cuenta que el LI de cierre del elemento en el que se creará el elemento anidado se coloca solo después del código completo de la lista anidada (esto es muy importante para su correcta visualización en la página web). La lista anidada podría verse así:
1. El primer párrafo del numeral principal
2. Segundo punto
  - Primer elemento de etiquetado anidado
  - Segundo
  - El tercer y último punto del marcado
3. El tercer elemento del numerado.
¡Buena suerte para ti! Nos vemos pronto en el sitio de las páginas del blog.
te puede interesar
Cómo insertar un enlace y una imagen (foto) en HTML - Etiquetas IMG y A Seleccionar, opción, área de texto, etiqueta, conjunto de campos, leyenda: etiquetas HTML del formulario de lista desplegable y el campo de texto
Formularios html para el sitio: etiquetas Formulario, Entrada y selección, Opción, Área de texto, Etiqueta y otros para crear elementos de formulario web
Cómo se configuran los colores en código Html y CSS, selección de tonos RGB en tablas, resultados de Yandex y otros programas
Incrustar y objetar: etiquetas Html para mostrar contenido multimedia (video, flash, audio) en páginas web
Etiquetas y atributos de encabezados H1-H6, línea horizontal Hr, salto de línea Br y párrafo P según estándar Html 4.01
Tablas en Html - Etiquetas Table, Tr y Td, así como Colspan, Cellpadding, Cellspacing y Rowspan para crearlas
¿Qué es el lenguaje de marcado de hipertexto Html y cómo enumerar todas las etiquetas en el validador W3C?
Fuente (cara, tamaño y color), etiquetas Blockquote y Pre: formato de texto obsoleto en HTML puro (sin usar CSS)
Iframe y Frame: qué son y cuál es la mejor manera de utilizar los marcos en Html
Img: etiqueta HTML para insertar una imagen (Src), alinearla y envolverla con texto (align), así como establecer un fondo (background)

Una lista con viñetas se define agregando un pequeño marcador, generalmente un círculo relleno, antes de cada elemento de la lista. La lista en sí se forma usando un contenedor.
- Como se muestra abajo.
  - Primer punto
  - Segundo punto
  - Tercer párrafo
  La lista debe contener una etiqueta de cierre.
, de lo contrario se producirá un error. etiqueta de cierre

El ejemplo 11-1 es el código HTML para agregar una lista con viñetas a una página web.

Ejemplo 11.1. Crear una lista con viñetas

lista con viñetas

Cheburashka
Cocodrilo Gena
Shapoklyak
rata larisa

El resultado de este ejemplo se muestra en la Fig. 11.1.

Arroz. 11.1. Vista de lista con viñetas

Observe el relleno en la parte superior, inferior e izquierda de la lista. Tales sangrías se agregan automáticamente.

Los marcadores pueden tomar una de tres formas: círculo (predeterminado), círculo y cuadrado. El atributo de tipo de la etiqueta se utiliza para seleccionar el estilo del marcador.

Tipo de lista	código HTML	Ejemplo
Lista con viñetas en forma de círculo		El primero Segundo Tercero
Lista con viñetas en forma de círculo		El primero Segundo Tercero
Lista con viñetas cuadradas		El primero Segundo Tercero

La apariencia de los marcadores puede variar ligeramente en diferentes navegadores, así como al cambiar la fuente y el tamaño del texto.

La creación de una lista con marcadores cuadrados se muestra en el Ejemplo 11.2.

Ejemplo 11.2. Tipo de marcadores

lista con viñetas

Cambio de creencias

cambio de fe religiosa (a elegir entre: budismo, confucianismo, hinduismo). Oferta especial - Judaísmo e Islam juntos;
un cambio en la fe en la infalibilidad de la parte amada;
la creencia de que existen extraterrestres;
preferencia por un sistema político, como el mejor de su tipo (a elegir entre: feudalismo, socialismo, comunismo, capitalismo).

El resultado de este ejemplo se muestra en la Fig. 11.2.

Hay dos tipos de listas en HTML: numeradas y no numeradas. Su creación es casi la misma. Incluso las etiquetas difieren en un carácter. También puede crear elementos que pueden incluir números y viñetas.

Estas listas se pueden transformar de la forma que desee. Todo depende de tu imaginación. Primero, consideraremos listas estándar, al igual que en el editor de Word, y luego las mejoraremos y diseñaremos para que no sean reconocibles.

Lista numerada HTML

Se puede crear uno numerado regular usando las siguientes etiquetas:

Primer elemento de la lista

Segundo elemento de la lista

Tercer elemento de la lista.

Las listas simples se ven así

De acuerdo con los estándares, cada elemento de la lista debe estar dentro de una etiqueta de apertura y cierre. Pero si no pones una etiqueta de cierre, el resultado será exactamente el mismo. El manejador es muy inteligente. Durante la transformación de la lista, analiza las etiquetas de apertura. Si ve un nuevo

, luego automáticamente pone delante de él

Por lo tanto, las listas se pueden hacer como se muestra a continuación.

Pero desde el punto de vista de los profesionales, esto es incorrecto.

Las listas desordenadas (o con viñetas) se crean exactamente de la misma manera, solo que en lugar de la etiqueta ol, se escribe ul.

No contiene números ni letras, solo varios símbolos, que se denominan marcadores.

Lista numerada multinivel HTML

Muchos usuarios están interesados en esta posibilidad. Por lo tanto, debe tenerse en cuenta que cualquier lista HTML numerada se puede hacer de varios niveles. Los niveles adicionales pueden ser iguales o marcados.

Para crear la lista que se muestra en el ejemplo anterior, debe escribir lo siguiente.

Tenga en cuenta que en este código, a diferencia de los primeros ejemplos, se ha agregado el atributo de tipo. Gracias a él, puede especificar el tipo de clasificación para listas numeradas y con viñetas.

Para numerados, indicamos el alfabeto o el tipo de números, y para otros casos, el tipo de marcador.

Si usa una etiqueta HTML especial, la lista numerada puede ser lo que quiera.

Puede especificar el atributo de tipo con cualquier valor de la tabla. O, en la clase de estilo css, especifique el tipo de estilo de lista con el tipo de clasificación deseado.

La traducción de valores es bastante simple. Suficientes conocimientos básicos de inglés. Pero incluso si no puede traducir las palabras "círculo", "cuadrado", etc., puede comprender visualmente cuál será el resultado cuando especifique estos valores en el atributo de tipo.

Para listas numeradas, utilice las siguientes opciones:

1 - números arábigos;
A - letras mayúsculas;
a - letras latinas minúsculas;
I - números romanos en mayúsculas;
i - números romanos en minúsculas.

Por defecto siempre es una lista con , es decir, si no especificas nada, esto es equivalente a type="1".

Además, las listas numeradas pueden comenzar en cualquier posición deseada. De forma predeterminada, la salida es desde 1. Pero si lo desea, puede comenzar al menos con cien. Para hacer esto, debe especificar el atributo de inicio con cualquier valor.

Además, la conclusión se puede sacar en el orden inverso. Para hacer esto, necesitas escribir al revés.

diseño de lista

Una lista HTML numerada puede tener un estilo tan hermoso que es posible que no se dé cuenta inmediatamente de que se trata de una lista normal y no de una imagen hecha en Photoshop.

Aquí hay ejemplos de hermosas listas.

Como puede ver en el ejemplo, puede cambiar la apariencia de la numeración y los elementos mismos.

Puede crear una lista regular como esta.

En los estilos css, debe especificar el diseño de las etiquetas ol. Tenga en cuenta que, en este caso, la configuración se aplicará a todas las listas de todo el sitio donde se utilice este archivo de estilo.

Considere primero la opción con un diseño de lista redonda. Volver al código de lista. La clase de lista redondeada se especifica allí. Es con esta clase con la que necesitas jugar para hacer tal belleza. Puedes nombrar la clase como quieras.

Ahora considere el diseño cuadrado.

Los estilos son muy similares. La diferencia es que en el primer caso, el elemento se redondea utilizando capacidades css.

Un maquetador profesional debe prever y comprender que no todos los usuarios utilizan ordenadores modernos. No todo el mundo tiene instalado Windows 7, 8, 10. Hay un porcentaje de usuarios que todavía usan Windows XP y usan versiones anteriores del navegador Internet Explorer.

Como regla general, casi todas las mejoras de diseño moderno a los elementos no son compatibles con ellos. Al usuario le parecerá que el diseño del sitio no se ha trabajado en absoluto. Que todo se ha ido. Los elementos chocan entre sí. Para evitar esto, debe calcular todas las opciones.

Algunos webmasters hacen la vista gorda ante ellos, ya que su cuota de mercado es cada vez más pequeña en el mercado actual. Pero para un profesional cada visitante es importante, sobre todo si se trata de un sitio comercial.

Haga algo adecuado para todos o considere todas las opciones del navegador.

El lenguaje HTML proporciona un conjunto especial de etiquetas para presentar información en forma de listas. Las listas son una de las formas de presentación de datos más utilizadas en documentos electrónicos e impresos. Nos encontramos con listas casi a diario, ya sea una lista de necesidades de compra en la tienda, estudiantes en el aula o simplemente tareas que deben realizarse. La capacidad de organizar estructuras de listas está disponible en muchos editores de texto, en particular, el poderoso procesador de texto Microsoft Word tiene herramientas convenientes para formatear listas de varios tipos (las posibilidades de crear listas HTML usando Microsoft Word se analizan en el Capítulo 8). Aquí hay algunos casos en los que usar listas es bastante conveniente:

Combinar piezas de información en una sola estructura para dar un aspecto legible.
Descripción de procesos complejos paso a paso.
La disposición de la información en el estilo de una tabla de contenido, cuyos párrafos apuntan a las secciones relevantes del documento.

Tenga en cuenta que los elementos anteriores están organizados en forma de estructura de lista.

HTML proporciona los siguientes tipos principales de listas: lista con viñetas, numerada y definición. Las siguientes etiquetas se utilizan para implementar listas de varios tipos:

, , . Con la ayuda de varios tipos de listas incrustadas en un documento, se pueden implementar una variedad de funciones, cuya descripción es el tema de este capítulo. Se consideran las características de la construcción de listas de varios tipos, así como el uso de listas anidadas.

lista con viñetas

Uno de los tipos de listas implementadas en HTML es la lista con viñetas. De lo contrario, las listas de este tipo se denominan desordenadas o

desordenado. El apellido se usa a menudo como una traducción formal del nombre de la etiqueta correspondiente.

En una lista con viñetas, para resaltar sus elementos, se utilizan caracteres especiales, llamados marcadores de lista (a menudo llamados viñetas, que es el sonido formal del término inglés bullet). El navegador determina la apariencia de los marcadores de lista y, al crear listas anidadas, los navegadores diversifican automáticamente la apariencia de los marcadores de diferentes niveles de anidamiento.

Etiquetas

y<LI >

Para crear una lista con viñetas, debe usar un contenedor de etiquetas, dentro del cual se encuentran todos los elementos de la lista. Las etiquetas de lista de apertura y cierre proporcionan un salto de línea antes y después de la lista, separando así la lista del contenido principal del documento, por lo que no es necesario utilizar etiquetas de párrafo aquí.

Cada elemento de la lista debe comenzar con una etiqueta

(LI - Elemento de lista, elemento de lista). Etiqueta
no necesita una etiqueta de cierre adecuada, aunque su presencia en principio no está prohibida. Los navegadores generalmente comienzan cada nuevo elemento de la lista en una nueva línea cuando muestran un documento.

La información anterior es suficiente para construir una lista elemental con viñetas. Aquí hay un ejemplo de un documento HTML que usa una lista con viñetas, cuya representación del navegador se muestra en la Fig. 2.1.

Ejemplo de lista con viñetas
Arroz. 2.1. Visualización del navegador de una lista con viñetas

Tenga en cuenta que además de los elementos de la lista marcados con la etiqueta
, pueden estar presentes otros elementos HTML. En el ejemplo anterior, uno de estos elementos es texto sin formato, que no es un elemento de lista, sino que desempeña el papel de su encabezado.

Nota

En algunos libros de texto sobre el lenguaje HTML, hay una indicación de que la etiqueta del contenedor debe usarse para establecer el título de la lista. (LH - Encabezado de lista, encabezado de lista). Esta etiqueta actualmente no es reconocida por ninguno de los navegadores comunes y no es parte de la especificación HTML. Por lo tanto, su uso pierde sentido, aunque no dará lugar a ningún error.

en la etiqueta