Wprowadzenie do HTML 5 i CSS 3 – model blokowy

1. Marginesy, obramowanie i dopełnienie.

Marginesy/marginesy zewnętrzne (margin) – zwiększają zajmowaną przez element blokowy przestrzeń.

Obramowanie (border) – otacza element blokowy, nie obejmuje marginesów, zwiększa obszar elementu blokowego.

Dopełnienie/marginesy wewnętrzne (padding) – zwiększają obszar elementu blokowego.

Jeżeli blok ma 200px, obramowanie 6px, a dopełnienie 10px to element blokowy posiada w sumie szerokość: 6+10+200+10+6=232px. Po dodaniu margineów 10px obszar elementu blokowego zajmuje szerokość 253px.

2. Elementy pływające float.

• dodajemy do klasy box w pliku stylów deklarację szerokości: width:480px;
• dodajemy do klasy box w pliku stylów właściwość float: float:left;
• zmieniamy deklarację szerokości: width:400px;
• dodajemy w pliku stylów deklarację czyszczącą własność float oraz w pliku index selektor czyszczący, aby blok main otaczał zagnieżdżoną w nim pływającą treść:

.clearfloat {
    clear:both;
}

<div class="clearfloat"></div>

• usuwamy marginesy w blokach nieparzystych

.box:nth-child(odd) {
    margin-right:0;
}

• wyrównujemy parzyste bloki do prawej

.box:nth-child(even) {
    float:right;
}

• czyścimy właściwość float przed kolejnym rzędem kolumn

.box:nth-child(odd) {
   clear:both;
   margin-right:0;
}

Więcej o float: http://www.bt4.pl/artykuly/css-a/css-float/

3. Proszę dodać samodzielnie stopkę do pliku inex.php wg rysunku:

4. Tło strony – obrazek

body {
 background: blue url(backdrop.jpg) top left repeat;
}

http://www.kurshtmlcss.pl/kurs-css/lekcja6-tlo.php

5. Wstawiane obrazka na stronę.

<img src="http://dwach.edu.pl/girl.jpg" alt="Tekst obrazka" title="Tekst obrazka" height="xxx" width="yyy"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed ultrices diam. Mauris bibendum mi quis eros mollis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nisl velit, maximus eget convallis in, porta id turpis. Duis convallis finibus venenatis. Aliquam convallis sit amet est eget mollis. Cras mollis eros lectus, quis ultricies erat pretium eget. Donec sed sapien at dolor fermentum scelerisque. Ut blandit erat vitae auctor rhoncus. Quisque tincidunt nisl id purus posuere, in tempor dolor placerat.

Nam venenatis a elit id euismod. In hac habitasse platea dictumst. Duis viverra, est posuere accumsan ullamcorper, ipsum nisi blandit nisl, a pharetra sapien nibh vitae arcu. Donec eget elit in leo malesuada tempor. Mauris ac tincidunt ligula. Nullam nibh nisl, maximus sed purus accumsan, facilisis fermentum urna. Donec in diam id mi dictum fermentum. Sed maximus ullamcorper velit, et ullamcorper justo fringilla eget. Nunc et tincidunt orci. Nam ut erat bibendum, scelerisque velit non, consequat odio. Nunc malesuada leo purus, quis tristique justo mattis quis. Etiam varius magna mi, ac blandit nulla luctus in. Cras fringilla neque sed dictum lobortis. Ut fringilla, elit nec scelerisque condimentum, arcu diam lacinia lacus, ut consequat quam massa et urna. Aliquam ut sem a lorem rutrum mollis quis et metus.

Etiam aliquet id quam vitae congue. Pellentesque pellentesque diam ultrices, hendrerit felis quis, mollis augue. Proin ultrices vel turpis at aliquet. Cras ac sapien in mi dignissim tincidunt at eget justo. Suspendisse vehicula elementum eros, eget pulvinar libero luctus a. Nullam vitae tortor a mi congue lobortis. Nulla vehicula porta semper.

Nulla facilisi. Phasellus congue elit ut suscipit auctor. Morbi semper risus vitae tortor tincidunt, et gravida ante ullamcorper. In hac habitasse platea dictumst. Aliquam vel sapien nulla. Cras at felis eget magna congue facilisis ut eu magna. Nunc arcu felis, commodo nec leo ac, rutrum dictum sapien. Praesent non ultrices odio. Phasellus quis nibh cursus augue gravida venenatis. Nam at felis tellus.</p>

6. Proszę sformatować obrazek wg wzoru:

7. Własność position.

<div id="pozycjonowanie">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed ultrices diam. Mauris bibendum mi quis eros mollis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Nam venenatis a elit id euismod. In hac habitasse platea dictumst. Duis viverra, est posuere accumsan ullamcorper, ipsum nisi blandit nisl, a pharetra sapien nibh vitae arcu. Donec eget elit in leo malesuada tempor. </p>

<p class="zmiana">Etiam aliquet id quam vitae congue. Pellentesque pellentesque diam ultrices, hendrerit felis quis, mollis augue. Proin ultrices vel turpis at aliquet. Cras ac sapien in mi dignissim tincidunt at eget justo.</p>

<p>Nulla facilisi. Phasellus congue elit ut suscipit auctor. Morbi semper risus vitae tortor tincidunt, et gravida ante ullamcorper. In hac habitasse platea dictumst. Aliquam vel sapien nulla. Cras at felis eget magna congue facilisis ut eu magna. </p>

</div>

#pozycjonowanie{
 clear:both;
 margin:20px;
 padding:20px;
 text-align:justify;
 height:1000px;
}

#pozycjonowanie p{
 padding:10px 0;
}

static – statyczne

p.zmiana {
 position:static;
}

relative – względne

p.zmiana {
 position: relative;
 top:30px;
 left:50px;
}

absolute – bezwzględne

p.zmiana {
 position: absolute;
 top:30px;
 left:50px;
}

fixed – stałe

p.zmiana {
 position: fixed;
 bottom:30px;
 left:50px;
}

sticky – lepki

p.zmiana {
 position: sticky;
 top: 0;
 background-color: green;
 border: 2px solid #4CAF50
}

PODOBNE WPISY:

Menu rozwijane w CSS Listy do Świętego Mikołaja Składnia HTML5 – nowe znaczniki Triki CSS