Przeskocz do treści

Lekcja 16 (CSS)

Model blokowy. Marginesy wewnętrzne i zewnętrzne. Wysokość i szerokość elementów. Obrys.

Zapoznaj się z treścią rozdziałów i wykonaj ćwiczenia umieszczone na końcach rozdziałów:

Zadanie 1: Przy pomocy poznanych narzędzi opracuj dokument z1L16.html, o zawartości 4 bloki (selektor div) z treścią PLIK każdy, ułożone jeden pod drugim, w którym za pomocą zewnętrznego arkusza styli (plik: styl.css):

  • ustalisz dla całego dokumentu kolor tła czarny;
  • dla każdego bloku na stronie (formatowanie selektora div) ustawisz: kolor tła żółty, szerokość bloku 70%, obramowanie górne: szerokość 5px, kolor czerwony, linia ciągła; margines zewnętrzny 10px;
  • dla każdego bloku (wykorzystaj konstrukcję klasy) na stronie zastosuj odpowiedni zapis tak, aby znajdował się on centralnie na stronie względem osi pionowej oraz dodaj wszystkim blokom margines wewnętrzny o wartości 20px:
  • przygotuj plik tlo.png o wymiarach 20px na 20px i wypełnieniu kolorem zielonym;
  • tylko dla drugiego bloku (wykorzystaj konstrukcję identyfikatora) ustal:
    • tło obrazkowe (wykorzystaj plik tlo.png);
    • margines wewnętrzny górny i dolny 20px, a prawy i lewy 40px;
    • obramowanie lewe i prawe: 5px, linia ciągła, czerwone;

Przykład.

Zadanie 2: Przy pomocy poznanych narzędzi opracuj dokument z2L16.html (WZÓR), w którym za pomocą wewnętrznego arkusza styli uzyskasz afekt jak we wzorze:

  • tło dla całego dokumentu: navy;
  • trzy nagłówki (h1, h2, h3 - wykorzystaj grupowanie selektorów): kolor tekstu #f00, krój czcionki Verdana;
  • dla wszystkich bloków na stronie kolor tła #0ff, krój czcionki Segoe UI, obrys o szerokości 5px, linia ciągła, kolor #0f0 oraz szerokość bloku 900px;
  • blok 1 (identyfikator b1):
    • rozmiar czcionki: 14pt;
    • margines wewnętrzny: 10px;
    • obramowanie górne i dolne: 5px, linia ciągła, kolor #ff0;
  • blok 2 (identyfikator b2):
    • rozmiar czcionki: 12pt;
    • margines wewnętrzny: 15px;
    • obramowanie górne i dolne: 10px, linia ciągła, kolor #ff0;
  • blok 3 (identyfikator b3):
    • rozmiar czcionki: 10pt;
    • margines wewnętrzny: 20px;
    • obramowanie: 20px, linia ciągła, kolor #ff0;

Zadanie 3: Przy pomocy poznanych narzędzi opracuj dokument z3L16.html prezentujący w postaci listy uporządkowanej prawidłowe odpowiedzi na pytania zawarte w pliku : Pytania Lekcja 16. Punkt główny listy to treść pytania, podpunkt z treścią odpowiedzi. Utwórz wewnętrzny arkusz styli, w którym:

  • dla całego dokumentu ustawisz tło #5fafaf,
  • dla punktów listy uporządkowanej: krój czcionki Arial, rozmiar czcionki 12pt, kolor czcionki navy;
  • dla podpunktów z odpowiedziami: krój czcionki Courier, rozmiar czcionki 10pt, kolor czcionki rgb(0, 255, 0);

Przykład.

Zadanie 4: Przy pomocy poznanych narzędzi opracuj dokument z4L16.html (przykład), w którym umieścisz trzy razy (jeden pod drugim) zrzut ekranowy (zapisany w pliku o nazwie ekran.png) przedstawiający rozwiązanie zadania numer 3, formatując go zgodnie z zapisami poniżej:

  1. Tło dla całego dokumentu: #5fafaf;
  2. Pierwszy obrazek:
    1. identyfikator ax1;
    2. szerokość obrazka 300px
    3. wysokość obrazka 250px
    4. obramowanie obrazka 1px, linia ciągła, kolor czerwony;
    5. margines zewnętrzny lewy 50px;
  3. Drugi obrazek:
    1. identyfikator ax2;
    2. maksymalna szerokość obrazka 300px
    3. maksymalna wysokość obrazka 250px
    4. obramowanie obrazka 1px, linia ciągła, kolor czerwony;
    5. margines zewnętrzny lewy 50px;
  4. Trzeci obrazek:
    1. identyfikator ax3;
    2. szerokość obrazka 30%
    3. obramowanie obrazka 1px, linia ciągła, kolor czerwony;
    4. margines zewnętrzny lewy 50px;

Pamiętaj, aby dla każdego obrazka dodać wymagany parametr alt o wartości odpowiednia: obrazek 1, obrazek 2 i obrazek 3.

Zadanie 5: Wykonaj polecenia zapisane w pliku treść zadania.

Materiały do zadania: baner.gif   /   CSS_Lekcja17_z5.txt   /  widok projektu.

error: Content is protected !!