Przeskocz do treści

Lekcja 14 (CSS)

Wprowadzenie do CSS. Składnia CSS. Arkusze wewnętrzne, zewnętrzne i inline.

Zapoznaj się z materiałem zawartym pod odnośnikami: składnia, jak i gdzie korzystać z CSS.

Zadanie 1: Korzystając z przygotowanego w pliku cw14a.txt materiału przygotuj dokument cw14a.html zgodnie z poniższymi zaleceniami. Wszelkie formatowania wyglądu dokumentu mają być wykonane przy pomocy wewnętrznego arkusza styli.

Format powinien obejmować (3 akapity z nagłówkami - nagłówki należy dopisać samodzielnie):

  1. Czcionki: Segoe UI (dla h1), Comic Sans MS (dla h2), Trebuched MS (dla h3).
  2. Kolory czcionek dla kolejnych nagłówków (h1, h2, h3) odpowiednio:
    1. #00004C
    2. #1A1A00
    3. #3D001F
  3. Dla nagłówka h1 zwiększone o d s t e p y pomiędzy literami (np. <p style="letter-spacing: 2pt;">)
  4. Pierwsze linijki akapitów powinny posiadać wcięcie (np. <p style="text-indent: 10%; ">).

Zadanie 2: Korzystając z przygotowanego w pliku cw14b.txt materiału przygotuj dokument cw14b.html zgodnie z poniższymi założeniami. Wszelkie formatowania wyglądu dokumentu mają być wykonane przy pomocy wewnętrznego arkusza styli.

Należy określić styl tabeli:

  1. kolor tła komórek tabeli (tło jasne) i jej krawędzi,
  2. przynajmniej dwie kolumny musza różnić się kolorem tła,
  3. osobne formatowanie nagłówka tabeli i jej treści,
  4. litery tekstu w nagłówkach kolumn tabeli powinny być zamienione na wielkie

przykład: <div style="text-transform: uppercase;">wszystkie małe litery zostaną zamienione na wielkie</div>

Zadanie 3: Wykorzystując zapisy z dokumentu cw14c.txt oraz arkusz.css  utwórz dokument cw14c.html, a następnie dodaj do niego elementy stylu CSS w taki sposób, aby kolor tekstu w pierwszym akapicie zmienił się na zielony, a rozmiar tekstu z akapicie drugim zmienił się na 20pt. Dodaj trzeci akapit (np. wykorzystując tekst z serwisu Bacon Ipsum) i wykorzystując formatowanie inline ustal dla niego krój czcionki Courier oraz wyrównywanie tekstu do prawej krawędzi okna.

error: Content is protected !!