Widzieliśmy już, jak użyć CSS
do nadania stylu tekstowi.
Za jego pomocą można też
zmienić układ strony.
Przesuwać elementy,
zmieniać rozmiar,
nakładać jedne na drugie.
Ale co właściwie chcemy
przesuwać?
Czasami elementy
już zrobione:
określony akapit
czy nagłówek.
Ale często
jest to grupa elementów,
np. fragment tekstu
albo nagłówek i kilka akapitów.
Żeby przesuwać je
razem, jako całość,
wprowadzimy dwa znaczniki HTML.
Znaczniki do grupowania.
Nie mówiliśmy o nich wcześniej,
bo przydają się
tylko w połączeniu z CSS.
Nie mają semantycznej wartości dla przeglądarki.
Pierwszy to znacznik „span”,
używany do grupowania
fragmentów tekstu.
Chcemy, by słowo
„kocham” było czerwone.
Chcemy zmienić kolor słowa,
nie całego nagłówka.
Ustawiamy kursor przed „kocham”,
wpisujemy znacznik startowy „span”.
Za słowem - znacznik końcowy.
Zmienimy styl
tej grupie znaków.
Można zrobić regułę i kolorować
wszystkie „span”,
ale może nie wszystkie chcemy w czerwieni.
Nadajmy temu fragmentowi
klasę „lovey-dovey” (słodziutkie)
i napiszmy regułę tylko dla elementów
z tej klasy.
Zatem - lovey-dovey, kolor: czerwień.
Patrzcie, jaki słodki zrobił się tekst!
„Span” służy do grupowania
fragmentów tekstu, a jak zebrać
kilka elementów?
Znacznikiem „div”.
Chcemy pogrupować
część z dołu.
Nagłówek informacji
i akapity ze zdjęciem.
W tym celu
ustawię kursor przed „h3” i wpiszę znacznik
startowy „div”.
Przejdę do ostatniego akapitu
i dodam znacznik końcowy.
Mamy już „div”, teraz styl.
Aby to zrobić,
nadam ID.
„Official-info” (informacje oficjalne).
I dodam regułę.
Mam: #official-info i tło.
Dajmy ładną szarość.
Wybierzmy… tę. Dobrze.
Jak widać, „div” stało się
szarym polem ze wszystkimi
elementami.
Byłoby inaczej, gdybyśmy każdemu
nadali szare tło oddzielnie.
Wtedy przerwa między elementami
nie byłaby szara.
Trzeba użyć znacznika „div”,
żeby objąć wszystko.
„Span” służy do
grupowania tekstu,
natomiast „div”
do grupowania elementów.
Można je rozróżnić także inaczej.
W świecie CSS
są dwa rodzaje pól.
Śródliniowe i blokowe.
Po elemencie śródliniowym nie ma nowego wiersza.
Wiele elementów będzie w jednym wierszu.
Omawialiśmy przykłady
obrazów.
Widzicie, jak obraz
wchodzi w tekst obok.
Po nim nie ma nowego wiersza.
Po elemencie blokowym jest nowy wiersz.
Tak jest przy większości znaczników HTML.
Spójrzcie na przykłady na stronie.
Nagłówki, akapity, lista.
Przeglądarka wstawia nowe wiersze,
nie musicie wpisywać znacznika „br”.
Co to ma wspólnego ze „span”
i „div”?
„Span” tworzy element śródliniowy,
a „div” - element blokowy.
Czyli jeśli dodacie „div”
i nie określicie innego stylu,
to przeglądarka potraktuje tę część strony
jak blok.
Fragment tekstu w znacznikach „div”
ma nowe wiersze z przodu i z tyłu.
Może tego właśnie chcecie.
Pamiętajcie tylko o różnicy.
Oglądajcie dalej. Jeszcze dużo
zrobimy ze znacznikami!
Zwłaszcza z potężnym „div”.