Saltar al contenido principal
Codigo Heroe
Tarea anterior
CSS: selectores, herencia y cascada9/15
A la lista de tareas
  1. 1. Reglas CSS
  2. 2. Selectores
  3. 3. Propiedades y valores
  4. 4. Herencia
  5. 5. Propiedades heredables
  6. 6. Propiedades no heredables
  7. 7. Propiedades abreviadas
  8. 8. Valores absolutos y relativos
  9. 9. Selectores de etiqueta y de clase
  10. 10. Selectores descendientes
  11. 11. Estilos predeterminados
  12. 12. La cascada
  13. 13. Conflictos entre propiedades
  14. 14. Varias clases en un elemento
  15. 15. Estilos en línea: el atributo style
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Selectores de etiqueta y de clase

¿Recuerdas los selectores de etiqueta y de clase del segundo ejercicio? Incluso usamos uno para dar estilo a nav. Nuestro proyecto crece y cada vez tiene más estilos, así que conviene aprender a usar estos selectores para evitar problemas más adelante.

Imagina que quieres dar estilo a una lista ul. Podrías pensar que basta con esto:

ul {
  propiedad: valor;
}

Pero hay un problema: la página puede tener varias listas, y la regla se aplicará a todas, incluidas las que no querías cambiar. Para evitarlo, conviene usar los selectores de etiqueta con moderación.

Un selector de clase resuelve este problema. Si agregamos una clase al elemento, podemos dirigir los estilos a ese elemento y a los demás que compartan esa clase.

Mejoremos un poco el código: en la regla de la navegación, sustituiremos el selector de etiqueta por uno de clase.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en HTML y CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Sitio de un principiante en HTML y CSS</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <!-- Agrega una clase al elemento de abajo --> <nav> <h2>Entradas del blog</h2> <ul> <li><a href="day-1.html">Día 1. Cómo olvidé darle de comer al gato</a></li> <li><a href="day-2.html">Día 2. Quiero dedicarme a HTML y CSS</a></li> <li><a href="day-3.html">Día 3. Mi gato está enojado conmigo</a></li> <li><a href="day-4.html">Día 4. Casi me enfermo</a></li> <li><a href="day-5.html">Día 5. Un descanso</a></li> <li><a href="day-6.html">Día 6. No entendí nada</a></li> <li><a href="day-7.html">Día 7. Cupcake me encargó una tarea</a></li> <li><a href="day-8.html">Día 8. Un día muy serio</a></li> <li><a href="day-9.html">Día 9. O mejor dicho, noche</a></li> <li><a href="day-10.html">Día 10. Un primer balance</a></li> <li><a href="day-11.html">Día 11. Sin exagerar</a></li> <li><a href="day-12.html">Día 12. A todos les gustan las galletas</a></li> <li><a href="day-13.html">Día 13. Encontré un artículo</a></li> <li><a href="day-14.html">Día 14. Un formato nuevo</a></li> <li><a href="day-15.html">Día 15. Una galería de selfis</a></li> </ul> </nav> <section> <p>¡Hola a todos! Les doy la bienvenida a mi primer sitio web. Hace poco no tenía ni idea de cómo se crean las páginas web, pero ahora encontré <a href="https://htmlacademy.org/courses">cursos interactivos de HTML y CSS</a> y me propuse aprender a crearlas. Hasta tengo un instructor: Cupcake, que no me dejará bajar el ritmo y estará atento a mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } /* Sustituye el selector de etiqueta por uno de clase */ nav { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Agrega la clase blog-navigation a nav en el HTML.
    2. En el CSS, sustituye el selector de etiqueta nav por el selector de clase .blog-navigation.
    Codigo Heroe

    © 2023-2026, codigoheroe.com