Modele formatowania

Karta pracy 2014/2015

Adres:
http://plotkarka.eu/KP/modele_formatowania.html
Autor:
Radosław Kowaluk

Model formatowania elementów blokowych

Czynności wstępne

Skopiuj plik modele_formatowania.zip rozpakuj go do folderu WWW.

Otwórz plik modele_formatowania.html w przeglądarce internetowej.

Zapoznaj się ze źródłem pliku.

Marginesy zewnętrzne1

W elemencie style dodaj kod.

}
header { 
margin: auto;
}

Zapisz zmiany i odśwież podgląd strony.

W elemencie style dodaj kod.

margin: 20px auto;

Zapisz zmiany i odśwież podgląd.

W elemencie style dodaj kod.

margin: 20px auto 10px;}

Zapisz zmiany i odśwież podgląd.

Marginesy wewnętrzne2

W elemencie style dodaj kod.

margin: 20px auto 10px; 
padding: 10px;
}

Zapisz zmiany iodśwież podgląd.

Szerokość3

W elemencie style dodaj kod.

padding: 10px; 
width: 610px;
}

Zapisz zmiany i odśwież podgląd.

Wysokość4

W elemencie style dodaj kod.

width: 800px;
height: 100px;
}

Zapisz zmiany i odśwież podgląd.

Oblewanie 5

W elemencie style dodaj kod.

}
nav, main, aside {
float: left;
}
</style>

Zapisz zmiany i odśwież podgląd.

Przyleganie 6

W elemencie style dodaj kod.

}
footer {
clear: both;
}
</style>

Zapisz zmiany i odśwież podgląd.

Sprawdzanie poprawność kodu strony

W przeglądarce internetowej wpisz adres validator.w3.org/unicorn/

Wybierz zakładkę Lokalny plik

Za pomocą przycisku Przeglądaj... otwórz plik modele_formatowania.html

Naciśnij przycisk Sprawdź

Wgrywanie plików na serwer

Umieść plik modele_formatowania.htmlna serwerze.

Zadania (opcjonalne)

Dokończ formatowanie strony i umieść jej kod w szablonach.

Zastosuj poznane wiadomości w pliku index.html.

  1. Styl {margin:} - definiuje margines elementu. Wartością mogą być liczby z jednostka długości, procent lub auto.
    Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala ją dla wszystkich marginesów.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines.
    Uwaga: Styl border (obramowanie) będzie omówiony w karcie Tło i obramowania.
  2. Styl {padding:} – definiuje margines wewnętrzny elementu. Wartością mogą być liczby z jednostka długości, procent lub auto.
    Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala tę wartość dla wszystkich marginesów.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines..
  3. Styl {width:} - definiuje szerokość. Wartość liczba z jednostka długości lub procent.
  4. Styl {height:} - definiuje szerokość. Wartość liczba z jednostka długości lub procent.
  5. Styl {float:} – definiuje kierunek oblewania elementu przez tekst lub element. Wartości stylu mogą być równe: none – brak oblewania, left – element znajduje się z lewej strony a oblewany jest z prawej strony, right – element znajduje się po prawej stronie i oblewany jest z lewej strony.
  6. Styl {clear:} – definiuje kierunek oblewania elementu przez tekst lub element. Wartości stylu mogą być równe: none – brak wpływu na float, left – element będzie poniżej wszystkich z float:left;, right – element będzie zsunięty poniżej wszystkich z float:right;, both - element będzie poniżej wszystkich poprzedzających go.

Model Box

Wyświetlanie1

W elemencie style dodaj kod.

a { 
display: inline-block;
}

Zapisz zmiany i odśwież podgląd.

Marginesy zewnętrzne: górny2, prawy3, dolny4, lewy5

W elemencie style dodaj kod. 

display: block;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Marginesy wewnętrzne: górny6, prawy7, dolny8, lewy9.

W elemencie style dodaj kod.

margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

Zapisz zmiany i odśwież podgląd.

Maksymalna szerokość10 i Minimalna szerokość11

W elemencie style dodaj kod.

body {
max-width: 987px;
min-width: 610px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Maksymalna wysokość10 i wysokość13

W elemencie style dodaj kod.

min-width: 610px;
max-height: 377px;
min-height: 233px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Przycinanie 14

W elemencie style dodaj kod.

min-height: 233px;
overflow: scroll;
}

Zapisz zmiany i odśwież podgląd.

Widzialność 15

W elemencie style dodaj kod.

padding-left: 10px;
visibility: hidden;
}

Zapisz zmiany i odśwież podgląd. Zmień widzialność.

Model Line

Interlinia16

W elemencie style dodaj kod.

overflow: scroll;
line-height: 125px;;
}

Zapisz zmiany i odśwież podgląd.

Wyrównywanie w pionie17

W elemencie style dodaj kod.

img {
vertical-align: middle;
}

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik formatowaniestrony.html na serwerze po sprawdzeniu poprawności.

  1. Styl {display:} - definiuje szerokość. Wartościami sa: inline; (element liniowy), block; (element blokowy), none; (usunięcie) inline-block; (element liniowy o charakterze blokowym).
  2. Styl {margin-top:} - margines górny elementu.
  3. Styl {margin-right:} - margines lewy elementu.
  4. Styl {margin-bottom:} - margines dolny elementu.
  5. Styl {margin-left:} - margines lewy elementu.
  6. Styl {padding-top:} - margines wewnętrzny, górny.
  7. Styl {padding-right:} - margines wewnętrzny, prawy.
  8. Styl {padding-bottom:} - margines wewnętrzny, dolny.
  9. Styl {padding-left:} - margines wewnętrzny, lewy.
  10. Styl {max-width:} - definiuje maksymalną szerokość. Wartość liczba z jednostka długości.
  11. Styl {min-width:} - definiuje minimalną szerokość. Wartość liczba z jednostka długości.
  12. Styl {max-height:} - definiuje maksymalną wysokość. Wartość liczba z jednostka długości.
  13. Styl {min-height:} - definiuje minimalną wysokość. Wartość liczba z jednostka długości.
  14. Styl {overflow:} - definiuje przycinanie i paski przewijania elementu. Wartościami sa: visible (widoczny), hidden (ukryty), scroll (widoczne suwaki), auto (automatyczne suwaki), no-display (niewidoczne widoczne suwaki), no-content (brak zawartości)
  15. Styl {visibility:} - definiuje widzialność elementu. Wartościami sa: visible (widoczny), hidden (ukryty), collapse (ukryta komórka lub wiersz tabeli)
  16. Styl {line-height:} – interlinia (odstęp między liniami tekstu). Wartość: liczba z jednostka długości.
  17. Styl {vertical-align:} – wyrównywanie w pionie. Wartościami sa: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, percentage.