Poprzednie zadanie
Wprowadzenie do HTML i CSS2/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
Następne zadanie
  • Kursy
  • Rejestracja
  • Zaloguj się

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

CSS w akcji

W ostatnim zadaniu zmieniłeś kod w edytorze HTML i upewniłeś się, że zawartość strony uległa zmianie.

W tym zadaniu będziesz pracować z edytorem CSS i zobaczysz, jak możesz zmienić układ strony za pomocą kilku linijek kodu.

Nie będziemy teraz zagłębiać się w znaczenie każdej właściwości CSS. Po prostu przyjrzymy się CSS w akcji! Aby włączyć kod CSS, należy usunąć znaki komentarza, które go "wyłączają".

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>CSS w akcji</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>CSS</h1> <p>CSS jest jeszcze prostszy niż HTML. Składa się z wielu reguł, takich jak te:</p> <pre><code>selektor { właściwość1: <em>wartość1</em>; właściwość2: <em>wartość2</em>; }</code></pre> <p>Zasady są bardzo proste. Jest jednak jeden problem: istnieje <em>wiele</em> właściwości.</p> <p>Większość kursu skupi się na CSS.</p> <p>Teraz pracuj z dolnym edytorem.</p> </body> </html>
CSS
/* body { padding: 0 20px; font-size: 16px; font-family: "Arial", sans-serif; } h1 { color: #618ad2; text-shadow: 2px 2px 0 #cccccc; } pre { padding: 10px; font-size: 14px; line-height: 20px; background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 3px; } em { color: #618ad2; } */

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
    1. Usuń znaki /* w pierwszym wierszu edytora CSS i zobacz, jak zmienia się tekst strony.

    © 2023-2024, bobrkode.com