Model Box

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css3-box.html
Autor:
Radosław Kowaluk

Model formatowania elementów blokowych

Utwórz plik css3-box.html z podstawową strukturą strony WWW w standardzie HTML5 .

<!DOCTYPE html>
<html>
 <head>
  <title>Modele formatowania</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>
  <header>Nagłówek strony</header>
  <nav>Menu strony</nav>
  <main>Tresć strony</main>
  <footer>Stopka strony</footer>
 </body>
</html>

Marginesy zewnętrzne1

W elemencie style dodaj kod.

header { 
margin: auto;
}

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

Marginesy wewnętrzne2

W elemencie style dodaj kod.

margin: 20px auto;
border: 1px solid;
padding: 10px;
}

Zapisz zmiany iodśwież podgląd.

Szerokość3

W elemencie style dodaj kod.

padding: 10px; 
width: 800px;
}

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 {
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ź

  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) jest 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: block;
}

W elemencie nav dodaj kod.

Menu: <a href="#">Link</a>

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: 800px;
}

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.

footer {
visibility: hidden;
}

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

Wgrywanie plików na serwer

Umieść plik css3-box.htmlna serwerze po sprawdzeniu poprawności.

Zadania

Zastosuj poznane wiadomości w pliku index.html.

  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)