webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 5

Czas na warstwy! - zapoznanie z DIV

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: warstwy warstwy div div kurs css kurs css

Aby móc projektować strony oparte o warstwy najpierw należy sobie uzmysłowić co to jest warstwa:-). DIV jest to pojemnik - zwykły prostokąt, o niewielu domyślnych właściwościach - jest elementem blokowym [nie można - w normalnych warunkach - postawić dwóch div-ów obok siebie]. Na tej lekcji nauczysz się w tradycyjny sposób wykorzystywać DIV, a na następnych pójdziemy już z tym dalej.

Przykład:

p.tytul {
/ * usunięto ten kawałek
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333; */
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: justify;
/* a tu zmieniono
margin: 10px 0 0 10px;
padding: 5px 10px 5px 10px; na: */
margin: 0;
padding: 10px; }

P.tresc {
/ * usunięto ten kawałek
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333; */
font-family: arial;
font-size: 9pt;
text-align: justify;
/* a tu zmieniono
margin: 0 0 10px 10px;
padding: 5px 10px 5px 10px; na :*/
margin: 0;
padding: 10px; }

DIV#cont { // 1
border: 1px solid #333333; // 2
margin: 10px; // 2
padding: 0; } // 2

Opis:

Jak widzisz kod CSS się skurczył - a efekt pozostał ten sam! Teraz czas na zmiany w kodzie HTML.

<td class="txt">
<div id="cont">
<p class="tytul">Tu nagłówek</p>
<p class="tresc">wpisz tu dowolny własny text</p>
</div>
</td>
</tr>

Zapisz teraz zmiany w pliku. Co widzisz? Nic się nie zmieniło - to bardzo dobrze:-) Być może są lekkie różnice w odstępach, ale z tym już sam się pobaw:-). Mam nadzieję, że już wiesz jak wygląda zwyczajna warstwa i jak w ciekawy sposób można jej użyć:-)

Różnica między id a class

Elementy oznaczone ID muszą być unikatowe, tzn., że na jednej stronie może wystąpić tylko 1 element z takim ID. Jeśli nie mamy pewności, czy element wystąpi więcej niż raz to możemy bez obaw użyć 'class', które może być przypisane do nieskończenie wielu elementów na stronie. cs

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Szukasz profesjonalnej firmy?
Projektowanie stron www.
Sprawdź nas!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org