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”.