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
<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>
Agregar CSS
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