Poprzednie zadanie
Wprowadzenie do HTML i CSS13/13
Wróć do listy zadań
  1. 1. Idziemy!
  2. 2. CSS w akcji
  3. 3. Konsolidacja
  4. 4. Podstawy HTML
  5. 5. Pojedyncze znaczniki HTML
  6. 6. Atrybuty znaczników HTML
  7. 7. Szukanie błędów w HTML
  8. 8. Podstawy CSS
  9. 9. Inne sposoby łączenia CSS
  10. 10. Selektory CSS
  11. 11. Klasy w CSS
  12. 12. Właściwości i wartości CSS
  13. 13. Szukanie błędów w CSS
Rzeczy do zrobienia
  • Kursy
  • Rejestracja
  • Zaloguj się

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Szukanie błędów w CSS

Składnia CSS jest znacznie prostsza niż składnia HTML, ale to nie powstrzymuje cię przed popełnianiem irytujących błędów.

Oczywiście, niektóre z najczęstszych błędów to literówki w nazwach właściwości lub selektorach.

Inne częste błędy obejmują brak znaku ; na liście właściwości CSS. Jeśli zapomnisz umieścić średnik po parze właściwość-wartość, przeglądarka nie zastosuje tej właściwości ani wszystkich kolejnych.

Cupcake zdecydowała się na ostateczną pracę ze stylami, aby streszczenie było "ładniejsze". Zadziałało to dobrze, ale tym razem Cupcake była nieostrożna i zrobiła kilka irytujących literówek, które zepsuły niektóre style.

Cóż, to świetnie! Teraz możesz poćwiczyć znajdowanie błędów w CSS!

1. Linia 8.

2. Linia 17.

3. Linia 27.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Szukanie błędów w CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Zarys kursu</h1> <p class="completed">Sparowane znaczniki.</p> <p class="completed">Pojedyncze znaczniki.</p> <p class="completed">Atrybuty znaczników.</p> <p class="completed">Wbudowane style.</p> <p class="in-progress">Style zewnętrzne.</p> <p class="new">Stylizacja według klasy.</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

    Pomóż Cupcake poprawić błędy w stylach konspektu:

    1. Pierwszy błąd z utraconymi stylami dla wszystkich akapitów,
    2. drugi błąd bez przekreślenia,
    3. trzeci błąd z brakującym tłem nieusprawiedliwionych.

    © 2023-2024, bobrkode.com