Tech School

User Tools

Site Tools

Trace: • paragraphs • menus • checklists • styles
es:web_development:lists:simple_lists

Differences

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

Link to this comparison view

Next revision 		Previous revision
es:web_development:lists:simple_lists [2022/02/23 11:50]
mag created 		es:web_development:lists:simple_lists [2023/08/16 09:33] (current)
Line 5: Line 5:
  
 ==== Configuración ==== ==== Configuración ====
-  * Abra una nueva pestaña jsfiddle .+  * Abra una nueva pestaña [[https://jsfiddle.net/|jsfiddle]].
   * Complete la sección HTML con encabezados para 'Receta', 'Ingredientes' y 'Método'.   * Complete la sección HTML con encabezados para 'Receta', 'Ingredientes' y 'Método'.
 <code><h2>Receta de panqueques</h2> <code><h2>Receta de panqueques</h2>
Line 21: Line 21:
 </ol></code> </ol></code>
   * Ejecute el código ahora y vea que el navegador coloca automáticamente un número al comienzo de cada línea, comenzando con '1'.   * Ejecute el código ahora y vea que el navegador coloca automáticamente un número al comienzo de cada línea, comenzando con '1'.
-  * Los soportes para 'lista ordenada'. <ol> +  * <html><ol></html> significa 'lista ordenada'.  
-  * Cada elemento de la lista se designa con la etiqueta , que significa 'elemento de lista'. <li> +  * Cada elemento de la lista se designa con la etiqueta <html><li></html>, que significa 'elemento de lista'.  
-  * Parece que olvidamos calentar la sartén primero. Agreguemos ese paso antes de verter la mezcla.+  * Parece que olvidamos calentar la sartén primero. Agreguemos este paso antes de verter la mezcla.
 <code><h3>Método</h3> <code><h3>Método</h3>
 <ol> <ol>
Line 32: Line 32:
   <li>Servir</li>   <li>Servir</li>
 </ol></code> </ol></code>
-  * ¿Qué notas cuando ejecutas el código? Los números cambian automáticamente de modo que 'heat pan' se convierte en '2' y todo lo que sigue se incrementa.+  * ¿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 '2' y todo lo que sigue se incrementa.
  
 ==== Lista de Viñetas ==== ==== Lista de Viñetas ====
Line 48: Line 48:
  
 ==== CSS ==== ==== CSS ====
-  * Agregue el siguiente atributo de estilo al método.+  * Agregue el siguiente atributo de estilo a la etiqueta <html><ul></html> de los ingredientes.
 <code><ul style="list-style-position: inside;"></code> <code><ul style="list-style-position: inside;"></code>
   * Ejecute el código y observe que las viñetas se mueven hacia la derecha. Se están moviendo 'inside' (dentro) del bloque <html><ul></html>.   * Ejecute el código y observe que las viñetas se mueven hacia la derecha. Se están moviendo 'inside' (dentro) del bloque <html><ul></html>.
-  * Podemos ver esto mejor agregando el siguiente código a un <html><li></html> en 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 60: Line 61:
   border: red solid 1px;   border: red solid 1px;
 }</code> }</code>
-  * Ejecute el código y vea que el borde se aplica a cada instancia de <html><li></html>. Eso es mucho más fácil. +  * Ejecute el código y vea que el borde se aplica a cada etiqueta de <html><li></html>. Eso es mucho más fácil. 
-  * La expresión antes de <html>{</html> determina a qué elementos se aplican las reglas CSS . +  * La expresión antes de <html>{</html>(abre llave) determina a qué elementos se aplican las reglas CSS . 
-  * Todo entre el <html>{}</html> son las normas que se aplicarán. +  * Todo entre el <html>{}</html> (llaves)son las normas que se aplicarán. 
-  * La convención es poner cada regla en su propia línea. +  * Lo acostumbrado es poner cada regla en su propia línea. 
-  * Recuerde siempre terminar la regla con <html>;</html>.+  * Recuerde siempre terminar la regla con un punto y coma <html>;</html>.
  
 ==== 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 83: Line 84:
   list-style-type: upper-roman;   list-style-type: upper-roman;
 }</code> }</code>
 +
 +==== Codigo Final ====
 +Si llegas a este punto y algo no está del todo bien, o te gustaría verificar tu código, aquí está el código en el que hemos estado trabajando.
 +  * [[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://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.1645645828.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