Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Transkrypt

1 Box model

2 Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

3 Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Padding - margines wewnętrzny (dopełnienie) określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że dopełnienie zawsze przyjmuje barwę zawartości.

4 Box model: Margin Padding Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Padding - margines wewnętrzny (dopełnienie) określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że dopełnienie zawsze przyjmuje barwę zawartości. Margin - margines zewnętrzny, podobnie jak wewnętrzny określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że margines jest przezroczysty.

5 Box model: Margin Padding Content Border Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Padding - margines wewnętrzny (dopełnienie) określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że dopełnienie zawsze przyjmuje barwę zawartości. Margin - margines zewnętrzny, podobnie jak wewnętrzny określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Margines zewnętrzny jest przezroczysty. Border - obrys określany jest za pomocą deklaracji grubości. Kolor obrysu jest niezależny od koloru zawartości. Cechy pudełka takie jak: Padding, Margin, Border są opcjonalne.

6 Obliczanie szerokości pudełka Content Content Content + Content

7 Obliczanie szerokości pudełka Padding Padding Content Content Padding + Content + Padding + Padding + Content + Padding

8 Obliczanie szerokości pudełka Padding Padding Content Content Border + Padding + Content + Padding + Border + Border + Padding + Content + Padding + Border

9 Obliczanie szerokości pudełka Margin Padding Margin Padding Content Content Margin + Border + Padding + Content + Padding + Border + Margin + Margin + Border + Padding + Content + Padding + Border + Margin

10 Ćwiczenie 1 - zapis szerokości pudełka 1. Utwórz dokument html5. 2. Zapisz dokument - 01-Box.html 3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący szerokość - 100px i wysokość 100px sekcji <div>. 4. Aby generowany element był w przeglądarce widoczny wypełnij go barwą, np. czerwoną. <style type= text/css >  </style> 5. W sekcji body, napisz kod tworzący pudełko - element div. <div id= box ></div> 6. Zapisz zmiany wprowadzone do dokumentu. 7. Przetestuj dokument. 8. Powiększ pudełko o margines wewnętrzny (dopełnienie) grubości 50px. padding: 50px; 9. Zapisz zmiany wprowadzone do dokumentu. 10. Przetestuj dokument. 11. Napisz deklarację tworzącą obrys o grubości 5px, typu - linia ciągła, w kolorze czarnym. border: 5px solid black; 12. Napisz deklarację tworzącą margines zewnętrzny grubości 50px.

11 margin:50px; 13. Twój arkusz powinien wyglądać następująco: <style type= text/css >  </style> 14. Zapisz zmiany wprowadzone do dokumentu. 15. Przetestuj dokument.

12 Ćwiczenie 2 - zapis szerokości pudełka 1. Utwórz dokument html5. 2. Zapisz dokument - 02-Box.html 3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący dwa elementy sekcji div. Pierwszy - box-1 - o szerokości - 100px i wysokości 100px, w kolorze czerwonym. Drugi - box-2 - o szerokości - 100px i wysokości 100px, w kolorze niebieskim. <style type= text/css >  </style> 4. W sekcji body, napisz kod tworzący dwa pudełka - elementy div. <div id= box-1 ></div> <div id= box-2 ></div> 5. Zapisz zmiany wprowadzone do dokumentu. 6. Przetestuj dokument.

13 Ćwiczenie 3 - marginesy wewnętrzne i zewnętrzne o stałej grubości 1. Utwórz dokument html5. 2. Zapisz dokument - 03-Box.html 3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący dwa elementy sekcji div. Pierwszy - box-1 - o szerokości - 100px i wysokości 100px, z marginesami wewnętrznymi (dopełnieniem) o grubości 50px w kolorze czerwonym. Drugi - box-2 - o szerokości - 100px i wysokości 100px, z marginesami wewnętrznymi (dopełnieniem) o grubości 50px w kolorze niebieskim. <style type= text/css >  </style> 4. W sekcji body, napisz kod tworzący dwa pudełka - elementy div. <div id= box-1 ></div> <div id= box-2 ></div>

14 5. Zapisz zmiany wprowadzone do dokumentu. 6. Przetestuj dokument. 7. Powiększ wielkość pudełek o grubość marginesów zewnętrznych. wstaw nową linijkę do kodu deklaracji selektora #box-1 i wpisz: #box-1{ height: 100px; width:100px; background-color: red; padding:50px; margin: 50px; wstaw nową linijkę do kodu deklaracji selektora #box-2 i wpisz: #box-2{ height: 100px; width:100px; background-color: red; padding:50px; margin: 50px; 8. Zapisz zmiany wprowadzone do dokumentu. 9. Przetestuj dokument.

15 Wyznaczanie szerokości i wysokości pudełka - edycja marginesów wewnętrznych i zewnętrznych margin-top padding-top margin-left padding-left padding-right margin-right padding-bottom margin-bottom

16 Wyznaczanie szerokości i wysokości pudełka - edycja marginesów wewnętrznych i zewnętrznych #box-3 { padding-top: 30px; padding-right: 40px; padding-bottom: 50px; padding-left: 60px; #box-4 { margin-top: 30px; margin-right: 40px; margin-bottom: 50px; margin-left: 60px; lub #box-3 { padding: 30px 40px 50px 60px; #box-4 { margin: 30px 40px 50px 60px;

17 Ćwiczenie 4 - marginesy wewnętrzne i zewnętrzne o różnej grubości 1. Utwórz dokument html5. 2. Zapisz dokument - 04-Box.html 3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący szerokość - 100px i wysokość 100px sekcji <div>. 4. Aby generowany element był w przeglądarce widoczny wypełnij go barwą, np. czerwoną. <style type= text/css >  </style> 5. W sekcji body, napisz kod tworzący pudełko - element div. <div id= box ></div> 6. Zapisz zmiany wprowadzone do dokumentu. 7. Przetestuj dokument. 8. Powiększ pudełko o marginesy wewnętrzne (dopełnienia): górny - 30px, lewy - 40px, dolny - 50 px, prawy - 60.px. padding: 30px 40px 50px 60px; 9. Zapisz zmiany wprowadzone do dokumentu. 10. Przetestuj dokument. 11. Napisz deklarację tworzącą marginesy zewnętrzne: górny - 30px, lewy - 40px, dolny - 50 px, prawy - 60.px. margin: 30px 40px 50px 60px;

18 12. Zapisz zmiany wprowadzone do dokumentu. 13. Przetestuj dokument. punkt ćw. 1-6 punkt ćw. 8-9 punkt ćw

19 Pozycjonowanie

20 Domyślny zapis elementów blokowych układa je pionowo, jeden pod drugim. Aby ułożyć je poziomo należy do deklaracji wprowadzić: właściwość display o wartości inline-block. div {display: inline-block LUB Do deklaracji układu wskazanego selektora wprowadzić właściwość float, która odpowiedzialna jest za poziome wyrównanie względem siebie elementów blokowych w jednym wierszu. Wyróżniamy trzy cechy tej wartości: left - do lewej right - do prawej none - element nie sąsiaduje z innymi

21 float: left; float: right; float: none;

22 Ćwiczenie 5 - wyrównanie w poziomie - metoda 1 (właściwość display o wartości inline-block) 1. Utwórz dokument html5. 2. Zapisz dokument - 05-Box.html 3. W sekcji nagłówka dokumentu napisz arkusz CSS. <style type= text/css >  </style> 4. W sekcji body, napisz kod: <div id= box-1 ></div> <div id= box-2 ></div> <p>wiosna</p> <p>lato</p> 5. Zapisz zmiany wprowadzone do dokumentu. 6. Przetestuj dokument.

23 Ćwiczenie 6 - wyrównanie w poziomie - metoda 2 (właściwość : float o wartości left) 1. Utwórz dokument html5. 2. Zapisz dokument - 06-Box.html 3. W sekcji nagłówka dokumentu napisz arkusz CSS. div#box-1,div#box-2 { width:100px; height:100px; margin:5px; padding:20px; div#box-1 { background-color: red; float: left; div#box-2 { background-color: blue; float: left; --> </style> 4. W sekcji body, napisz kod: <div id= box-1 ></div> <div id= box-2 ></div> 5. Zapisz zmiany wprowadzone do dokumentu. 6. Przetestuj dokument.

24 Ćwiczenie 7 - wyrównanie w poziomie - metoda 2 (właściwość : float o wartości right) 1. Otwórz dokument 06-Box.html 2. Zapisz dokument jako - 07-Box.html 3. W sekcji nagłówka dokumentu właściwości float dla selektorów: div#box-1 oraz div#box-2 przypisz wartość right. div#box-1,div#box-2 { width:100px; height:100px; margin:5px; padding:20px; div#box-1 { background-color: red; float: right; div#box-2 { background-color: blue; float: right; --> </style> 4. W sekcji body, napisz kod: <div id= box-1 ></div> <div id= box-2 ></div> 5. Zapisz zmiany wprowadzone do dokumentu. 6. Przetestuj dokument.

25 Ćwiczenie 8 - wyrównanie w poziomie - metoda 2 (właściwość : float) 1. Otwórz dokument 07-Box.html 2. Zapisz dokument jako - 08-Box.html 3. W sekcji nagłówka dokumentu właściwości float dla selektora: div#box-1 przypisz wartość left. div#box-1,div#box-2 { width:100px; height:100px; margin:5px; padding:20px; div#box-1 { background-color: red; float: left; div#box-2 { background-color: blue; float: right; --> </style> 4. W sekcji body, napisz kod: <div id= box-1 ></div> <div id= box-2 ></div> 5. Zapisz zmiany wprowadzone do dokumentu. 6. Przetestuj dokument.

26 Ćwiczenie 9 - wyrównanie w poziomie - metoda 2 (właściwość : float) 1. Otwórz dokument 08-Box.html 2. Zapisz dokument jako - 09-Box.html 3. W sekcji nagłówka dokumentu właściwości float dla selektora: div#box-1 przypisz wartość right. 4. W sekcji nagłówka dokumentu właściwości float dla selektora: div#box-2 przypisz wartość left. div#box-1,div#box-2 { width:100px; height:100px; margin:5px; padding:20px; div#box-1 { background-color: red; float: right; div#box-2 { background-color: blue; float: left; --> </style> 5. W sekcji body, napisz kod: <div id= box-1 ></div> <div id= box-2 ></div> 6. Zapisz zmiany wprowadzone do dokumentu. 7. Przetestuj dokument.

27 Najczęściej stosowane jednostki miary: Absolutne (niezależne, sztywne) pt punkt (point) px piksel (pixel) Relatywne (wielkość elementów podrzędnych zależna jest od wielkości elementów nadrzędnych) % procent 100% oznacza domyślną wartość, 200% wartość dwukrotną, 50% połowę itd. em stopień pisma Standardowa, domyślna wielkość czcionki w nowoczesnych przeglądarkach to: 100% = 1 em = 16 px = 12 pt = 1 pc ex wysokość x (x-height) 1 ex = x (wysokość małej litery bez wydłużeń) ex to jednostka względna, zależna od wysokości małych liter w danym kroju. 1 ex ma długość równą wysokości małych liter (bez wydłużeń dolnych) w danym kroju (np. litera x» stąd nazwa x-height ). Jak widać, wielkość ex jest zależna od rodzaju użytego kroju. Każdy krój ma inny stosunek wysokości dużych liter do małych. Średnio ten stosunek wynosi 1:2 na podstawie:

28 CSS Wysokość i szerokość selektor cecha przykładowa wartość div width: 100px; hight: 100px; Margines wewnętrzny (dopełnienie) selektor cecha przykładowa wartość div padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; Zapis skrótowy: selektor cecha i przykładowa wartość opis div padding:10px Wszystkie o jednakowej wartości. padding:10px 20px padding:10px 20px 30px padding:10px 20px 30px 40px Pierwszy określa top i bottom, a drugi right i left Pierwszy określa top, drugi right i left, trzeci bottom. Pierwszy określa top, drugi right i left, trzeci bottom, czwarty right

29 Margines zewnętrzny selektor cecha przykładowa wartość margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; Zapis skrótowy: selektor cecha i przykładowa wartość opis div padding:10px Wszystkie o jednakowej wartości. padding:10px 20px padding:10px 20px 30px padding:10px 20px 30px 40px Pierwszy określa top i bottom, a drugi right i left Pierwszy określa top, drugi right i left, trzeci bottom. Pierwszy określa top, drugi right i left, trzeci bottom, czwarty right

30 Obrys selektor cecha przykładowa wartość div obrys (górny) border-top-width: border-top-style: border-top-color: obrys (prawy) border-right-width: border-right-style: border-right-color: obrys (dolny) border-bottom-width: border-bottom-style: border-bottom-color: obrys (lewy) border-left-width: border-left-style: border-left-color: Zapis skrótowy dla jednakowych wartości obrysu: div { border: thin solid #C0C0C0; Zapis skrótowy dla różnych wartości obrysu: div { border-top: 3px hidden #800080; border-right: 6px dotted #C0C0C0; border-bottom: 8px groove #008080; border-left: 1px ridge #FF00FF; thin; solid; red; thin; solid; red; thin; solid; red; thin; solid; red;