¿Qué significa ningún estilo de lista? Reglas CSS para personalizar la apariencia de una lista en una página HTML. Propiedad de estilo de lista (tipo, imagen, posición). Formatear un fragmento personalizado de una página web

Estilo de lista: diseño de listas en código HTML

Imagen de estilo de lista y regla CSS prefabricada

Sintaxis

georgiano | alfa inferior | griego inferior | latín bajo | bajo-romano |

Repita al menos A, pero no más de B veces.

armenio Numeración tradicional armenia. Números arábigos decimales (1, 2, 3, 4,...). cero decimal

cuatro

mostrado en la Fig. 1.

Objeto

Especificación

Navegadores

Opciones de salida de texto

Estilo privado

atributo de identificación

Valores

Lista con viñetas

Hogar › Teléfono › ¿Qué significa ningún estilo de lista? Reglas CSS para personalizar la apariencia de una lista en una página HTML. Propiedad de estilo de lista (tipo, imagen, posición). Formatear un fragmento personalizado de una página web

Hola, queridos lectores del blog. Hoy habrá otro artículo en la alcancía. Se hablará sobre diseño utilizando reglas de tabla. estilos en cascada. Aquí todo es muy sencillo, pero aún así decidí dedicar un post aparte a este tema.

Un poco antes ya logramos descubrir cómo, cómo y con qué se puede trabajar. Bueno, un poco antes analizamos en detalle todo tipo de cosas y sus varias combinaciones para indicar exactamente ese elemento código HTML, para lo cual deberás aplicar ciertas propiedades de peinado.

Entonces, en el lenguaje de marcado de estilo hay tres reglas separadas que comienzan con el estilo de lista, que sirven para configurar apariencia listas (numeradas o con viñetas) en el código de los documentos web. Además, existe una regla de estilo de lista CSS prefabricada, que le permite reducir ligeramente la cantidad de código. Pero primero lo primero.

Lo que consideraremos ahora se puede utilizar tanto para elementos Html LI como para elementos Ul y Ol (listas con viñetas y numeradas, respectivamente). ¿Cuál será la diferencia entre usar el estilo de lista para estas etiquetas?

De hecho, puedes saber si una propiedad se hereda o no en el sitio web del validador (léelo en el enlace proporcionado) en la sección dedicada a la especificación de hojas de estilo en cascada. En la columna "Heredado", aparecerá "Sí" frente a las reglas heredadas:

Empecemos con tipo de estilo de lista, que le permite configurar el tipo de marcado para elementos individuales de la lista HTML. Los siguientes valores son válidos para esta regla:

Ninguno: no se realizará ninguna marca (list-style-type:none; se aplica a este elemento y, por lo tanto, no tiene marcador)
El disco es un círculo relleno (tipo-estilo-lista:disco; se usa para esta línea)
Círculo - círculo como marcador
Cuadrado: un cuadrado como marcador
Decimal: números arábigos (tipo de estilo de lista:decimal;)
alfa inferior— letras latinas V minúscula
alfa superior: letras latinas mayúsculas
low-roman - números romanos en minúscula
Upper-roman: números romanos en mayúsculas.

¿Qué crees que se utilizó para crear la lista de arriba, Ul u Ol? Una pregunta rápida. Resulta que esto ya no es importante, aunque en este caso particular usé Ol, pero al cambiarlo a Ul, la apariencia seguirá siendo la misma, porque está configurada para cada elemento con su propio valor CSS lista de reglas tipo de estilo.

De hecho, Ul y Ol difieren sólo en su comportamiento predeterminado (marcas Ul y números Ol). Pero si lo desea, puede convertir fácilmente un estilo de lista en otro usando el tipo de estilo de lista. La fuente utilizada para marcar números o letras es exactamente la misma que definió para el contenido de las etiquetas LI. Por ejemplo, al cambiar el color de fuente de la lista cambiaremos y color del marcador:

Cambió el color del texto (list-style-type:lower-roman;color:red) y cambió el color del marcador

Sigamos con la siguiente propiedad CSS: posición-estilo-lista. Utilizándolo, puede establecer la posición (ubicación) del área con el marcador. Sólo hay dos valores posibles para ello:

Aquellos. Básicamente, en list-style-position indicamos dónde se debe colocar el área con marcadores: fuera del elemento LI (afuera) o dentro (adentro). Por defecto, el área con el marcador está fuera de límites, es decir. se utiliza el valor exterior.

Veamos esto con un ejemplo. En el primer elemento de la lista, escribiré específicamente list-style-position:inside y veremos qué sucede:

Todo está por defecto aquí.
Así es como se verá colocar un área de marcador con el interior. Tenga en cuenta que la segunda línea de este elemento y el marcador están ubicados en el mismo nivel.
Todo está por defecto aquí.

A continuación tenemos List-style-image: le permite especificar una imagen que se utilizará como marcador. Esta regla está configurada en Ninguno de forma predeterminada (es decir, no se utiliza ninguna imagen como marcador), pero puede escribir la funcionalidad Url() especificando la ruta a la imagen, que posteriormente actuará como marcador en esta lista:

Podría verse así:

Imagen-estilo-lista: url(https://site/images/list_star.png);

Todo está por defecto aquí.
Así es como se vería usar una imagen como marcador. Está claro que puedes elegir una imagen más adecuada para este propósito.
Por ejemplo, como aquí.

Como recordarás, en el artículo sobre dije que las imágenes se refieren a elementos en línea(En realidad, para el navegador es la misma letra, pero a veces muy grande).

Aquí la imagen ocupa el lugar del marcador (letras o números). En este caso, la altura de la línea con el elemento de la lista aumentará si lo inserta como marcador. panorama general(como sucedió en el segundo elemento del ejemplo anterior).

En la funcionalidad de imagen de estilo de lista, puede especificar ambas imágenes. Si la imagen no se carga, se utilizará el marcador o la numeración predeterminados, o lo que se especifica en el tipo de estilo de lista para este elemento de lista.

Para escribir las tres reglas CSS descritas anteriormente en una sola, puede usar el estilo Lista, que es prefabricado para diseñar listas. No importa el orden en que se especifican los valores. Aquellos valores que no especifiques en el estilo Lista, en explícitamente será interpretado por el navegador con valores predeterminados.

¿Dónde puedo ver los valores predeterminados? Sí, está todo ahí, en la especificación CSS del validador W3C en la columna "Valor inicial" frente a las propiedades que le interesan:

Los valores de las propiedades individuales en una regla prefabricada de estilo Lista están separados por espacios. La ubicación, como ya hemos dicho, no es importante:

En la práctica podría verse así:

Estilo de lista: dentro de la URL superior romana (https://site/images/list_star.png);

Puede utilizar valores en cualquier orden y en cualquier número (empezando por uno). Por cierto, los menús se crean con mayor frecuencia en sitios web utilizando listas, y la propiedad Estilo de lista se utiliza para para eliminar marcadores de las listas de menú, que allí son completamente innecesarios:

Tipo de estilo de lista: ninguno;

Estilo de lista: ninguno;

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

");">

	alfa superior \| latín superior \| alto-romano \| ninguno	Designaciones
<тип>	Descripción	<размер>
Ejemplo	Indica el tipo de valor.	<размер> && <цвет>
A && B	Los valores deben generarse en el orden especificado.	Un \| B
Indica que es necesario seleccionar solo un valor de los propuestos (A o B).	normales \| pequeñas capitalizaciones	Un \|\| B
	Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden.	ancho \|\| contar
*	Valores de los grupos.	[,<время>]*
+	[ cultivo \|\| cruz ]	<число>+
?	Repita cero o más veces.	Repita una o más veces.
El tipo, palabra o grupo especificado es opcional.	¿recuadro?	<радиус>{1,4}
#	(A, B)	<время>#

Repita una o más veces separadas por comas.

Los valores dependen de si se aplican a un tipo de lista con viñetas o numerada.

círculo Marcador en forma de círculo. Marcador de disco en forma de punto. Marcador cuadrado en forma de cuadrado.
lista numerada

Números arábigos con un cero a la izquierda para las cifras inferiores a diez (01, 02, 03,...). georgiano Numeración tradicional georgiana. lower-alpha Letras latinas minúsculas (a, b, c, d,...). lower-greek Letras griegas minúsculas (α, β, γ, δ,...). lower-latin Este valor es el mismo que lower-alpha. Números romanos inferiores en minúsculas (i, ii, iii, iv, v,...). Alfa superior Letras latinas mayúsculas (A, B, C, D,...). Upper-latin Este valor es el mismo que Upper-Alpha. Números romanos superiores en mayúsculas (I, II, III, IV, V,...). none Desactiva las viñetas de la lista.

Salvadera

ul (tipo-estilo-lista: decimal;)

Ejemplo
tipo de estilo de lista
Cayo Octavio Turino
Tiberio Claudio Nerón
Cayo Julio César Augusto Germánico
Tiberio Claudio Druso
Lucio Arruncio Camilo Escriboniano

Nerón Claudio César Druso Germánico Lucio Clodio Macer Resultado

este ejemplo

Arroz. 1. Usando la propiedad de tipo de estilo de lista Modelo de objetos

.style.listStyleType Nota EN

Explorer 6 cuando se usa una lista numerada y los valores dentro de la propiedad list-style-position, números que comienzan con 10, comienzan a superponerse al texto de la lista. hasta la versión 7 inclusive no admite los valores armenio, cero decimal, georgiano, griego inferior, latín inferior, latín superior. En su lugar, se muestra la numeración en números arábigos. En este navegador, la numeración o las viñetas no se muestran para los elementos flotantes (ul (float: left;)).

Internet Explorer 8 comprende además el valor lower-greek, que establece la numeración en mayúsculas. letras griegas (Α, Β, Γ, Δ,...).

Cada especificación pasa por varias etapas de aprobación.

Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
Recomendación del candidato ( Posible recomendación ) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
Borrador ( Borrador de especificación) - el primer borrador de la norma.

En este capítulo, estudiaremos los atributos de estilo que se utilizan para definir opciones de párrafo. Párrafos en en un sentido amplio esta palabra - que incluye tanto títulos como liza, etiquetas de dirección y comillas grandes. Considerándolo todo, elementos de bloque discutidos en el Capítulo 2 y destinados a estructurar el texto.

Finalmente, veremos dos atributos de estilo muy específicos que nos permiten configurar la visualización de un elemento de una página web (es decir, si está basado en bloques o en línea) y hacer que el elemento sea invisible. Estos atributos de estilo se utilizan con poca frecuencia y sólo junto con ciertos comportamientos (ver Parte III).

Comenzaremos con los atributos de estilo que controlan salida de texto en elementos de bloque que estructuran el texto. Hay muy pocos de ellos. Y todos ellos sólo se aplican a elementos de bloque.

El atributo de estilo de alineación de texto especifica alineación horizontal texto:

alineación de texto: izquierda|derecha|centro|justificar|heredar

Los valores disponibles aquí están a la izquierda (alineación izquierda; comportamiento normal Navegador web), derecha, centro y justificar.

Ejemplos:

P (alineación de texto: justificar)
H1 (alineación de texto: centro)

El atributo de estilo de sangría de texto especifica la sangría de la "línea roja":

sangría de texto:<отступ "красной строки">

Aquí se permiten valores de sangría absolutos y relativos (en relación con el ancho del párrafo). De forma predeterminada, la sangría de la línea roja es cero. Tenga en cuenta que el atributo de estilo de sangría de texto no admite el valor heredado.

Ejemplo:

P (sangría de texto: 5 mm)

Ahora los párrafos tendrán una “línea roja”.

Liza entre los elementos del bloque se destacan. Principalmente porque, en primer lugar, contienen otros elementos de bloque (elementos individuales) y, en segundo lugar, incluyen marcadores y numeraciones que coloca el propio navegador web. Ahora hablaremos de marcadores y numeración, o más precisamente, de atributos de estilo destinados a establecer sus parámetros.

Atributo tipo de estilo de lista especifica el tipo de marcadores o numeración de los elementos de la lista:

Como puede ver, hay muchos valores disponibles para este atributo de estilo. Son designados como varios tipos marcadores y diferentes maneras numeración.

Marcador de disco en forma de círculo negro (comportamiento habitual en listas con viñetas).

Círculo: marcador en forma de círculo claro.

Cuadrado: marcador en forma de cuadrado. Puede ser claro u oscuro, según el navegador web.

Decimal: numeración con números arábigos (comportamiento habitual para listas numeradas).

Cero decimal a la izquierda: numeración en números arábigos del 01 al 99 con un cero a la izquierda.

Bajo romano: numeración en pequeños números romanos.

Alto-romano: numeración en grandes números romanos.

Griego inferior: numeración en letras griegas minúsculas.

Alfa inferior y latín inferior: numeración en letras latinas minúsculas.

Alfa superior y latín superior: numeración en letras latinas mayúsculas.

Armenio: numeración utilizando números tradicionales armenios.

Georgiano: numeración utilizando números tradicionales georgianos.

Ninguno: no hay marcador ni numeración (comportamiento habitual para personas que no son listas).

NOTA

Sin embargo, solo hemos analizado los valores de atributo de tipo de estilo de lista proporcionados por el estándar CSS 3. estándar CSS 2 proporcionó varios valores más que todavía son compatibles con los navegadores web actuales. Puede encontrarlos en la página web https://developer.mozilla.org/en/CSS/list-style-type.

El atributo de estilo tipo lista-estilo se puede configurar para ambos liza y para elementos de lista individuales. En este último caso, se crea una lista en la que los elementos tienen diferentes marcadores o numeraciones. A veces esto puede resultar útil.

Aquí está la definición lista con viñetas con un marcador en forma de cuadrado:

UL (tipo de estilo de lista: cuadrado)

Y en el Listado 9.1, configuramos el mismo marcador para uno de los elementos de la lista con viñetas.

El atributo de estilo de imagen de estilo de lista le permite configurar cualquier tipo de marcador de elemento de lista imagen grafica(crea un marcador gráfico). En este caso, se ignora el valor del atributo de estilo list-style-type, si se especifica uno:

imagen-estilo-lista: ninguna|<интернет-адрес файла изображения>|heredar

La dirección de Internet del archivo con un marcador gráfico se especifica en el mismo formato que la dirección de Internet del archivo. imagen de fondo(ver capítulo 8):

UL (imagen-estilo-lista: url(/markers/dot.gif))

El valor none elimina el marcador gráfico y devuelve uno simple, no gráfico. Este es un comportamiento normal.

El atributo de estilo de imagen de estilo de lista también se puede configurar tanto para las listas como para sus elementos individuales.

Atributo estilo lista-estilo-posición le permite especificar la ubicación de una viñeta o numeración en un elemento de la lista:

posición-estilo-lista: dentro|exterior|heredar

Hay dos valores disponibles:

Dentro: el marcador o la numeración están, por así decirlo, dentro del elemento de la lista, son parte de él;

Exterior: marcador o numeración movido fuera del elemento lista(este es un comportamiento normal).

No está claro por qué es necesario este atributo estilo, después de todo liza, en los que el marcador o la numeración se colocan fuera de los puntos, se leen mejor. Bueno, ya que está presente en el estándar CSS, que así sea...

Ejemplo:

OL (lista-estilo-posición: dentro)

Hoja de estilo externa le permite concentrar información sobre el formato del sitio en un solo archivo. Para hacer referencia a una hoja externa estilos css lo necesito en el cuerpo después del título escribe la siguiente línea

El atributo href especifica la ruta al archivo de hoja de estilo externo. esta linea debe estar escrito en el texto de todas las páginas web donde se deba utilizar una hoja de estilo externa.

De esta manera, los cambios que realice en el archivo style.css se reflejarán inmediatamente en todas las páginas que hagan referencia a ese archivo.

Si necesita aplicar algún estilo de forma privada, en relación con una instancia separada del descriptor, entonces para ello debe usar atributo de ESTILO. Esta técnica le permite aprovechar al máximo los estilos sin tener que crear hojas de estilo. El uso privado de estilos se puede utilizar incluso si la página ya contiene una hoja de estilo interna o un enlace a una hoja de estilo externa, porque el estilo privado tiene la máxima prioridad.

Ejemplo:

ninguno, disco, círculo, cuadrado, decimal, alfa inferior, alfa superior, romano inferior, romano superior

latín inferior, latín superior, griego inferior, armenio, georgiano

cero decimal

Si necesita aplicar un estilo a elemento individual Páginas web, entonces debe utilizar el atributo ID.

Para hacer esto, debe asignar un identificador a la etiqueta del elemento de página deseado. Luego puede definir propiedades en la hoja de estilos interna o externa. de este elemento. Los atributos de formato especificados se establecerán solo para el elemento marcado con el identificador especificado.