EntradaContadores. Numeración automática en CSS
¡Buen día!
En este artículo conocerás todas las posibilidades de las listas, entenderás cómo hacer una lista numerada, dominarás las etiquetas que te ayudarán a hacer desde un simple lista con viñetas más interesante y notable con marcadores arbitrarios. Después de completar la lección, comprenderá dónde se usan las listas y en 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 repasar los dos anteriores:
El artículo acaba de comenzar y es posible que ya haya notado 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 más de cerca qué son los marcadores, cómo hacer números y también cómo hacer su propio marcador.
En cada parte del artículo, la creación de determinadas listas irá acompañada de explicaciones detalladas para insertar una determinada lista.
1. Listas con viñetas en HTML
Este tipo de listas se utiliza para enumerar un conjunto de elementos de significado similar en el texto. Puede ser una lista de enlaces relacionados con el mismo tema, una explicación detallada de partes individuales del 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 de la lista desordenada con viñetas HTML en el navegador1.1 Viñetas estándar para listas con viñetas
En la imagen de arriba (Fig. 1.1.), Puede ver los círculos al comienzo de cada elemento del menú. Este es el marcador. De forma predeterminada, es 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 CSS o imágenes de terceros:
1.2 Marcador de lista como un círculo vacío
Conoce los valores de los atributos, pero ahora veamos cómo hacer una lista HTML con viñetas en el código. De la tabla anterior, hemos seleccionado el segundo valor "círculo" para el atributo de tipo y lo hemos asignado a nuestra lista con viñetas:
| <html> <cabeza> <título> Un ejemplo de una lista con viñetas con un marcador de círculo vacío</ título> </ cabeza> <cuerpo> <p> Estrellas:</ p> <ul type = "círculo"> <li> Sirio</ li> <li> Arcturus</ li> <li> Pólux</ li> <li> Betelgeuse</ li> <li> El sol</ li> </ ul> </ cuerpo> </ html> |
Veamos cómo se verá este código en el navegador:
Arroz. 1.2. Vista de viñetas para una lista en forma de círculo en el navegador1.3 Marcador de lista en forma de cuadrado
Veamos también el último ejemplo con una viñeta cuadrada para la lista HTML:
Observe el marcador, se ha vuelto cuadrado:
Arroz. 1.3. Marcador para un cuadro de lista como un cuadrado en un navegadorNota IMPORTANTE: esto ya no se usa para diseñar listas con viñetas. Existe una clara separación entre CSS (lea qué es CSS) y HTML. HTML es para marcado y CSS es para buena apariencia.
Código que contiene atributo dado, al especificar el tipo de documento actual como HTML5 (""), dará un error durante la validación. Si no ha escuchado qué es la validación, entonces debería ir aquí -.
El error será el siguiente:
Arroz. 1.4. Error en el validador al usar el atributo "tipo" de la listaDescubrimos las listas con viñetas. Ahora pasemos a las listas numeradas y luego consideremos 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 anterior de listas, las listas numeradas tienen una característica importante: se numeran automáticamente. Esto es útil cuando necesita numerar una lista grande. Tomará mucho tiempo manualmente y aún puede perderse. Una lista numerada se especifica mediante una etiqueta. Cómo se ve en la práctica:
Un ejemplo de una lista numerada:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <cabeza> <título> Ejemplo de una lista numerada estándar</ título> </ cabeza> <cuerpo> <p> Uno a cinco:</ p> <ol> <li> Primero</ li> <li> Segundo</ li> <li> Tercera</ li> <li> Cuatro</ li> <li> Quinto</ li> </ ol> </ cuerpo> </ html> |
Así es como se ve una lista numerada con ajustes estándar en el navegador:
Arroz. 2.1. Lista numerada en un navegador con configuración estándarComo su predecesor (lista con viñetas), tiene sus propios estilos para mostrar números. La numeración simple no es el único tipo de viñetas para una lista numerada en HTML.
2.1 Viñetas estándar para una lista numerada
Aquí tenemos la opción no de tres tipos de marcadores, sino de cinco:
| Nombre del marcador | El valor del atributo "tipo" | Ejemplo de lista |
|---|---|---|
| Marcadores de números arábigos | 1 |
|
| Marcadores en forma de letras latinas minúsculas | a |
|
| Marcadores en forma de letras latinas mayúsculas | A |
|
| Marcadores de números romanos en minúscula | I |
|
| Números romanos en mayúsculas | I |
|
2.2 Numeración personalizada en la lista HTML
Además de la salida habitual de una lista numerada, también podemos comenzar nuestra numeración desde cualquier dígito. Para hacer esto, necesita establecer el atributo "inicio" adicional. Esta numeración funciona para todo tipo de viñetas 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 aleatoria para una lista numerada</ título> </ cabeza> <cuerpo> <p> Empezamos a numerar en doce:</ p> <ol type = "a" start = "12"> <li> Doce</ li> <li> Trece</ li> <li> Catorce</ li> <li> Quince</ li> <li> Dieciséis</ li> </ ol> </ cuerpo> </ html> |
Así es como se mostrará en un sitio en vivo:
Arroz. 2.2. Numeración de un número arbitrario en una lista numeradaEn la imagen de arriba, numeramos la lista empezando por doce, mientras hacíamos marcadores en forma de letras latinas minúsculas. Creo que ahora quedó claro cómo usar estos atributos en sus proyectos.
Por ahora, pasemos a las listas HTML anidadas.
3. Cómo hacer una lista multinivel (anidada) en HTML
Las listas multinivel se utilizan en el sitio para crear el menú. Este menú a menudo se ve como un menú desplegable, ya sea hacia abajo (lección en curso), o desplegable a la izquierda o derecha. Estos menús le permiten almacenar otros elementos del menú de forma compacta.
Usando modelos de automóviles como ejemplo, crearemos una lista de varios niveles en HTML:
| 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> Lista con viñetas anidadas en HTML</ título> </ cabeza> <cuerpo> <ul> <li> Citroen<ul> <li> Berlingo</ li> <li> C1</ li> <li> C2</ li> <li> C3 Picasso</ li> <li> C4 Grand Picasso</ li> </ ul> </ li> <li> KIA</ li> <li> Toyota</ li> <li> Audi</ li> <li> Lexus</ li> </ ul> </ cuerpo> </ html> |
Observe cómo se ve una lista de varios niveles en un navegador:
Arroz. 3.1. Un ejemplo de una lista multinivel en HTMLHicimos una lista de varios niveles usando una etiqueta con viñetas (
- ). La lista escalonada con los modelos Citroen vino con otros marcadores. La lista principal con viñetas rellenas y la lista de segundo nivel con círculos vacíos. Pero recuerde, con el atributo "tipo" podemos anular los marcadores (es mejor establecerlos).
- Este es el primer elemento
- Este es el segundo elemento
- Este es el tercer elemento
- Este es el cuarto elemento
- Este es el quinto elemento
- Este es el sexto elemento
- ¿Cuánta madera tiraría un mandril de madera si un mandril de madera pudiera tirar madera?
- 1,000,000
- ¿Cuál es la velocidad del aire de una golondrina sin carga?
- ¿Qué quieres decir? ¿Una golondrina africana o europea?
- ¿Por que la gallina cruzo la calle?
- Llegar al otro lado
- elemento es nueva pregunta por tanto, les aplicaremos la numeración. Se verá muy simple:
La propiedad de contenido le permite insertar contenido generado en el texto de la página web que no estaba originalmente en el texto.
Valor del contador Muestra el valor del contador especificado por la propiedad de reinicio del contador.La propiedad de reinicio del contador establece el identificador del contador y establece el valor inicial.
La propiedad de incremento del contador especifica el incremento en el valor del contador.Faq (counter-reset: my-badass-counter;) .faq dt: before (contenido: contador (my-badass-counter); counter-increment: my-badass-counter;)
Se puede asignar cualquier estilo al pseudoelemento: before. Por ejemplo:
Habiendo dominado esta propiedad, puede numerar lo que quiera. El otro día, por ejemplo, publiqué una de mis recetas favoritas y numeré cada paso / foto con números romanos. Esto me sirvió de recordatorio: los números no tienen que ser decimales.
Las variedades numéricas están representadas por los valores de la propiedad list-style-type.
A saber:
Todo lo que se requiere es indicar la opción deseada en el valor del contador.
Contenido: contador (my-counter, lower-roman);
El futuro de CSS3
El material anterior es relevante para la actualidad, sin embargo, palidece en comparación con las posibilidades que se esconden en las listas CSS3. Tan pronto como los navegadores los admitan, será posible, por ejemplo, trabajar directamente con marcadores de lista.
Li :: marcador (ancho: 30px; alineación de texto: derecha; margen-derecha: 10px; pantalla: bloque en línea;) ol (estilo de lista: símbolos ("*" "2020" "2021" "A7"); ) ul (list-style-type: "debe haber un asterisco aquí)"; )
Las listas numeradas son una colección de elementos con sus números secuenciales. El tipo y el tipo de numeración depende de los atributos de la etiqueta.
- , que se utiliza para crear la lista. Cada elemento de una lista numerada se identifica con una etiqueta
- Como se muestra abajo.
- Primer punto
- Segundo punto
- Tercer punto
Si no especifica ningún atributo adicional y simplemente escribe la etiqueta
- , el valor predeterminado es una lista con números arábigos (1, 2, 3, ...), como se muestra en el Ejemplo 11.3.
- creación de puntualidad (nunca llegarás tarde a nada);
- recuperación de la puntualidad (nunca se apresure a ningún lado);
- cambiando la percepción del tiempo y las horas.
- Números arábigos (1, 2, 3, ...);
- letras latinas mayúsculas (A, B, C, ...);
- letras latinas minúsculas (a, b, c, ...);
- números romanos en mayúsculas (I, II, III, ...);
- números romanos en minúscula (i, ii, iii, ...).
- Rey Magnum XLIV
- Rey Siegfried XVI
- Rey Segismundo XXI
- Rey Husbrandt I
- Números arábigos (1, 2, 3, ...);
- Números arábigos con cero a la izquierda para dígitos menores de diez (01, 02, 03, ..., 10);
- letras latinas mayúsculas (A, B, C, ...);
- letras latinas minúsculas (a, b, c, ...);
- números romanos en mayúsculas (I, II, III, ...);
- números romanos en minúscula (i, ii, iii, ...);
- Numeración armenia;
- Numeración georgiana.
- ... Cualquier entero positivo se puede especificar como valor. No importa qué tipo de numeración se establezca, incluso si se utilizan letras latinas como lista. Si los atributos de inicio y valor se aplican a la lista al mismo tiempo, entonces este último tiene prioridad y la numeración se muestra a partir del número especificado por valor, como se muestra en el ejemplo 1.
Ejemplo 1. Renumerar una lista
Liza - Debe cuidar mucho su lugar de trabajo.
- Ajuste la iluminación de la habitación de modo que la fuente de luz esté al costado o detrás del operador.
- Para evitar complicaciones médicas, se recomienda elegir una silla con asiento blando.
El primer elemento de la lista en este ejemplo comenzará con el número romano IV, ya que se especifica el atributo start = "4", luego sigue el número V, y el último elemento sigue desordenado y se le asigna el número X (Fig. .1).
Arroz. 1. Números romanos en la lista
Escribir números
Por defecto, una lista numerada tiene una forma determinada: primero hay un número, luego un punto y luego el texto se muestra a través de un espacio. Esta forma de escritura es clara y conveniente, pero algunos desarrolladores prefieren ver una forma diferente de formatear la numeración de listas. Es decir, en lugar de un punto, hay un paréntesis de cierre, como se muestra en la Fig. 2 o algo similar.
Arroz. 2. Vista de una lista numerada entre paréntesis
Los estilos le permiten cambiar la forma en que se renumeran las listas utilizando el contenido y las propiedades de contraincremento. Primero, debe configurar counter-reset: item para el selector ol, esto es necesario para que la numeración en cada nueva lista comience de nuevo. De lo contrario, la numeración continuará y en lugar de 1,2,3 verá 5,6,7. El valor del artículo es identificador único contador, lo elegimos nosotros mismos. A continuación, debe ocultar los marcadores originales a través de la propiedad de estilo list-style-type con un valor de none.
La propiedad de contenido normalmente funciona junto con los pseudoelementos :: after y :: before. Entonces, la construcción li :: before dice que se debe agregar algo de contenido antes de cada elemento de la lista (ejemplo 2).
Ejemplo 2. Creación de su propia numeración
Li :: before (content: counter (item) ")"; / * Agrega un paréntesis a los números * / counter-increment: item; / * Establecer el nombre del contador * /)
La propiedad de contenido con el contador de valor (elemento) genera un número; agregando un paréntesis como se muestra en este ejemplo, obtenemos la numeración requerida. Se necesita un incremento de contador para incrementar el número de lista en uno. Tenga en cuenta que en todas partes se utiliza el mismo identificador denominado elemento. El código final se muestra en el ejemplo 3.
Ejemplo 3. Cambiar la vista de una lista
Liza - Primero
- Segundo
- Tercera
- Cuatro
De esta forma, puedes hacer cualquier tipo de lista numerada, por ejemplo, tomar un número entre corchetes, en este caso solo una línea cambiará de estilo.
Contenido: "[" contador (elemento) "]";
Lista con letras rusas
Hay una lista numerada con letras latinas, pero no hay letras rusas para la lista. Se pueden agregar artificialmente utilizando la técnica anterior. Dado que la numeración se realiza a través de estilos, la lista en sí permanece original, solo se le agrega la clase seleccionada, llamémosla cirílica (ejemplo 4).
Ejemplo 4. Código para crear una lista
- Uno
- Dos
- Tres
La adición de letras se realiza mediante el pseudoelemento :: before y la propiedad content. Dado que cada línea debe tener su propia letra, usaremos la pseudo-clase: nth-child (1), el número de la letra está escrito entre paréntesis. La primera letra, por supuesto, es A, la segunda es B, la tercera es C, etc. Todo este conjunto se agrega al selector li de la siguiente manera (ejemplo 5).
Ejemplo 5. Uso de la pseudoclase: nth-child
Cirílico li: nth-child (1) :: before (content: "a)"; ) .cyrilic li: nth-child (2) :: before (content: "b)"; ) .cyrilic li: nth-child (3) :: before (content: "in)"; )
En este ejemplo, cada letra va seguida de un paréntesis, todo en minúsculas. Puede definir su propia forma de numerar la lista, por ejemplo, puede contener letras mayúsculas con un punto, con uno o dos corchetes, o solo letras. A diferencia de la numeración estándar, somos libres de hacer lo que queramos aquí. Una lista de diez letras debería ser suficiente para casi todas las situaciones, pero si esto de repente resulta insuficiente, nada nos impide ampliar nuestra lista para incluir al menos todas las letras del alfabeto ruso.
Finalmente, configuramos la alineación y posición de las letras, si lo deseamos, indicamos el tamaño de fuente, color y otros parámetros (ejemplo 6).
Ejemplo 6. Lista con letras rusas
Lista - Borsch
- Chuletas de lucio
- Kulebyaka
- Champiñones en crema agria
- Panqueques con caviar
- Kvass
El resultado de este ejemplo se muestra en la Fig. 3.
Ejemplo 11.3. Crea una lista numerada
Lista numerada Trabajando con el tiempo
El resultado de este ejemplo se muestra en la Fig. 11.3.
Arroz. 11.3. Vista de lista numerada
Tenga en cuenta que la lista numerada también agrega sangrías automáticas en la parte superior, inferior e izquierda del texto.
Los siguientes valores se pueden utilizar como elementos de numeración:
El atributo de tipo de la etiqueta se utiliza para indicar el tipo de la lista numerada.
- ... Sus posibles valores se dan en la tabla. 11.2.
Pestaña. 11.2. Tipos de listas numeradas
Tipo de lista Código HTML Ejemplo números arábigos
1. Cheburashka
2. Cocodrilo Gena
3. ShapoklyakLetras mayúsculas del alfabeto latino
A. Cheburashka
B. Cocodrilo Gena
C. ShapoklyakLetras minúsculas del alfabeto latino
una. Cheburashka
B. Cocodrilo Gena
C. ShapoklyakNúmeros romanos en mayúsculas
I. Cheburashka
II. Cocodrilo Gena
III. ShapoklyakNúmeros romanos en minúscula
I. Cheburashka
ii. Cocodrilo Gena
iii. ShapoklyakPara comenzar la lista en un valor específico, use el atributo de inicio de la etiqueta
- ... No importa qué tipo de lista se establezca usando el tipo, el atributo de inicio funciona de la misma manera con números romanos y arábigos. El ejemplo 11.4 muestra cómo crear una lista usando números romanos en mayúscula que comienzan con ocho.
Ejemplo 11.4. Numeración de listas
Números romanos El resultado de este ejemplo se muestra en la Fig. 11.4.
Arroz. 11.4. Lista numerada con números romanos
Las listas numeradas son una colección de elementos con sus números secuenciales. El tipo y tipo de numeración depende de los parámetros del elemento.
- , que se utiliza para crear la lista. Los siguientes valores se pueden utilizar como elementos de numeración:
Como cuestión práctica, los principios de mostrar elementos de lista con viñetas se pueden aplicar de manera similar a una lista numerada. Pero dado que se trata de una enumeración, hay algunas características que se comentarán a continuación.
Numeración de listas
Se permite comenzar la lista desde cualquier número; el atributo de inicio del elemento se utiliza para este propósito
- o el valor del elemento
- Como se muestra abajo.
Pero podemos combinar listas multinivel numeradas y con viñetas como esta:
| 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 numeradas, con viñetas y numeradas en HTML</ título> </ cabeza> <cuerpo> <ul> <li> El primer grupo de tulipanes<ol> <li> Primer grado<ul> <li> Tulipanes tempranos simples</ li> </ ul> </ li> <li> Segunda clase<ul> <li> Tulipanes dobles</ li> </ ul> </ li> </ ol> </ li> </ ul> </ cuerpo> </ html> |
En el ejemplo anterior, tenemos doble anidamiento (2 niveles). Primero, ponemos una lista de dos clases de tulipanes, la tenemos numerada. Luego, se anida una lista con viñetas en cada uno de los elementos de la lista numerada.
Observamos su apariencia en el navegador:
Arroz. 3.2. Un ejemplo de una lista numerada de varios niveles en una lista con viñetas en un navegador4. Recursos útiles para listas HTML
Contiene información que requiere una comprensión de las propiedades de CSS. Para hacer esto, te recomiendo que estudies las siguientes lecciones :. Todos los ejemplos estarán inmediatamente con código fuente y se desglosan en las pestañas HTML (estructura), CSS (estilos) y Resultado (resultado).
4.1 Cómo convertir una lista HTML en una cadena
Puede ser necesario convertir la lista HTML en una cadena al crear menú horizontal... Es muy sencillo hacerlo:
4.2 Cómo hacer una lista HTML sin un icono
La propiedad list-style-type en CSS es responsable de esto (más detalles):
4.3 Cómo hacer una lista en HTML centrada
Un elemento de la lista es un elemento de bloque, por lo que debe centrarse mediante relleno. Pero hay uno punto importante- tenemos que especificar explícitamente el ancho para que funcione la alineación:
4.4 Cómo hacer una lista en HTML con imágenes
Solo una imagen de estilo de lista de propiedades CSS es suficiente. Dentro de la URL, especifique la dirección antes del icono. Solo quiero señalar que es mejor seleccionar una imagen pequeña de inmediato, porque la altura de la línea de la lista depende de ella:
4.5 HTML enumera su marcador con viñetas
En este caso, es necesario conectar los iconos de fuentes (por ejemplo, FontAwesome) de antemano. Entonces puedes hacer cualquier ícono en lugar del marcador estándar:
4.6 Cómo hacer una lista en HTML con múltiples columnas
Para hacer una lista de varias columnas, usaremos la propiedad de recuento de columnas de CSS (esta propiedad solo es compatible con 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. Lista combinada HTML
Para hacer un cuadro combinado en HTML es mejor Solo usa fuentes de iconos... Por ejemplo Flaticon o Fontawesome.
Esta información ya es para avanzados, por lo que será necesario comenzar.
6. Práctica de trabajar con listas
En el siguiente video, puede ver todo el trabajo con listas HTML en la práctica:
Para consolidar la información recibida, recomiendo realizar todos los pasos manualmente. Pruebe diferentes viñetas para las listas, cree listas numeradas y luego pase a listas de varios niveles (anidadas) y experimente con ellas.
Aquí es donde terminamos con las listas y pasamos a la siguiente lección sobre imágenes.
Si necesita algo más que los conceptos básicos de creación de sitios, pero desea dominar la profesión de desarrollador front-end, preste atención al curso de la escuela en línea Netology - "" y la escuela en línea Skillbox y el curso "".
El curso dura mucho tiempo, pero recibirás conocimientos estructurados, con los que podrás conseguir empleo de forma inmediata, si estás interesado en esta dirección.
Del autor: Los navegadores web le permiten cambiar apariencia muchos elementos en la página usando CSS. Pero al representar algunos elementos en la página, los navegadores obstinadamente no quieren cambiar su diseño. Por ejemplo, los elementos de formulario como listas desplegables (seleccionar), botones de opción (radio) y casillas de verificación (casilla de verificación) tienen su propia apariencia específica en cada sistema operativo y los navegadores intentan imponer este aspecto en los formularios web.
Los navegadores web también especifican cómo deben mostrarse las listas numeradas y con viñetas. Por ejemplo, los navegadores hacen que sea muy difícil cambiar la apariencia de viñetas para listas no numeradas y números para listas numeradas. Por supuesto, existen varias propiedades CSS para trabajar con listas, como list-style-type, list-style-image y list-style-position. Pero incluso hacer algo simple (como cambiar el color de los números en una lista) requiere algunas soluciones sofisticadas de HTML / CSS.
Afortunadamente, al combinar algunas propiedades CSS menos conocidas, puede crear la apariencia de los números de lista numerados que desee. De hecho, después de leer este tutorial, podrá cambiar las fuentes, los colores y casi cualquier otro atributo de los números de la lista numerada.
Todo el secreto tiene dos partes: primero, oculta completamente los números estándar (predeterminados) de la lista numerada, y segundo, usa el pseudoelemento :: before para volver a sumar esos números.
1. Agregue una clase o identificador (ID) para una lista numerada... Esta es una buena idea, ya que le permite identificar más a fondo cada lista para la que desea crear sus propios contadores:
< ol class = "custom-counter" > < / ol > |
Si solo usa selectores de etiquetas como ol o li, terminará con la misma apariencia para todas las listas numeradas en la página.
2. Cancelar la vista predeterminada del marcador de lista.... Primero, debe asegurarse de que el navegador no agregue máscaras predeterminadas para los contadores. La siguiente regla le ayudará a hacer esto:
Contador personalizado (margen izquierdo: 0; relleno derecho: 0; tipo de estilo de lista: ninguno;)
Personalizado - contador ( margen - izquierda: 0; padding - derecha: 0; lista - estilo - tipo: ninguno; |
Esta regla también elimina la sangría que los navegadores agregan al comienzo de las listas numeradas. Dado que algunos navegadores utilizan la propiedad margin para el relleno y otros utilizan la propiedad padding, es necesario restablecer ambas propiedades.
3. Asigne un nombre a la propiedad de incremento de contador de los elementos de la lista.... CSS tiene una propiedad llamada contraincremento. Le permite establecer un nombre para su contador. Esto no nos da nada especial, excepto que podemos identificar nuestro contador usando el pseudo-elemento :: before (lo que haremos en el siguiente paso). A continuación, se muestra un ejemplo de código simple para especificar un nombre de contador:
Contador personalizado li (contraincremento: contador de pasos;)
Personalizado - contador li ( contador - incremento: paso - contador; |
En este ejemplo, el nombre contador de pasos no significa nada especial. No es un valor para una propiedad CSS, ni nada más. Este es solo un nombre que usaremos a continuación. Puede pensar en cualquier nombre: escalón, mostrador o incluso botellas-de-cerveza-de-raíz-en-la-pared.
4. Use el pseudoelemento :: before para agregar números de contador y diseñarlos:
Contador personalizado li :: antes (contenido: contador (contador de pasos); margen derecho: 5px; tamaño de fuente: 80%; color de fondo: rgb (200,200,200); color: blanco; peso de fuente: negrita; relleno : 3px 8px; radio del borde: 3px;)
Personalizado - contador li :: antes ( contenido: contador (contador de pasos); margen - derecha: 5px; relleno: 3px 8px;borde - radio: 3px; |
El pseudoelemento :: before le permite insertar contenido delante de un elemento. En nuestro caso, insertará contenido antes del elemento de la lista. Utiliza la propiedad de contenido CSS para indicarle al navegador qué contenido debe colocar al principio del elemento de la lista. Pueden ser palabras reales o algo generado automáticamente por el navegador.
Aquí estamos usando el valor counter (), que toma como parámetro el identificador obtenido de la propiedad counter-increment. Recuerde que en el paso 2, especificamos el nombre del contador de pasos para la propiedad de incremento del contador, dando así un nombre al contador y diciéndole al navegador que use un contador para cada elemento de la lista. El contador se incrementará en uno para cada elemento de la lista, es decir, como resultado, tendremos el número 1 antes del primer elemento de la lista, el número 2 antes del segundo elemento de la lista, y así sucesivamente.
Por supuesto, esto es lo que suelen hacer los navegadores. Sin embargo, usando el pseudoelemento :: before también podemos diseñar estos números, lo que no sería posible con elementos de lista numerados estándar. Básicamente, todas las demás propiedades de la regla anterior se utilizan para crear un aspecto atractivo para la ruleta (como el color de fondo, las esquinas redondeadas, el color de fuente diferente, etc.). Estos estilos muestran solo algunas de las formas de cambiar la apariencia de los números en las listas numeradas. Y puede hacer aún más, así que siéntase libre de usar los trucos CSS que conoce para crear listas numeradas interesantes, divertidas y hermosas.
Puede ver un ejemplo práctico de uso de esta técnica en el sitio web.
Si necesita numerar algo en el sitio, la mayoría de las veces usan una lista ordenada (
- ). Es razonable esperar que se sienta tentado a trabajar en el diseño de estos números. En CSS, sin embargo, es bastante problemático realizar este deseo, pero, afortunadamente, no es imposible. Roger Johansson muestra en su tutorial cómo se puede hacer esto con el pseudo-elemento: before, que se puede configurar para contrarrestar la propiedad del contenido.
El pseudo-elemento: before se aplica para mostrar el contenido deseado antes del elemento al que se agrega. Funciona junto con la propiedad de contenido.
Sin embargo, vale la pena dejar claro que los contadores numerados se pueden aplicar a más que listas ordenadas. Por ejemplo, suponga que desea numerar la lista de definiciones (
- ), que consta de preguntas y respuestas para sus preguntas frecuentes.
El marcado se verá así:
Cada nuevo