Przeskocz do treści

Lekcja 19 (CSS)

Formatowanie list przy pomocy CSS.

Zapoznaj się z treścią artykułu Listy i wykonaj ćwiczenia umieszczone na jego końcu.

Zadanie 1: Na podstawie dokumentu w załączniku przygotuj stronę zgodnie z poniższymi wytycznymi. Wszystkie formatowania wykonaj w zewnętrznym arkuszu styli (format.css).

  1. dla całej strony:
    • tło #800000,
    • margines zewnętrzny 10px
    • margines wewnętrzny 10px;
  2. nagłówek pierwszego poziomu:
    • rozmiar tekstu 40px,
    • wyrównywanie tekstu do środka,
    • cień dla tekstu 3px, 2px, kolor #ff0;
  3. Lista numerowana:
    • rozmiar tekstu 20pt;
    • krój czcionki: Segoe UI
    • odstęp między znakami 2px;
    • cień dla tekstu: 1px, 2px, #0f0;
  4. Lista nieuporządkowana:
    • wygląd punktora na podstawie pliku: ikona.png
  5. Tło dla punktów (wraz z podpunktami): styczeń, luty i marzec:
    • na podstawie obrazka: zima.png
    • szerokość punktów 400px
  6. Tło dla punktów (wraz z podpunktami): kwiecień, maj, czerwiec:
    • na podstawie obrazka: wiosna.png
    • szerokość punktów 400px
  7. Tło dla punktów (wraz z podpunktami): lipiec, sierpień, wrzesień:
    • na podstawie obrazka: lato.png
    • szerokość punktów 400px
  8. Tło dla punktów (wraz z podpunktami): październik, listopad, grudzień:
    • na podstawie obrazka: jesien.png
    • szerokość punktów 400px

Zrzut ekranu po wykonaniu ćwiczenia: ekran.

Zadanie 2: Korzystając z dostępnych narzędzi oraz poznanych zasad tworzenia stron internetowych przygotuj dokument CSS_Lekcja19_z2.html, w którym umieścisz tabelę składającą się z dwóch wierszy. W każdym wierszu umieść po dwie komórki. W każdej komórce umieść kolejno po jednym słowie: WIOSNA, LATO, JESIEŃ, ZIMA. Następnie sformatuj dokument przy pomocy zewnętrznego arkusza CSS (zad2.css):

  1. Dla napisów w komórkach ustal:
    • krój czcionki: Comic Sans MS
    • rozmiar czcionki: 50pt;
    • wyrównywanie do środka w pionie i poziomie
  2. Dla poszczególnych komórek ustaw jako tło obrazek o wymiarach 350x250 pikseli prezentujący daną porę roku. Dopasuj rozmiar tła tak, aby zawsze zajmowało cały obszar komórki i się nie powtarzało;
  3. Po najechaniu wskaźnikiem myszy na zawartość komórki napis w komórce powinien się zmniejszyć do rozmiaru 12pt;

Zadanie 3: Przygotuj dokument CSS_Lekcja19_z3.html w którym umieścisz listę składającą się z 7 dni tygodnia. Następnie przy pomocy składni CSS nadaj liście wygląd zgodny z wytycznymi poniżej:

  1. Wyłącz liście styl domyślny;
  2. Szerokość każdego elementu listy 300px;
  3. Wysokość każdego elementu listy 50px;
  4. Kolor liter #660000;
  5. Tło elementów listy #ffffb3;
  6. Marginesy zewnętrzne górny i dolny dla każdego elementu listy 10px;
  7. Marginesy wewnętrzne 7px;
  8. Tło dla całego dokumentu #000066;
  9. Jako wyróżnik elementu listy zastosuj zrzut ekranu z widoczną Twoją właśnie tworzoną stroną wyskalowany do rozmiaru 20x20 pikseli;
  10. Rozmiar czcionki 15pt;
  11. Krój czcionki Comic Sans MS;
  12. Wyrównywanie tekstu do środka;
  13. Narożniki zaokrąglone - promień 15px;
  14. Po najechaniu wskaźnikiem myszy na obszar wybranego punktu listy kolor tła #99ff66 i rozmiar czcionki 18pt;
error: Content is protected !!