Tarea anterior
Introducción a HTML y CSS13/13
A la lista de tareas
  1. 1. ¡Vamos!
  2. 2. CSS en acción
  3. 3. Consolidación
  4. 4. Conceptos básicos de HTML
  5. 5. Etiquetas HTML individuales
  6. 6. Atributos de etiquetas HTML
  7. 7. Buscar errores en HTML
  8. 8. Conceptos básicos de CSS
  9. 9. Otras formas de conectar CSS
  10. 10. Selectores CSS
  11. 11. Clases en CSS
  12. 12. Propiedades y valores CSS
  13. 13. Buscar errores en CSS
Lista de tareas
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Buscar errores en CSS

La sintaxis CSS es mucho más sencilla que la HTML, pero eso no impide cometer errores molestos.

Por supuesto, algunos de los errores más comunes son erratas en los nombres de las propiedades o en los selectores.

Otros errores comunes son la omisión de ; en la lista de propiedades CSS. Cuando te olvidas de poner un punto y coma después de un par propiedad-valor, el navegador no aplica esa propiedad ni todas las siguientes.

Muffin decidió hacer un último trabajo con los estilos para que la sinopsis fuera "más bonita". Funcionó bien, pero esta vez Magdalena se descuidó e hizo algunas erratas molestas que rompieron algunos de los estilos.

¡Genial! ¡Ahora puedes practicar la búsqueda de errores en CSS!

1. Línea 8.

2. Línea 17.

3. Línea 27.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Buscar errores en CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Esquema del curso</h1> <p class="completed">Etiquetas de emparejamiento.</p> <p class="completed">Etiquetas individuales.</p> <p class="completed">Atributos de la etiqueta.</p> <p class="completed">Estilos en línea (incorporados).</p> <p class="in-progress">Estilos exteriores.</p> <p class="new">Estilización por clases.</p> </body> </html>
CSS
body { margin: 30px; font-family: "Georgia", serif; } p { margin: 10px 0; padding: 5px 10px border: 1px solid #cccccc; border-left-width: 10px; color: white; } .completed { border-color: #27ae60; background-color: #2ecc71; text-decoration: linr-through; } .in-progress { border-color: #f39c12; background-color: #f1c40f; } .new { border-color: #c0392b; backround-color: #e74c3c; }

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

    Ayuda a Cupcake a corregir errores en los estilos de contorno:

    1. Primer error con estilos perdidos para todos los párrafos,
    2. un segundo error sin tachaduras,
    3. un tercer error con la falta de antecedentes de los no excusados.

    © 2023-2025, codigoheroe.com