Tech School

User Tools

Site Tools

Trace: • resumen • exercise • selectors • selectores • multilevel_lists
es:web_development:lists:multilevel_lists

This is an old revision of the document!

Table of Contents

Desarrollo Web Lección 3 - Listas

Listas de Varios Niveles

Objetivos

En este actividad usted va a:

  • crear listas de varios niveles
  • comenzar a usar Visual Studio Code, una plataforma de codificación profesional
  • aprender una forma de seleccionar elementos específicos con CSS

Configuración

  • Comenzaremos desde una pizarra en blanco, así que elimine todo el HTML y CSS que ha ingresado hasta ahora en jsfiddle.

Listas de Anidamiento

  • A veces querrá tener listas dentro de listas. Piense en el índice de un libro de texto donde cada capítulo tiene varios subtítulos e incluso estos pueden tener subtítulos.
  • Para mantenerlo interesante, veremos aquí un perfil simple de usted.
  • Ingrese el encabezado '¿Quién soy?'
<h2>¿Quién soy?</h2>
  • Ahora crea una lista de temas para cubrir usando <ol>.
<ol>
  <li>Miembros de la familia</li>
  <li>Pasatiempos</li>
  <li>Bandas favoritas</li>
</ol>
  • Ahora los completaremos con otras listas debajo (dentro) de cada tema.
  • Ingrese los nombres de los miembros de su familia. No sé los nombres de su familia, así que solo etiquetaré algunas opciones.
  <li>Miembros de la familia
    <ul>
      <li>Padre</li>
      <li>Madre</li>
      <li>hermana</li>
      <li>hermano</li>
    </ul>
  </li>
  • Tenga en cuenta que la nueva lista necesita su propia etiqueta <ul> o <ol>.
  • Observe también que toda la lista va antes de la etiqueta </li> del elemento de la lista de títulos.
  • Finalmente, debería haber notado que el navegador usa automáticamente diferentes viñetas para los diferentes niveles de elementos de la lista.
  • Pruébelo usted mismo con las secciones Pasatiempos y Bandas favoritas.

Estilos en Cascada

  • Solo para revisar rápidamente la forma en que CSS se conecta en cascada a los elementos de nivel inferior, pruebe el siguiente código CSS .
ol {
  color: blue;
}
  • Vea cómo incluso las sublistas <ul> ahora son azules, no solo el nivel superior <ol> que seleccionamos. Esto es en cascada.

Combinación de Selectores de CSS

  • Para hacer un punto, cambie la segunda lista para ser ordenada.
  <li>Pasatiempos
    <ol>
      <li>Música</li>
      <li>Fútbol</li>
      <li>Ciclismo</li>
    </ol>
  </li>
  • Ahora, agregue el siguiente código CSS para apuntar a esa lista específica.
ol ol {
  font-weight: 700;
}
  • ¿Ves cómo solo la lista de pasatiempos está en negrita? La lista de nivel superior es un ol pero no se ve afectada.
  • El selector combinado ol ol significa que las reglas se aplican a todas las listas ordenadas dentro de otra lista ordenada.

Herramientas: Visual Studio Code

  • jsfiddle es excelente para probar rápidamente un fragmento de código, pero tiene limitaciones.
  • Principalmente, no puede ver fácilmente un resultado de pantalla completa.
  • Del mismo modo, es difícil ver grandes bloques de código.
  • En cambio, hay muchos editores de código fuente de desarrollo web completos disponibles con diferentes beneficios y niveles de complejidad. Usaremos Visual Studio Code, que es uno de los más potentes.
  • Primero, cree una carpeta en su escritorio con su nombre.
  • Abra el Visual Studio Code.
  • Vaya a Archivo → Abrir carpeta y seleccione la carpeta que creó.
  • Presiona Ctrl-N para crear un nuevo archivo. Presione Ctrl-S para guardar el archivo y asígnele el nombre 'lists.html'.

Estructura HTML

  • Escriba ' HTML ' y seleccione ' HTML :5'.
  • Visual Studio ingresa automáticamente la estructura de un documento HTML completo .
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html>le dice al navegador que el código es HTML .
  • <head> contiene información sobre la página, mientras <body> contiene el contenido.
  • Copie el código HTML de jsfiddle y péguelo dentro de la etiqueta <body>.
  • Haga clic derecho y seleccione 'Abrir con Live Server'. Esto abrirá la página en una nueva pestaña del navegador.
  • Tenga en cuenta que el resultado es lo que vimos en jsfiddle antes de agregar CSS y Javascript.
  • Observe también que la etiqueta en la pestaña del navegador dice 'Document'. Eso viene de la etiqueta <title> en la sección <head>.
  • Edite <title> para decir 'Listas' y actualice la página (haga clic con el botón derecho y seleccione 'Abrir con Live Server'.
  • Observe que la etiqueta ahora ha cambiado.

Agregar CSS

  • Cree una nueva línea dentro de la etiqueta <head>, escriba 'link' y seleccione 'enlace:css'.
  • Esto agrega una línea que dice <link rel="stylesheet" href="style.css">, que le dice al navegador dónde encontrar el código CSS ('style.css' en el atributo href).
  • Presiona Cltr-N para crear un nuevo archivo y Ctrl-S para guardarlo como 'style.css'.
  • Ahora podemos copiar el código CSS de jsfiddle a su archivo 'style.css'.
  • Guarde eso y vuelva a abrir el código en Live Server. Ahora debería tener el formato que agregamos.

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.

Siguiente: Listas de Verificación

es/web_development/lists/multilevel_lists.1646253389.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