1 HTML, XHTML, CSS Model pudełka

2  Wszystkie elementy w HTML mogą być rozważane jako pudełka. W CSS model pudełka dotyczy projektu i układu. Składa się on z: marginesu, obramowania, odstępu oraz aktualnej zawartości. Poszczególne elementy: - zawartość (Content) – miejsce gdzie tekst i obrazy się pojawiają - odstęp (Padding) – czyści obszar wokół zawartości. Odstęp jest przezroczysty - obramowanie (Border) – obszar dookoła zawartości i odstępu - margines (Margin) – czyści obszar na zewnątrz obramowania. Jest przezroczysty Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero.

3  Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości (content) i nie wpływają na pozostałe obszary, które są tworzone na zewnątrz zawartości, ale wewnątrz prostokąta.  Natomiast 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).

4 Margines, obramowanie i dopełnienie modyfikujemy własnościami CSS:  margin, margin-top, margin-right, margin-left, margin-bottom  border, border-top, border-right, border-left, border-bottom  padding, padding-top, padding-right, padding-left, padding-bottom

5 Przykład Niech strona składa się z jednego elementu div i zagnieżdżonego w nim akapitu. Zawartość

6 Określmy następujące style: div { background: white; width: 300px; height: 200px; margin-left: 50px; margin-top: 100px; border: 3px solid; padding: 40px; } body { background: whitesmoke; } p { background: gray; margin: 0; }

7  Jeżeli umieścimy w dokumencie kilka elementów div to zostaną ułożone jeden pod drugim. Jeżeli chcemy je umieścić obok siebie należy skorzystać z właściwości float i nadać jej wartość left lub right. Warto również nadać własność width, żeby dokładnie określić położenie kolejnych elementów na stronie.

8 Przykład Style.css div { width: 200px; float: left; margin: 15px; background: gray; } 1 2 3 4 5 6 7 Ustaliliśmy szerokość jednego elementu div na 200px, margines na 15 px i dosuwanie do lewej (czyli do miejsca, gdzie kończy się poprzedni element).

9 A po zmniejszeniu okna przeglądarki, elementy zmienią położenie i dopasują się tak, żeby mieścić się w oknie.

10 Elementy, które mają własność float o wartości left lub right nazywamy elementami pływającymi. Będą one przydatne przy tworzeniu układu kolumnowego strony, w szczególności do określenia położenia i rozmiarów menu.

11 Przykład  Stworzymy stronę, która po lewej stronie ma menu o szerokości 150px. Cała szerokość strony ma mieć 500px. Czyli na zawartość zostaje 350px. Dla pewności, że oba elementy zmieszczą się obok siebie przyjmijmy na zawartość 348px.

12 A B C D Treść strony Style.css: #pojemnik { width: 500px; } #menu{ float: left; width: 150px; } #tresc{ float: right; width: 348px; background: gray; }.opcja { margin-bottom: 2px; background: gray; }

13 Uwagi:  należy się upewnić, że suma szerokości obu elementów nie przekracza szerokości elementu, w którym są zagnieżdżone  bez ustawienia szerokości 500px dla elementu #pojemnik, prawy prostokąt dopasowałby się do prawej krawędzi przeglądarki  ustawienie marginesu dolnego dla elementów menu oznaczonych klasą opcja spowodowało rozsunięcie prostokątów

14 Ćwiczenie  Stwórz stronę, która po lewej stronie ma pojemnik z menu. Pojemnik ma szerokość 200px i jest wyrównany do lewej właściwością float. Menu to lista wypunktowana bez punktora. Lista ma zawierać odnośniki wewnętrzne do wierszy, które znajdują się na stronie. Lista ma margines 10 pikseli.  Pozostała część strony jest przeznaczona na treść. Ma mieć szerokość 700px. Dopełnienie wewnętrzne ustaw na 20 pikseli żeby odsunąć treść od krawędzi. Wypełnij pojemnik wierszami. Określ lewą krawędź pojemnika z treścią (żeby oddzielić go od menu).  Określ jaką szerokość ma mieć cała strona, żeby zmieściły się w niej wszystkie elementy. Tło pojemnika z menu ma być niebieskie, tło pojemnika z treścią pomarańczowe.

15 Bajka iskierki Był sobie paź Miała baba koguta Bajka iskierki Z popielnika na Wojtusia… Był sobie paź Już księżyc zgasł, zapadła noc… #pojemnik { width: 1000px; } #menu{ float: left; width: 200px; margin: 10px; background: blue; } #tresc{ margin: 10px; float: left; width: 700px; padding: 20px; border-left: solid black; background: orange; } #lista{ list-style-type: none; }

16 Całkowita szerokość 400px+50px+50px+20px+20px+2px+2px=544px Całkowita wysokość 200px+50px+50px+20px+20px+2px+2px=344px

17  Inną metodą określenia wymiarów danego elementu jest przypisanie wartości wysokości i szerokości całemu widocznemu obszarowi zawierającemu dopełnienie i obramowanie.  Należy wówczas dopisać regułę stylu box-sizing: border-box;

18

19 Pierwszy pojemnik ma wymiary width: 400px height: 200px. Jest on większy, ponieważ osobno doliczamy dopełnienie i obramowanie! Poniższy pojemnik ma wymiary width: 400px oraz height: 200px.

20 296px+50px+50px+2px+2px+20px+20px=440px

21 Wymiary maksymalne oraz minimalne  Służą one do ustalania minimalnych oraz maksymalnych wysokości i szerokości elementów blokowych. Mogą być przydatne, jeśli chce się w jakiś sposób ograniczyć rozmiar elementu. max-height, max-width, min-height, min-width  Należy jednak zwrócić uwagę, że są one stosowane do obszaru zawartości elementu. Zatem dopełnienie, obramowanie oraz marginesy sprawią, że rozmiar pojemnika elementu będzie większy.  Ogólnie wysokość elementów określa się dosyć rzadko. Lepiej jest pozwolić na automatyczne obliczenie wysokości na podstawie wysokości tekstu i innej zawartości dokumentu.  Dzięki temu możemy zmienić wysokość w oparciu o rozmiar czcionki, ustawienia użytkownika, czy inne czynniki.  Jeśli jednak ustalimy wysokość elementu zawierającego tekst musimy zastanowić się co się stanie, gdy zawartość tego elementu nie zmieści się w nim.  A więc, jeżeli element otrzyma zbyt mały rozmiar dla swojej zawartości to dzięki właściwości overflow możemy określić, co się stanie z niemieszczącą się zawartością.

22 Wartości właściwość overflow  visible (domyślna) – zawartość wystaje poza pojemnik elementu, dzięki czemu jest w całości widoczna.

23  hidden – treść niemieszcząca się w obszarze zawartości elementu jest odcinana i nie pojawia się poza krawędziami tego obszaru.

24  scroll – do pojemnika elementu dodawane są paski przewijania, by użytkownik mógł przewinąć całą treść elementu. Uwaga! Ustawiając tą wartość paski przewijania będą wyświetlone zawsze, nawet jeśli zawartość elementu mieści się w podanej wysokości.

25  auto – wartość ta pozwala zdecydować przeglądarce, w jaki sposób poradzić sobie z przepełnieniem elementu. W większości przypadków paski przewijania dodawane są tylko wtedy, gdy zawartość elementu się nie mieści.

26 Dopełnienie Obszar pomiędzy obszarem zawartości elementu a obramowaniem (czy też miejscem, w którym znalazłoby się obramowanie, gdyby zostało dodane). Dzięki dopełnieniu obramowanie nie zderza się bezpośrednio z tekstem.

27 Dopełnienie można podawać w dowolnej z jednostek długości CSS-a. Najpowszechniej stosowane to em i px. Można również podawać jako wartość procentową.

28  Skrótowa wartość padding

29 Marginesy  Opcjonalny obszar dodawany na zewnątrz obramowania. Zapobiegają bliskiemu stykaniu się elementów ze sobą lub z krawędzią okna przeglądarki.  Skrótowa właściwość margin działa podobnie do skrótu padding. Podając 4 wartości zostają zastosowane w kolejności zgodnie z ruchem wskazówek zegara (góra, prawo, dół, lewo). Przy trzech wartościach środkowa odnosi się do prawego i lewego boku. Przy dwóch wartościach pierwsza ma zastosowanie do góry i dołu, a druga do prawej i lewej strony.  Słowo kluczowe auto pozwala przeglądarce na dostosowanie marginesu do dostępnej szerokości lub wypełnienie jej.

30

31 Uwaga!  Marginesy górne oraz dolne sąsiadujących elementów składają się (ang. collapse). Oznacza to, że zamiast się kumulować, przylegające marginesy nakładają się na siebie i zostaje wykorzystana jedynie większa wartość.  Wyjątkiem jest, gdy marginesy górny z dolnym nie składają się są elementy pływające lub pozycjonowanie bezwzględne.  Marginesy lewe i prawe się nie składają.  Niech górny element ma margines dolny o wielkości 4em, natomiast element następujący po nim margines górny o wielkości 2em. Zatem pomiędzy tymi akapitami dostaniemy margines równy 4em zamiast 6em.

32 Marginesy ujemne  Gdy zastosujemy margines ujemny, zawartość elementu, jego dopełnienie oraz obramowanie zostaną przesunięte w przeciwnym kierunku, niż ten wynikający z wartości dodatniej.

33 Elementy pływające  Właściwość float przesuwa element na prawo lub lewo najbardziej, jak się da, pozwalając by następująca po nim zawartość była wokół niego zawijana ("opływała go").

34

35  W jaki sposób zrobić odstęp pomiędzy elementem obrazka a otaczającym go tekstem?

36 Charakterystyczne cechy elementów pływających  Są one umieszczane wewnątrz obszaru zawartości (wewnętrznych krawędzi akapitu), który go zawiera. Nie wychodzi na obszar dopełnienia akapitu.  Marginesy są zachowywane z każdej ze stron elementu pływającego.  Pływać może dowolny element HTML, bez względu na to, czy jest to element wewnętrzny, czy blokowy.

37

38

39

40

41 Uwaga! Dla pływających elementów tekstowych należy zawsze podawać szerokość. W przykładzie z obrazkami nie podawaliśmy, ponieważ obrazki mają własność szerokość. Pływające elementy wewnętrzne zachowują się jak elementy blokowe. Marginesy elementów pływających nie są składane.

42

43

44 Nadpisanie domyślnych ustawień marginesów przeglądarki dla akapitów. Pozwala to na wyrównanie elementu pływającego z górą następującego po nim akapitu.

45  Koniecznie podawaj szerokość pływających elementów blokowych! Jeżeli tego nie zrobisz to szerokość pływającego bloku zostanie ustawiona na auto, przez co element wypełni szerokość dostępną w oknie przeglądarki lub innym bloku zawierającym ten element. Nie ma sensu tworzyć bloku pływającego na pełną szerokość strony, ponieważ tekst ma opływać ten element, a nie rozpoczynać się już pod nim.  Elementy pływające nigdy nie znajdą się wyżej niż odwołanie do nich w źródle dokumentu. Pływający blok znajdzie się na stronie na prawo lub lewo od miejsca, w którym pojawia się on w źródle dokumentu, co pozwala na zawijanie elementów występujących po nim obok niego. Będzie on umieszczony poniżej każdego elementu, który w źródle dokumentu występuje wcześniej.

46 Wyłączanie zawijania tekstu wokół elementów pływających.  Zawijanie (pływanie elementu) wyłącza się w elemencie, który powinien się zaczynać pod elementem pływającym.  Zastosowanie właściwości clear do elementu zapobiega wyświetlaniu go obok elementu pływającego i zmusza go do rozpoczynania się w kolejnym dostępnym obszarze pod tym elementem pływającym.  Wartości właściwości clear left – rozpoczęcie elementu poniżej elementów pływających po lewej stronie. right – powoduje, że element nie zawija się wokół elementów pływających po prawej stronie tego bloku zawierającego, ale rozpoczyna się pod nimi. both- korzystamy z niej, gdy elementów pływających jest więcej i chcemy być pewni, że dany element będzie się rozpoczynał poniżej ich wszystkich.

47