Tech School

User Tools

Site Tools

Trace: • styling • multilevel_lists • summary • summary • simple_lists
es:web_development:lists:simple_lists

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
es:web_development:lists:simple_lists [2022/03/02 11:57]
ander [CSS] 		es:web_development:lists:simple_lists [2023/08/16 09:33] (current)
Line 53: Line 53:
   * Podemos ver esto mejor agregando el siguiente código en la primera etiqueta <html><li></html> de cada una de las listas.   * Podemos ver esto mejor agregando el siguiente código en la primera etiqueta <html><li></html> de cada una de las listas.
 <code><li style="border: red solid 1px;"></code> <code><li style="border: red solid 1px;"></code>
 +  * Deberia parecer como [[https://techschool.murraygunn.id.au/webdev/classes/lists/0/es.php|este]].
   * 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 'dentro' del borde, mientras que los números de la lista ordenada están fuera del borde.   * Ahora puede ver que las viñetas están 'dentro' del borde, mientras que los números de la lista ordenada están fuera del borde.
Line 67: Line 68:
  
 ==== Prioridad CSS ==== ==== Prioridad CSS ====
-  * CSS significa hojas de estilo en cascada. 'Cascada' significa que los estilos caen en cascada a todos los elementos dentro/abajo. Dado que algunos estilos pueden causar conflictos, el navegador debe priorizar qué regla seguir.+  * CSS significa hojas de estilo en cascada. Los estilos caen en cascada a todos los elementos dentro/abajo. Dado que algunos estilos pueden causar conflictos, el navegador debe priorizar qué regla seguir.
   * 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:
 <code><li style="border: blue solid 3px;"></code> <code><li style="border: blue solid 3px;"></code>
Line 77: Line 78:
   list-style-type: square;   list-style-type: square;
 }</code> }</code>
-  * Observe que la forma de la bala cambió. Otras opciones para <html>list-style-type</html> son 'disc' y 'circle'.+  * Observe como la forma de la  viñeta cambió. Otras opciones para <html>list-style-type</html> son 'disc' y 'circle'.
   * También podemos cambiar el estilo de las listas ordenadas.   * También podemos cambiar el estilo de las listas ordenadas.
   * Algunas opciones son 'upper-roman' y 'lower-alpha'. Pruébalos para ver cuáles te gustan.   * Algunas opciones son 'upper-roman' y 'lower-alpha'. Pruébalos para ver cuáles te gustan.
Line 88: Line 89:
   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/1/es.php|HTML]]   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/1/es.php|HTML]]
   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/1/css.php|CSS]]   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/1/css.php|CSS]]
-  * [[https://jsfiddle.net/maganthro/t17oqcxu/25/|Full jsfiddle]]+  * [[https://jsfiddle.net/maganthro/tumbvj8n/3//|Full jsfiddle]]
  
 [[es:web_development:lists:multilevel_lists|Siguiente: Listas de Varios Niveles]] [[es:web_development:lists:multilevel_lists|Siguiente: Listas de Varios Niveles]]
es/web_development/lists/simple_lists.1646251067.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki