Przeskocz do treści

Lekcja 17 (CSS) SPR

Formatowanie tekstu. Sprawdzian.

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

Słownik:

  • color
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • letter-spacing
  • line-height
  • direction
  • word-spacing
  • text-shadow

Zadanie 1: Korzystając z dostępnych narzędzi oraz poznanych elementów składni HTML i CSS przygotuj dokument z1L17.html poprawnie wyświetlający polskie znaki i o tytule: Lekcja 17. Umieść na górze strony nagłówek poziomu 3, w którym umieścisz swoje imię, nazwisko i klasę. Z serwisu Bacon Ipsum pobierz 5 akapitów tekstu i wklej je do swojego dokumentu. Wszelkie formatowania dotyczące wyglądu tworzonego dokumentu wykonaj przy pomocy zewnętrznego arkusza stylów (styl17a.css).

  • Ustal dla całej strony tło #000033;
  • Kolor tekstu nagłówka rgb(102, 255, 51)
  • Dla wszystkich paragrafów na stronie ustal: kolor tekstu żółty, rozmiar czcionki 11pt, wyrównywanie tekstu dwustronne;
  • Dla paragrafów 1 i 5 dodaj efekt podkreślenia tekstu oraz tło #33001a;
  • Dla paragrafów 2, 3 i 4 ustal wcięcie w pierwszym wierszu na 50px;
  • Dla paragrafu 3 ustal odstęp między znakami na 3px oraz wysokość linii na 1,5;
  • Dla nagłówka ustal efekt cienia: przesunięcie w poziomie 3px, przesunięcie w pionie 2px, kolor cienia czerwony;

Zadanie 2: Korzystając z dostępnych narzędzi oraz poznanych elementów składni HTML i CSS przygotuj dokument z2L17.html poprawnie wyświetlający polskie znaki i o tytule: Lekcja 17. Umieść na górze strony nagłówek poziomu 2, w którym umieścisz nazwę naszej szkoły. Wszelkie formatowania wyglądu strony wykonaj przy pomoce wewnętrznego arkusza stylów. Następnie pobierz plik wzorcowy oraz plik graficzny. Na podstawie pobranych plików wykonaj poniższe działania:

  1. Utwórz tabelę składającą się z trzech wierszy. W każdym wierszu umieść po 3 komórki;
  2. Dla wszystkich komórek tabeli ustal tło rgb(255, 255, 230) oraz obramowanie pojedyncze linią ciągłą;
  3. Do komórek nagłówkowych jako treść wklej napisy: INFFO 1, INFO 2, INFO 3.
  4. Do komórek w wierszu numer dwa wstaw obrazki (pobrałeś je na początku ćwiczenia) i ustal dla nich: szerokość  100% i wysokość 80px;
  5. Do komórek w wierszu numer trzy wstaw po 5 akapitów tekstu (materiał pobrany w pliku wzorcowym) i przed każdym akapitem dodaj nagłówek poziomu 2 z napisem odpowiednio: Akapit 1, Akapit 2, Akapit 3, Akapit 4, Akapit 5.
  6. Dla wszystkich nagłówków poziomu 2 ustal wyrównywanie tekstu do środka;
  7. Dla wszystkich akapitów na stronie ustal:
    • wyrównywanie tekstu dwustronne;
    • wcięcie w pierwszej linii 50px;
    • marginesy wewnętrzne 10px;
    • obramowanie lewe i prawe: szerokość 10px, kolor czerwony, linia ciągła
  8. Dla akapitu numer 5 w każdej komórce ustal:
    • tło obrazkowe (obrazek pobrałeś na początku ćwiczenia);
    • tło zaczepione tylko dla tego akapitu;
    • brak powtarzania tła;
    • tło rozciągnięte na całą szerokość akapitu;
    • kolor tekstu czerwony;
  9. Pomiędzy akapitami w wierszu numer trzy wstaw poziome linie.

Zadanie 3: Korzystając z dostępnych narzędzi oraz poznanych elementów składni HTML i CSS przygotuj na podstawie załącznika dokument z3L17.html poprawnie wyświetlający polskie znaki i o tytule: Lekcja 17. Pobierz elementy graficzne do wykorzystania w zadaniu: załącznik 1 i załącznik 2. Z umieszczonego tekstu przygotuj 20 bloków (skopiuj tekst 20 razy) umieszczonych w liście uporządkowanej (każdy blok w oddzielnym punkcie). Wykorzystując pobrany materiał wykonaj następujące czynności na wewnętrznym arkuszy stylów:

  1. Dla całej strony:
    • Ustal kolor tła na #00f
    • Użyj pliku z2a.jpg jako tła ustalając dla niego:
    • Pozycję w prawym górnym rogu
    • Powtarzanie tylko w osi pionowej
    • Zaczepienie względem okna przeglądarki
  2. Dla każdego bloku:
    • Ustal prawy margines zewnętrzny na 170px
    • Ustal wyrównywanie tekstu dwustronne
    • Obramowanie prawe o szerokości 5px, w kolorze czerwonym, linią ciągłą
    • Marginesy wewnętrzne 7px
    • Szerokość bloku ma być dziedziczona po szerokości punktu listy
  3. Dla wszystkich bloków umieszczonych w punktach nieparzystych
    • Użyj jako tła pliku z3b.png
    • Ustaw wysokość i szerokość tła na 100%
  4. Dla wszystkich bloków umieszczonych w punktach parzystych
    • Ustal obrys linią ciągłą, szerokość 2px, kolor #0f0
    • Kolor tekstu na #00f
  5. Dla wszystkich punktów listy uporządkowanej ustal
    • Margines 5px
    • Szerokość 96%
  6. Dla bloków umieszczonych w punktach 2 i 3
    • Ustal odstęp między znakami 4px
    • Wysokość linii 1.8

Sprawdzian.

error: Content is protected !!