Lekcja 8: Grupowanie elementów (span i div)

Elementy <span> i <div> są używane do grupowania i strukturyzowania dokumentu. Będziesz je często wykorzystywał wraz z atrybutami class oraz id.

W tej lekcji, popatrzymy bliżej na użycie <span> oraz <div> gdyż właśnie te dwa elementy HTML są ściśle związane z CSS.

    * Grupowanie za pomocą <span>
    * Grupowanie za pomocą <div>

Grupowanie za pomocą <span>

Element <span> możesz nazwać elementem naturalnym gdyż sam w sobie nie dodaje nic do dokumentu. Ale razem z CSS, <span> może dodać wiele interesujących cech wizualnych do określonej części tekstu w dokumencie.

Przykładem dla nas niech będzie tekst Benjamina Franklina:


<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>

Powiedzmy że chcemy aby część tekstu Pana Franklina została pokolorowana wyróżniona na czerwono. Do tego celu, zaznaczamy dany tekst znacznikiem <span>. Każdy span zawiera w sobie ustawiony atrybut class, który potem wykorzystujemy w naszym arkuszu stylów:


<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>

CSS należący do dokumentu:


span.benefit {
    color:red;
}

    * Pokaż przykład

Oczywiście możemy także wykorzystać atrybut id aby dodać styl do elementu <span>. W tym przypadku pamiętaj tylko że nie wolno umieszczać dwuch takich samych wartości dla atrybutu id.
Grupowanie za pomocą <div>

Podczas gdy element <span> używamy w obrębie elementów blokowych jak widać było w poprzednim przykładzie, <div> używamy do grupowania jednego lub większej ilości elementów blokowych.

Oprócz tej różnicy, grupowanie za pomocą elementu <div> działa mniej więcej w ten sam sposób. Popatrzmy na przykład z dwiema listawi prezydentów Stanów Zjednoczonych podzielonych dwia ugrupowania polityczne:


<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

Natomiast w arkuszu stylów, określamy grupy w ten sam sposób jak wyżej:


#democrats {
    background:blue;
}

#republicans {
    background:red;
}

    * Pokaż przykład

W przykładach powyżej, użyliśmy tylko elementów <div> oraz <span> wykorzystując tylko właściwości koloru tekstu i tła. Oba elementy mają o wiele większy potencjał. Jednak nie przedstawimy tego w tej lekcji. Popatrzymy na to później w naszym kursie.
Podsumowanie

W lekcji 7 oraz lekcji 8, nauczyłeś się o selektorach id oraz class i o elementach span oraz div.

Powinieneś teraz potrafić grupować i identyfikować wszystkie części swojego dokumentu, co jest wielkim krokiem w kierunku opanowania CSS. W lekcji 9 wprowadzimy cię w model blokowy.