Differences

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

--- es:web_development:lists:simple_lists [2022/03/02 11:33]
ander [Lista Numerada]
+++ es:web_development:lists:simple_lists [2023/08/16 09:33] (current)
@@ Line 48: / Line 48: @@
 ==== 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>
   * 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>
+  * 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.
   * 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;
 }</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 ====
-  * 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:
 <code><li style="border: blue solid 3px;"></code>
@@ Line 77: / Line 78: @@
   list-style-type: square;
 }</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.
   * 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/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]]

Tech School

User Tools

Site Tools

Differences

Page Tools