Często zadawane pytanie przez użytkowników, czym są te divy w kodzie? Do czego one służą?
Dlaczego je stosujemy?

W tym poradniku opisze, jak działają divy i pokaże parę sensownych przykładów ich użycia.

Zaczynajmy 🙂

Div jest to nic innego jak pojemnik. Pojemnik, któremu możemy nadać cechy poprzez CSS.
W zasadzie każdy doświadczony programista używa właśnie div, ponieważ nie istnieje żadna inna konstrukcja, która zapewni spójności strony.

Zatem jak wygląda div ?

Bardzo prosto: <div> … </ div>

Podany przykład to podstawowa struktura diva, która składa się z otwarcia i zamknięcia.
Taki div jest bezużyteczny, ponieważ bez żadnych cech on nie wie, jak ma się zachowywać.

W tym poradniku style będę pisał mniej elegancko, czyli w wewnętrznym arkuszu stylów między znacznikami <style>…< /style> . Pamiętajcie najlepiej zawsze tworzyć do tego osobny plik CSS.

W ramach przykładu utworzymy sobie diva, który będzie miał szerokość 100px, wysokość 100px i dodatkowo będzie koloru czerwonego.

Tak jak w poprzednim poradniku tworzymy podstawową strukturę HTML:

Następnie dodajemy znaczniki <div></ div> i dodajemy im cechy szerokość – width , wysokość – height i kolor tła czyli background-color w następujący sposób.

Każdą cechę należy zamknąć średnikiem ‘;’, to on właśnie mówi przeglądarce, gdzie się kończy pojedyncza cecha!.

Jak widzimy efekt jest następujący mamy czerwony kwadrat z napisem w środku Czerwony kwadrat.

Nie takie straszne prawda?

Teraz zrobimy ciekawszy przykład. Powiedzmy, że chcemy zrobić proste Menu strony internetowej.

W tym momencie musimy utworzyć kilka divów i teraz, jak to zrobić aby poszczególne elementy tworzyły jedną całość?

Otóż istnieje takie coś, jak zagnieżdżanie, polega ono na wpisywaniu diva do diva.