Przeskocz do treści

Lekcja 21 (CSS) spr

Wyświetlanie i ukrywanie elementów na stronie.

Zapoznaj się z treścią artykułu, a następnie wykonaj ćwiczenia umieszczone na jego końcu.

Zadanie 1: Przygotuj dokument CSS_Lekcja21_z1.html, w którym umieścisz listę nieuporządkowaną o zawartości: Monitory, Dyski, Karty graficzne, Pamięci, Płyty główne. Za pomocą właściwości CSS ustal położenie lementów listy w taki sposób, aby leżały obok siebie. Następnie nadaj im unikatowy wygląd stosując elementy formatowania CSS: tło, kolor tekstu, marginesy wewnętrzne, krój i rozmiar czcionki. Wykorzystaj znajomość formatowania odsyłaczy (poznane pseudoklasy), aby konstrukcja odsyłaczy miała zróżnicowany wygląd w zależności od tego czy odsyłacz został dopiero załadowany czy najechano na niego kursorem myszy.

Zadanie 2: Przygotuj dokument CSS_Lekcja21_z2.html, w którym umieścisz w nagłówku poziomu 2 napis: "Galeria obrazków". Ustal szerokość powyższego elementu na 400px i dodaj tło w kolorze żółtym. Poniżej wstaw listę nieuporządkowaną składającą się z 5 elementów w postaci obrazka o wymiarach 70x70 pikseli (UWAGA! zmień rozmiar pobranego obrazka). Następnie obrazki w punkcie 2 i 4 ukryj tak, aby nie były wyświetlane na stronie, ale żeby nadal widoczna była przestrzeń im przypisana. W arkuszu wewnętrznym ustal dla każdego elementu listy osobno:  kolor tła, obramowanie dla obrazków linią kropkowaną, szerokość 200px. Pamiętaj o przypisaniu do obrazków wymaganego atrybutu (jako jego content wpisz nazwę wyświetlanego pliku).

Zadanie 3: Przygotuj dokument CSS_Lekcja21_z3.html, w którym w paragrafie umieścisz napis "Wyświetlanie i ukrywanie elementów na stronie". Ustal dla powyższego elementu krój czcionki: Comic Sans MS w rozmiarze 2 razy większym niż rozmiar domyślny, wyśrodkowany w oknie przeglądarki. Dodaj tło dla paragrafu w kolorze czarnym i kolor liter ustaw na biały. Poniżej umieść tabelę składającą się z 5 komórek umieszczonych w jednym wierszu. Dodaj do każdej komórki obrys o szerokości 3px w kolorze zielonym jednocześnie odsuń od siebie komórki o 10px. Do każdej z komórek tabeli wstaw obrazek (ten sam co w ćwiczeniu poprzednim) w taki sposób, aby w pierwszej komórce obrazek był niewidoczny, ale jednocześnie zajmował przestrzeń na ekranie. W komórce ostatniej obrazek był niewidoczny i nie zajmował przestrzeni na ekranie. Pod każdym obrazkiem umieść napis: "Obrazek X", gdzie X oznacza numer komórki. Pamiętaj o wymaganym dla obrazków atrybucie. Przypisz mu jako content wartość X.

Sprawdzian.

error: Content is protected !!