Return to Video

CSS grouping elements

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

{'type': u'plain'}

Captioned by: 5A Jasmine :) aka JP 4B :)
more » « less
Video Language:
English
Duration:
04:14
Lech Mankiewicz edited Polish subtitles for CSS grouping elements

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.