Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Prawda leży zazwyczaj pośrodku, najczęściej bez nagrobka

Zajęcia specjalizacyjne: III klasa TI
CSS

Ćwiczenie 13 - Tło i margines

Wprowadzenie:

W tym ćwiczeniu omówione zostaną kolejne własności CSS. Tym razem będą to: tło i marginesy.

  1. zadania do wykonania
  1. spakowane pliki do zadań: pliki_13.zip (8KB)

Własności tła:


  1. kolor tła
  2. tło obrazkowe
  3. powtarzanie tła
  4. pozycja tła
  5. zaczepienie tła
  6. łączenie atrybutów tła

Własności marginesów:


  1. model pudełkowy
  2. margines górny
  3. margines dolny
  4. margines lewy
  5. margines prawy
  6. łączenie atrybutów marginesu
  7. margines górny wewnętrzny - dopełnienie
  8. margines dolny wewnętrzny - dopełnienie
  9. margines lewy wewnętrzny - dopełnienie
  10. margines prawy wewnętrzny - dopełnienie
  11. łączenie atrybutów marginesu wewnętrznego


Tło

Kolor tła

Składnia reguły:


  1. selektor {background-color: kolor;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor tła dla danego elementu.

Przykład:

Tło koloru #c0c0c0; (silver): background-color: #c0c0c0;.

Tło koloru #800000; (maroon): background-color: #800000;.

Tło koloru #ff0000; (red): background-color: #ff0000;.

Tło koloru #800080; (purple): background-color: #800080;.

Tło koloru #008000; (green): background-color: #008000;.

Tło koloru #ffff00; (yellow): background-color: #ffff00;.

Tło koloru #000080; (navy): background-color: #000080;.

Tło koloru #00ffff; (aqua): background-color: #00ffff;.

do góry



Tło obrazkowe

Składnia reguły:


  1. selektor {background-image: url(adres);}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. adres:
  2. względna ścieżka dostępu z miejsca w miejsce
  3. należy wpisać drogę uwzględniając wszystkie foldery
  4. wchodząc do folderu wpisujemy jego nazwę/
  5. wychodząc z folderu wpisujemy ../
  6. na końcu podajemy nazwę pliku z rozszerzeniem
  7. jeżeli jest to zewnętrzny arkusz CSS, to ścieżkę podajemy względem niego
  8. "none" - usunie obrazek

Dzięki temu poleceniu można ustalić tło obrazkowe dla danego elementu.

Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor.

źródło: www.kurshtml.boo.pl


Przykład:

To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym. To jest akapit z tłem obrazkowym.

do góry



Powtarzanie tła

Składnia reguły:


  1. selektor {background-repeat: powtarzanie;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. powtarzanie:
  2. "repeat" - jednocześnie w pionie i poziomie - domyślnie
  3. "repeat-x" - w poziomie
  4. "repeat-y" - w pionie
  5. "no-repeat" - pojedynczy obrazek - bez powtarzania - w górnym-lewym rogu

Dzięki temu poleceniu można ustalić jeden z czterech sposobów powtarzania się obrazka jako tła.

Przykład:

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

do góry



Pozycja tła

Składnia reguły:


  1. selektor {background-position: pozycja;}

Wyraz selektor ma zastosowanie do elementów blokowych.


  1. pozycja:
  2. jedna wartość:
  3. "center" - obrazek na środku (w centrum)
  4. "left" - obrazek po lewej
  5. "right" - obrazek po prawej
  6. "top" - obrazek na górze
  7. "bottom" - obrazek na dole
  8. jednostki miary - odległość od lewej krawędzi
  10. dwie wartości (oddzielone spacją):
  11. "left top" - lewy-górny róg
  12. "left bottom" - lewy-dolny róg
  13. "right top" - prawy-górny róg
  14. "right bottom" - prawy-dolny róg
  15. dwie jednostki miary - pierwsza z nich oznacza odległość od lewej krawędzi, a druga - od górnej

  1. jednostki miary:
  2. piksele - px
  3. punkty edytorskie - pt
  4. wysokość litery "x" - ex
  5. wysokość aktualnej czcionki - em
  6. centymetry lub milimetry - cm, mm
  7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  8. procent wielkości nadrzędnej - %
  9. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić pozycję obrazka w ramach tła. Niemożliwe to jest przy wartości atrybutu powtarzania: repeat.

Przykład:

background-repeat: repeat-x; background-position: center;
background-repeat: repeat-y; background-position: center;
background-repeat: repeat-y; background-position: right;
background-repeat: no-repeat; background-position: center;
background-repeat: no-repeat; background-position: top;
background-repeat: no-repeat; background-position: bottom;
background-repeat: no-repeat; background-position: left top;
background-repeat: no-repeat; background-position: left;
background-repeat: no-repeat; background-position: left bottom;
background-repeat: no-repeat; background-position: right top;
background-repeat: no-repeat; background-position: right;
background-repeat: no-repeat; background-position: right bottom;
background-repeat: no-repeat; background-position: center;
background-repeat: no-repeat; background-position: 1cm;
background-repeat: no-repeat; background-position: 30% 30%;
background-repeat: no-repeat; background-position: 340px 100px;

do góry



Zaczepienie tła

Składnia reguły:


  1. selektor {background-attachment: zaczepienie;}

  1. zaczepienie:
  2. "scroll" - przewijanie tła (domyślnie)
  3. "fixed" - tło nieruchome

Domyślnie tło obrazkowe przesuwa się wraz z przewijaną stroną. Poleceniem tym można sprawić, że tło będzie nieruchome w czasie przewijania zawartości strony.

Przykład:

Tutaj jest nieruchome tło obrazkowe - nie przesuwa się wraz z tekstem: background-attachment: fixed;.
Tutaj jest ruchome tło obrazkowe - przesuwa się wraz z tekstem: background-attachment: scroll;.

Przykłady w osobnych plikach:


  1. background-attachment: scroll; - przykład - scroll
  2. background-attachment: fixed; - przykład 1 - fixed
  3. background-attachment: fixed; - przykład 2 - fixed

do góry



Łączenie atrybutów tła

Składnia reguły:


  1. selektor {background: wartości atrybutów;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast wartości atrybutów to konkretne wartości atrybutów związane z tłem, wpisane we właściwej kolejności i oddzielone spacjami. Można niektóre pominąć.


  1. wartości atrybutów:
  2. kolor tła
  3. tło obrazkowe
  4. powtarzanie tła
  5. zaczepienie tła
  6. pozycja tła

Dzięki temu poleceniu można w jednym miejscu zebrać atrybuty dotyczące tła.

Przykład:

Po wpisaniu na przykład takiej reguły w arkuszu CSS:


  1. p {color: #800000; background: #00ff00 url(../../grafiki/cwiczenie_13/tlo_css.jpg) no-repeat scroll center;}

tekst w akapicie będzie wyglądał następująco:

To jest akapit z tłem koloru #00ff00; (lime) i obrazkiem w tle. Obrazek nie jest powtarzany, jest ustawiony pośrodku i nie przewija się wraz z tekstem. Ponadto tekst ma nadany kolor #800000; (maroon). To jest akapit z tłem koloru #00ff00; (lime) i obrazkiem w tle. Obrazek nie jest powtarzany, jest ustawiony pośrodku i nie przewija się wraz z tekstem. Ponadto tekst ma nadany kolor #800000; (maroon).

do góry



Marginesy

Model pudełkowy

Każdy element w dokumencie HTML, otacza się prostokątnym obszarem zwanym pudełkiem (ang. Box model). Pudełko składa się z kilku warstw:


  1. zawartość modelu pudełkowego:
  2. "content" - zawartość (np.: tekst, obrazek)
  3. "padding" - otaczające marginesy wewnętrzne
  4. "border" - obramowania
  5. "margin" - marginesy

Padding, border i margin mogą mieć zerową wartość.

Model pudełkowy (box model) przedstawiony został na schemacie.

Tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste (transparent).

źródło: www.kurshtml.boo.pl


do góry



Margines górny

Składnia reguły:


  1. selektor {margin-top: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić wielkość górnego marginesu.

Przykład:

To jest pierwszy akapit.

To jest drugi akapit oddalony od pierwszego o margines 50px - margin-top: 50px;.

A ten jest oddalony od drugiego akapitu o margines 1in - margin-top: 1in;.

do góry



Margines dolny

Składnia reguły:


  1. selektor {margin-bottom: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić wielkość dolnego marginesu.

Przykład:

To jest pierwszy akapit oddalony od drugiego o margines 50px - margin-bottom: 50px;.

To jest drugi akapit oddalony od trzeciego o margines 1in - margin-bottom: 1in;.

A to jest trzeci akapit.

do góry



Margines lewy

Składnia reguły:


  1. selektor {margin-left: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić wielkość lewego marginesu.

Przykład:

To jest akapit oddalony od lewego brzegu tego pudełka o margines 50px - margin-left: 50px;.

To jest akapit oddalony od lewego brzegu tego pudełka lewej krawędzi o margines 1in - margin-left: 1in;.

To jest akapit oddalony od lewego brzegu tego pudełka lewej krawędzi o margines 50% - margin-left: 50%;.

A to jest trzeci akapit przy lewym brzegu tego pudełka - margin-left: 0px;.

do góry



Margines prawy

Składnia reguły:


  1. selektor {margin-right: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić wielkość prawego marginesu.

Przykład:

To jest akapit oddalony od prawego brzegu tego pudełka o margines 50px - margin-right: 50px;.

To jest akapit oddalony od prawego brzegu tego pudełka o margines 1in - margin-right: 1in;.

To jest akapit oddalony od prawego brzegu tego pudełka o margines 50% - margin-right: 50%;.

A to jest trzeci akapit przy lewym i prawym brzegu tego pudełka - margin-right: 0px;. A to jest trzeci akapit przy lewym i prawym brzegu tego pudełka - margin-right: 0px;.

do góry



Łączenie atrybutów marginesu

Składnia reguły:


  1. selektor {margin: wartości atrybutów;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wartości atrybutów:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną
  13. jedna wartość:
  14. wszystkie cztery marginesy będą równe
  16. dwie wartości (oddzielone spacją):
  17. pierwsza oznacza: górny i dolny margines
  18. druga oznacza: lewy i prawy margines
  20. cztery wartości (oddzielone spacjami):
  21. oznaczają kolejno marginesy:
  22. górny
  23. prawy
  24. dolny
  25. lewy

Przykład - jedna wartość:

To jest akapit oddalony od wszystkich czterech brzegów tego pudełka o margines 50px - margin: 50px;.

Przykład - dwie wartości:

To jest akapit oddalony od górnego i dolnego brzegu tego pudełka o margines 50px, a od prawego i lewego o margines 1in - margin: 50px 1in;.

Przykład - cztery wartości:

To jest akapit oddalony od górnego brzegu tego pudełka o margines 50px, od prawego o 1in, od dolnego o 25px, a od lewego o 0.5cm - margin: 50px 1in 25px 0.5cm;.

To jest akapit oddalony od górnego brzegu tego pudełka o margines 40%, od prawego o 25%, od dolnego o 10%, a od lewego o 5% - margin: 40% 25% 10% 5%;.

do góry



Margines górny wewnętrzny - dopełnienie

Składnia reguły:


  1. selektor {padding-top: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić dodatkowy margines, oddzielający elementy. Od zwykłego marginesu różni się tym, że wprowadza przestrzeń wewnątrz elementu. Tekst znajduje się na jakimś tle, a tło w akapicie. Margin dodaje odległości tła w akapicie, a padding od brzegu tła. Padding-top dodaje przestrzeni od góry.

Przykład:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 0px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od górnego brzegu tła 50px - padding-top: 50px;.

do góry



Margines dolny wewnętrzny - dopełnienie

Składnia reguły:


  1. selektor {padding-bottom: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić dodatkowy margines, oddzielający elementy. Od zwykłego marginesu różni się tym, że wprowadza przestrzeń wewnątrz elementu. Tekst znajduje się na jakimś tle, a tło w akapicie. Margin dodaje odległości tła w akapicie, a padding od brzegu tła. Padding-bottom dodaje przestrzeni od dołu.

Przykład:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 0px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od dolnego brzegu tła 50px - padding-bottom: 50px;.

do góry



Margines lewy wewnętrzny - dopełnienie

Składnia reguły:


  1. selektor {padding-left: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić dodatkowy margines, oddzielający elementy. Od zwykłego marginesu różni się tym, że wprowadza przestrzeń wewnątrz elementu. Tekst znajduje się na jakimś tle, a tło w akapicie. Margin dodaje odległości tła w akapicie, a padding od brzegu tła. Padding-left dodaje przestrzeni od lewej strony.

Przykład:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 0px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od lewego brzegu tła 50px - padding-left: 50px;.

do góry



Margines prawy wewnętrzny - dopełnienie

Składnia reguły:


  1. selektor {padding-right: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną

Dzięki temu poleceniu można ustalić dodatkowy margines, oddzielający elementy. Od zwykłego marginesu różni się tym, że wprowadza przestrzeń wewnątrz elementu. Tekst znajduje się na jakimś tle, a tło w akapicie. Margin dodaje odległości tła w akapicie, a padding od brzegu tła. Padding-right dodaje przestrzeni od prawej strony.

Przykład:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 0px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od brzegu tła 0px.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od prawego brzegu tła 50px - padding-right: 50px;.

do góry



Łączenie atrybutów marginesu wewnętrznego

Składnia reguły:


  1. selektor {padding: wartości atrybutów;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wartości atrybutów:
  2. należy podać konkretną wielkość, używając jednostek miary:
  3. piksele - px
  4. punkty edytorskie - pt
  5. wysokość litery "x" - ex
  6. wysokość aktualnej czcionki - em
  7. centymetry lub milimetry - cm, mm
  8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  9. cale - in (1in=2.54cm)
  10. procent wielkości nadrzędnej - %
  11. "auto" - przywraca wartość automatyczną
  13. jedna wartość:
  14. wszystkie cztery marginesy będą równe
  16. dwie wartości (oddzielone spacją):
  17. pierwsza oznacza: górny i dolny margines
  18. druga oznacza: lewy i prawy margines
  20. cztery wartości (oddzielone spacjami):
  21. oznaczają kolejno marginesy:
  22. górny
  23. prawy
  24. dolny
  25. lewy

Przykład - jedna wartość:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od wszystkich czterech brzegów tła 50px - padding: 50px;.

Przykład - dwie wartości:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od górnego i dolnego brzegu tła 50px, a od prawego i lewego brzegu tła 1in - padding: 50px 1in;.

Przykład - cztery wartości:

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od górnego brzegu tła 50px, od prawego 1in, od dolnego 25px, a od lewego brzegu tła 0.5cm - padding: 50px 1in 25px 0.5cm;.

To jest akapit z tłem koloru #00ff00; (lime), marginesem o wielkości 50px i odległością tekstu od górnego brzegu tła 40%, od prawego 25%, od dolnego 10%, a od lewego brzegu tła 5% - padding: 40% 25% 10% 5%;.

do góry



Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS czcionek i tekstu do sformatowania plików HTML. Zadanie polega na sformatowaniu dwóch plików HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą wszystkie własności dotyczące tła i marginesów. W pliku plik_2.html zostanie dokonana również lokalna modyfikacja wewnątrzwierszowymi arkuszami stylów. Konieczne będzie także użycie klas selektorów.

1. Należy zacząć od przygotowania struktury folderów i plików:


  1. foldery:
  2. cw_13 - główny
  3. pliki - zawarty w głównym
  4. style - zawarty w głównym
  5. grafiki - zawarty w głównym

  1. pliki:
  2. plik_1.html - w folderze pliki
  3. plik_2.html - w folderze pliki
  4. style.css - w folderze style
  5. tlo_1.jpg i tlo_2.png - w folderze grafiki
  6. spakowane pliki do zadań: pliki_13.zip (8KB)

2. W obu plikach HTML należy umieścić taką samą treść:


  1. zawartość plików HTML:
  2. szablon HTML 4.01 Transitional
  3. w sekcji <head>...</head>:
  4. łącze do arkusza stylów - patrz tutaj
  5. w znaczniku <title>...</title> nazwa pliku
  6. w sekcji <body>...</body>:
  7. wzajemne łącza do plików - umieszczone w znaczniku <div>...</div>
  8. znacznik <div>...</div> z klasą: klasa_1
  9. w tym znaczniku dwie wstawki Lorem
  10. znacznik <div>...</div> z klasą: klasa_2
  11. w tym znaczniku dwie wstawki Lorem
  12. znacznik <div>...</div> z klasą: klasa_3
  13. w tym znaczniku dwie wstawki Lorem
  14. znacznik <div>...</div> z klasą: klasa_4
  15. w tym znaczniku dwie wstawki Lorem
  16. znacznik <div>...</div> z klasą: klasa_5
  17. w tym znaczniku dwie wstawki Lorem
  18. znacznik <div>...</div> z klasą: klasa_6
  19. w tym znaczniku osiem wstawek Lorem

Spakowane pliki do ćwiczeń: pliki_13.zip (8KB).

Po wpisaniu całej zawartości pliki powinny wyglądać tak - bez żadnego formatowania:

Krok 1

3. W pliku CSS należy przygotować dla wszystkich sześciu klas, sześć różnych reguł formatujących tło i marginesy, uwzględniających wszystkie ich właściwości.


  1. zawartość pliku CSS:
  2. klasa_1:
  3. tło obrazkowe z pliku tlo_1.jpg - powtarzanie w obu kierunkach;
  4. margines dolny: 50px;
  5. margines górny: 25px;
  6. wszystkie marginesy wewnętrzne: 30px;
  7. tak wyglądają pliki HTML po formatowaniu: klasa_1
  9. klasa_2:
  10. kolor tła: #00ff00; (lime)
  11. tło obrazkowe z pliku tlo_1.jpg - powtarzanie w poziomie;
  12. margines dolny: 30px;
  13. margines lewy: 30px;
  14. marginesy wewnętrzne:
  15. górny i dolny: 80px;
  16. lewy i prawy: 50px;
  17. tak wyglądają pliki HTML po formatowaniu: klasa_2
  19. klasa_3:
  20. kolor tła: #00ff00; (lime)
  21. tło obrazkowe z pliku tlo_1.jpg - powtarzanie w pionie;
  22. margines dolny: 30px;
  23. margines prawy: 50px;
  24. marginesy wewnętrzne:
  25. górny: 30px;
  26. prawy: 50px;
  27. dolny: 70px;
  28. lewy: 120px;
  29. tak wyglądają pliki HTML po formatowaniu: klasa_3
  31. klasa_4:
  32. kolor tła: #00ff00; (lime)
  33. tło obrazkowe z pliku tlo_1.jpg - bez powtarzania;
  34. wszystkie cztery marginesy: 100px;
  35. marginesy wewnętrzne:
  36. górny: 80px;
  37. prawy: 40px;
  38. dolny: 50px;
  39. lewy: 120px;
  40. tak wyglądają pliki HTML po formatowaniu: klasa_4
  42. klasa_5:
  43. kolor tła: #00ff00; (lime)
  44. tło obrazkowe z pliku tlo_1.jpg - bez powtarzania;
  45. pozycja: prawy-górny róg
  46. wszystkie cztery marginesy: 100px;
  47. marginesy wewnętrzne:
  48. górny: 80px;
  49. prawy: 120px;
  50. dolny: 50px;
  51. lewy: 40px;
  52. wyrównanie tekstu: do prawej
  53. tak wyglądają pliki HTML po formatowaniu: klasa_5
  55. klasa_6:
  56. kolor tła: #00ff00; (lime)
  57. tło obrazkowe z pliku tlo_1.jpg - powtarzanie w pionie;
  58. pozycja tła: 5%
  59. zaczepienie: tło nieruchome;
  60. marginesy:
  61. górny: 20px;
  62. prawy: 30px;
  63. dolny: 70px;
  64. lewy: 10px;
  65. marginesy wewnętrzne:
  66. górny: 30px;
  67. prawy: 40px;
  68. dolny: 30px;
  69. lewy: 140px;
  70. tak wyglądają pliki HTML po formatowaniu: klasa_6

Spakowane pliki do zadań: pliki_13.zip (8KB).

Efekt powinien być taki, że oba pliki HTML będą tak samo sformatowane. Wygląda to następująco:

oba pliki - klasa_1

oba pliki - klasa_2

oba pliki - klasa_3

oba pliki - klasa_4

oba pliki - klasa_5

oba pliki - klasa_6

4. W pliku: plik_2.html należy dokonać lokalnych wewnątrzwierszowych modyfikacji:


  1. wewnątrzwierszowe modyfikacje w pliku: plik_2.html:
  2. klasa_1:
  3. kolor tła ustawić na: #ff00ff; (fuchsia)
  4. tło obrazkowe zamienić na plik tlo_2.png;
  5. zaczepienie: tło nieruchome;
  6. wszystkie cztery marginesy na 60px;
  7. wszystkie cztery marginesy wewnętrzne na 60px;
  8. tak wygląda plik_2.html po modyfikacji: klasa_1
  10. klasa_2:
  11. kolor tła ustawić na: #0000ff; (blue)
  12. pozycja tła: na środku;
  13. zaczepienie: tło nieruchome;
  14. marginesy:
  15. górny i dolny: 50px;
  16. lewy i prawy: 100px;
  17. marginesy wewnętrzne:
  18. górny i dolny: 50px;
  19. lewy i prawy: 150px;
  20. tak wygląda plik_2.html po modyfikacji: klasa_2
  22. klasa_3:
  23. kolor tła ustawić na: #ff0000; (red)
  24. pozycja tła: na prawo;
  25. margines lewy: 50px;
  26. marginesy wewnętrzne:
  27. górny: 30px;
  28. prawy: 120px;
  29. dolny: 70px;
  30. lewy: 50px;
  31. wyrównanie tekstu: do prawej;
  32. tak wygląda plik_2.html po modyfikacji: klasa_3
  34. klasa_4:
  35. kolor tła ustawić na: #008080; (teal)
  36. pozycja tła:
  37. od lewej: 95%;
  38. od góry: 95%;
  39. wszystkie cztery marginesy na 15%;
  40. wszystkie cztery marginesy wewnętrzne na 10%;
  41. tak wygląda plik_2.html po modyfikacji: klasa_4
  43. klasa_5:
  44. kolor tła ustawić na: #ffff00; (yellow)
  45. pozycja tła: na środku;
  46. wszystkie cztery marginesy na 10%;
  47. wszystkie cztery marginesy wewnętrzne na 5%;
  48. wyrównanie tekstu: do obu krawędzi;
  49. tak wygląda plik_2.html po modyfikacji: klasa_5
  51. klasa_6:
  52. kolor tła ustawić na: #800080; (purple)
  53. pozycja tła: 99%;
  54. zaczepienie: tło ruchome;
  55. wszystkie cztery marginesy na 5%;
  56. marginesy wewnętrzne:
  57. górny: 5%;
  58. prawy: 15%;
  59. dolny: 5%;
  60. lewy: 5%;
  61. wyrównanie tekstu: do prawej;
  62. tak wygląda plik_2.html po modyfikacji: klasa_6

Spakowane pliki do zadań: pliki_13.zip (8KB).

Po wszystkich zmianach plik plik_2.html powinien wyglądać następująco:

plik_2.html - klasa_1

plik_2.html - klasa_2

plik_2.html - klasa_3

plik_2.html - klasa_4

plik_2.html - klasa_5

plik_2.html - klasa_6


Oceniany będzie folder cw_13 z trzema podfolderami: pliki, style i grafiki, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_1.html i plik_2.html, w folderze style plik: style.css, a w folderze grafiki dwa pliki graficzne. W przypadku własnych grafik - zwrócić uwagę na ich wielkości w pikselach i tak dopasować marginesy, aby tekst nie nachodził na te grafiki.

Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznego arkusza stylów z pliku style.css. Formatowanie obejmuje tło i marginesy - użyte są wszystkie własności formatowania tych dwóch elementów. Ponadto w pliku plik_2.html dokonana ma zostać lokalna wewnątrzwierszowa modyfikacja wyżej wspomnianych elementów.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki