Compito precedente
Introduzione a HTML e CSS13/13
Torna all'elenco delle attività
  1. 1. Andiamo!
  2. 2. CSS in azione
  3. 3. Consolidamento
  4. 4. Nozioni di base di HTML
  5. 5. Singoli tag HTML
  6. 6. Attributi dei tag HTML
  7. 7. Ricerca di errori in HTML
  8. 8. Le basi dei CSS
  9. 9. Altri modi per collegare il CSS
  10. 10. Selettori CSS
  11. 11. Classi in CSS
  12. 12. Proprietà e valori CSS
  13. 13. Ricerca di errori nei CSS
Cose da fare
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Ricerca di errori nei CSS

La sintassi dei CSS è molto più semplice di quella dell'HTML, ma questo non impedisce di commettere errori fastidiosi.

Naturalmente, alcuni degli errori più comuni sono gli errori di battitura nei nomi delle proprietà o nei selettori.

Altri errori comuni sono la mancanza di ; nell'elenco delle proprietà CSS. Quando si dimentica di mettere un punto e virgola dopo una coppia proprietà-valore, il browser non applica quella proprietà o tutte le proprietà successive.

Muffin ha deciso di fare un ultimo lavoro con gli stili per rendere la sinossi più "carina". Ha funzionato bene, ma questa volta Cupcake è stata disattenta e ha fatto dei fastidiosi errori di battitura che hanno rotto alcuni degli stili.

Bene, è fantastico! Ora potete esercitarvi a trovare gli errori nei CSS!

1. Linea 8.

2. Linea 17.

3. Linea 27.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Ricerca di errori nei CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Schema del corso</h1> <p class="completed">Tag di abbinamento.</p> <p class="completed">Tag singoli.</p> <p class="completed">Attributi dei tag.</p> <p class="completed">Stili in linea (incorporati).</p> <p class="in-progress">Stili esterni.</p> <p class="new">Stilizzazione per classe.</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; }

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0

    Aiutate Cupcake a correggere gli errori negli stili di contorno:

    1. Primo errore con stili persi per tutti i paragrafi,
    2. un secondo errore senza barrature,
    3. un terzo errore con lo sfondo mancante dei non scusati.

    © 2023-2024, codegym.study