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;
}
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;
}
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.
<< Lesson 7: Identyfikacja i grupowanie elementów (class i id)