Każdy element strony internetowej zawarty jest wewnątrz obszaru o kształcie prostokąta. Obszary te poularnie nazywane są pudełkami. Jeżeli pudełko jest wieksze od ekranu przeglądarki to pojawiąją sie paski przewijania. Pudełkami są ramki, strona, tabelki, tła... Pudełka mają swoje właściwości takie jak długość, szerokość, obramowania i ich kolory, sposób prezentacji tekstów oraz obrazów, pływanie i blokowanie.
Pudełka.
| Nazwa wartości | Co oznacza |
|---|
width:130px;
height:40px; | Szerokość i wysokość pudełka.
szerokość 130px, wysokość 40px. |
width:20%;
height:80%; | Szerokość i wysokość pudełka.
szerokość 20%, wysokość 80%. |
| margin-top:20px; | Górny margines pomiędzy pudełkiem, a wewnętrzą ramką. | | margin-bottom:20px; | Dolny margines pomiędzy pudełkiem, a wewnętrzną ramką. |
| margin-left:10px; | Lewy margines pomiędzy pudełkiem, a wewnętrzną ramką. |
| margin-right:20px; | Prawy margines pomiędzy pudełkiem, a wewnętrznym elementem. |
| margin:20px 20px 10px 10px; | Uproszczony zapis ma postać:
Margines górny, prawy, dolny i lewy. |
| padding-top:5px; | Górne dopełnienie (margines w marginesie) pomiędzy ramką, a wewnętrznym elementem. |
| padding-bottom:5px; | Dolne dopełnienie pomiędzy ramką, a wewnętrznym elementem. |
| padding-left:5px; | Lewe dopełnienie pomiędzy ramką, a wewnętrznym elementem. |
| padding-right:5px; | Prawe dopełnienie pomiędzy ramką, a wewnętrznym elementem. |
| padding:5px 5px 5px 5px; | Uproszczony zapis ma postać:
Dopełnienie górne, prawe, dolne i lewe (mają po 5px). |
| Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
|---|
| background-color:orange width="130px" height="40px"; | p.orange {background-color: orange; width="130px" height="40px";} | <p class="orange"> Rozmiar
pudełka.</p> | Rozmiar
pudełka. |
| margin:0px 0px 50px 30px; background-color:orange width="130px" height="40px"; | p.margin {margin:0px 0px 50px 30px;}
p.orange {background-color: orange; width="130px" height="40px";} | <p class="margin"> Marginesy
dolny i lewy.</p> | Marginesy
dolny i lewy. |
| padding:20px 0px 0px 30px; background-color:orange width="130px" height="40px"; | p.padding {padding:20px 0px 0px 30px;}
p.orange {background-color: orange; width="130px" height="40px";} | <p class="padding"> Odstępy góra
i lewy.</p> | Odstepy góra
i lewy. |
Cień dla całego pudełka.
| Nazwa deklaracji |
Kod w head |
Kod w body |
Efekt formatowania |
-moz-box-shadow:
-webkit-box-shadow:
filter:progid:DXImageTransform.
Microsoft.DropShadow
(color='gray',offX='3',offY='3');
|
#cien_pudelka{
width:200px;
height:150px;
background-color:orange;
-moz-box-shadow:gray 5px 5px 6px;
-webkit-box-shadow:gray 5px 5px 6px;
filter:progid:DXImageTransform.
Microsoft.DropShadow
(color='gray',offX='3',offY='3');
}
|
<div id="cien_pudelka">
Nasz obszar.
</div>
|
Efekt jest widoczny poniżej.
|
Nasz obszar.
do góry menu powrót naprzód
|