Desarrollo Web Lección 3 - Listas

En este ejercicio, creará una lista con viñetas y una lista numerada y aprenderá algunas reglas de formato específicas de la lista.

• Abra una nueva pestaña jsfiddle .
• Complete la sección HTML con encabezados para 'Receta', 'Ingredientes' y 'Método'.

<h2>Receta de panqueques</h2>
<h3>Ingredientes</h3>
<h3>Método</h3>

• Veamos primero el Método. La mayoría de las recetas muestran el método como una lista numerada, ya que es importante realizar los pasos en orden.

<h3>Método</h3>
<ol>
  <li>Mezclar ingredientes</li>
  <li>Vierta la mezcla en el molde</li>
  <li>Cocine 1 minuto por cada lado</li>
  <li>Servir</li>
</ol>

• 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>
• Cada elemento de la lista se designa con la etiqueta , que significa 'elemento de lista'. <li>
• Parece que olvidamos calentar la sartén primero. Agreguemos ese paso antes de verter la mezcla.

<h3>Método</h3>
<ol>
  <li>Mezclar ingredientes</li>
  <li>Calentar sartén</li>
  <li>Vierta la mezcla en el molde</li>
  <li>Cocine 1 minuto por cada lado</li>
  <li>Servir</li>
</ol>

• ¿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.

• Ahora veamos los ingredientes. No importa el orden de los ingredientes, por lo que no suelen estar numerados.

<h3>
  Ingredientes
</h3>
<ul>
  <li>100 g de harina</li>
  <li>2 huevos</li>
  <li>300 ml de leche</li>
</ul>

• Ejecute el código y vea que en lugar de un número, tenemos un punto (o viñeta) delante de cada elemento.
• Es tan fácil como esto crear una lista. Ahora veamos qué podemos hacer para cambiar su apariencia.

• Agregue el siguiente atributo de estilo al método.

<ul style="list-style-position: inside;">

• Ejecute el código y observe que las viñetas se mueven hacia la derecha. Se están moviendo 'inside' (dentro) del bloque <ul>.
• Podemos ver esto mejor agregando el siguiente código a un <li> en cada una de las listas.

<li style="border: red solid 1px;">

• 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.
• Tenga en cuenta que debe agregar el estilo de borde a cada uno de los elementos a los que desea aplicarlo. Eso se vuelve difícil de manejar cuando desea hacerlo varias veces, especialmente si desea cambiarlos varias veces para ver cuál le gusta más. Hay una manera mejor.
• En el panel CSS en la parte superior derecha, ingrese el siguiente código.

li {
  border: red solid 1px;
}

• Ejecute el código y vea que el borde se aplica a cada instancia de <li>. Eso es mucho más fácil.
• La expresión antes de { determina a qué elementos se aplican las reglas CSS .
• Todo entre el {} son las normas que se aplicarán.
• La convención es poner cada regla en su propia línea.
• Recuerde siempre terminar la regla con ;.

• 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.
• Para ver esto, cambie uno de los atributos en la sección HTML a:

<li style="border: blue solid 3px;">

• Ejecute el código y vea que el elemento de lista específico ahora tiene un borde azul más grueso. Tiene prioridad sobre la regla general porque es más específica.

• Agregue el siguiente estilo para la lista desordenada.

ul {
  list-style-type: square;
}

• Observe que la forma de la bala cambió. Otras opciones para list-style-type 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.

ol {
  list-style-type: upper-roman;
}

Siguiente: Listas de Varios Niveles