This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
es:web_development:lists:simple_lists [2022/03/02 11:14] mag [Configuración] |
es:web_development:lists:simple_lists [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 21: | Line 21: | ||
| </ | </ | ||
| * Ejecute el código ahora y vea que el navegador coloca automáticamente un número al comienzo de cada línea, comenzando con ' | * Ejecute el código ahora y vea que el navegador coloca automáticamente un número al comienzo de cada línea, comenzando con ' | ||
| - | * Los soportes para 'lista ordenada' | + | * < |
| - | * Cada elemento de la lista se designa con la etiqueta , que significa ' | + | * Cada elemento de la lista se designa con la etiqueta |
| - | * Parece que olvidamos calentar la sartén primero. Agreguemos | + | * Parece que olvidamos calentar la sartén primero. Agreguemos |
| < | < | ||
| <ol> | <ol> | ||
| Line 32: | Line 32: | ||
| < | < | ||
| </ | </ | ||
| - | * ¿Qué notas cuando ejecutas el código? Los números cambian automáticamente de modo que 'heat pan' se convierte en ' | + | * ¿Qué notas cuando ejecutas el código? Los números cambian automáticamente de modo que 'calentar sartén' se convierte en el número |
| ==== Lista de Viñetas ==== | ==== Lista de Viñetas ==== | ||
| Line 48: | Line 48: | ||
| ==== CSS ==== | ==== CSS ==== | ||
| - | * Agregue el siguiente atributo de estilo | + | * Agregue el siguiente atributo de estilo |
| < | < | ||
| * Ejecute el código y observe que las viñetas se mueven hacia la derecha. Se están moviendo ' | * Ejecute el código y observe que las viñetas se mueven hacia la derecha. Se están moviendo ' | ||
| - | * Podemos ver esto mejor agregando el siguiente código | + | * Podemos ver esto mejor agregando el siguiente código |
| < | < | ||
| + | * Deberia parecer como [[https:// | ||
| * Este estilo crea un borde rojo sólido con un ancho de 1 píxel alrededor del elemento de la lista. | * Este estilo crea un borde rojo sólido con un ancho de 1 píxel alrededor del elemento de la lista. | ||
| * Ahora puede ver que las viñetas están ' | * Ahora puede ver que las viñetas están ' | ||
| Line 60: | Line 61: | ||
| border: red solid 1px; | border: red solid 1px; | ||
| }</ | }</ | ||
| - | * Ejecute el código y vea que el borde se aplica a cada instancia | + | * Ejecute el código y vea que el borde se aplica a cada etiqueta |
| - | * La expresión antes de < | + | * La expresión antes de < |
| - | * Todo entre el < | + | * Todo entre el < |
| - | * La convención | + | * Lo acostumbrado |
| - | * Recuerde siempre terminar la regla con < | + | * Recuerde siempre terminar la regla con un punto y coma < |
| ==== Prioridad CSS ==== | ==== Prioridad CSS ==== | ||
| - | * CSS significa hojas de estilo en cascada. | + | * CSS significa hojas de estilo en cascada. |
| * Para ver esto, cambie uno de los atributos en la sección HTML a: | * Para ver esto, cambie uno de los atributos en la sección HTML a: | ||
| < | < | ||
| Line 77: | Line 78: | ||
| list-style-type: | list-style-type: | ||
| }</ | }</ | ||
| - | * Observe | + | * Observe |
| * También podemos cambiar el estilo de las listas ordenadas. | * También podemos cambiar el estilo de las listas ordenadas. | ||
| * Algunas opciones son ' | * Algunas opciones son ' | ||
| Line 88: | Line 89: | ||
| * [[https:// | * [[https:// | ||
| * [[https:// | * [[https:// | ||
| - | * [[https:// | + | * [[https:// |
| [[es: | [[es: | ||