Przeskocz do treści

Lekcja 24 (CSS)

Pseudo klasy i pseudo elementy. Przeźroczystość elementów.

Zapoznaj się z treścią artykułów: pseudoklasy, pseudoelementy, przeźroczystość. Wykonaj ćwiczenia umieszczone na końcach rozdziałów.

Zadanie 1: Przygotuj plik CSS_Lekcja25_z1.html w którym umieścisz 1 obrazek (grafikę pobierz ze strony ZST z galerii obrazów) powtórzony jeden obok drugiego pięć razy. Następnie ustal dla kolejnych obrazków przeźroczystość: 0.1, 0.3, 0.5, 0.7 i 0.9. Sprawdź działanie swojego kodu w różnych przeglądarkach.

Zadanie 2: Zmodyfikuj kod z zadania poprzedniego tak, aby po najechaniu wskaźnikiem myszy na obszar wybranego obrazka zmieniła się jego przeźroczystość na 1 (obrazek ma być w pełni widoczny).

Zadanie 3: Utwórz plik CSS_Lekcja25_z2.html, w którym umieścisz 5 akapitów (pobierz z serwisu http://pl.lipsum.com). Następnie korzystając z pomocy artykułu dodaj formatowania zgodnie z opisem poniżej (wykorzystaj do formatowania wewnętrzny arkusz stylów):

  • Akapity 1/2/3:
    • Wcięcie w pierwszym wierszu : 50px
    • Pierwszy znak:
      • Krój czcionki: Algerian
      • Rozmiar czcionki: 40px
      • Margines wewnętrzny: 5px
      • Margines zewnętrzny: 5px
      • Tło: żółte
      • Obramowanie linią ciągłą o szerokości 2px w kolorze czerwonym
      • Kolor tekstu: czerwony
    • Pierwsza linia:
      • Krój czcionki: Cambria
      • Rozmiar czcionki: 12px
      • Tło: białe
      • Odstęp między znakami: 2px
      • Odstęp między wyrazami: 5px
      • Podkreślenie
  • Akapity 4/5
    • Wcięcie w pierwszym wierszu : 20px
    • Pierwszy znak:
      • Krój czcionki: Curlz MT
      • Rozmiar czcionki: 60px
      • Margines wewnętrzny: 5px
      • Margines zewnętrzny: 5px
      • Tło: żółte
      • Obramowanie linią ciągłą o szerokości 1px w kolorze czerwonym
      • Kolor tekstu: czarny
    • Pierwsza linia:
      • Krój czcionki: Jokerman
      • Rozmiar czcionki: 20px
      • Tło: białe
      • Odstęp między znakami: 2px
      • Odstęp między wyrazami: 5px
      • Podkreślenie
  • Przed każdym paragrafem (pseudo element) dodaj na początku obrazek w taki sposób, aby nie był większy od pierwszej litery paragrafu;
  • Na końcu każdego paragrafu (pseudo element) dodaj w nowym wierszu swoje imię i nazwisko oraz datę wykonania pracy;
  • Dla całego dokumentu ustal tło: #f9f2ec
  • Nadaj swojej stronie tytuł: Pseudoelementy;

Zadanie 4:  Przygotuj dokument  CSS_Lekcja25_z4.html, w którym ustalisz kolor tła na czarny i kolor tekstu na biały. Następnie umieść w nim 5 paragrafów (wykorzystaj te z poprzedniego ćwiczenia). Za pomocą CSS'a ustal formatowanie w taki sposób, aby tekst zaznaczany przez użytkownika strony zmieniał kolor na czarny.

error: Content is protected !!